u

code/allapp/allapp-rn/src/components/common/ao/DatePicker.tsx

@@ -1,9 +1,12 @@
 import type { IDatePickerProps } from '@yz1311/react-native-wheel-picker'
+import SegmentedControl from '@react-native-segmented-control/segmented-control'
 import { DatePicker } from '@yz1311/react-native-wheel-picker'
 import dayjs from 'dayjs'
 import React, { useEffect, useRef, useState } from 'react'
-import { Animated, Modal, StyleSheet, TouchableOpacity } from 'react-native'
+import { Animated, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { AButton, ATab } from '@/components/common/ao'
 import { toDate } from '@/utils/time'
+
 // 定义 mode 类型
 export type DatePickerMode = 'year' | 'month' | 'date' | 'time' | 'datetime'
 
@@ -32,13 +35,14 @@ export default function ADatePicker({
   show = false,
   onClose,
   onConfirm,
-  mode = 'date',
   format,
   ...restProps
 }: ADatePickerProps) {
   const fadeAnim = useRef(new Animated.Value(0)).current
   const slideAnim = useRef(new Animated.Value(300)).current
   const [visible, setVisible] = useState(show)
+  const [index, setIndex] = useState(0)
+  const [mode, setMode] = useState<DatePickerMode>('month')
 
   // 使用传入 format 或默认 format
   const finalFormat = format || defaultFormatMap[mode]
@@ -80,6 +84,58 @@ export default function ADatePicker({
       <Animated.View
         style={[styles.pickerContainer, { transform: [{ translateY: slideAnim }] }]}
       >
+        <View className="px-3 pt-2 flex flex-col gap-2">
+          <View className="w-full">
+            <Text>快速选择</Text>
+            <ATab
+              data={[
+                {
+                  label: '自定义',
+                  key: '自定义',
+                },
+                {
+                  label: '不限',
+                  key: '不限',
+                },
+                {
+                  label: '今天',
+                  key: '今天',
+                },
+                {
+                  label: '本月',
+                  key: '本月',
+                },
+                {
+                  label: '本年',
+                  key: '本年',
+                },
+                {
+                  label: '范围',
+                  key: '范围',
+                },
+              ]}
+              onChange={(key) => {
+                setMode('datetime')
+              }}
+            />
+          </View>
+
+          <View className="w-full">
+            <Text>选择模式</Text>
+            <SegmentedControl
+              values={['日', '月', '年', '时间', '日期']}
+              selectedIndex={index}
+              style={{ borderRadius: 2, width: '100%' }}
+              sliderStyle={{
+                borderRadius: 2,
+              }}
+
+              onChange={(event: any) => setIndex(event.nativeEvent.selectedSegmentIndex)}
+            />
+          </View>
+
+        </View>
+
         <DatePicker
           {...restProps}
           date={toDate(date)}
@@ -87,7 +143,16 @@ export default function ADatePicker({
           isModal={false}
           onPickerCancel={handleCancel}
           onPickerConfirm={handleConfirm}
+          showHeader={false}
+          onDateChange={(value) => {
+            console.log(value)
+          }}
         />
+
+        <View className="flex flex-row gap-4 px-3 pb-1 v">
+          <AButton variant="outline" className="flex-1">取消</AButton>
+          <AButton className="flex-1">确认</AButton>
+        </View>
       </Animated.View>
     </Modal>
   )