fix(Form): 增加datePicker

ChenlingasMx · ChenlingasMx · commit 6998be78019f · 2023-04-10T13:51:45.000+08:00
diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx
@@ -113,6 +113,14 @@ const FormDemo = () => {
         step: 0.2,
       },
     },
+    {
+      type: 'datePicker',
+      field: 'datePicker',
+      name: 'datePicker时间选择器',
+      attr: {
+        placeholder: '请选择',
+      },
+    },
     {
       type: 'treeSelect',
       field: 'treeSelect',
@@ -212,7 +220,7 @@ const FormDemo = () => {
             <Form
               form={form}
               schema={schema}
-              initialValues={{name: '王滴滴', rate: 4, picker: ['2']}}
+              initialValues={{name: '王滴滴', rate: 4, datePicker: new Date(), picker: ['2']}}
               watch={{
                 name: (value: unknown) => console.log('value', value),
               }}
diff --git a/packages/core/src/DatePicker/index.tsx b/packages/core/src/DatePicker/index.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { TouchableOpacity, SafeAreaView, View } from 'react-native';
 import Flex from '../Flex';
 import Modal from '../Modal';
-import H6 from '../Typography/H6';
+import Text from '../Typography/Text';
 import dayjs from 'dayjs';
 import DatePickerRN from './components/date-picker';
 import { DatePickerPropsBase, ModalPickerProps } from './components/date-picker/type';
@@ -21,7 +21,7 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
     displayType = 'modal',
     visible = false,
     onClosed,
-    format = 'YYYY-MM-DD HH:mm',
+    format = 'YYYY-MM-DD HH:mm:ss',
     labelUnit = { year: '年', month: '月', day: '日', hour: '时', minute: '分' },
     mode = 'date',
     minDate,
@@ -71,15 +71,21 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
             <Flex justify="between">
               <Flex.Item>
                 <TouchableOpacity activeOpacity={0.5} onPress={handleClose}>
-                  <H6 style={{ color: theme.colors.primary_background || '#3578e5' }}>{cancelText}</H6>
+                  <Text color="primary_background" style={{ fontSize: 16 }}>
+                    {cancelText}
+                  </Text>
                 </TouchableOpacity>
               </Flex.Item>
               <Flex.Item>
-                <H6 style={{ color: theme.colors.primary_background || '#3578e5' }}>{title}</H6>
+                <Text color="primary_background" style={{ fontSize: 16 }}>
+                  {title}
+                </Text>
               </Flex.Item>
               <Flex.Item>
                 <TouchableOpacity activeOpacity={0.5} onPress={handleOk}>
-                  <H6 style={{ color: theme.colors.primary_background || '#3578e5' }}>{okText}</H6>
+                  <Text color="primary_background" style={{ fontSize: 16 }}>
+                    {okText}
+                  </Text>
                 </TouchableOpacity>
               </Flex.Item>
             </Flex>
diff --git a/packages/core/src/Form/README.md b/packages/core/src/Form/README.md
@@ -326,7 +326,7 @@ export default FormDemo
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
 | `field` | 字段名 | string | - |
-| `type` | 字段类型(`input` \| `textArea`  \| `slider` \| `rate` \| `radio` \| `search`\| `switch`\| `checkBox`\| `stepper`\| `picker`\| `treeSelect`\ | `cardList`) | string | - |
+| `type` | 字段类型(`input` \| `textArea`  \| `slider` \| `rate` \| `radio` \| `search`\| `switch`\| `checkBox`\| `stepper`\| `picker`\| `treeSelect`\ | `datePicker`\ | `cardList`) | string | - |
 | `name` | 标签名 | string | - |
 | `validate` | 验证规则 | RulesOption['validate'] | - |
 | `options` | 集合 | Array<{ label: string; value: KeyType }> | - |
diff --git a/packages/core/src/Form/comps/datePicker.tsx b/packages/core/src/Form/comps/datePicker.tsx
@@ -1,26 +1,71 @@
 import React, { useState } from 'react';
-import { SafeAreaView, Pressable, View, Text, StyleSheet } from 'react-native';
+import { Pressable, SafeAreaView, View, StyleSheet } from 'react-native';
 import DatePicker, { DatePickerProps } from '../../DatePicker';
+import Ellipsis from '../../Ellipsis';
 import Icon from '../../Icon';
+import { Theme } from '../../theme';
+import { useTheme } from '@shopify/restyle';
+import dayjs from 'dayjs';
 
-const FormDatePicker = ({ value, ok, ...attr }: DatePickerProps & { ok?: (value: string) => void }) => {
+const FormDatePicker = ({
+  disabled,
+  placeholder,
+  contentStyle,
+  extra,
+  showClear,
+  value,
+  onChange,
+  format = 'YYYY-MM-DD HH:mm:ss',
+  ...attr
+}: any) => {
+  console.log('format', format);
   const [visible, setVisible] = useState(false);
+  const theme = useTheme<Theme>();
+  const style = createStyles({
+    disabled: theme.colors.disabled,
+    backgroundColor: theme.colors.mask,
+    title: theme.colors.primary_text,
+  });
+
+  const extraContent = React.useMemo(() => {
+    if (React.isValidElement(extra)) {
+      return extra;
+    }
+    if (value && showClear) {
+      return (
+        <Pressable onPress={() => onChange?.('')} style={{ paddingRight: 3 }} disabled={disabled}>
+          <Icon name="circle-close-o" size={18} color={theme.colors.primary_text || '#ccc'} />
+        </Pressable>
+      );
+    }
+    return <Icon name="right" size={18} color={theme.colors.text || '#ccc'} />;
+  }, [extra, value, showClear]);
+
   return (
     <SafeAreaView>
-      <Pressable onPress={() => setVisible(true)}>
-        <View style={[styles.content]}>
-          <Text style={styles.contentTitle}>{value ? value : ''}</Text>
-          <Icon name="right" size={18} color="#A19EA0" />
+      <Pressable
+        onPress={() => {
+          if (disabled) return;
+          setVisible(true);
+        }}
+      >
+        <View style={[disabled ? style.disabled : style.content, contentStyle]}>
+          <Ellipsis style={[style.contentTitle]} maxLen={30}>
+            {(value && dayjs(value).format(format)) || placeholder}
+          </Ellipsis>
+          {extraContent}
         </View>
       </Pressable>
       <DatePicker
-        value={value}
+        title="请选择日期"
+        mode="datetime"
         visible={visible}
+        value={value}
         onClosed={() => setVisible(false)}
-        onOk={(value) => {
-          setVisible(false);
-          ok?.(value);
+        onChange={(value) => {
+          onChange?.(value);
         }}
+        format={format}
         {...attr}
       />
     </SafeAreaView>
@@ -29,17 +74,29 @@ const FormDatePicker = ({ value, ok, ...attr }: DatePickerProps & { ok?: (value:
 
 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',
-  },
-});
+function createStyles({ backgroundColor = '#fff', disabled = '#f5f5f5', title = '#000' }) {
+  return StyleSheet.create({
+    content: {
+      flexDirection: 'row',
+      height: 35,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingRight: 5,
+      backgroundColor: backgroundColor,
+      paddingHorizontal: 16,
+    },
+    disabled: {
+      flexDirection: 'row',
+      height: 35,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingRight: 5,
+      backgroundColor: disabled,
+      paddingHorizontal: 16,
+    },
+    contentTitle: {
+      fontSize: 16,
+      color: title,
+    },
+  });
+}
diff --git a/packages/core/src/Form/comps/picker.tsx b/packages/core/src/Form/comps/picker.tsx
@@ -8,7 +8,7 @@ import { Theme } from '../../theme';
 import { useTheme } from '@shopify/restyle';
 import { getTreeDeep } from '../../utils/tree-select';
 
-export interface RnPickerProps extends PickerProps {
+export interface RnPickerProps extends Omit<PickerProps, 'data'> {
   disabled?: boolean;
   placeholder?: string;
   contentStyle?: ViewStyle;
diff --git a/packages/core/src/Form/form.tsx b/packages/core/src/Form/form.tsx
@@ -14,6 +14,7 @@ import Radio from './comps/radio';
 import Switch from './comps/switch';
 import CheckBox from './comps/checkBox';
 import Picker from './comps/picker';
+import DatePicker from './comps/datePicker';
 
 const Form = (baseProps: FormProps) => {
   const {
@@ -58,7 +59,8 @@ const Form = (baseProps: FormProps) => {
       checkBox: <CheckBox />,
       stepper: <Stepper value={0} onChange={() => {}} />,
       treeSelect: <TreeSelect options={[]} />,
-      picker: <Picker options={[]} />,
+      picker: <Picker />,
+      datePicker: <DatePicker />,
     },
     changeValidate: changeValidate,
   };
