Feature | Home screen

3 years ago · 526da8d808
13 changed files with 567 additions and 2 deletions
--- a/android/app/src/main/assets/fonts/fontello.ttf
+++ b/android/app/src/main/assets/fonts/fontello.ttf
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -459,7 +459,7 @@ SPEC CHECKSUMS:
				@@ -459,7 +459,7 @@ SPEC CHECKSUMS:
  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
  FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: 04e763ddb0e7284054919cd96d9a24975355b0da
+  FBReactNativeSpec: 09a9b45481cf51e2fc98dd8dc8432607e43e1c52
  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
  Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
--- a/src/assets/fonts/fontello.ttf
+++ b/src/assets/fonts/fontello.ttf
--- a/src/config/fontello.json
+++ b/src/config/fontello.json
@ -663,6 +663,20 @@
				@@ -663,6 +663,20 @@
      "search": [
        "xcircle-1"
      ]
+    },
+    {
+      "uid": "697a3bc4fa53b0120cd7329d34a28926",
+      "css": "vectorstar",
+      "code": 59439,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M564.3 812.8L779.2 948.9C806.6 966.4 840.8 940.5 832.6 908.4L770.5 664.1C768.8 657.3 769 650.2 771.1 643.5 773.2 636.8 777.2 630.8 782.6 626.3L975.3 465.9C1000.7 444.8 987.6 402.8 955 400.7L703.4 384.3C696.6 383.9 690.1 381.5 684.6 377.4 679.1 373.4 674.9 367.9 672.5 361.5L578.6 125.1C576 118.4 571.5 112.6 565.6 108.5 559.7 104.5 552.6 102.3 545.5 102.3 538.3 102.3 531.2 104.5 525.3 108.5 519.4 112.6 514.9 118.4 512.3 125.1L418.4 361.5C416 367.9 411.8 373.4 406.3 377.4 400.8 381.5 394.3 383.9 387.6 384.3L135.9 400.7C103.3 402.8 90.3 444.8 115.6 465.9L308.3 626.3C313.7 630.8 317.7 636.8 319.8 643.5 321.9 650.2 322.1 657.3 320.4 664.1L262.8 890.7C253 929.1 294 960.2 326.9 939.3L526.7 812.8C532.3 809.2 538.8 807.3 545.5 807.3 552.1 807.3 558.6 809.2 564.3 812.8V812.8Z",
+        "width": 1091
+      },
+      "search": [
+        "vectorstar"
+      ]
    }
  ]
 }
--- a/src/modules/home/components/index.ts
+++ b/src/modules/home/components/index.ts
@ -1,2 +1,3 @@
				@@ -1,2 +1,3 @@
 export * from './filter-search-header.component';
 export * from './horizontal-list.component';
+export * from './my-tasks-list.component';
--- a/src/modules/home/components/my-tasks-list.component.tsx
+++ b/src/modules/home/components/my-tasks-list.component.tsx
@ -0,0 +1,70 @@
				@@ -0,0 +1,70 @@
+import {$size, FlatListItemComponent, getTheme} from '@/shared';
+import React, {FC} from 'react';
+import {StyleSheet, View, Text, TouchableOpacity, FlatList} from 'react-native';
+import {myTasksData} from '../mock/my-tasks-data.mock';
+
+interface IProps {
+	checkboxVal: boolean;
+	onPressCheckbox: () => void;
+}
+
+export const MyTasksListComponent: FC<IProps> = ({
+	checkboxVal,
+	onPressCheckbox,
+}) => {
+	return (
+		<View style={styles.container}>
+			<View style={styles.listHeader}>
+				<Text style={styles.title}>Моï задачi</Text>
+
+				<TouchableOpacity>
+					<Text style={styles.seeAll}>Дивитись усі</Text>
+				</TouchableOpacity>
+			</View>
+
+			<FlatList
+				data={myTasksData}
+				scrollEnabled={false}
+				contentContainerStyle={styles.listContainer}
+				renderItem={({item}) => {
+					return (
+						<FlatListItemComponent
+							{...item}
+							checkboxVal={checkboxVal}
+							onPressCheckbox={onPressCheckbox}
+						/>
+					);
+				}}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginBottom: $size(30),
+	},
+
+	listHeader: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginHorizontal: $size(5),
+		marginVertical: $size(20),
+	},
+
+	title: {
+		fontSize: 16,
+		fontWeight: '600',
+	},
+
+	seeAll: {
+		fontSize: 14,
+		fontWeight: '300',
+	},
+
+	listContainer: {
+		paddingTop: $size(20),
+		borderRadius: 20,
+		backgroundColor: getTheme().$white,
+	},
+});
--- a/src/modules/home/mock/my-tasks-data.mock.ts
+++ b/src/modules/home/mock/my-tasks-data.mock.ts
@ -0,0 +1,282 @@
				@@ -0,0 +1,282 @@
+export const myTasksData = [
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+];
--- a/src/modules/home/screens/home.screen.tsx
+++ b/src/modules/home/screens/home.screen.tsx
@ -2,8 +2,9 @@ import React, {FC} from 'react';
				@@ -2,8 +2,9 @@ import React, {FC} from 'react';
 import {
 	FilterSearchHeaderComponent,
 	HorizontalListComponent,
+	MyTasksListComponent,
 } from '../components';
-import {ScreenLayout} from '@/shared';
+import {FlatListItemComponent, ScreenLayout} from '@/shared';

 export const HomeScreen: FC = () => {
 	return (
@ -26,6 +27,11 @@ export const HomeScreen: FC = () => {
				@@ -26,6 +27,11 @@ export const HomeScreen: FC = () => {
 					onPressSeeAll={() => {}}
 					onPressInfo={() => {}}
 				/>
+
+				<MyTasksListComponent
+					checkboxVal={false}
+					onPressCheckbox={() => {}}
+				/>
 			</>
 		</ScreenLayout>
 	);
--- a/src/shared/components/elements/checkbox.component.tsx
+++ b/src/shared/components/elements/checkbox.component.tsx
@ -0,0 +1,38 @@
				@@ -0,0 +1,38 @@
+import {getTheme} from '@/shared/themes';
+import React, {FC} from 'react';
+import {StyleSheet, TouchableOpacity, ViewStyle} from 'react-native';
+import {IconComponent} from './icon.component';
+
+interface IProps {
+	value: boolean;
+	size: number;
+	containerStyle?: ViewStyle;
+	onPress: () => void;
+}
+
+export const CheckBox: FC<IProps> = ({
+	value,
+	size,
+	containerStyle,
+	onPress,
+}) => {
+	return (
+		<TouchableOpacity onPress={onPress} style={containerStyle}>
+			{value ? (
+				<IconComponent
+					name={'checksquare-1'}
+					size={size}
+					color={getTheme().icon.$activeColor}
+				/>
+			) : (
+				<IconComponent
+					name={'checksquare-1-1'}
+					size={size}
+					color={getTheme().icon.$defaultColor}
+				/>
+			)}
+		</TouchableOpacity>
+	);
+};
+
+const styles = StyleSheet.create({});
--- a/src/shared/components/elements/flat-list-item.component.tsx
+++ b/src/shared/components/elements/flat-list-item.component.tsx
@ -0,0 +1,150 @@
				@@ -0,0 +1,150 @@
+import {$size} from '@/shared/helpers';
+import {getTheme} from '@/shared/themes';
+import React, {FC} from 'react';
+import {Image, StyleSheet, View, Text} from 'react-native';
+import {CheckBox} from './checkbox.component';
+import {IconComponent} from './icon.component';
+
+interface IProps {
+	title: string;
+	count: number;
+	date: string;
+	userName?: string;
+	imageUri?: string;
+	checkboxVal?: boolean;
+	icons?: {
+		clip?: boolean;
+		chat?: boolean;
+		star?: boolean;
+	};
+	onPressCheckbox: () => void;
+}
+
+export const FlatListItemComponent: FC<IProps> = ({
+	title,
+	count,
+	date,
+	imageUri,
+	checkboxVal,
+	userName,
+	icons,
+	onPressCheckbox,
+}) => {
+	const tabBarIcons = ['paperclip-1', 'chat-2', 'vectorstar'];
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.iconWrap}>
+				{imageUri ? (
+					<Image source={{uri: imageUri}} />
+				) : (
+					<Text style={styles.noIcon}>{userName[0]}</Text>
+				)}
+			</View>
+
+			<View style={styles.contentWrap}>
+				<View style={styles.topBarWrap}>
+					<View style={styles.tabBarIcons}>
+						{tabBarIcons.map((item, i) => {
+							icons[i];
+							return (
+								<View key={`icon-${i}`}>
+									<IconComponent
+										name={item}
+										size={$size(16)}
+										color={getTheme().icon.$darkGray}
+										style={styles.tabBaIcon}
+									/>
+									{icons[i] && (
+										<View style={styles.indicator} />
+									)}
+								</View>
+							);
+						})}
+					</View>
+
+					<Text style={styles.count}>{`#${count}, ${date}`}</Text>
+				</View>
+
+				<Text style={[styles.title]}>{title}</Text>
+			</View>
+
+			<CheckBox
+				size={$size(19)}
+				value={checkboxVal}
+				containerStyle={styles.checkbox}
+				onPress={onPressCheckbox}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: '#fff',
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+
+	iconWrap: {
+		width: $size(35),
+		height: $size(35),
+		backgroundColor: getTheme().$layoutBg,
+		alignItems: 'center',
+		justifyContent: 'center',
+		borderRadius: 100,
+		margin: $size(20),
+		overflow: 'hidden',
+	},
+
+	noIcon: {
+		fontSize: 18,
+		fontWeight: '500',
+		color: getTheme().icon.$defaultColor,
+	},
+
+	contentWrap: {
+		paddingBottom: $size(3),
+	},
+
+	topBarWrap: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+
+	tabBarIcons: {
+		flexDirection: 'row',
+		marginRight: $size(20),
+	},
+
+	indicator: {
+		width: $size(6),
+		height: $size(6),
+		position: 'absolute',
+		bottom: $size(1),
+		right: $size(7),
+		backgroundColor: getTheme().$secondary,
+		borderColor: getTheme().$white,
+		borderWidth: 1,
+		borderRadius: 100,
+	},
+
+	tabBaIcon: {
+		marginRight: $size(7),
+	},
+
+	count: {
+		color: getTheme().icon.$darkGray,
+	},
+
+	title: {
+		fontSize: 16,
+		maxWidth: $size(200),
+		marginVertical: $size(6),
+	},
+
+	checkbox: {
+		position: 'absolute',
+		right: $size(24),
+	},
+});
--- a/src/shared/components/elements/index.ts
+++ b/src/shared/components/elements/index.ts
@ -2,3 +2,5 @@ export * from './txt.component';
				@@ -2,3 +2,5 @@ export * from './txt.component';
 export * from './icon.component';
 export * from './logo.component';
 export * from './self-item.component';
+export * from './flat-list-item.component';
+export * from './checkbox.component'
--- a/src/shared/themes/interfaces/shared-components.interface.ts
+++ b/src/shared/themes/interfaces/shared-components.interface.ts
@ -29,6 +29,7 @@ export interface InputColors {
				@@ -29,6 +29,7 @@ export interface InputColors {
 export interface IconColors {
 	icon: {
 		$defaultColor: ColorValue;
+		$darkGray: ColorValue
 		$activeColor: ColorValue;
 	};
 }
--- a/src/shared/themes/light/shared-components.ts
+++ b/src/shared/themes/light/shared-components.ts
@ -26,6 +26,7 @@ export const sharedComponentsColors: SharedComponentsColors = {
				@@ -26,6 +26,7 @@ export const sharedComponentsColors: SharedComponentsColors = {

 	icon: {
 		$defaultColor: '#B2B3B7',
+		$darkGray: '#7F7F7F',
 		$activeColor: '#DE253B',
 	},
 };