fix: 重构DatePicker组件

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import {View, Text} from 'react-native';
 import {DatePicker, Button} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
@@ -9,6 +10,8 @@ export interface BadgeViewProps extends ComProps {}
 export default class BadgeView extends React.Component<BadgeViewProps> {
   state = {
     visible: false,
+    value: undefined,
+    formatDate: undefined,
   };
   render() {
     const {route, navigation} = this.props;
@@ -23,13 +26,21 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
               onPress={() => {
                 this.setState({visible: true});
               }}>
-              年月日
+              打开
             </Button>
+            <View>
+              <Text>{this.state.formatDate}</Text>
+            </View>
             <DatePicker
+              title="请选择日期"
+              mode="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
               visible={this.state.visible}
-              onOk={() => this.setState({visible: false})}
               onClosed={() => this.setState({visible: false})}
-              precision="second"
+              value={this.state.value}
+              onChange={(value, formatDate) => {
+                this.setState({value: value, formatDate: formatDate});
+              }}
             />
           </Body>
           <Footer />

packages/core/package.json

@@ -58,6 +58,7 @@
     "@uiw/icons": "2.5.3",
     "@validator.tool/hook": "2.2.4",
     "ahooks": "2.10.14",
+    "dayjs":"~1.11.7",
     "color": "4.2.3",
     "lodash": "4.17.21",
     "prop-types": "15.7.2",

packages/core/src/DatePicker/README.md

@@ -1,96 +1,56 @@
-Picker 选择器
+DatePicker 
 ---
-
-解决 ios 与 android 和用户交互方式不同问题.
-
-> 避免出现样式错乱问题, 请尽量使用统一整数数字高度。 
-> 激活状态尽量不要改变高度, 只是修改颜色作为标记。
+时间选择器
+> 🚧测试版本
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 ### 基础示例
 
 ```jsx
-import { View } from 'react-native';
-import { Picker } from '@uiw/react-native';
-
-function Demo() {
-  return (
-    <View style={{ flex: 1 }}>
-      <Picker 
-        date={[
-          {label: '1'},
-          {label: '2'},
-          {label: '3'},
-          {label: '4'},
-          {label: '5'},
-        ]}
-      />
-    </View>
-  )
-}
-```
-
-### 使用自定义元素
-
-```jsx
-import { View, Text } from 'react-native';
+import { useState } from 'react'
+import { View,Text } from 'react-native';
 import { Picker } from '@uiw/react-native';
-
 function Demo() {
+  const [visible,setVisible] = useState(false)
+  const [formatDate,setFormatDate] = useState('')
+  const [value,setValue] = useState(undefined)
   return (
     <View style={{ flex: 1 }}>
-      <Picker 
-        date={[
-          {label: '1'},
-          {label: '2'},
-          {label: '3'},
-          {label: '4'},
-          {label: '5'},
-          {label: '5',render: (label, record, index)=><Text>123</Text>},
-        ]}
+      <Button onPress={() =>setVisible(true)}>打开</Button>
+      <View><Text>{formatDate}</Text></View>
+      <DatePicker
+        title="请选择日期"
+        mode="datetime"
+        format='YYYY-MM-DD HH:mm:ss'
+        visible={visible}
+        onClosed={() => setVisible(false)}
+        value={value}
+        onChange={(value,formatDate) => {
+          setValue(value)
+          setFormatDate(formatDate)
+        }}
       />
     </View>
   )
 }
+export default Demo
 ```
 
-
-
-### Props
-
-```ts
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-
-export interface PickerDate {
-  label?: string,
-  render?: (key: string, record: PickerDate, index: number)=>React.ReactNode,
-  [key: string]: any
-}
-
-export interface PickerProps {
-  /** 显示几行, 默认 3 */
-  lines?: number,
-  /** 指定需要显示的 key, 默认使用 data 的 label 属性 */
-  key?: string,
-  /** 需要渲染的数据 */
-  date?: Array<PickerDate>,
-  /** item 容器样式 */
-  containerStyle?: {
-    /** 激活的容器样式 */
-    actived?: StyleProp<ViewStyle>,
-    /** 未激活的容器样式 */
-    unactived?: StyleProp<ViewStyle>,
-  },
-  /** 容器的文本样式 */
-  textStyle?: {
-    /** 激活的文本样式 */
-    actived?: StyleProp<TextStyle>,
-    /** 未激活的文本样式 */
-    unactived?: StyleProp<TextStyle>,
-  },
-  /** 选中当前项的下标 */
-  value?: number,
-  /** value 改变时触发 */
-  onChange?: (value: number)=>unknown,
-}
-```
+### props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| displayType   | 选择器显示类型。view表示在页面显示；modal表示在弹窗中显示；默认为modal   | `view | modal` |  view  |
+| onChange    | 修改事件  | `(value?: ItemValue[]) => void` | -  |
+| title | 选中当前项的下标   | number | -  |
+| visible | 是否弹窗显示       | boolean | false  |
+| onClosed | 弹窗关闭事件  | () => void | -  |
+| cancelText | 取消按钮文本  | string | 取消  |
+| okText | 确认按钮文本  | string | 确认  |
+| mode | 显示模式  | `datetime | date | time| month | year` | datetime  |
+| labelUnit | 单位文字  |  { year: string; month: string; day: string; hour: string; minute: string } | { year: '年', month: '月', day: '日', hour: '时', minute: '分' }  |
+| format | 日期格式化  | string | YYYY-MM-DD HH:mm  |
+| value | 当前日期  | Date | - |
+| onChange | 日期修改事件  | (date?: Date, formatDate?: string) => void | - |
+| minDate | 最小日期  | string | - |
+| maxDate | 最大日期  | string | - |

packages/core/src/DatePicker/components/date-picker/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import Flex from '../../../Flex';
+import WheelPicker from '../../../Picker/components/WheelPicker';
+import { DatePickerPropsBase } from './type';
+import useDatePicker from './useDatePicker';
+
+const DatePickerAndroid: FC<
+  Omit<DatePickerPropsBase, 'mode' | 'labelUnit' | 'format'> &
+    Required<Pick<DatePickerPropsBase, 'mode' | 'labelUnit' | 'format'>>
+> = ({ value = new Date(), minDate, maxDate, mode, labelUnit, format, onChange, ...restProps }) => {
+  const { onValueChange, getValueCols } = useDatePicker({
+    minDate,
+    maxDate,
+    mode,
+    labelUnit,
+    format,
+    value,
+    onChange,
+  });
+
+  const { values, cols } = getValueCols();
+
+  /** 生成日期picker */
+  const renderDateTimePicker = () => {
+    return cols.map((col, level: number) => {
+      return (
+        <WheelPicker
+          key={level}
+          {...restProps}
+          data={col}
+          value={values[level]}
+          onChange={(itemValue) => onValueChange(itemValue, level)}
+          containerStyle={{ marginRight: level !== cols.length - 1 ? 5 : 0 }}
+        />
+      );
+    });
+  };
+
+  return <Flex>{renderDateTimePicker()}</Flex>;
+};
+
+export default DatePickerAndroid;