Skip to content

Commit fff171a

Browse files
zombieJzombieJ
committed
init disabled range logic
1 parent ccd4c4f commit fff171a

File tree

6 files changed

+101
-69
lines changed

6 files changed

+101
-69
lines changed

‎examples/range.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,15 @@ export default () => {
9898
locale={zhCN}
9999
allowClear
100100
allowEmpty={[true, true]}
101+
/>
102+
</div>
103+
104+
<div style={{ margin: '0 8px' }}>
105+
<h3>Selectable</h3>
106+
<RangePicker<Moment>
107+
{...sharedProps}
108+
locale={zhCN}
109+
allowClear
101110
selectable={[true, false]}
102111
/>
103112
</div>

‎src/RangePicker.tsx‎

Lines changed: 35 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import * as React from 'react';
22
import classNames from 'classnames';
3-
import { DisabledTimes, PanelMode, PickerMode } from './interface';
3+
import {
4+
DisabledTimes,
5+
PanelMode,
6+
PickerMode,
7+
RangeValue,
8+
EventValue,
9+
} from './interface';
410
import {
511
PickerBaseProps,
612
PickerDateProps,
@@ -12,7 +18,11 @@ import useMergedState from './hooks/useMergeState';
1218
import PickerTrigger from './PickerTrigger';
1319
import PickerPanel from './PickerPanel';
1420
import usePickerInput from './hooks/usePickerInput';
15-
import getDataOrAriaProps, { toArray } from './utils/miscUtil';
21+
import getDataOrAriaProps, {
22+
toArray,
23+
getValue,
24+
updateValues,
25+
} from './utils/miscUtil';
1626
import { getDefaultFormat, getInputSize } from './utils/uiUtil';
1727
import PanelContext, { ContextOperationRefProps } from './PanelContext';
1828
import {
@@ -27,40 +37,6 @@ import { GenerateConfig } from './generate';
2737
import { PickerPanelProps } from '.';
2838
import RangeContext from './RangeContext';
2939

30-
type EventValue<DateType> = DateType | null;
31-
type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;
32-
33-
function getIndexValue<T>(
34-
values: null | undefined | [T | null, T | null],
35-
index: number,
36-
): T | null {
37-
return values ? values[index] : null;
38-
}
39-
40-
type UpdateValue<T> = (prev: T) => T;
41-
42-
function updateRangeValue<T, R = [T | null, T | null] | null>(
43-
values: [T | null, T | null] | null,
44-
value: T | UpdateValue<T>,
45-
index: number,
46-
): R {
47-
const newValues: [T | null, T | null] = [
48-
getIndexValue(values, 0),
49-
getIndexValue(values, 1),
50-
];
51-
52-
newValues[index] =
53-
typeof value === 'function'
54-
? (value as UpdateValue<T | null>)(newValues[index])
55-
: value;
56-
57-
if (!newValues[0] && !newValues[1]) {
58-
return (null as unknown) as R;
59-
}
60-
61-
return (newValues as unknown) as R;
62-
}
63-
6440
function reorderValues<DateType>(
6541
values: RangeValue<DateType>,
6642
generateConfig: GenerateConfig<DateType>,
@@ -183,7 +159,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
183159
locale,
184160
placeholder,
185161
autoFocus,
186-
allowEmpty,
187162
disabled,
188163
format,
189164
picker = 'date',
@@ -196,6 +171,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
196171
open,
197172
defaultOpen,
198173
disabledDate,
174+
selectable,
175+
allowEmpty,
199176
allowClear,
200177
suffixIcon,
201178
clearIcon,
@@ -253,13 +230,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
253230
compareFunc = isSameYear;
254231
}
255232

256-
if (
257-
compareFunc(
258-
generateConfig,
259-
getIndexValue(values, 0),
260-
getIndexValue(values, 1),
261-
)
262-
) {
233+
if (compareFunc(generateConfig, getValue(values, 0), getValue(values, 1))) {
263234
return viewDate;
264235
}
265236
return getClosingViewDate(viewDate, picker, generateConfig, -1);
@@ -272,7 +243,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
272243
>({
273244
defaultValue: () =>
274245
defaultPickerValue ||
275-
updateRangeValue(
246+
updateValues(
276247
mergedValue,
277248
(viewDate: DateType) => getEndViewDate(viewDate, mergedValue),
278249
1,
@@ -348,8 +319,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
348319

349320
setSelectedValue(values);
350321

351-
const startValue = getIndexValue(values, 0);
352-
const endValue = getIndexValue(values, 1);
322+
const startValue = getValue(values, 0);
323+
const endValue = getValue(values, 1);
353324

354325
const canStartValueTrigger = canValueTrigger(startValue, 0, allowEmpty);
355326
const canEndValueTrigger = canValueTrigger(endValue, 1, allowEmpty);
@@ -364,8 +335,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
364335

365336
if (
366337
onChange &&
367-
(!isEqual(generateConfig, getIndexValue(mergedValue, 0), startValue) ||
368-
!isEqual(generateConfig, getIndexValue(mergedValue, 1), endValue))
338+
(!isEqual(generateConfig, getValue(mergedValue, 0), startValue) ||
339+
!isEqual(generateConfig, getValue(mergedValue, 1), endValue))
369340
) {
370341
onChange(values, [
371342
startValue
@@ -437,12 +408,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
437408
};
438409

439410
const startValueTexts = useValueTexts<DateType>(
440-
getIndexValue(selectedValue, 0),
411+
getValue(selectedValue, 0),
441412
sharedTextHooksProps,
442413
);
443414

444415
const endValueTexts = useValueTexts<DateType>(
445-
getIndexValue(selectedValue, 1),
416+
getValue(selectedValue, 1),
446417
sharedTextHooksProps,
447418
);
448419

@@ -453,8 +424,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
453424
formatList,
454425
);
455426
if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
456-
setSelectedValue(updateRangeValue(selectedValue, inputDate, index));
457-
setViewDates(updateRangeValue(viewDates, inputDate, index));
427+
setSelectedValue(updateValues(selectedValue, inputDate, index));
428+
setViewDates(updateValues(viewDates, inputDate, index));
458429
}
459430
};
460431

@@ -580,18 +551,14 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
580551
className={classNames({
581552
[`${prefixCls}-panel-focused`]: !startTyping && !endTyping,
582553
})}
583-
value={getIndexValue(selectedValue, activePickerIndex)}
554+
value={getValue(selectedValue, activePickerIndex)}
584555
locale={locale}
585556
tabIndex={-1}
586557
onMouseDown={e => {
587558
e.preventDefault();
588559
}}
589560
onSelect={date => {
590-
const values = updateRangeValue(
591-
selectedValue,
592-
date,
593-
activePickerIndex,
594-
);
561+
const values = updateValues(selectedValue, date, activePickerIndex);
595562

596563
if (picker === 'date' && showTime) {
597564
setSelectedValue(values);
@@ -602,11 +569,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
602569
}}
603570
onPanelChange={(date, newMode) => {
604571
triggerModesChange(
605-
updateRangeValue(mergedModes, newMode, activePickerIndex),
606-
updateRangeValue(selectedValue, date, activePickerIndex),
572+
updateValues(mergedModes, newMode, activePickerIndex),
573+
updateValues(selectedValue, date, activePickerIndex),
607574
);
608575

609-
setViewDates(updateRangeValue(viewDates, date, activePickerIndex));
576+
setViewDates(updateValues(viewDates, date, activePickerIndex));
610577
}}
611578
onChange={undefined}
612579
defaultValue={undefined}
@@ -630,7 +597,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
630597
pickerValue: viewDate,
631598
onPickerValueChange: (newViewDate: DateType) => {
632599
setViewDates(
633-
updateRangeValue(viewDates, newViewDate, activePickerIndex),
600+
updateValues(viewDates, newViewDate, activePickerIndex),
634601
);
635602
},
636603
})}
@@ -639,7 +606,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
639606
pickerValue: nextViewDate,
640607
onPickerValueChange: newViewDate => {
641608
setViewDates(
642-
updateRangeValue(
609+
updateValues(
643610
viewDates,
644611
getClosingViewDate(newViewDate, picker, generateConfig, -1),
645612
activePickerIndex,
@@ -682,7 +649,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
682649
}
683650

684651
const inputSharedProps = {
685-
disabled,
686652
size: getInputSize(picker, formatList[0]),
687653
};
688654

@@ -715,11 +681,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
715681
>
716682
<div className={`${prefixCls}-input`} ref={startInputDivRef}>
717683
<input
684+
disabled={disabled || getValue(selectable, 0) === false}
718685
readOnly={inputReadOnly || !startTyping}
719686
value={startText}
720687
onChange={triggerStartTextChange}
721688
autoFocus={autoFocus}
722-
placeholder={getIndexValue(placeholder, 0) || ''}
689+
placeholder={getValue(placeholder, 0) || ''}
723690
ref={startInputRef}
724691
{...startInputProps}
725692
{...inputSharedProps}
@@ -728,10 +695,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
728695
{separator}
729696
<div className={`${prefixCls}-input`} ref={startInputDivRef}>
730697
<input
698+
disabled={disabled || getValue(selectable, 1) === false}
731699
readOnly={inputReadOnly || !startTyping}
732700
value={endText}
733701
onChange={triggerEndTextChange}
734-
placeholder={getIndexValue(placeholder, 1) || ''}
702+
placeholder={getValue(placeholder, 1) || ''}
735703
ref={endInputRef}
736704
{...endInputProps}
737705
{...inputSharedProps}

‎src/hooks/useRangeDisabled.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import { RangeValue } from '../interface';
3+
import { getValue } from '../utils/miscUtil';
4+
import { GenerateConfig } from '../generate';
5+
6+
export default function useRangeDisabled<DateType>(
7+
selectedValues: RangeValue<DateType>,
8+
disabledDate: (date: DateType) => boolean,
9+
generateConfig: GenerateConfig<DateType>,
10+
) {
11+
const startDate = getValue(selectedValues, 0);
12+
const endDate = getValue(selectedValues, 1);
13+
14+
function disableEndDate(date: DateType) {
15+
if (disabledDate && disabledDate(date)) {
16+
return true;
17+
}
18+
19+
if (startDate) {}
20+
}
21+
}

‎src/interface.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,6 @@ export type OnPanelChange<DateType> = (
9090
value: DateType,
9191
mode: PanelMode,
9292
) => void;
93+
94+
export type EventValue<DateType> = DateType | null;
95+
export type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;

‎src/panels/YearPanel/YearBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import classNames from 'classnames';
33
import { GenerateConfig } from '../../generate';
44
import { YEAR_DECADE_COUNT } from '.';
5-
import { Locale } from '../../interface';
5+
import { Locale, NullableDateType } from '../../interface';
66

77
export const YEAR_COL_COUNT = 3;
88
const YEAR_ROW_COUNT = 4;
@@ -11,7 +11,7 @@ export interface YearBodyProps<DateType> {
1111
prefixCls: string;
1212
locale: Locale;
1313
generateConfig: GenerateConfig<DateType>;
14-
value: DateType;
14+
value: NullableDateType<DateType>;
1515
viewDate: DateType;
1616
disabledDate?: (date: DateType) => boolean;
1717
onSelect: (value: DateType) => void;

‎src/utils/miscUtil.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,34 @@ export default function getDataOrAriaProps(props: any) {
3737

3838
return retProps;
3939
}
40+
41+
export function getValue<T>(
42+
values: null | undefined | [T | null, T | null],
43+
index: number,
44+
): T | null {
45+
return values ? values[index] : null;
46+
}
47+
48+
type UpdateValue<T> = (prev: T) => T;
49+
50+
export function updateValues<T, R = [T | null, T | null] | null>(
51+
values: [T | null, T | null] | null,
52+
value: T | UpdateValue<T>,
53+
index: number,
54+
): R {
55+
const newValues: [T | null, T | null] = [
56+
getValue(values, 0),
57+
getValue(values, 1),
58+
];
59+
60+
newValues[index] =
61+
typeof value === 'function'
62+
? (value as UpdateValue<T | null>)(newValues[index])
63+
: value;
64+
65+
if (!newValues[0] && !newValues[1]) {
66+
return (null as unknown) as R;
67+
}
68+
69+
return (newValues as unknown) as R;
70+
}

0 commit comments

Comments
 (0)