u

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

@@ -0,0 +1,89 @@
+import type { IDateRangePickerProps } from '@yz1311/react-native-wheel-picker'
+import { DateRangePicker } from '@yz1311/react-native-wheel-picker'
+import dayjs from 'dayjs'
+import { useEffect, useRef, useState } from 'react'
+import { Animated, Modal, StyleSheet, TouchableOpacity } from 'react-native'
+
+interface ADateRangePickerProps extends IDateRangePickerProps {
+  show?: boolean
+  onClose?: () => void
+  onConfirm?: (startDate: string, endDate: string) => void
+}
+
+export default function ADateRangePicker({
+  show,
+  onClose,
+  onConfirm,
+  ...restProps
+}: ADateRangePickerProps) {
+  const fadeAnim = useRef(new Animated.Value(0)).current
+  const slideAnim = useRef(new Animated.Value(300)).current
+
+  const [visible, setVisible] = useState(show)
+
+  useEffect(() => {
+    if (show) {
+      setVisible(true)
+      fadeAnim.setValue(0)
+      slideAnim.setValue(300)
+      Animated.parallel([
+        Animated.timing(fadeAnim, { toValue: 1, duration: 250, useNativeDriver: true }),
+        Animated.timing(slideAnim, { toValue: 0, duration: 250, useNativeDriver: true }),
+      ]).start()
+    }
+    else {
+      Animated.parallel([
+        Animated.timing(fadeAnim, { toValue: 0, duration: 250, useNativeDriver: true }),
+        Animated.timing(slideAnim, { toValue: 280, duration: 250, useNativeDriver: true }),
+      ]).start(() => setVisible(false))
+    }
+  }, [show])
+
+  const handleCancel = () => onClose?.()
+
+  const handleConfirm = (startDate: Date, endDate: Date) => {
+    const formattedStartDate = dayjs(startDate).format('YYYY-MM-DD')
+    const formattedEndDate = dayjs(endDate).format('YYYY-MM-DD')
+
+    onConfirm?.(formattedStartDate, formattedEndDate)
+  }
+
+  if (!visible)
+    return null
+
+  return (
+    <Modal transparent visible={visible} animationType="none">
+      <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+        <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={handleCancel} />
+      </Animated.View>
+
+      <Animated.View
+        style={[styles.pickerContainer, { transform: [{ translateY: slideAnim }] }]}
+      >
+        <DateRangePicker
+          pickerTitle="时间范围"
+          pickerCancelBtnText="取消"
+          pickerConfirmBtnText="确认"
+          {...restProps}
+          isModal={false}
+          onPickerCancel={handleCancel}
+          onPickerConfirm={handleConfirm}
+        />
+      </Animated.View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  pickerContainer: {
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+})

code/allapp/allapp-rn/src/components/common/ao/index.ts

@@ -2,8 +2,9 @@ import { Avatar } from './Avatar'
 import Button from './Button'
 import { Cell, CellGroup } from './Cell'
 import Checkbox from './Checkbox'
-import DatePicker from './DatePicker'
 
+import DatePicker from './DatePicker'
+import DateRangePicker from './DateRangePicker'
 import Divider from './Divider'
 import Drawer from './Drawer'
 import Form, { FormRef } from './Form'
@@ -13,7 +14,6 @@ import ListItem from './ListItem'
 import LucideIcon from './LucideIcon'
 import Modal from './Modal'
 import SegmentedTabs from './SegmentedTabs'
-
 import Tab from './Tab'
 
 export {
@@ -23,6 +23,7 @@ export {
   CellGroup as ACellGroup,
   Checkbox as ACheckbox,
   DatePicker as ADatePicker,
+  DateRangePicker as ADateRangePicker,
   Divider as ADivider,
   Drawer as ADrawer,
   Form as AForm,