fix(Form): 集成DatePicker组件

Author: ChenlingasMx

example/examples/src/routes/DatePicker/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {Text, View} from 'react-native';
 import {DatePicker, Button} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
@@ -28,6 +27,7 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
             </Button>
             <DatePicker
               visible={this.state.visible}
+              onOk={() => this.setState({visible: false})}
               onClosed={() => this.setState({visible: false})}
               precision="second"
               max="2021-11-30 23:50:50"

example/examples/src/routes/Form/index.tsx

@@ -64,6 +64,12 @@ const FormDemo = () => {
         showClear: true,
       },
     },
+    {
+      type: 'datePicker',
+      field: 'datePicker',
+      name: '时间',
+      attr: {},
+    },
   ];
   const initialValues = {name: '王滴滴', age: '31'};
 

packages/core/src/Form/comps/datePicker.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { SafeAreaView, Pressable, View, Text, StyleSheet } from 'react-native';
+import DatePicker, { DatePickerProps } from '../../DatePicker';
+import Icon from '../../Icon';
+
+const FormDatePicker = ({ value, ok, ...attr }: DatePickerProps & { ok?: (value: string) => void }) => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <SafeAreaView>
+      <Pressable onPress={() => setVisible(true)}>
+        <View style={[styles.content]}>
+          <Text style={styles.contentTitle}>{value ? value : ''}</Text>
+          <Icon name="right" size={18} color="#A19EA0" />
+        </View>
+      </Pressable>
+      <DatePicker
+        value={value}
+        visible={visible}
+        onClosed={() => setVisible(false)}
+        onOk={(value) => {
+          setVisible(false);
+          ok?.(value);
+        }}
+        {...attr}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default FormDatePicker;
+
+const styles = StyleSheet.create({
+  contentTitle: {
+    fontSize: 16,
+    color: 'black',
+  },
+  content: {
+    flexDirection: 'row',
+    height: 35,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingRight: 5,
+    backgroundColor: '#fff',
+  },
+});

packages/core/src/Form/formItems.tsx

@@ -6,6 +6,7 @@ import CheckBox from '../CheckBox';
 import Rating from '../Rating';
 import Switch from '../Switch';
 import SearchBar from '../SearchBar';
+import FormDatePicker from './comps/datePicker';
 import { View, Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';
 
 const FormItems: FC<any> = ({ formDatas = [] }) => {
@@ -64,6 +65,7 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
               }
               change(v.field, data);
             }}
+            onBlur={() => validate()}
             {...v.attr}
           >
             {item.label}
@@ -82,11 +84,15 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
         <SearchBar
           options={options}
           onChange={(val) => change(v.field, val)}
+          onBlur={() => validate()}
           contentStyle={{ paddingHorizontal: 0 }}
           {...v.attr}
         />
       );
     }
+    if (v.type === 'datePicker') {
+      return <FormDatePicker value={store[v.field]} ok={(value) => change(v.field, value)} {...v.attr} />;
+    }
     return null;
   };
 

packages/core/src/Form/hooks/context.tsx

@@ -21,7 +21,7 @@ const reducer = (state: Partial<InitialState>, action: Partial<InitialState>) =>
   };
 };
 
-const Provider: FC<PropsWithChildren<any>> = ({ contextProps, children }) => {
+const Provider: FC<PropsWithChildren<Partial<Record<string, any>>>> = ({ contextProps, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   return <Context.Provider value={{ ...contextProps, state, dispatch }}>{children}</Context.Provider>;
 };

packages/core/src/Form/hooks/useForm.ts

@@ -23,7 +23,7 @@ export default function useForm<
     initValues: { initialValues: state.initialValues },
   });
 
-  const updateStore = (datas: Partial<any>) => {
+  const updateStore = (datas: Partial<State>) => {
     setState({
       ...state,
       ...datas,

packages/core/src/Form/utils/index.tsx

@@ -1,7 +1,5 @@
 import cloneDeepWith from 'lodash/cloneDeepWith';
-import lodashSet from 'lodash/set';
 import { isObject, isArray } from './is';
-import { PropertyPath } from 'lodash';
 
 export function cloneDeep(value: any) {
   // 只有对象才执行拷贝，否则直接返回。 如果是 File，MouseEvent对象，都可以直接返回