github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: time-picker add clearIcon

pull/1845/head
tangjinzhou 2020-02-27 11:08:49 +08:00
parent 00a41f5ec5
commit 1d5e5b1f7d
13 changed files with 170 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'timeline', // dev components componentName: 'time-picker', // dev components
}, },
}; };

6
components/time-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,11 +6,7 @@ exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `<div><s
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>`; 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>`;
exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = ` 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>`;
<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="">
<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>
</svg></i></span>
`;
exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = ` exports[`renders ./components/time-picker/demo/hide-column.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><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=""> <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="">

4
components/time-picker/__tests__/index.test.js
View File

@ -3,6 +3,7 @@ import VcTimePicker from '../../vc-time-picker/TimePicker';
import TimePicker from '..'; import TimePicker from '..';
import moment from 'moment'; import moment from 'moment';
import focusTest from '../../../tests/shared/focusTest'; import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
describe('TimePicker', () => { describe('TimePicker', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@ -16,6 +17,7 @@ describe('TimePicker', () => {
}); });
focusTest(TimePicker); focusTest(TimePicker);
mountTest(TimePicker);
it('renders addon correctly', () => { it('renders addon correctly', () => {
const wrapper = mount({ const wrapper = mount({
@ -39,7 +41,7 @@ describe('TimePicker', () => {
}, },
}); });
expect(errorSpy).toBeCalledWith( expect(errorSpy).toBeCalledWith(
'Warning: `allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.', 'Warning: [antdv: TimePicker] `allowEmpty` is deprecated. Please use `allowClear` instead.',
); );
}); });
it('not render clean icon when allowClear is false', () => { it('not render clean icon when allowClear is false', () => {

20
components/time-picker/demo/index.vue
View File

@ -31,15 +31,17 @@ export default {
return ( return (
<div id="components-timepicker-demo"> <div id="components-timepicker-demo">
<md cn={md.cn} us={md.us} /> <md cn={md.cn} us={md.us} />
<Hours /> <demo-sort cols="2">
<Addon /> <Hours />
<Basic /> <Addon />
<Disabled /> <Basic />
<HideColumn /> <Disabled />
<IntervalOptions /> <HideColumn />
<Size /> <IntervalOptions />
<Value /> <Size />
<Suffix /> <Value />
<Suffix />
</demo-sort>
<api> <api>
<CN slot="cn" /> <CN slot="cn" />
<US /> <US />

53
components/time-picker/index.en-US.md
View File

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

75
components/time-picker/index.jsx
View File

@ -2,11 +2,11 @@ import * as moment from 'moment';
import omit from 'omit.js'; import omit from 'omit.js';
import VcTimePicker from '../vc-time-picker'; import VcTimePicker from '../vc-time-picker';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from './locale/en_US';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import warning from '../_util/warning'; import warning from '../_util/warning';
import Icon from '../icon'; import Icon from '../icon';
import enUS from './locale/en_US';
import interopDefault from '../_util/interopDefault'; import interopDefault from '../_util/interopDefault';
import { import {
initDefaultProps, initDefaultProps,
@ -70,6 +70,8 @@ export const TimePickerProps = () => ({
transitionName: PropTypes.string, transitionName: PropTypes.string,
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
addon: PropTypes.any, addon: PropTypes.any,
clearIcon: PropTypes.any,
locale: PropTypes.object,
}); });
const TimePicker = { const TimePicker = {
@ -87,6 +89,7 @@ const TimePicker = {
placement: 'bottomLeft', placement: 'bottomLeft',
transitionName: 'slide-up', transitionName: 'slide-up',
focusOnOpen: true, focusOnOpen: true,
allowClear: true,
}), }),
model: { model: {
prop: 'value', prop: 'value',
@ -107,7 +110,8 @@ const TimePicker = {
} }
warning( warning(
!hasProp(this, 'allowEmpty'), !hasProp(this, 'allowEmpty'),
'`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.', 'TimePicker',
'`allowEmpty` is deprecated. Please use `allowClear` instead.',
); );
return { return {
sValue: value, sValue: value,
@ -119,6 +123,30 @@ const TimePicker = {
}, },
}, },
methods: { methods: {
getDefaultFormat() {
const { format, use12Hours } = this;
if (format) {
return format;
} else if (use12Hours) {
return 'h:mm:ss a';
}
return 'HH:mm:ss';
},
getAllowClear() {
const { allowClear, allowEmpty } = this.$props;
if (hasProp(this, 'allowClear')) {
return allowClear;
}
return allowEmpty;
},
getDefaultLocale() {
const defaultLocale = {
...enUS,
...this.$props.locale,
};
return defaultLocale;
},
savePopupRef(ref) { savePopupRef(ref) {
this.popupRef = ref; this.popupRef = ref;
}, },
@ -143,42 +171,29 @@ const TimePicker = {
this.$refs.timePicker.blur(); this.$refs.timePicker.blur();
}, },
getDefaultFormat() {
const { format, use12Hours } = this;
if (format) {
return format;
} else if (use12Hours) {
return 'h:mm:ss a';
}
return 'HH:mm:ss';
},
getAllowClear() {
const { allowClear, allowEmpty } = this.$props;
if (hasProp(this, 'allowClear')) {
return allowClear;
}
return allowEmpty;
},
renderInputIcon(prefixCls) { renderInputIcon(prefixCls) {
let suffixIcon = getComponentFromProp(this, 'suffixIcon'); let suffixIcon = getComponentFromProp(this, 'suffixIcon');
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon; suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
const clockIcon = (suffixIcon && const clockIcon = (suffixIcon &&
(isValidElement(suffixIcon) ? ( isValidElement(suffixIcon) &&
cloneElement(suffixIcon, { cloneElement(suffixIcon, {
class: `${prefixCls}-clock-icon`, class: `${prefixCls}-clock-icon`,
}) })) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} />;
) : (
<span class={`${prefixCls}-clock-icon`}>{suffixIcon}</span>
))) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} theme="outlined" />;
return <span class={`${prefixCls}-icon`}>{clockIcon}</span>; return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
}, },
renderClearIcon(prefixCls) { renderClearIcon(prefixCls) {
const clearIcon = <Icon type="close-circle" class={`${prefixCls}-clear`} theme="filled" />; const clearIcon = getComponentFromProp(this, 'clearIcon');
return clearIcon; const clearIconPrefixCls = `${prefixCls}-clear`;
if (clearIcon && isValidElement(clearIcon)) {
return cloneElement(clearIcon, {
class: clearIconPrefixCls,
});
}
return <Icon type="close-circle" class={clearIconPrefixCls} theme="filled" />;
}, },
renderTimePicker(locale) { renderTimePicker(locale) {
@ -235,7 +250,7 @@ const TimePicker = {
return ( return (
<LocaleReceiver <LocaleReceiver
componentName="TimePicker" componentName="TimePicker"
defaultLocale={defaultLocale} defaultLocale={this.getDefaultLocale()}
scopedSlots={{ default: this.renderTimePicker }} scopedSlots={{ default: this.renderTimePicker }}
/> />
); );

53
components/time-picker/index.zh-CN.md
View File

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

7
components/vc-time-picker/Combobox.jsx
View File

@ -82,6 +82,9 @@ const Combobox = {
onEnterSelectPanel(range) { onEnterSelectPanel(range) {
this.__emit('currentSelectPanelChange', range); this.__emit('currentSelectPanelChange', range);
}, },
onEsc(e) {
this.__emit('esc', e);
},
getHourSelect(hour) { getHourSelect(hour) {
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this; const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this;
@ -107,6 +110,7 @@ const Combobox = {
type="hour" type="hour"
onSelect={this.onItemChange} onSelect={this.onItemChange}
onMouseenter={() => this.onEnterSelectPanel('hour')} onMouseenter={() => this.onEnterSelectPanel('hour')}
onEsc={this.onEsc}
/> />
); );
}, },
@ -134,6 +138,7 @@ const Combobox = {
type="minute" type="minute"
onSelect={this.onItemChange} onSelect={this.onItemChange}
onMouseenter={() => this.onEnterSelectPanel('minute')} onMouseenter={() => this.onEnterSelectPanel('minute')}
onEsc={this.onEsc}
/> />
); );
}, },
@ -161,6 +166,7 @@ const Combobox = {
type="second" type="second"
onSelect={this.onItemChange} onSelect={this.onItemChange}
onMouseenter={() => this.onEnterSelectPanel('second')} onMouseenter={() => this.onEnterSelectPanel('second')}
onEsc={this.onEsc}
/> />
); );
}, },
@ -185,6 +191,7 @@ const Combobox = {
type="ampm" type="ampm"
onSelect={this.onItemChange} onSelect={this.onItemChange}
onMouseenter={() => this.onEnterSelectPanel('ampm')} onMouseenter={() => this.onEnterSelectPanel('ampm')}
onEsc={this.onEsc}
/> />
); );
}, },

18
components/vc-time-picker/Header.jsx
View File

@ -49,15 +49,13 @@ const Header = {
} }
}, },
watch: { watch: {
$props: { value(val) {
handler: function(nextProps) { this.$nextTick(() => {
const { value, format } = nextProps;
this.setState({ this.setState({
str: (value && value.format(format)) || '', str: (val && val.format(this.format)) || '',
invalid: false, invalid: false,
}); });
}, });
deep: true,
}, },
}, },
@ -78,7 +76,6 @@ const Header = {
disabledHours, disabledHours,
disabledMinutes, disabledMinutes,
disabledSeconds, disabledSeconds,
allowEmpty,
value: originalValue, value: originalValue,
} = this; } = this;
@ -139,13 +136,8 @@ const Header = {
} else if (originalValue !== value) { } else if (originalValue !== value) {
this.__emit('change', value); this.__emit('change', value);
} }
} else if (allowEmpty) {
this.__emit('change', null);
} else { } else {
this.setState({ this.__emit('change', null);
invalid: true,
});
return;
} }
this.setState({ this.setState({

14
components/vc-time-picker/Panel.jsx
View File

@ -75,11 +75,9 @@ const Panel = {
}, },
watch: { watch: {
value(val) { value(val) {
if (val) { this.setState({
this.setState({ sValue: val,
sValue: val, });
});
}
}, },
}, },
@ -101,7 +99,9 @@ const Panel = {
close() { close() {
this.__emit('esc'); this.__emit('esc');
}, },
onEsc(e) {
this.__emit('esc', e);
},
disabledHours2() { disabledHours2() {
const { use12Hours, disabledHours } = this; const { use12Hours, disabledHours } = this;
let disabledOptions = disabledHours(); let disabledOptions = disabledHours();
@ -191,7 +191,6 @@ const Panel = {
disabledMinutes={disabledMinutes} disabledMinutes={disabledMinutes}
disabledSeconds={disabledSeconds} disabledSeconds={disabledSeconds}
onChange={this.onChange} onChange={this.onChange}
allowEmpty={allowEmpty}
focusOnOpen={focusOnOpen} focusOnOpen={focusOnOpen}
onKeydown={keydown} onKeydown={keydown}
inputReadOnly={inputReadOnly} inputReadOnly={inputReadOnly}
@ -215,6 +214,7 @@ const Panel = {
disabledSeconds={disabledSeconds} disabledSeconds={disabledSeconds}
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
use12Hours={use12Hours} use12Hours={use12Hours}
onEsc={this.onEsc}
isAM={this.isAM()} isAM={this.isAM()}
/> />
{addon(this)} {addon(this)}

26
components/vc-time-picker/Select.jsx
View File

@ -1,6 +1,8 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import classnames from 'classnames'; import classnames from 'classnames';
import raf from 'raf';
function noop() {} function noop() {}
const scrollTo = (element, to, duration) => { const scrollTo = (element, to, duration) => {
const requestAnimationFrame = const requestAnimationFrame =
@ -10,13 +12,15 @@ const scrollTo = (element, to, duration) => {
}; };
// jump to target if duration zero // jump to target if duration zero
if (duration <= 0) { if (duration <= 0) {
element.scrollTop = to; raf(() => {
element.scrollTop = to;
});
return; return;
} }
const difference = to - element.scrollTop; const difference = to - element.scrollTop;
const perTick = (difference / duration) * 10; const perTick = (difference / duration) * 10;
requestAnimationFrame(() => { raf(() => {
element.scrollTop += perTick; element.scrollTop += perTick;
if (element.scrollTop === to) return; if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10); scrollTo(element, to, duration - 10);
@ -58,7 +62,9 @@ const Select = {
const { type } = this; const { type } = this;
this.__emit('select', type, value); this.__emit('select', type, value);
}, },
onEsc(e) {
this.__emit('esc', e);
},
getOptions() { getOptions() {
const { options, selectedIndex, prefixCls } = this; const { options, selectedIndex, prefixCls } = this;
return options.map((item, index) => { return options.map((item, index) => {
@ -71,8 +77,20 @@ const Select = {
: () => { : () => {
this.onSelect(item.value); this.onSelect(item.value);
}; };
const onKeyDown = e => {
if (e.keyCode === 13) onClick();
else if (e.keyCode === 27) this.onEsc();
};
return ( return (
<li role="button" onClick={onClick} class={cls} key={index} disabled={item.disabled}> <li
role="button"
onClick={onClick}
class={cls}
key={index}
disabled={item.disabled}
tabIndex="0"
onKeydown={onKeyDown}
>
{item.value} {item.value}
</li> </li>
); );

24
components/vc-time-picker/TimePicker.jsx
View File

@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import classNames from 'classnames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { import {
@ -220,7 +221,6 @@ export default {
showMinute={showMinute} showMinute={showMinute}
showSecond={showSecond} showSecond={showSecond}
onEsc={this.onEsc} onEsc={this.onEsc}
allowEmpty={allowEmpty}
format={this.getFormat()} format={this.getFormat()}
placeholder={placeholder} placeholder={placeholder}
disabledHours={disabledHours} disabledHours={disabledHours}
@ -240,12 +240,8 @@ export default {
}, },
getPopupClassName() { getPopupClassName() {
const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this; const { showHour, showMinute, showSecond, use12Hours, prefixCls, popupClassName } = this;
let popupClassName = this.popupClassName;
// Keep it for old compatibility
if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
popupClassName += ` ${prefixCls}-panel-narrow`;
}
let selectColumnCount = 0; let selectColumnCount = 0;
if (showHour) { if (showHour) {
selectColumnCount += 1; selectColumnCount += 1;
@ -259,8 +255,14 @@ export default {
if (use12Hours) { if (use12Hours) {
selectColumnCount += 1; selectColumnCount += 1;
} }
popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`; // Keep it for old compatibility
return popupClassName; return classNames(
popupClassName,
{
[`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
},
`${prefixCls}-panel-column-${selectColumnCount}`,
);
}, },
setOpen(open) { setOpen(open) {
@ -291,8 +293,8 @@ export default {
}, },
renderClearButton() { renderClearButton() {
const { sValue } = this; const { sValue } = this;
const { prefixCls, allowEmpty, clearText } = this.$props; const { prefixCls, allowEmpty, clearText, disabled } = this.$props;
if (!allowEmpty || !sValue) { if (!allowEmpty || !sValue || disabled) {
return null; return null;
} }
const clearIcon = getComponentFromProp(this, 'clearIcon'); const clearIcon = getComponentFromProp(this, 'clearIcon');

2
components/vc-time-picker/index.js
View File

@ -1,2 +1,2 @@
// based on rc-time-picker 3.6.2 // based on rc-time-picker 3.7.3
export { default } from './TimePicker'; export { default } from './TimePicker';