Skip to content

Commit 2475fbe

Browse files
MrHeerMrHeer
committed
feat: Support milliseconds picker column (#149)
1 parent 87708b9 commit 2475fbe

File tree

10 files changed

+170
-32
lines changed

10 files changed

+170
-32
lines changed

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,12 @@ API
6262
| showHour | Boolean | true | whether show hour | |
6363
| showMinute | Boolean | true | whether show minute |
6464
| showSecond | Boolean | true | whether show second |
65+
| showMillisecond | Boolean | false | whether show millisecond |
6566
| format | String | - | moment format |
6667
| disabledHours | Function | - | disabled hour options |
6768
| disabledMinutes | Function | - | disabled minute options |
6869
| disabledSeconds | Function | - | disabled second options |
70+
| disabledMilliseconds | Function | - | disabled millisecond options |
6971
| use12Hours | Boolean | false | 12 hours display mode |
7072
| hideDisabledOptions | Boolean | false | whether hide disabled options |
7173
| onChange | Function | null | called when select a different value |
@@ -79,10 +81,11 @@ API
7981
| hourStep | Number | 1 | interval between hours in picker |
8082
| minuteStep | Number | 1 | interval between minutes in picker |
8183
| secondStep | Number | 1 | interval between seconds in picker |
84+
| millisecondStep | Number | 1 | interval between milliseconds in picker |
8285
| focusOnOpen | Boolean | false | automatically focus the input when the picker opens |
83-
| inputReadOnly | Boolean | false | set input to read only |
84-
| inputIcon | ReactNode | | specific the select icon. |
85-
| clearIcon | ReactNode | | specific the clear icon. |
86+
| inputReadOnly | Boolean | false | set input to read only |
87+
| inputIcon | ReactNode | | specific the select icon. |
88+
| clearIcon | ReactNode | | specific the clear icon. |
8689

8790
## Test Case
8891

‎assets/index/Panel.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,8 @@
2626
&-narrow {
2727
max-width: 113px;
2828
}
29+
30+
&-wide {
31+
width: 227px;
32+
}
2933
}

‎examples/disabled.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import TimePicker from 'rc-time-picker';
1212
const showSecond = true;
1313
const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
1414

15-
const now = moment().hour(14).minute(30);
15+
const now = moment()
16+
.hour(14)
17+
.minute(30);
1618

1719
function generateOptions(length, excludedOptions) {
1820
const arr = [];
@@ -44,26 +46,29 @@ function disabledMinutes(h) {
4446
}
4547

4648
function disabledSeconds(h, m) {
47-
return [h + m % 60];
49+
return [h + (m % 60)];
50+
}
51+
52+
function disabledMilliseconds() {
53+
return [1, 5, 10];
4854
}
4955

5056
ReactDom.render(
5157
<div>
5258
<h3>Disabled picker</h3>
53-
<TimePicker
54-
defaultValue={now}
55-
disabled
56-
onChange={onChange}
57-
/>
59+
<TimePicker defaultValue={now} disabled onChange={onChange} />
5860
<h3>Disabled options</h3>
5961
<TimePicker
6062
showSecond={showSecond}
63+
showMillisecond={true}
6164
defaultValue={now}
6265
className="xxx"
6366
onChange={onChange}
6467
disabledHours={disabledHours}
6568
disabledMinutes={disabledMinutes}
6669
disabledSeconds={disabledSeconds}
70+
disabledMilliseconds={disabledMilliseconds}
6771
/>
68-
</div>
69-
, document.getElementById('__react-content'));
72+
</div>,
73+
document.getElementById('__react-content'),
74+
);

‎examples/format.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@ import TimePicker from 'rc-time-picker';
66

77
ReactDom.render(
88
<div>
9+
<TimePicker defaultValue={moment()} />
910
<TimePicker defaultValue={moment()} showHour={false} />
1011
<TimePicker defaultValue={moment()} showMinute={false} />
1112
<TimePicker defaultValue={moment()} showSecond={false} />
13+
<TimePicker defaultValue={moment()} showMillisecond={true} />
1214

1315
<TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
14-
<TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
16+
<TimePicker defaultValue={moment()} showHour={false} showSecond={false} />
1517
<TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
16-
</div>
17-
, document.getElementById('__react-content'));
18+
</div>,
19+
document.getElementById('__react-content'),
20+
);

‎examples/step.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,12 @@ import moment from 'moment';
66
import TimePicker from 'rc-time-picker';
77

88
ReactDom.render(
9-
<TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
10-
, document.getElementById('__react-content'));
9+
<TimePicker
10+
defaultValue={moment()}
11+
showSecond={false}
12+
showMillisecond={true}
13+
minuteStep={15}
14+
millisecondStep={10}
15+
/>,
16+
document.getElementById('__react-content'),
17+
);

‎rc-time-picker.d.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
declare module "rc-time-picker" {
2-
import { Moment } from "moment";
3-
import * as React from "react";
1+
declare module 'rc-time-picker' {
2+
import { Moment } from 'moment';
3+
import * as React from 'react';
44

55
type TimePickerProps = {
66
prefixCls?: String;
@@ -18,10 +18,12 @@ declare module "rc-time-picker" {
1818
showHour?: Boolean;
1919
showMinute?: Boolean;
2020
showSecond?: Boolean;
21+
showMillisecond?: Boolean;
2122
format?: String;
2223
disabledHours?: Function;
2324
disabledMinutes?: Function;
2425
disabledSeconds?: Function;
26+
disabledMilliseconds?: Function;
2527
use12Hours?: Boolean;
2628
hideDisabledOptions?: Boolean;
2729
onChange?: Function;
@@ -34,6 +36,7 @@ declare module "rc-time-picker" {
3436
hourStep?: Number;
3537
minuteStep?: Number;
3638
secondStep?: Number;
39+
millisecondStep?: Number;
3740
focusOnOpen?: Boolean;
3841
inputReadOnly?: Boolean;
3942
inputIcon?: React.ReactNode;

‎src/Combobox.jsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,15 @@ class Combobox extends Component {
3030
showHour: PropTypes.bool,
3131
showMinute: PropTypes.bool,
3232
showSecond: PropTypes.bool,
33+
showMillisecond: PropTypes.bool,
3334
hourOptions: PropTypes.array,
3435
minuteOptions: PropTypes.array,
3536
secondOptions: PropTypes.array,
37+
millisecondOptions: PropTypes.array,
3638
disabledHours: PropTypes.func,
3739
disabledMinutes: PropTypes.func,
3840
disabledSeconds: PropTypes.func,
41+
disabledMilliseconds: PropTypes.func,
3942
onCurrentSelectPanelChange: PropTypes.func,
4043
use12Hours: PropTypes.bool,
4144
isAM: PropTypes.bool,
@@ -78,8 +81,11 @@ class Combobox extends Component {
7881
}
7982
}
8083
onAmPmChange(ampm);
81-
} else {
84+
} else if (type === 'second') {
8285
value.second(+itemValue);
86+
} else {
87+
itemValue = itemValue + '0';
88+
value.millisecond(+itemValue);
8389
}
8490
onChange(value);
8591
};
@@ -171,6 +177,33 @@ class Combobox extends Component {
171177
);
172178
}
173179

180+
getMillisecondSelect(millisecond) {
181+
const {
182+
prefixCls,
183+
millisecondOptions,
184+
disabledMilliseconds,
185+
showMillisecond,
186+
defaultOpenValue,
187+
value: propValue,
188+
} = this.props;
189+
if (!showMillisecond) {
190+
return null;
191+
}
192+
const value = propValue || defaultOpenValue;
193+
const disabledOptions = disabledMilliseconds(value.hour(), value.minute(), value.second());
194+
195+
return (
196+
<Select
197+
prefixCls={prefixCls}
198+
options={millisecondOptions.map(option => formatOption(option, disabledOptions))}
199+
selectedIndex={millisecondOptions.indexOf(Math.floor(millisecond / 10))}
200+
type="millisecond"
201+
onSelect={this.onItemChange}
202+
onMouseEnter={() => this.onEnterSelectPanel('millisecond')}
203+
/>
204+
);
205+
}
206+
174207
getAMPMSelect() {
175208
const { prefixCls, use12Hours, format, isAM } = this.props;
176209
if (!use12Hours) {
@@ -203,6 +236,7 @@ class Combobox extends Component {
203236
{this.getHourSelect(value.hour())}
204237
{this.getMinuteSelect(value.minute())}
205238
{this.getSecondSelect(value.second())}
239+
{this.getMillisecondSelect(value.millisecond())}
206240
{this.getAMPMSelect(value.hour())}
207241
</div>
208242
);

‎src/Header.jsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ class Header extends Component {
1515
hourOptions: PropTypes.array,
1616
minuteOptions: PropTypes.array,
1717
secondOptions: PropTypes.array,
18+
millisecondOptions: PropTypes.array,
1819
disabledHours: PropTypes.func,
1920
disabledMinutes: PropTypes.func,
2021
disabledSeconds: PropTypes.func,
22+
disabledMilliseconds: PropTypes.func,
2123
onChange: PropTypes.func,
2224
onEsc: PropTypes.func,
2325
defaultOpenValue: PropTypes.object,
@@ -70,9 +72,11 @@ class Header extends Component {
7072
hourOptions,
7173
minuteOptions,
7274
secondOptions,
75+
millisecondOptions,
7376
disabledHours,
7477
disabledMinutes,
7578
disabledSeconds,
79+
disabledMilliseconds,
7680
onChange,
7781
} = this.props;
7882

@@ -89,13 +93,15 @@ class Header extends Component {
8993
value
9094
.hour(parsed.hour())
9195
.minute(parsed.minute())
92-
.second(parsed.second());
96+
.second(parsed.second())
97+
.millisecond(parsed.millisecond());
9398

9499
// if time value not allowed, response warning.
95100
if (
96101
hourOptions.indexOf(value.hour()) < 0 ||
97102
minuteOptions.indexOf(value.minute()) < 0 ||
98-
secondOptions.indexOf(value.second()) < 0
103+
secondOptions.indexOf(value.second()) < 0 ||
104+
millisecondOptions.indexOf(value.millisecond()) < 0
99105
) {
100106
this.setState({
101107
invalid: true,
@@ -107,10 +113,16 @@ class Header extends Component {
107113
const disabledHourOptions = disabledHours();
108114
const disabledMinuteOptions = disabledMinutes(value.hour());
109115
const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
116+
const disabledMillisecondOptions = disabledMilliseconds(
117+
value.hour(),
118+
value.minute(),
119+
value.second(),
120+
);
110121
if (
111122
(disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
112123
(disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
113-
(disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
124+
(disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0) ||
125+
(disabledMillisecondOptions && disabledMillisecondOptions.indexOf(value.millisecond()) >= 0)
114126
) {
115127
this.setState({
116128
invalid: true,
@@ -122,13 +134,15 @@ class Header extends Component {
122134
if (
123135
originalValue.hour() !== value.hour() ||
124136
originalValue.minute() !== value.minute() ||
125-
originalValue.second() !== value.second()
137+
originalValue.second() !== value.second() ||
138+
originalValue.millisecond() !== value.millisecond()
126139
) {
127140
// keep other fields for rc-calendar
128141
const changedValue = originalValue.clone();
129142
changedValue.hour(value.hour());
130143
changedValue.minute(value.minute());
131144
changedValue.second(value.second());
145+
changedValue.millisecond(value.millisecond());
132146
onChange(changedValue);
133147
}
134148
} else if (originalValue !== value) {

0 commit comments

Comments
 (0)