Skip to content

Commit c0bc3e5

Browse files
committed
refactor: more hooks
1 parent 42e6fbe commit c0bc3e5

File tree

2 files changed

+63
-44
lines changed

2 files changed

+63
-44
lines changed

src/NewPicker/PickerInput/RangePicker.tsx

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import omit from 'rc-util/lib/omit';
44
import pickAttrs from 'rc-util/lib/pickAttrs';
55
import warning from 'rc-util/lib/warning';
66
import * as React from 'react';
7-
import useLocale from '../hooks/useLocale';
87
import useTimeConfig from '../hooks/useTimeConfig';
98
import type {
109
BaseInfo,
@@ -131,16 +130,28 @@ function RangePicker<DateType extends object = any>(
131130
props: RangePickerProps<DateType>,
132131
ref: React.Ref<PickerRef>,
133132
) {
133+
// ========================= Prop =========================
134+
const filledProps = useFilledProps(props, () => {
135+
const { disabled, allowEmpty } = props;
136+
137+
const mergedDisabled = separateConfig(disabled, false);
138+
const mergedAllowEmpty = separateConfig(allowEmpty, false);
139+
140+
return {
141+
disabled: mergedDisabled,
142+
allowEmpty: mergedAllowEmpty,
143+
};
144+
});
145+
134146
const {
135147
// Style
136-
prefixCls = 'rc-picker',
137-
styles = {},
138-
classNames = {},
148+
prefixCls,
149+
styles,
150+
classNames,
139151

140152
// Value
141153
defaultValue,
142154
value,
143-
order = true,
144155
needConfirm,
145156

146157
// Disabled
@@ -160,7 +171,7 @@ function RangePicker<DateType extends object = any>(
160171
// Picker
161172
locale,
162173
generateConfig,
163-
picker = 'date',
174+
picker,
164175
showNow,
165176
showToday,
166177

@@ -197,34 +208,21 @@ function RangePicker<DateType extends object = any>(
197208
clearIcon,
198209

199210
// Render
200-
components = {},
211+
components,
201212
cellRender,
202213
dateRender,
203214
monthCellRender,
204215

205216
// Native
206217
onClick,
207-
} = props;
218+
} = filledProps;
208219

209220
// ========================= Refs =========================
210221
const selectorRef = usePickerRef(ref);
211222

212-
// ======================== Locale ========================
213-
const filledLocale = useLocale(locale);
214-
215-
// =================== Disabled & Empty ===================
216-
const mergedDisabled = separateConfig(disabled, false);
217-
const mergedAllowEmpty = separateConfig(allowEmpty, false);
218-
219223
// ========================= Icon =========================
220224
const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon);
221225

222-
// ========================= Prop =========================
223-
const filledProps = useFilledProps(props, {
224-
allowEmpty: mergedAllowEmpty,
225-
order,
226-
});
227-
228226
// ======================= ShowTime =======================
229227
const mergedShowTime = useTimeConfig(filledProps);
230228

@@ -235,7 +233,7 @@ function RangePicker<DateType extends object = any>(
235233

236234
const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => {
237235
// No need to open if all disabled
238-
if (mergedDisabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) {
236+
if (disabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) {
239237
setMergeOpen(nextOpen, config);
240238
}
241239
};
@@ -249,7 +247,7 @@ function RangePicker<DateType extends object = any>(
249247
const mergedNeedConfirm = needConfirm ?? complexPicker;
250248

251249
// ======================== Format ========================
252-
const [formatList, maskFormat] = useFieldFormat(internalPicker, filledLocale, format);
250+
const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format);
253251

254252
// ======================== Values ========================
255253
const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue(
@@ -272,7 +270,7 @@ function RangePicker<DateType extends object = any>(
272270
lastOperation,
273271
nextActiveIndex,
274272
activeIndexList,
275-
] = useRangeActive(mergedOpen, mergedDisabled, mergedAllowEmpty);
273+
] = useRangeActive(mergedOpen, disabled, allowEmpty);
276274

277275
const onSharedFocus = (event: React.FocusEvent<HTMLElement>, index?: number) => {
278276
triggerFocus(true);
@@ -339,7 +337,7 @@ function RangePicker<DateType extends object = any>(
339337
setInnerValue,
340338
getCalendarValue,
341339
triggerCalendarChange,
342-
mergedDisabled,
340+
disabled,
343341
formatList,
344342
focused,
345343
mergedOpen,
@@ -349,10 +347,10 @@ function RangePicker<DateType extends object = any>(
349347
// ===================== DisabledDate =====================
350348
const mergedDisabledDate = useRangeDisabledDate(
351349
calendarValue,
352-
mergedDisabled,
350+
disabled,
353351
activeIndexList,
354352
generateConfig,
355-
filledLocale,
353+
locale,
356354
disabledBoundaryDate,
357355
// minDate,
358356
// maxDate,
@@ -386,7 +384,7 @@ function RangePicker<DateType extends object = any>(
386384
}
387385

388386
// Not allow empty
389-
if (!mergedAllowEmpty[index] && !current) {
387+
if (!allowEmpty[index] && !current) {
390388
return true;
391389
}
392390

@@ -397,12 +395,12 @@ function RangePicker<DateType extends object = any>(
397395

398396
return false;
399397
}) as [boolean, boolean];
400-
}, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]);
398+
}, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]);
401399

402400
// ===================== Picker Value =====================
403401
const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(
404402
generateConfig,
405-
filledLocale,
403+
locale,
406404
calendarValue,
407405
mergedOpen,
408406
activeIndex,
@@ -473,7 +471,7 @@ function RangePicker<DateType extends object = any>(
473471
const onSelectorClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
474472
if (!selectorRef.current.nativeElement.contains(document.activeElement)) {
475473
// Click to focus the enabled input
476-
const enabledIndex = mergedDisabled.findIndex((d) => !d);
474+
const enabledIndex = disabled.findIndex((d) => !d);
477475
if (enabledIndex >= 0) {
478476
selectorRef.current.focus(enabledIndex);
479477
}
@@ -675,12 +673,12 @@ function RangePicker<DateType extends object = any>(
675673
const context = React.useMemo(
676674
() => ({
677675
prefixCls,
678-
locale: filledLocale,
676+
locale,
679677
generateConfig,
680678
button: components.button,
681679
input: components.input,
682680
}),
683-
[prefixCls, filledLocale, generateConfig, components.button, components.input],
681+
[prefixCls, locale, generateConfig, components.button, components.input],
684682
);
685683

686684
// ======================== Effect ========================
@@ -722,8 +720,8 @@ function RangePicker<DateType extends object = any>(
722720
};
723721

724722
if (
725-
mergedDisabled.some(
726-
(fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !mergedAllowEmpty[index],
723+
disabled.some(
724+
(fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !allowEmpty[index],
727725
)
728726
) {
729727
warning(
@@ -777,7 +775,7 @@ function RangePicker<DateType extends object = any>(
777775
format={formatList}
778776
inputReadOnly={mergedInputReadOnly}
779777
// Disabled
780-
disabled={mergedDisabled}
778+
disabled={disabled}
781779
// Open
782780
onOpenChange={triggerOpen}
783781
// Click
Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
import * as React from 'react';
22
import useLocale from '../../hooks/useLocale';
3-
import type { Locale, PickerMode } from '../../interface';
3+
import type { RangePickerProps } from '../RangePicker';
44

5-
export default function useFilledProps<T extends { locale: Locale; picker?: PickerMode }>(
6-
props: T,
7-
additionalProps?: Partial<T>,
8-
): T {
9-
const { locale, picker = 'date' } = props;
5+
type PickedProps<DateType extends object = any> = Pick<
6+
RangePickerProps<DateType>,
7+
'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components'
8+
>;
9+
10+
export default function useFilledProps<
11+
DateType extends object = any,
12+
InProps extends PickedProps<DateType> = PickedProps<DateType>,
13+
UpdaterProps = any,
14+
>(props: InProps, updater?: () => UpdaterProps): Omit<InProps, keyof UpdaterProps> & UpdaterProps {
15+
const {
16+
locale,
17+
picker = 'date',
18+
prefixCls = 'rc-picker',
19+
styles = {},
20+
classNames = {},
21+
order = true,
22+
components = {},
23+
} = props;
1024

1125
const filledLocale = useLocale(locale);
1226

13-
return React.useMemo(
27+
const filledProps = React.useMemo(
1428
() => ({
1529
...props,
30+
prefixCls,
1631
locale: filledLocale,
1732
picker,
18-
...additionalProps,
33+
styles,
34+
classNames,
35+
order,
36+
components,
37+
...updater?.(),
1938
}),
2039
[props],
2140
);
41+
42+
return filledProps;
2243
}

0 commit comments

Comments
 (0)