Skip to content

Commit 1d5e5b1

Browse files
tangjinzhoutangjinzhou
committed
feat: time-picker add clearIcon
1 parent 00a41f5 commit 1d5e5b1

File tree

13 files changed

+170
-134
lines changed

13 files changed

+170
-134
lines changed

‎build/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'timeline', // dev components
3+
componentName: 'time-picker', // dev components
44
},
55
};

‎components/time-picker/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `<div><s
66

77
exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></span>`;
88
9-
exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
10-
<span class="ant-time-picker"><input type="text" placeholder="Select time" disabled="disabled" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span><i aria-label="icon: close-circle" class="ant-time-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
11-
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
12-
</svg></i></span>
13-
`;
9+
exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" disabled="disabled" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></span>`;
1410
1511
exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = `
1612
<span class="ant-time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span><i aria-label="icon: close-circle" class="ant-time-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">

‎components/time-picker/__tests__/index.test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import VcTimePicker from '../../vc-time-picker/TimePicker';
33
import TimePicker from '..';
44
import moment from 'moment';
55
import focusTest from '../../../tests/shared/focusTest';
6+
import mountTest from '../../../tests/shared/mountTest';
67

78
describe('TimePicker', () => {
89
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -16,6 +17,7 @@ describe('TimePicker', () => {
1617
});
1718

1819
focusTest(TimePicker);
20+
mountTest(TimePicker);
1921

2022
it('renders addon correctly', () => {
2123
const wrapper = mount({
@@ -39,7 +41,7 @@ describe('TimePicker', () => {
3941
},
4042
});
4143
expect(errorSpy).toBeCalledWith(
42-
'Warning: `allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
44+
'Warning: [antdv: TimePicker] `allowEmpty` is deprecated. Please use `allowClear` instead.',
4345
);
4446
});
4547
it('not render clean icon when allowClear is false', () => {

‎components/time-picker/demo/index.vue

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,17 @@ export default {
3131
return (
3232
<div id="components-timepicker-demo">
3333
<md cn={md.cn} us={md.us} />
34-
<Hours />
35-
<Addon />
36-
<Basic />
37-
<Disabled />
38-
<HideColumn />
39-
<IntervalOptions />
40-
<Size />
41-
<Value />
42-
<Suffix />
34+
<demo-sort cols="2">
35+
<Hours />
36+
<Addon />
37+
<Basic />
38+
<Disabled />
39+
<HideColumn />
40+
<IntervalOptions />
41+
<Size />
42+
<Value />
43+
<Suffix />
44+
</demo-sort>
4345
<api>
4446
<CN slot="cn" />
4547
<US />

‎components/time-picker/index.en-US.md

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
## API
22

3-
| Property | Description | Type | Default |
4-
| --- | --- | --- | --- |
5-
| addon | some addon to timepicker panel bottom | slot \| slot-scope | - |
6-
| allowClear | allow clearing text | boolean | true |
7-
| autoFocus | get focus when component mounted | boolean | false |
8-
| clearText | clear tooltip of icon | string | clear |
9-
| defaultOpenValue | default open panel value, used to set utcOffset,locale if value/defaultValue absent | [moment](http://momentjs.com/) | moment() |
10-
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
11-
| disabled | determine whether the TimePicker is disabled | boolean | false |
12-
| disabledHours | to specify the hours that cannot be selected | function() | - |
13-
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
14-
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
15-
| format | to set the time format | string | "HH:mm:ss" |
16-
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
17-
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
18-
| hourStep | interval between hours in picker | number | 1 |
19-
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |
20-
| minuteStep | interval between minutes in picker | number | 1 |
21-
| open(.sync) | whether to popup panel | boolean | false |
22-
| placeholder | display when there's no value | string | "Select a time" |
23-
| popupClassName | className of panel | string | '' |
24-
| popupStyle | style of panel | object | - |
25-
| secondStep | interval between seconds in picker | number | 1 |
26-
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
27-
| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
28-
| value(v-model) | to set time | [moment](http://momentjs.com/) | - |
3+
| Property | Description | Type | Default | Version |
4+
| --- | --- | --- | --- | --- |
5+
| addon | some addon to timepicker panel bottom | slot \| slot-scope | - | |
6+
| allowClear | allow clearing text | boolean | true | |
7+
| autoFocus | get focus when component mounted | boolean | false | |
8+
| clearText | clear tooltip of icon | string | clear | |
9+
| defaultOpenValue | default open panel value, used to set utcOffset,locale if value/defaultValue absent | [moment](http://momentjs.com/) | moment() | |
10+
| defaultValue | to set default time | [moment](http://momentjs.com/) | - | |
11+
| disabled | determine whether the TimePicker is disabled | boolean | false | |
12+
| disabledHours | to specify the hours that cannot be selected | function() | - | |
13+
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - | |
14+
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | |
15+
| format | to set the time format | string | "HH:mm:ss" | |
16+
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | |
17+
| hideDisabledOptions | hide the options that can not be selected | boolean | false | |
18+
| hourStep | interval between hours in picker | number | 1 | |
19+
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
20+
| minuteStep | interval between minutes in picker | number | 1 | |
21+
| open(.sync) | whether to popup panel | boolean | false | |
22+
| placeholder | display when there's no value | string | "Select a time" | |
23+
| popupClassName | className of panel | string | '' | |
24+
| popupStyle | style of panel | object | - | |
25+
| secondStep | interval between seconds in picker | number | 1 | |
26+
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - | |
27+
| clearIcon | The custom clear icon | string \| VNode \| slot | - | 1.5.0 |
28+
| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false | |
29+
| value(v-model) | to set time | [moment](http://momentjs.com/) | - | |
2930

3031
### events
3132

‎components/time-picker/index.jsx

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as moment from 'moment';
22
import omit from 'omit.js';
33
import VcTimePicker from '../vc-time-picker';
44
import LocaleReceiver from '../locale-provider/LocaleReceiver';
5-
import defaultLocale from './locale/en_US';
65
import BaseMixin from '../_util/BaseMixin';
76
import PropTypes from '../_util/vue-types';
87
import warning from '../_util/warning';
98
import Icon from '../icon';
9+
import enUS from './locale/en_US';
1010
import interopDefault from '../_util/interopDefault';
1111
import {
1212
initDefaultProps,
@@ -70,6 +70,8 @@ export const TimePickerProps = () => ({
7070
transitionName: PropTypes.string,
7171
autoFocus: PropTypes.bool,
7272
addon: PropTypes.any,
73+
clearIcon: PropTypes.any,
74+
locale: PropTypes.object,
7375
});
7476

7577
const TimePicker = {
@@ -87,6 +89,7 @@ const TimePicker = {
8789
placement: 'bottomLeft',
8890
transitionName: 'slide-up',
8991
focusOnOpen: true,
92+
allowClear: true,
9093
}),
9194
model: {
9295
prop: 'value',
@@ -107,7 +110,8 @@ const TimePicker = {
107110
}
108111
warning(
109112
!hasProp(this, 'allowEmpty'),
110-
'`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
113+
'TimePicker',
114+
'`allowEmpty` is deprecated. Please use `allowClear` instead.',
111115
);
112116
return {
113117
sValue: value,
@@ -119,6 +123,30 @@ const TimePicker = {
119123
},
120124
},
121125
methods: {
126+
getDefaultFormat() {
127+
const { format, use12Hours } = this;
128+
if (format) {
129+
return format;
130+
} else if (use12Hours) {
131+
return 'h:mm:ss a';
132+
}
133+
return 'HH:mm:ss';
134+
},
135+
136+
getAllowClear() {
137+
const { allowClear, allowEmpty } = this.$props;
138+
if (hasProp(this, 'allowClear')) {
139+
return allowClear;
140+
}
141+
return allowEmpty;
142+
},
143+
getDefaultLocale() {
144+
const defaultLocale = {
145+
...enUS,
146+
...this.$props.locale,
147+
};
148+
return defaultLocale;
149+
},
122150
savePopupRef(ref) {
123151
this.popupRef = ref;
124152
},
@@ -143,42 +171,29 @@ const TimePicker = {
143171
this.$refs.timePicker.blur();
144172
},
145173

146-
getDefaultFormat() {
147-
const { format, use12Hours } = this;
148-
if (format) {
149-
return format;
150-
} else if (use12Hours) {
151-
return 'h:mm:ss a';
152-
}
153-
return 'HH:mm:ss';
154-
},
155-
156-
getAllowClear() {
157-
const { allowClear, allowEmpty } = this.$props;
158-
if (hasProp(this, 'allowClear')) {
159-
return allowClear;
160-
}
161-
return allowEmpty;
162-
},
163-
164174
renderInputIcon(prefixCls) {
165175
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
166176
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
167177
const clockIcon = (suffixIcon &&
168-
(isValidElement(suffixIcon) ? (
169-
cloneElement(suffixIcon, {
170-
class: `${prefixCls}-clock-icon`,
171-
})
172-
) : (
173-
<span class={`${prefixCls}-clock-icon`}>{suffixIcon}</span>
174-
))) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} theme="outlined" />;
178+
isValidElement(suffixIcon) &&
179+
cloneElement(suffixIcon, {
180+
class: `${prefixCls}-clock-icon`,
181+
})) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} />;
175182

176183
return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
177184
},
178185

179186
renderClearIcon(prefixCls) {
180-
const clearIcon = <Icon type="close-circle" class={`${prefixCls}-clear`} theme="filled" />;
181-
return clearIcon;
187+
const clearIcon = getComponentFromProp(this, 'clearIcon');
188+
const clearIconPrefixCls = `${prefixCls}-clear`;
189+
190+
if (clearIcon && isValidElement(clearIcon)) {
191+
return cloneElement(clearIcon, {
192+
class: clearIconPrefixCls,
193+
});
194+
}
195+
196+
return <Icon type="close-circle" class={clearIconPrefixCls} theme="filled" />;
182197
},
183198

184199
renderTimePicker(locale) {
@@ -235,7 +250,7 @@ const TimePicker = {
235250
return (
236251
<LocaleReceiver
237252
componentName="TimePicker"
238-
defaultLocale={defaultLocale}
253+
defaultLocale={this.getDefaultLocale()}
239254
scopedSlots={{ default: this.renderTimePicker }}
240255
/>
241256
);

‎components/time-picker/index.zh-CN.md

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
## API
22

3-
| 参数 | 说明 | 类型 | 默认值 |
4-
| --- | --- | --- | --- |
5-
| addon | 选择框底部显示自定义的内容 | slot \| slot-scope | 无 |
6-
| allowClear | 是否展示清除按钮 | boolean | true |
7-
| autoFocus | 自动获取焦点 | boolean | false |
8-
| clearText | 清除按钮的提示文案 | string | clear |
9-
| defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() |
10-
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
11-
| disabled | 禁用全部操作 | boolean | false |
12-
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
13-
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
14-
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
15-
| format | 展示的时间格式 | string | "HH:mm:ss" |
16-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
17-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
18-
| hourStep | 小时选项间隔 | number | 1 |
19-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |
20-
| minuteStep | 分钟选项间隔 | number | 1 |
21-
| open(.sync) | 面板是否打开 | boolean | false |
22-
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
23-
| popupClassName | 弹出层类名 | string | '' |
24-
| popupStyle | 弹出层样式对象 | object | - |
25-
| secondStep | 秒选项间隔 | number | 1 |
26-
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
27-
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
28-
| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
3+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
4+
| --- | --- | --- | --- | --- |
5+
| addon | 选择框底部显示自定义的内容 | slot \| slot-scope | 无 | |
6+
| allowClear | 是否展示清除按钮 | boolean | true | |
7+
| autoFocus | 自动获取焦点 | boolean | false | |
8+
| clearText | 清除按钮的提示文案 | string | clear | |
9+
| defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() | |
10+
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | |
11+
| disabled | 禁用全部操作 | boolean | false | |
12+
| disabledHours | 禁止选择部分小时选项 | function() | 无 | |
13+
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 | |
14+
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 | |
15+
| format | 展示的时间格式 | string | "HH:mm:ss" | |
16+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | |
17+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
18+
| hourStep | 小时选项间隔 | number | 1 | |
19+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
20+
| minuteStep | 分钟选项间隔 | number | 1 | |
21+
| open(.sync) | 面板是否打开 | boolean | false | |
22+
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" | |
23+
| popupClassName | 弹出层类名 | string | '' | |
24+
| popupStyle | 弹出层样式对象 | object | - | |
25+
| secondStep | 秒选项间隔 | number | 1 | |
26+
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - | |
27+
| clearIcon | 自定义的清除图标 | string \| VNode \| slot | - | 1.5.0 |
28+
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
29+
| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 | |
2930

3031
### 事件
3132

‎components/vc-time-picker/Combobox.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ const Combobox = {
8282
onEnterSelectPanel(range) {
8383
this.__emit('currentSelectPanelChange', range);
8484
},
85+
onEsc(e) {
86+
this.__emit('esc', e);
87+
},
8588

8689
getHourSelect(hour) {
8790
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this;
@@ -107,6 +110,7 @@ const Combobox = {
107110
type="hour"
108111
onSelect={this.onItemChange}
109112
onMouseenter={() => this.onEnterSelectPanel('hour')}
113+
onEsc={this.onEsc}
110114
/>
111115
);
112116
},
@@ -134,6 +138,7 @@ const Combobox = {
134138
type="minute"
135139
onSelect={this.onItemChange}
136140
onMouseenter={() => this.onEnterSelectPanel('minute')}
141+
onEsc={this.onEsc}
137142
/>
138143
);
139144
},
@@ -161,6 +166,7 @@ const Combobox = {
161166
type="second"
162167
onSelect={this.onItemChange}
163168
onMouseenter={() => this.onEnterSelectPanel('second')}
169+
onEsc={this.onEsc}
164170
/>
165171
);
166172
},
@@ -185,6 +191,7 @@ const Combobox = {
185191
type="ampm"
186192
onSelect={this.onItemChange}
187193
onMouseenter={() => this.onEnterSelectPanel('ampm')}
194+
onEsc={this.onEsc}
188195
/>
189196
);
190197
},

0 commit comments

Comments
 (0)