u
This commit is contained in:
oneao committed
1 parent
bde3487da3
commit
7a9a22e02e
9 files changed
+243
-60
No files matched your search
@@ -0,0 +1,3 @@
|
||||
export default function ADateMorePicker() {
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -39,7 +39,7 @@ interface SegmentedTabsProps {
|
||||
width?: number
|
||||
}
|
||||
|
||||
export default function SegmentedTabs({
|
||||
export default function SegmentedTabs({
|
||||
tabs,
|
||||
value,
|
||||
defaultIndex = 0,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
import { Pressable, Text, View } from 'react-native'
|
||||
import { Pressable, ScrollView, Text, View } from 'react-native'
|
||||
import PagerView from 'react-native-pager-view'
|
||||
|
||||
interface TabItem {
|
||||
@@ -12,18 +12,12 @@ interface TabProps {
|
||||
data?: TabItem[]
|
||||
defaultKey?: TabItem['key']
|
||||
onChange?: (key: TabItem['key']) => void
|
||||
tabBarClass?: string
|
||||
tabItemClass?: string
|
||||
activeTabItemClass?: string
|
||||
}
|
||||
|
||||
export default function Tab({
|
||||
data,
|
||||
defaultKey,
|
||||
onChange,
|
||||
tabBarClass = 'flex flex-row gap-2 overflow-hidden',
|
||||
tabItemClass = 'items-center justify-center rounded-md px-4 py-2 bg-gray-200',
|
||||
activeTabItemClass = 'items-center justify-center rounded-md px-4 py-2 bg-gray-800',
|
||||
}: TabProps) {
|
||||
if (!data || data.length === 0)
|
||||
return null
|
||||
@@ -72,22 +66,34 @@ export default function Tab({
|
||||
return (
|
||||
<View className="flex-1">
|
||||
{/* tab bar */}
|
||||
<View className={tabBarClass}>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
{data.map((item) => {
|
||||
const isActive = item.key === selectedKey
|
||||
return (
|
||||
<Pressable
|
||||
key={item.key}
|
||||
onPress={() => handlePress(item.key)}
|
||||
className={isActive ? activeTabItemClass : tabItemClass}
|
||||
className={
|
||||
isActive
|
||||
? 'items-center justify-center rounded-md px-4 py-2 bg-gray-800'
|
||||
: 'items-center justify-center rounded-md px-4 py-2 bg-gray-200'
|
||||
}
|
||||
>
|
||||
|
||||
<Text className={isActive ? 'text-white' : 'text-gray-700'}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{hasContent && (
|
||||
<PagerView
|
||||
|
||||
Reference in new issue
Block a user