Merge branch 'fix/create-task-screen' into 'master'

Fix/create task screen

See merge request jetup/rws/rws-appication!375

src/modules/root/smart-components/date-picker.smart-component.tsx

@@ -13,6 +13,7 @@ import {
 
 interface ISettings {
 	onClose: (str: Date) => void
+	mode?: 'date' | 'time' | 'datetime'
 }
 
 export const DatePickerSmartComponent: FC = () => {
@@ -25,6 +26,7 @@ export const DatePickerSmartComponent: FC = () => {
 
 	const settingsRef = useRef<ISettings>({
 		onClose: null,
+		mode: 'datetime',
 	})
 
 	useEventsListener(
@@ -34,6 +36,7 @@ export const DatePickerSmartComponent: FC = () => {
 			try {
 				settingsRef.current = {
 					onClose: data.onClose,
+					mode: data.mode ? data.mode : 'datetime',
 				}
 				setDate(data.defaultValue)
 
@@ -79,6 +82,7 @@ export const DatePickerSmartComponent: FC = () => {
 			<View style={styles.wrapper}>
 				<DatePicker
 					date={date}
+					mode={settingsRef.current.mode}
 					textColor={theme?.$textPrimary}
 					is24hourSource="locale"
 					androidVariant="nativeAndroid"

src/modules/tasks/atoms/create-task-description.atom.tsx

@@ -7,12 +7,14 @@ interface IProps {
 	value: string
 	error?: string
 	onChange: (val: string) => void
+	onDescriptionSizeChange?: (reactNode: any) => void
 }
 
 export const CreateTaskDescription: FC<IProps> = ({
 	value,
 	error,
 	onChange,
+	onDescriptionSizeChange,
 }) => {
 	const { styles, theme } = useTheme(createStyles)
 
@@ -27,6 +29,7 @@ export const CreateTaskDescription: FC<IProps> = ({
 			placeholderTextColor={theme?.$textPrimary}
 			labelStyle={styles.labelStyle}
 			onChange={(_, val) => onChange(val)}
+			onSizeChange={onDescriptionSizeChange}
 		/>
 	)
 }

src/modules/tasks/components/create-task-info.component.tsx

@@ -7,9 +7,15 @@ interface IProps {
 	values: any
 	error: { [key: string]: string }
 	onChange: (key: 'name' | 'description', val: string) => void
+	onDescriptionSizeChange?: (reactNode: any) => void
 }
 
-export const CreateTaskInfo: FC<IProps> = ({ values, error, onChange }) => {
+export const CreateTaskInfo: FC<IProps> = ({
+	values,
+	error,
+	onChange,
+	onDescriptionSizeChange,
+}) => {
 	return (
 		<View style={{ marginBottom: $size(12) }}>
 			<CreateTaskTitleField
@@ -22,6 +28,7 @@ export const CreateTaskInfo: FC<IProps> = ({ values, error, onChange }) => {
 				value={values.description}
 				error={error['description']}
 				onChange={val => onChange('description', val)}
+				onDescriptionSizeChange={onDescriptionSizeChange}
 			/>
 		</View>
 	)

src/modules/tasks/components/set-task-interval.component.tsx

@@ -28,12 +28,12 @@ export const SetTaskInterval: FC<IProps> = ({
 			defaultValue: dates.date,
 			minValue: dates.minDate,
 			onClose: date => onChange(key, date),
+			mode: 'date',
 		})
 
 	return (
 		<>
 			<View style={styles.container}>
-				
 				<FakeDateInputForm
 					value={startDate.date}
 					onPress={() => openDateModal('startDate', startDate)}

src/modules/tasks/components/task-terms-collapse.component.tsx

@@ -26,6 +26,7 @@ export const TaskTermsCollapse: FC<IProps> = ({ terms, onChange, error }) => {
 			defaultValue: defDate,
 			minValue: moment(terms.created.date).add(1, 'day').toDate(),
 			onClose: date => onChange(key, date),
+			mode: 'date',
 		})
 
 	return (

src/modules/tasks/screens/add-update-task.screen.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo } from 'react'
+import React, { FC, useEffect, useMemo, useRef } from 'react'
 import { Keyboard, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import {
@@ -189,9 +189,12 @@ export const AddUpdateTaskScreen: FC<IProps> = ({ route, navigation }) => {
 		await onSubmit()
 	}
 
+	const screenRef = useRef<any>()
+
 	return (
 		<ScreenLayout
 			needScroll
+			scrollRef={screenRef}
 			header={{
 				title: screenTitle,
 				style: styles.header,
@@ -231,6 +234,9 @@ export const AddUpdateTaskScreen: FC<IProps> = ({ route, navigation }) => {
 					values={values}
 					error={errors}
 					onChange={setFormField}
+					onDescriptionSizeChange={(x: any) =>
+						screenRef.current.scrollToFocusedInput(x)
+					}
 				/>
 
 				{editMode === TaskEditMode.Update && (

src/shared/components/forms/form-textarea.component.tsx

@@ -15,7 +15,10 @@ import {
 	Button,
 	Keyboard,
 	Platform,
+	findNodeHandle,
 } from 'react-native'
+import { LayoutChangeEvent } from 'react-native'
+import { useKeyboard } from '@/shared/hooks'
 
 interface IProps {
 	value: string
@@ -30,11 +33,14 @@ interface IProps {
 	wrapStyle?: ViewStyle
 	inputStyle?: TextStyle
 	disabled?: boolean
+	onSizeChange?: (reactNode: any) => void
 }
 
 export const FormTextarea = (props: IProps) => {
 	const { styles } = useTheme(createStyles)
 
+	const keyboard = useKeyboard()
+
 	const INPUT_ACCESSORIES_VIEW_ID = useMemo(
 		() => Math.random().toString(),
 		[],
@@ -49,6 +55,10 @@ export const FormTextarea = (props: IProps) => {
 			) : null}
 			<View style={styles.inputWrapper}>
 				<TextInput
+					onLayout={(event: LayoutChangeEvent) => {
+						if (!props.onSizeChange || keyboard[0] <= 0) return
+						props.onSizeChange(findNodeHandle(event.target))
+					}}
 					inputAccessoryViewID={INPUT_ACCESSORIES_VIEW_ID}
 					editable={!props.disabled}
 					style={[styles.input, props.inputStyle]}

src/shared/events/index.ts

@@ -50,6 +50,7 @@ export type AppEvents = {
 		minValue?: Date
 		maxValue?: Date
 		onClose: (str: Date) => void
+		mode?: 'date' | 'time' | 'datetime'
 	}
 	openDoneTaskModal: {
 		taskIds: number[]