Skip to content

Commit c59b2d1

Browse files
chj-damonchj-damon
authored
Merge pull request #918 from thundersdata-frontend/rn-issue
Rn issue
2 parents 75d6efa + bb26215 commit c59b2d1

File tree

17 files changed

+215
-236
lines changed

17 files changed

+215
-236
lines changed

‎.changeset/selfish-walls-decide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@td-design/react-native-picker': major
3+
---
4+
5+
refactor: 用Modal.show重写弹窗的打开方式

‎packages/react-native-picker/src/date-period-input/index.tsx‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme }
55
import dayjs from 'dayjs';
66

77
import { DatePickerPropsBase, ModalPickerProps } from '../components/DatePicker/type';
8-
import DatePicker from '../date-picker';
98
import useDatePeriodInput from './useDatePeriodInput';
109

1110
export interface DatePeriodInputProps
@@ -52,19 +51,12 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
5251
...restProps
5352
}) => {
5453
const theme = useTheme();
55-
const {
56-
currentIndex,
57-
dates,
58-
visible,
59-
minDate,
60-
maxDate,
61-
setFalse,
62-
handleStartPress,
63-
handleEndPress,
64-
handleChange,
65-
clearStartDate,
66-
clearEndDate,
67-
} = useDatePeriodInput({ value, onChange, format });
54+
const { dates, handleStartPress, handleEndPress, clearStartDate, clearEndDate } = useDatePeriodInput({
55+
value,
56+
onChange,
57+
format,
58+
...restProps,
59+
});
6860

6961
const styles = StyleSheet.create({
7062
content: {
@@ -140,18 +132,6 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
140132
<Brief brief={brief} />
141133
</Box>
142134
)}
143-
<DatePicker
144-
{...restProps}
145-
{...{
146-
visible,
147-
format,
148-
onChange: handleChange,
149-
onClose: setFalse,
150-
minDate,
151-
maxDate,
152-
value: dates[currentIndex],
153-
}}
154-
/>
155135
</>
156136
);
157137
};

‎packages/react-native-picker/src/date-period-input/useDatePeriodInput.ts‎ renamed to ‎packages/react-native-picker/src/date-period-input/useDatePeriodInput.tsx‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import { useEffect } from 'react';
1+
import React, { useEffect } from 'react';
22
import { Keyboard } from 'react-native';
33

4-
import { useBoolean, useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
4+
import { Modal } from '@td-design/react-native';
5+
import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
6+
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
57
import dayjs from 'dayjs';
68

79
import type { DatePeriodInputProps } from '.';
10+
import DatePicker from '../date-picker';
811

912
export default function useDatePeriodInput({
1013
value,
1114
onChange,
1215
format,
13-
}: Pick<DatePeriodInputProps, 'value' | 'onChange' | 'format'>) {
16+
...restProps
17+
}: ImperativeModalChildrenProps<Pick<DatePeriodInputProps, 'value' | 'onChange' | 'format'>>) {
1418
const [currentIndex, setCurrentIndex] = useSafeState(0);
1519
const [dates, setDates] = useSafeState<[Date | undefined, Date | undefined]>(value ?? [undefined, undefined]);
16-
const [visible, { setTrue, setFalse }] = useBoolean(false);
1720
const [minDate, setMinDate] = useSafeState<string | undefined>(undefined); // 对结束时间来说，它的最小值就是开始时间的值
1821
const [maxDate, setMaxDate] = useSafeState<string | undefined>(undefined); // 对开始时间来说，它的最大值就是结束时间的值
1922

@@ -41,7 +44,21 @@ export default function useDatePeriodInput({
4144
setMinDate(undefined);
4245
setMaxDate(dayjs(dates[1]).format(format));
4346
}
44-
setTrue();
47+
Modal.show(
48+
<DatePicker
49+
{...restProps}
50+
{...{
51+
format,
52+
onChange: handleChange,
53+
minDate,
54+
maxDate,
55+
value: dates[currentIndex],
56+
}}
57+
/>,
58+
{
59+
position: 'bottom',
60+
}
61+
);
4562
};
4663

4764
/** 点开结束时间选择器 */
@@ -52,7 +69,21 @@ export default function useDatePeriodInput({
5269
setMinDate(dayjs(dates[0]).format(format));
5370
setMaxDate(undefined);
5471
}
55-
setTrue();
72+
Modal.show(
73+
<DatePicker
74+
{...restProps}
75+
{...{
76+
format,
77+
onChange: handleChange,
78+
minDate,
79+
maxDate,
80+
value: dates[currentIndex],
81+
}}
82+
/>,
83+
{
84+
position: 'bottom',
85+
}
86+
);
5687
};
5788

5889
/**
@@ -95,10 +126,8 @@ export default function useDatePeriodInput({
95126
return {
96127
currentIndex,
97128
dates,
98-
visible,
99129
minDate,
100130
maxDate,
101-
setFalse: useMemoizedFn(setFalse),
102131
handleStartPress: useMemoizedFn(handleStartPress),
103132
handleEndPress: useMemoizedFn(handleEndPress),
104133
handleChange: useMemoizedFn(handleChange),

‎packages/react-native-picker/src/date-picker-input/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
44
import { Box, Brief, Flex, helpers, Label, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
55

66
import { DatePickerPropsBase } from '../components/DatePicker/type';
7-
import DatePicker from '../date-picker';
87
import { ModalPickerProps } from '../picker/type';
98
import { PickerRef } from '../type';
109
import useDatePicker from '../useDatePicker';
@@ -55,12 +54,13 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
5554
ref
5655
) => {
5756
const theme = useTheme();
58-
const { date, currentText, visible, setFalse, handlePress, handleChange, handleInputClear } = useDatePicker({
57+
const { currentText, handleInputClear, handlePress } = useDatePicker({
5958
value,
6059
format,
6160
onChange,
6261
placeholder,
6362
ref,
63+
...restProps,
6464
});
6565

6666
const styles = StyleSheet.create({
@@ -133,7 +133,6 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
133133
<Brief brief={brief} />
134134
</Box>
135135
)}
136-
<DatePicker {...restProps} {...{ value: date, visible, format, onChange: handleChange, onClose: setFalse }} />
137136
</>
138137
);
139138
}

‎packages/react-native-picker/src/date-picker-item/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
44
import { Box, Pressable, SvgIcon, Text, Theme, useTheme } from '@td-design/react-native';
55

66
import { DatePickerPropsBase } from '../components/DatePicker/type';
7-
import DatePicker from '../date-picker';
87
import { ModalPickerProps } from '../picker/type';
98
import { PickerRef } from '../type';
109
import useDatePicker from '../useDatePicker';
@@ -36,12 +35,13 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
3635
ref
3736
) => {
3837
const theme = useTheme<Theme>();
39-
const { date, currentText, visible, setFalse, handlePress, handleChange, handleInputClear } = useDatePicker({
38+
const { currentText, handlePress, handleInputClear } = useDatePicker({
4039
value,
4140
format,
4241
onChange,
4342
placeholder,
4443
ref,
44+
...restProps,
4545
});
4646

4747
const styles = StyleSheet.create({
@@ -74,7 +74,6 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
7474
<Pressable onPress={handlePress} activeOpacity={activeOpacity} style={[styles.content, style]}>
7575
{Content}
7676
</Pressable>
77-
<DatePicker {...restProps} {...{ value: date, visible, format, onChange: handleChange, onClose: setFalse }} />
7877
</>
7978
);
8079
return <Box style={[styles.content, style]}>{Content}</Box>;

‎packages/react-native-picker/src/date-picker/index.tsx‎

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
1+
import React, { forwardRef, useImperativeHandle } from 'react';
22
import { StyleSheet } from 'react-native';
33

4-
import { Flex, helpers, Modal, Pressable, Text } from '@td-design/react-native';
4+
import { Flex, helpers, Pressable, Text } from '@td-design/react-native';
5+
import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
56
import dayjs from 'dayjs';
67

78
import DatePickerRN from '../components/DatePicker';
@@ -15,12 +16,9 @@ export type DatePickerRef = {
1516
};
1617
export type DatePickerProps = DatePickerPropsBase & ModalPickerProps;
1718

18-
const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
19+
const DatePicker = forwardRef<DatePickerRef, ImperativeModalChildrenProps<DatePickerProps>>((props, ref) => {
1920
const {
2021
title,
21-
displayType = 'modal',
22-
visible = false,
23-
onClose,
2422
format = 'YYYY-MM-DD HH:mm',
2523
labelUnit = { year: '年', month: '月', day: '日', hour: '时', minute: '分' },
2624
mode = 'date',
@@ -31,15 +29,15 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
3129
cancelText = '取消',
3230
okText = '确定',
3331
activeOpacity = 0.6,
32+
closeModal,
3433
...restProps
3534
} = props;
3635

3736
const { date, handleChange, handleOk, handleClose } = useDatePicker({
38-
onClose,
3937
onChange,
4038
value,
41-
displayType,
4239
format,
40+
closeModal,
4341
});
4442

4543
useImperativeHandle(ref, () => {
@@ -53,49 +51,38 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>((props, ref) => {
5351
};
5452
});
5553

56-
const DatePickerComp = useMemo(() => {
57-
if (!visible) return null;
58-
59-
return (
54+
return (
55+
<>
56+
<Flex
57+
borderBottomWidth={ONE_PIXEL}
58+
borderBottomColor="border"
59+
backgroundColor="white"
60+
paddingVertical="x3"
61+
paddingHorizontal="x3"
62+
>
63+
<Pressable activeOpacity={activeOpacity} onPress={handleClose} style={styles.cancel}>
64+
<Text variant="p0" color="primary200">
65+
{cancelText}
66+
</Text>
67+
</Pressable>
68+
<Flex.Item alignItems="center">
69+
<Text variant="p0" color="text">
70+
{title}
71+
</Text>
72+
</Flex.Item>
73+
<Pressable activeOpacity={activeOpacity} onPress={handleOk} style={styles.submit}>
74+
<Text variant="p0" color="primary200">
75+
{okText}
76+
</Text>
77+
</Pressable>
78+
</Flex>
6079
<DatePickerRN
6180
{...restProps}
6281
{...{ mode, value: date, minDate, maxDate, labelUnit, format }}
6382
onChange={handleChange}
6483
/>
65-
);
66-
}, [visible, date, mode, minDate, maxDate, labelUnit, format, restProps]);
67-
68-
if (displayType === 'modal') {
69-
return (
70-
<Modal position="bottom" animationType="slide" visible={visible} onClose={handleClose}>
71-
<Flex
72-
borderBottomWidth={ONE_PIXEL}
73-
borderBottomColor="border"
74-
backgroundColor="white"
75-
paddingVertical="x3"
76-
paddingHorizontal="x3"
77-
>
78-
<Pressable activeOpacity={activeOpacity} onPress={handleClose} style={styles.cancel}>
79-
<Text variant="p0" color="primary200">
80-
{cancelText}
81-
</Text>
82-
</Pressable>
83-
<Flex.Item alignItems="center">
84-
<Text variant="p0" color="text">
85-
{title}
86-
</Text>
87-
</Flex.Item>
88-
<Pressable activeOpacity={activeOpacity} onPress={handleOk} style={styles.submit}>
89-
<Text variant="p0" color="primary200">
90-
{okText}
91-
</Text>
92-
</Pressable>
93-
</Flex>
94-
{DatePickerComp}
95-
</Modal>
96-
);
97-
}
98-
return DatePickerComp;
84+
</>
85+
);
9986
});
10087

10188
export default DatePicker;

‎packages/react-native-picker/src/date-picker/useDatePicker.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { useEffect } from 'react';
22

3+
import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
34
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
45
import dayjs from 'dayjs';
56

67
import { DatePickerPropsBase, ModalPickerProps } from '../components/DatePicker/type';
78

89
export default function useDatePicker({
9-
onClose,
1010
onChange,
1111
value,
12-
displayType,
1312
format,
14-
}: DatePickerPropsBase & ModalPickerProps) {
13+
closeModal,
14+
}: ImperativeModalChildrenProps<DatePickerPropsBase & ModalPickerProps>) {
1515
const [date, setDate] = useSafeState<Date | undefined>(value);
1616

1717
useEffect(() => {
@@ -20,20 +20,17 @@ export default function useDatePicker({
2020

2121
const handleChange = (date?: Date) => {
2222
setDate(date);
23-
if (displayType === 'view') {
24-
onChange?.(date);
25-
}
2623
};
2724

2825
const handleClose = () => {
2926
setDate(value);
30-
onClose?.();
27+
closeModal?.();
3128
};
3229

3330
const handleOk = () => {
3431
const value = date ?? new Date();
3532
onChange?.(value, dayjs(value).format(format));
36-
onClose?.();
33+
closeModal?.();
3734
};
3835

3936
return {

0 commit comments

Comments
 (0)