Skip to content

Commit a1b04a4

Browse files
zombieJzombieJ
committed
refactor: Single picker also use onSelect to trigger onChange
1 parent 5b96391 commit a1b04a4

File tree

7 files changed

+132
-84
lines changed

7 files changed

+132
-84
lines changed

‎examples/basic.tsx‎

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import moment, { Moment } from 'moment';
33
import Picker from '../src/Picker';
4-
import PickerPanel from '../src/PickerPanel';
54
import momentGenerateConfig from '../src/generate/moment';
65
import zhCN from '../src/locale/zh_CN';
76
import enUS from '../src/locale/en_US';
8-
import jaJP from '../src/locale/ja_JP';
97
import '../assets/index.less';
108

119
// const defaultValue = moment('2019-09-03 05:02:03');
@@ -35,69 +33,6 @@ export default () => {
3533
<div>
3634
<h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>
3735

38-
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
39-
<div style={{ margin: '0 8px' }}>
40-
<h3>Basic</h3>
41-
<PickerPanel<Moment> {...sharedProps} locale={zhCN} />
42-
</div>
43-
44-
<div style={{ margin: '0 8px' }}>
45-
<h3>Uncontrolled</h3>
46-
<PickerPanel<Moment>
47-
generateConfig={momentGenerateConfig}
48-
locale={zhCN}
49-
onChange={onChange}
50-
defaultValue={moment('2000-01-01', 'YYYY-MM-DD')}
51-
/>
52-
</div>
53-
54-
<div style={{ margin: '0 8px' }}>
55-
<h3>1 Month earlier</h3>
56-
<PickerPanel<Moment>
57-
{...sharedProps}
58-
defaultPickerValue={defaultValue.clone().subtract(1, 'month')}
59-
locale={enUS}
60-
/>
61-
</div>
62-
63-
<div style={{ margin: '0 8px' }}>
64-
<h3>Week Picker CN</h3>
65-
<PickerPanel<Moment> {...sharedProps} locale={zhCN} picker="week" />
66-
</div>
67-
68-
<div style={{ margin: '0 8px' }}>
69-
<h3>Month Picker</h3>
70-
<PickerPanel<Moment> {...sharedProps} locale={zhCN} picker="month" />
71-
</div>
72-
73-
<div style={{ margin: '0 8px' }}>
74-
<h3>Week Picker US</h3>
75-
<PickerPanel<Moment> {...sharedProps} locale={enUS} picker="week" />
76-
</div>
77-
78-
<div style={{ margin: '0 8px' }}>
79-
<h3>Time</h3>
80-
<PickerPanel<Moment> {...sharedProps} locale={jaJP} mode="time" />
81-
</div>
82-
<div style={{ margin: '0 8px' }}>
83-
<h3>Time AM/PM</h3>
84-
<PickerPanel<Moment>
85-
{...sharedProps}
86-
locale={jaJP}
87-
mode="time"
88-
showTime={{
89-
use12Hours: true,
90-
showSecond: false,
91-
format: 'hh:mm A',
92-
}}
93-
/>
94-
</div>
95-
<div style={{ margin: '0 8px' }}>
96-
<h3>Datetime</h3>
97-
<PickerPanel<Moment> {...sharedProps} locale={zhCN} showTime />
98-
</div>
99-
</div>
100-
10136
<div style={{ display: 'flex' }}>
10237
<div style={{ margin: '0 8px' }}>
10338
<h3>Basic</h3>

‎examples/panel.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import moment, { Moment } from 'moment';
3+
import PickerPanel from '../src/PickerPanel';
4+
import momentGenerateConfig from '../src/generate/moment';
5+
import zhCN from '../src/locale/zh_CN';
6+
import enUS from '../src/locale/en_US';
7+
import jaJP from '../src/locale/ja_JP';
8+
import '../assets/index.less';
9+
10+
// const defaultValue = moment('2019-09-03 05:02:03');
11+
const defaultValue = moment('2019-11-28 01:02:03');
12+
13+
export default () => {
14+
const [value, setValue] = React.useState<Moment | null>(defaultValue);
15+
16+
const onSelect = (newValue: Moment) => {
17+
console.log('Select:', newValue);
18+
};
19+
20+
const onChange = (newValue: Moment | null, formatString?: string) => {
21+
console.log('Change:', newValue, formatString);
22+
setValue(newValue);
23+
};
24+
25+
const sharedProps = {
26+
generateConfig: momentGenerateConfig,
27+
value,
28+
onSelect,
29+
onChange,
30+
};
31+
32+
return (
33+
<div>
34+
<h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>
35+
36+
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
37+
<div style={{ margin: '0 8px' }}>
38+
<h3>Basic</h3>
39+
<PickerPanel<Moment> {...sharedProps} locale={zhCN} />
40+
</div>
41+
42+
<div style={{ margin: '0 8px' }}>
43+
<h3>Uncontrolled</h3>
44+
<PickerPanel<Moment>
45+
generateConfig={momentGenerateConfig}
46+
locale={zhCN}
47+
onChange={onChange}
48+
defaultValue={moment('2000-01-01', 'YYYY-MM-DD')}
49+
/>
50+
</div>
51+
52+
<div style={{ margin: '0 8px' }}>
53+
<h3>1 Month earlier</h3>
54+
<PickerPanel<Moment>
55+
{...sharedProps}
56+
defaultPickerValue={defaultValue.clone().subtract(1, 'month')}
57+
locale={enUS}
58+
/>
59+
</div>
60+
61+
<div style={{ margin: '0 8px' }}>
62+
<h3>Week Picker CN</h3>
63+
<PickerPanel<Moment> {...sharedProps} locale={zhCN} picker="week" />
64+
</div>
65+
66+
<div style={{ margin: '0 8px' }}>
67+
<h3>Month Picker</h3>
68+
<PickerPanel<Moment> {...sharedProps} locale={zhCN} picker="month" />
69+
</div>
70+
71+
<div style={{ margin: '0 8px' }}>
72+
<h3>Week Picker US</h3>
73+
<PickerPanel<Moment> {...sharedProps} locale={enUS} picker="week" />
74+
</div>
75+
76+
<div style={{ margin: '0 8px' }}>
77+
<h3>Time</h3>
78+
<PickerPanel<Moment> {...sharedProps} locale={jaJP} mode="time" />
79+
</div>
80+
<div style={{ margin: '0 8px' }}>
81+
<h3>Time AM/PM</h3>
82+
<PickerPanel<Moment>
83+
{...sharedProps}
84+
locale={jaJP}
85+
mode="time"
86+
showTime={{
87+
use12Hours: true,
88+
showSecond: false,
89+
format: 'hh:mm A',
90+
}}
91+
/>
92+
</div>
93+
<div style={{ margin: '0 8px' }}>
94+
<h3>Datetime</h3>
95+
<PickerPanel<Moment> {...sharedProps} locale={zhCN} showTime />
96+
</div>
97+
</div>
98+
</div>
99+
);
100+
};

‎src/PanelContext.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { OnSelect } from './interface';
23

34
export type ContextOperationRefProps = {
45
onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
@@ -14,6 +15,7 @@ export interface PanelContextProps {
1415
hideNextBtn?: boolean;
1516
onDateMouseEnter?: (date: any) => void;
1617
onDateMouseLeave?: (date: any) => void;
18+
onSelect?: OnSelect<any>;
1719
}
1820

1921
const PanelContext = React.createContext<PanelContextProps>({});

‎src/Picker.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
130130
allowClear,
131131
autoFocus,
132132
showTime,
133-
picker,
133+
picker = 'date',
134134
format,
135135
use12Hours,
136136
value,
@@ -266,6 +266,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
266266

267267
// ============================= Input =============================
268268
const [inputProps, { focused, typing }] = usePickerInput({
269+
blurToCancel: !!(picker === 'date' && showTime),
269270
open: mergedOpen,
270271
triggerOpen,
271272
forwardKeyDown,
@@ -373,12 +374,22 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
373374
);
374375
}
375376

377+
// ============================ Return =============================
378+
const onContextSelect = (date: DateType, type: 'key' | 'mouse') => {
379+
if (type !== 'key' && (picker !== 'date' || !showTime)) {
380+
// triggerChange will also update selected values
381+
triggerChange(date);
382+
triggerOpen(false, true);
383+
}
384+
};
385+
376386
return (
377387
<PanelContext.Provider
378388
value={{
379389
operationRef,
380390
hideHeader: picker === 'time',
381391
panelRef: panelDivRef,
392+
onSelect: onContextSelect,
382393
}}
383394
>
384395
<PickerTrigger

‎src/PickerPanel.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,14 +151,17 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
151151
// ============================ State =============================
152152

153153
const panelContext = React.useContext(PanelContext);
154-
const { operationRef, panelRef: panelDivRef } = panelContext;
154+
const {
155+
operationRef,
156+
panelRef: panelDivRef,
157+
onSelect: onContextSelect,
158+
} = panelContext;
155159

156160
const {
157161
inRange,
158162
panelPosition,
159163
rangedValue,
160164
hoverRangedValue,
161-
onSelect: onContextSelect,
162165
} = React.useContext(RangeContext);
163166
const panelRef = React.useRef<PanelRefProps>({});
164167

‎src/RangeContext.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { NullableDateType, RangeValue, OnSelect } from './interface';
2+
import { NullableDateType, RangeValue } from './interface';
33

44
interface RangeContextProps {
55
/**
@@ -10,7 +10,6 @@ interface RangeContextProps {
1010
hoverRangedValue?: RangeValue<any>;
1111
inRange?: boolean;
1212
panelPosition?: 'left' | 'right' | false;
13-
onSelect?: OnSelect<any>;
1413
}
1514

1615
const RangeContext = React.createContext<RangeContextProps>({});

‎src/RangePicker.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -375,8 +375,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
375375
) {
376376
values = [startValue, null];
377377
endValue = null;
378-
379-
// TODO: setViewDates1(updateValues(viewDates1, startValue, 1));
380378
}
381379

382380
setSelectedValue(values);
@@ -664,25 +662,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
664662
};
665663
}
666664

667-
const onContextSelect = (date: DateType, type: 'key' | 'mouse') => {
668-
const values = updateValues(selectedValue, date, activePickerIndex);
669-
670-
if (type === 'key' || (picker === 'date' && showTime)) {
671-
setSelectedValue(values);
672-
} else {
673-
// triggerChange will also update selected values
674-
triggerChange(values);
675-
}
676-
};
677-
678665
return (
679666
<RangeContext.Provider
680667
value={{
681668
inRange: true,
682669
panelPosition,
683670
rangedValue: rangeHoverValue || selectedValue,
684671
hoverRangedValue: panelHoverRangedValue,
685-
onSelect: onContextSelect,
686672
}}
687673
>
688674
<PickerPanel<DateType>
@@ -920,13 +906,25 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
920906
}
921907

922908
// ============================ Return =============================
909+
const onContextSelect = (date: DateType, type: 'key' | 'mouse') => {
910+
const values = updateValues(selectedValue, date, activePickerIndex);
911+
912+
if (type === 'key' || (picker === 'date' && showTime)) {
913+
setSelectedValue(values);
914+
} else {
915+
// triggerChange will also update selected values
916+
triggerChange(values);
917+
}
918+
};
919+
923920
return (
924921
<PanelContext.Provider
925922
value={{
926923
operationRef,
927924
hideHeader: picker === 'time',
928925
onDateMouseEnter,
929926
onDateMouseLeave,
927+
onSelect: onContextSelect,
930928
}}
931929
>
932930
<PickerTrigger

0 commit comments

Comments
 (0)