Coder
3 years ago
16 changed files with 304 additions and 141 deletions
Binary file not shown.
Binary file not shown.
@ -1,102 +1,103 @@
@@ -1,102 +1,103 @@
|
||||
import { $size, getTheme } from "@/shared" |
||||
import { FakeDateInputForm, FormTextarea, LargeFormControlWithIcon } from "@/shared/components/forms" |
||||
import React from "react" |
||||
import { View, Text, StyleSheet } from "react-native" |
||||
import { $size, getTheme } from '@/shared' |
||||
import { |
||||
FakeDateInputForm, |
||||
FormTextarea, |
||||
LargeFormControlWithIcon, |
||||
} from '@/shared/components/forms' |
||||
import React from 'react' |
||||
import { View, Text, StyleSheet, ViewStyle } from 'react-native' |
||||
|
||||
interface IPropsDateOptions { |
||||
value: Date |
||||
onPress: () => void |
||||
value: Date |
||||
onPress: () => void |
||||
} |
||||
|
||||
interface IPropsInputOption { |
||||
name: string |
||||
value: string |
||||
error?: string |
||||
onChange: (name: string, val: string) => void |
||||
name: string |
||||
value: string |
||||
error?: string |
||||
onChange: (name: string, val: string) => void |
||||
} |
||||
|
||||
interface IProps { |
||||
startDate: IPropsDateOptions |
||||
endDate: IPropsDateOptions |
||||
title: IPropsInputOption |
||||
description: IPropsInputOption |
||||
initName: string |
||||
startDate: IPropsDateOptions |
||||
endDate: IPropsDateOptions |
||||
title: IPropsInputOption |
||||
description: IPropsInputOption |
||||
initName: string |
||||
style?: ViewStyle |
||||
} |
||||
|
||||
export const CreateTaskInfoComponent = (props: IProps) => { |
||||
return ( |
||||
<View style={styles.wrapper}> |
||||
return ( |
||||
<View style={[styles.wrapper, props.style]}> |
||||
<View style={styles.datePairWrapper}> |
||||
<FakeDateInputForm |
||||
value={props.endDate.value} |
||||
onPress={() => props.endDate.onPress()} |
||||
title={'Кінець'} |
||||
smallSize |
||||
/> |
||||
|
||||
<View style={styles.datePairWrapper}> |
||||
<FakeDateInputForm |
||||
value={props.endDate.value} |
||||
onPress={() => props.endDate.onPress()} |
||||
title={'Кінець'} |
||||
smallSize /> |
||||
<FakeDateInputForm |
||||
value={props.startDate.value} |
||||
onPress={() => props.startDate.onPress()} |
||||
title={'Початок'} |
||||
smallSize |
||||
/> |
||||
</View> |
||||
|
||||
<FakeDateInputForm |
||||
value={props.startDate.value} |
||||
onPress={() => props.startDate.onPress()} |
||||
title={'Початок'} |
||||
smallSize /> |
||||
</View> |
||||
<LargeFormControlWithIcon |
||||
name="title" |
||||
value={props.title.value} |
||||
placeHolder="Назва" |
||||
error={props.title.error} |
||||
onChange={val => props.title.onChange(props.title.name, val)} |
||||
title={<Text style={styles.inputLabel}>Назва</Text>} |
||||
/> |
||||
|
||||
<LargeFormControlWithIcon |
||||
name='title' |
||||
value={props.title.value} |
||||
placeHolder='Назва' |
||||
error={props.title.error} |
||||
onChange={(val) => props.title.onChange(props.title.name, val)} |
||||
title={ |
||||
<Text style={styles.inputLabel}>Назва</Text> |
||||
} |
||||
/> |
||||
<FormTextarea |
||||
name="description" |
||||
label="Опис" |
||||
value={props.description.value} |
||||
error={props.description.error} |
||||
placeholder="Опис" |
||||
onChange={props.description.onChange} |
||||
/> |
||||
|
||||
<FormTextarea |
||||
name='description' |
||||
label='Опис' |
||||
value={props.description.value} |
||||
error={props.description.error} |
||||
placeholder='Опис' |
||||
onChange={props.description.onChange} |
||||
/> |
||||
|
||||
<View style={styles.initWrapper}> |
||||
<Text style={styles.initTitle}>Ініціатор</Text> |
||||
<Text style={styles.initName}>{props.initName}</Text> |
||||
</View> |
||||
</View> |
||||
) |
||||
<View style={styles.initWrapper}> |
||||
<Text style={styles.initTitle}>Ініціатор</Text> |
||||
<Text style={styles.initName}>{props.initName}</Text> |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
wrapper: { |
||||
marginHorizontal: $size(20), |
||||
}, |
||||
datePairWrapper: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginBottom: -$size(20), |
||||
|
||||
}, |
||||
inputLabel: { |
||||
color: getTheme().$secondaryText, |
||||
fontSize: $size(12), |
||||
marginBottom: -10, |
||||
fontWeight: '300' |
||||
}, |
||||
initWrapper: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginTop: $size(10) |
||||
}, |
||||
initTitle: { |
||||
fontSize: $size(16, 14), |
||||
color: getTheme().$secondaryText, |
||||
fontWeight: '300' |
||||
}, |
||||
initName: { |
||||
fontSize: $size(16, 14), |
||||
fontWeight: '300' |
||||
} |
||||
}) |
||||
wrapper: {}, |
||||
datePairWrapper: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginBottom: -$size(20), |
||||
}, |
||||
inputLabel: { |
||||
color: getTheme().$secondaryText, |
||||
fontSize: $size(12), |
||||
marginBottom: -10, |
||||
fontWeight: '300', |
||||
}, |
||||
initWrapper: { |
||||
flexDirection: 'row', |
||||
justifyContent: 'space-between', |
||||
marginTop: $size(10), |
||||
}, |
||||
initTitle: { |
||||
fontSize: $size(16, 14), |
||||
color: getTheme().$secondaryText, |
||||
fontWeight: '300', |
||||
}, |
||||
initName: { |
||||
fontSize: $size(16, 14), |
||||
fontWeight: '300', |
||||
}, |
||||
}) |
||||
|
||||
@ -1,2 +1,3 @@
@@ -1,2 +1,3 @@
|
||||
export * from './task-card-icons.config' |
||||
export * from './task-card-buttons.config' |
||||
export * from './selected-task-executors.mock' |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
export const selectedTaskExecutorData = [ |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
{ |
||||
id: 1, |
||||
userName: 'User', |
||||
}, |
||||
] |
||||
@ -1,31 +1,103 @@
@@ -1,31 +1,103 @@
|
||||
import { SelectedUserList } from '@/modules/users/components/selected-user-list.component' |
||||
import { ScreenLayout } from '@/shared' |
||||
import { |
||||
$size, |
||||
Button, |
||||
getTheme, |
||||
PickerComponent, |
||||
ScreenLayout, |
||||
Txt, |
||||
} from '@/shared' |
||||
import { FromSelect } from '@/shared/components/forms' |
||||
import React, { FC } from 'react' |
||||
import { StyleSheet } from 'react-native' |
||||
import { StyleSheet, View } from 'react-native' |
||||
import { AddTaskRow } from '../atoms' |
||||
import { CreateTaskInfoComponent } from '../components' |
||||
import { SelectTaskExecutorListSmart } from '../smart-components/select-task-executor-list.smart-component' |
||||
|
||||
export const AddTaskScreen: FC = () => { |
||||
return ( |
||||
<ScreenLayout header={{ title: 'Нова задача' }}> |
||||
<ScreenLayout |
||||
needScroll |
||||
header={{ title: 'Нова задача', style: styles.header }}> |
||||
<> |
||||
<AddTaskRow |
||||
title={'Ініціатор'} |
||||
rightComponent={{ text: 'Арем Осядлий' }} |
||||
<CreateTaskInfoComponent |
||||
style={styles.createTaskInfo} |
||||
startDate={{ value: new Date(), onPress: () => {} }} |
||||
endDate={{ value: new Date(), onPress: () => {} }} |
||||
title={{ |
||||
name: 'title', |
||||
value: 'Title', |
||||
onChange: (name, val) => {}, |
||||
}} |
||||
description={{ |
||||
name: 'description', |
||||
value: 'Description', |
||||
onChange: (name, val) => {}, |
||||
}} |
||||
initName={'User'} |
||||
/> |
||||
|
||||
<SelectTaskExecutorListSmart /> |
||||
|
||||
<AddTaskRow |
||||
title={'Ініціатор'} |
||||
rightComponent={{ icon: 'plus-2' }} |
||||
onPress={() => {}} |
||||
title={'Група'} |
||||
rightComponent={{ text: 'Група' }} |
||||
/> |
||||
|
||||
<SelectedUserList |
||||
data={[{ id: 1, userName: 'User' }]} |
||||
onPressRemove={id => |
||||
console.log(`Delete user from list with id: ${id}`) |
||||
} |
||||
/> |
||||
<View> |
||||
<Txt style={styles.blockTitle}>Підстава</Txt> |
||||
|
||||
<FromSelect |
||||
title="Оберіть зі списку" |
||||
icon={{ name: 'caretleft-2-1', size: $size(23, 21) }} |
||||
style={{ marginBottom: $size(10, 8) }} |
||||
modal={{ |
||||
title: 'Оберіть зі списку', |
||||
height: $size(250, 330), |
||||
children: ( |
||||
<PickerComponent |
||||
data={[]} |
||||
onChange={val => {}} |
||||
/> |
||||
), |
||||
}} |
||||
/> |
||||
|
||||
<FromSelect |
||||
title="Додайте нову" |
||||
icon={{ name: 'add-file', size: $size(23, 21) }} |
||||
style={{ marginBottom: $size(20, 18) }} |
||||
modal={{ |
||||
title: 'Додайте нову', |
||||
height: $size(250, 330), |
||||
children: <></>, |
||||
}} |
||||
/> |
||||
|
||||
<Button |
||||
title="Створити" |
||||
type="primary" |
||||
style={{ marginBottom: $size(40, 35) }} |
||||
onPress={() => {}} |
||||
/> |
||||
</View> |
||||
</> |
||||
</ScreenLayout> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({}) |
||||
const styles = StyleSheet.create({ |
||||
header: { |
||||
marginBottom: $size(20, 18), |
||||
}, |
||||
createTaskInfo: { |
||||
paddingBottom: $size(15, 13), |
||||
borderBottomWidth: 1, |
||||
borderBottomColor: getTheme().$border, |
||||
}, |
||||
blockTitle: { |
||||
fontSize: $size(16, 14), |
||||
color: getTheme().$secondaryText, |
||||
marginVertical: $size(15, 13), |
||||
}, |
||||
}) |
||||
|
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
import { SelectedUserList } from '@/modules/users/components/selected-user-list.component' |
||||
import React, { FC } from 'react' |
||||
import { AddTaskRow } from '../atoms' |
||||
import { selectedTaskExecutorData } from '../config' |
||||
|
||||
export const SelectTaskExecutorListSmart: FC = () => { |
||||
return ( |
||||
<> |
||||
<AddTaskRow |
||||
title={'Виконавець'} |
||||
rightComponent={{ icon: 'plus-1' }} |
||||
onPress={() => {}} |
||||
/> |
||||
|
||||
<SelectedUserList |
||||
onPressRemove={() => {}} |
||||
needScroll={false} |
||||
data={selectedTaskExecutorData} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,30 @@
@@ -0,0 +1,30 @@
|
||||
import { $size } from '@/shared' |
||||
import { Picker } from '@react-native-picker/picker' |
||||
import React, { FC, useMemo } from 'react' |
||||
import { ViewStyle } from 'react-native' |
||||
|
||||
type DataType = { |
||||
label: string |
||||
value: string |
||||
}[] |
||||
|
||||
interface IProps { |
||||
data: DataType |
||||
onChange: (val: string) => void |
||||
style?: ViewStyle |
||||
} |
||||
|
||||
export const PickerComponent: FC<IProps> = ({ data, onChange, style }) => { |
||||
const pickerItems = useMemo( |
||||
() => data?.map(item => <Picker.Item {...item} />), |
||||
[data], |
||||
) |
||||
|
||||
return ( |
||||
<Picker |
||||
style={{ width: $size(250, 230), ...style }} |
||||
onValueChange={(itemValue: string) => onChange(itemValue)}> |
||||
{pickerItems} |
||||
</Picker> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue