feat: time-picker add clearIcon
tangjinzhou
parent
00a41f5ec5
commit
1d5e5b1f7d
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'timeline', // dev components
|
||||
componentName: 'time-picker', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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/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><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/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>`;
|
||||
|
||||
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="">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import VcTimePicker from '../../vc-time-picker/TimePicker';
|
|||
import TimePicker from '..';
|
||||
import moment from 'moment';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
describe('TimePicker', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
|
@ -16,6 +17,7 @@ describe('TimePicker', () => {
|
|||
});
|
||||
|
||||
focusTest(TimePicker);
|
||||
mountTest(TimePicker);
|
||||
|
||||
it('renders addon correctly', () => {
|
||||
const wrapper = mount({
|
||||
|
|
@ -39,7 +41,7 @@ describe('TimePicker', () => {
|
|||
},
|
||||
});
|
||||
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', () => {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default {
|
|||
return (
|
||||
<div id="components-timepicker-demo">
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<demo-sort cols="2">
|
||||
<Hours />
|
||||
<Addon />
|
||||
<Basic />
|
||||
|
|
@ -40,6 +41,7 @@ export default {
|
|||
<Size />
|
||||
<Value />
|
||||
<Suffix />
|
||||
</demo-sort>
|
||||
<api>
|
||||
<CN slot="cn" />
|
||||
<US />
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| addon | some addon to timepicker panel bottom | slot \| slot-scope | - |
|
||||
| allowClear | allow clearing text | boolean | true |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| 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() |
|
||||
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
|
||||
| disabled | determine whether the TimePicker is disabled | boolean | false |
|
||||
| disabledHours | to specify the hours that cannot be selected | function() | - |
|
||||
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
|
||||
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
|
||||
| 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) | - |
|
||||
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
|
||||
| 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 |
|
||||
| minuteStep | interval between minutes in picker | number | 1 |
|
||||
| open(.sync) | whether to popup panel | boolean | false |
|
||||
| placeholder | display when there's no value | string | "Select a time" |
|
||||
| popupClassName | className of panel | string | '' |
|
||||
| popupStyle | style of panel | object | - |
|
||||
| secondStep | interval between seconds in picker | number | 1 |
|
||||
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
|
||||
| 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/) | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addon | some addon to timepicker panel bottom | slot \| slot-scope | - | |
|
||||
| allowClear | allow clearing text | boolean | true | |
|
||||
| autoFocus | get focus when component mounted | boolean | false | |
|
||||
| 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() | |
|
||||
| defaultValue | to set default time | [moment](http://momentjs.com/) | - | |
|
||||
| disabled | determine whether the TimePicker is disabled | boolean | false | |
|
||||
| disabledHours | to specify the hours that cannot be selected | function() | - | |
|
||||
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - | |
|
||||
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | |
|
||||
| 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) | - | |
|
||||
| hideDisabledOptions | hide the options that can not be selected | boolean | false | |
|
||||
| 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 | |
|
||||
| minuteStep | interval between minutes in picker | number | 1 | |
|
||||
| open(.sync) | whether to popup panel | boolean | false | |
|
||||
| placeholder | display when there's no value | string | "Select a time" | |
|
||||
| popupClassName | className of panel | string | '' | |
|
||||
| popupStyle | style of panel | object | - | |
|
||||
| secondStep | interval between seconds in picker | number | 1 | |
|
||||
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - | |
|
||||
| clearIcon | The custom clear icon | string \| VNode \| slot | - | 1.5.0 |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import * as moment from 'moment';
|
|||
import omit from 'omit.js';
|
||||
import VcTimePicker from '../vc-time-picker';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from './locale/en_US';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import warning from '../_util/warning';
|
||||
import Icon from '../icon';
|
||||
import enUS from './locale/en_US';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import {
|
||||
initDefaultProps,
|
||||
|
|
@ -70,6 +70,8 @@ export const TimePickerProps = () => ({
|
|||
transitionName: PropTypes.string,
|
||||
autoFocus: PropTypes.bool,
|
||||
addon: PropTypes.any,
|
||||
clearIcon: PropTypes.any,
|
||||
locale: PropTypes.object,
|
||||
});
|
||||
|
||||
const TimePicker = {
|
||||
|
|
@ -87,6 +89,7 @@ const TimePicker = {
|
|||
placement: 'bottomLeft',
|
||||
transitionName: 'slide-up',
|
||||
focusOnOpen: true,
|
||||
allowClear: true,
|
||||
}),
|
||||
model: {
|
||||
prop: 'value',
|
||||
|
|
@ -107,7 +110,8 @@ const TimePicker = {
|
|||
}
|
||||
warning(
|
||||
!hasProp(this, 'allowEmpty'),
|
||||
'`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
|
||||
'TimePicker',
|
||||
'`allowEmpty` is deprecated. Please use `allowClear` instead.',
|
||||
);
|
||||
return {
|
||||
sValue: value,
|
||||
|
|
@ -119,6 +123,30 @@ const TimePicker = {
|
|||
},
|
||||
},
|
||||
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) {
|
||||
this.popupRef = ref;
|
||||
},
|
||||
|
|
@ -143,42 +171,29 @@ const TimePicker = {
|
|||
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) {
|
||||
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
const clockIcon = (suffixIcon &&
|
||||
(isValidElement(suffixIcon) ? (
|
||||
isValidElement(suffixIcon) &&
|
||||
cloneElement(suffixIcon, {
|
||||
class: `${prefixCls}-clock-icon`,
|
||||
})
|
||||
) : (
|
||||
<span class={`${prefixCls}-clock-icon`}>{suffixIcon}</span>
|
||||
))) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} theme="outlined" />;
|
||||
})) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} />;
|
||||
|
||||
return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
|
||||
},
|
||||
|
||||
renderClearIcon(prefixCls) {
|
||||
const clearIcon = <Icon type="close-circle" class={`${prefixCls}-clear`} theme="filled" />;
|
||||
return clearIcon;
|
||||
const clearIcon = getComponentFromProp(this, '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) {
|
||||
|
|
@ -235,7 +250,7 @@ const TimePicker = {
|
|||
return (
|
||||
<LocaleReceiver
|
||||
componentName="TimePicker"
|
||||
defaultLocale={defaultLocale}
|
||||
defaultLocale={this.getDefaultLocale()}
|
||||
scopedSlots={{ default: this.renderTimePicker }}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| addon | 选择框底部显示自定义的内容 | slot \| slot-scope | 无 |
|
||||
| allowClear | 是否展示清除按钮 | boolean | true |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| clearText | 清除按钮的提示文案 | string | clear |
|
||||
| defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() |
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
|
||||
| disabled | 禁用全部操作 | boolean | false |
|
||||
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
|
||||
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
|
||||
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
|
||||
| format | 展示的时间格式 | string | "HH:mm:ss" |
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
|
||||
| hourStep | 小时选项间隔 | number | 1 |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |
|
||||
| minuteStep | 分钟选项间隔 | number | 1 |
|
||||
| open(.sync) | 面板是否打开 | boolean | false |
|
||||
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
|
||||
| popupClassName | 弹出层类名 | string | '' |
|
||||
| popupStyle | 弹出层样式对象 | object | - |
|
||||
| secondStep | 秒选项间隔 | number | 1 |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
|
||||
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
|
||||
| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addon | 选择框底部显示自定义的内容 | slot \| slot-scope | 无 | |
|
||||
| allowClear | 是否展示清除按钮 | boolean | true | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| clearText | 清除按钮的提示文案 | string | clear | |
|
||||
| defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() | |
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | |
|
||||
| disabled | 禁用全部操作 | boolean | false | |
|
||||
| disabledHours | 禁止选择部分小时选项 | function() | 无 | |
|
||||
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 | |
|
||||
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 | |
|
||||
| format | 展示的时间格式 | string | "HH:mm:ss" | |
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | |
|
||||
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
||||
| hourStep | 小时选项间隔 | number | 1 | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
| minuteStep | 分钟选项间隔 | number | 1 | |
|
||||
| open(.sync) | 面板是否打开 | boolean | false | |
|
||||
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" | |
|
||||
| popupClassName | 弹出层类名 | string | '' | |
|
||||
| popupStyle | 弹出层样式对象 | object | - | |
|
||||
| secondStep | 秒选项间隔 | number | 1 | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - | |
|
||||
| clearIcon | 自定义的清除图标 | string \| VNode \| slot | - | 1.5.0 |
|
||||
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
|
||||
| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 | |
|
||||
|
||||
### 事件
|
||||
|
||||
|
|
|
|||
|
|
@ -82,6 +82,9 @@ const Combobox = {
|
|||
onEnterSelectPanel(range) {
|
||||
this.__emit('currentSelectPanelChange', range);
|
||||
},
|
||||
onEsc(e) {
|
||||
this.__emit('esc', e);
|
||||
},
|
||||
|
||||
getHourSelect(hour) {
|
||||
const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this;
|
||||
|
|
@ -107,6 +110,7 @@ const Combobox = {
|
|||
type="hour"
|
||||
onSelect={this.onItemChange}
|
||||
onMouseenter={() => this.onEnterSelectPanel('hour')}
|
||||
onEsc={this.onEsc}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -134,6 +138,7 @@ const Combobox = {
|
|||
type="minute"
|
||||
onSelect={this.onItemChange}
|
||||
onMouseenter={() => this.onEnterSelectPanel('minute')}
|
||||
onEsc={this.onEsc}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -161,6 +166,7 @@ const Combobox = {
|
|||
type="second"
|
||||
onSelect={this.onItemChange}
|
||||
onMouseenter={() => this.onEnterSelectPanel('second')}
|
||||
onEsc={this.onEsc}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -185,6 +191,7 @@ const Combobox = {
|
|||
type="ampm"
|
||||
onSelect={this.onItemChange}
|
||||
onMouseenter={() => this.onEnterSelectPanel('ampm')}
|
||||
onEsc={this.onEsc}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,15 +49,13 @@ const Header = {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
$props: {
|
||||
handler: function(nextProps) {
|
||||
const { value, format } = nextProps;
|
||||
value(val) {
|
||||
this.$nextTick(() => {
|
||||
this.setState({
|
||||
str: (value && value.format(format)) || '',
|
||||
str: (val && val.format(this.format)) || '',
|
||||
invalid: false,
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -78,7 +76,6 @@ const Header = {
|
|||
disabledHours,
|
||||
disabledMinutes,
|
||||
disabledSeconds,
|
||||
allowEmpty,
|
||||
value: originalValue,
|
||||
} = this;
|
||||
|
||||
|
|
@ -139,13 +136,8 @@ const Header = {
|
|||
} else if (originalValue !== value) {
|
||||
this.__emit('change', value);
|
||||
}
|
||||
} else if (allowEmpty) {
|
||||
this.__emit('change', null);
|
||||
} else {
|
||||
this.setState({
|
||||
invalid: true,
|
||||
});
|
||||
return;
|
||||
this.__emit('change', null);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
|
|
|
|||
|
|
@ -75,11 +75,9 @@ const Panel = {
|
|||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
this.setState({
|
||||
sValue: val,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -101,7 +99,9 @@ const Panel = {
|
|||
close() {
|
||||
this.__emit('esc');
|
||||
},
|
||||
|
||||
onEsc(e) {
|
||||
this.__emit('esc', e);
|
||||
},
|
||||
disabledHours2() {
|
||||
const { use12Hours, disabledHours } = this;
|
||||
let disabledOptions = disabledHours();
|
||||
|
|
@ -191,7 +191,6 @@ const Panel = {
|
|||
disabledMinutes={disabledMinutes}
|
||||
disabledSeconds={disabledSeconds}
|
||||
onChange={this.onChange}
|
||||
allowEmpty={allowEmpty}
|
||||
focusOnOpen={focusOnOpen}
|
||||
onKeydown={keydown}
|
||||
inputReadOnly={inputReadOnly}
|
||||
|
|
@ -215,6 +214,7 @@ const Panel = {
|
|||
disabledSeconds={disabledSeconds}
|
||||
onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
|
||||
use12Hours={use12Hours}
|
||||
onEsc={this.onEsc}
|
||||
isAM={this.isAM()}
|
||||
/>
|
||||
{addon(this)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import classnames from 'classnames';
|
||||
import raf from 'raf';
|
||||
|
||||
function noop() {}
|
||||
const scrollTo = (element, to, duration) => {
|
||||
const requestAnimationFrame =
|
||||
|
|
@ -10,13 +12,15 @@ const scrollTo = (element, to, duration) => {
|
|||
};
|
||||
// jump to target if duration zero
|
||||
if (duration <= 0) {
|
||||
raf(() => {
|
||||
element.scrollTop = to;
|
||||
});
|
||||
return;
|
||||
}
|
||||
const difference = to - element.scrollTop;
|
||||
const perTick = (difference / duration) * 10;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
raf(() => {
|
||||
element.scrollTop += perTick;
|
||||
if (element.scrollTop === to) return;
|
||||
scrollTo(element, to, duration - 10);
|
||||
|
|
@ -58,7 +62,9 @@ const Select = {
|
|||
const { type } = this;
|
||||
this.__emit('select', type, value);
|
||||
},
|
||||
|
||||
onEsc(e) {
|
||||
this.__emit('esc', e);
|
||||
},
|
||||
getOptions() {
|
||||
const { options, selectedIndex, prefixCls } = this;
|
||||
return options.map((item, index) => {
|
||||
|
|
@ -71,8 +77,20 @@ const Select = {
|
|||
: () => {
|
||||
this.onSelect(item.value);
|
||||
};
|
||||
const onKeyDown = e => {
|
||||
if (e.keyCode === 13) onClick();
|
||||
else if (e.keyCode === 27) this.onEsc();
|
||||
};
|
||||
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}
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import moment from 'moment';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import {
|
||||
|
|
@ -220,7 +221,6 @@ export default {
|
|||
showMinute={showMinute}
|
||||
showSecond={showSecond}
|
||||
onEsc={this.onEsc}
|
||||
allowEmpty={allowEmpty}
|
||||
format={this.getFormat()}
|
||||
placeholder={placeholder}
|
||||
disabledHours={disabledHours}
|
||||
|
|
@ -240,12 +240,8 @@ export default {
|
|||
},
|
||||
|
||||
getPopupClassName() {
|
||||
const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this;
|
||||
let popupClassName = this.popupClassName;
|
||||
// Keep it for old compatibility
|
||||
if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
|
||||
popupClassName += ` ${prefixCls}-panel-narrow`;
|
||||
}
|
||||
const { showHour, showMinute, showSecond, use12Hours, prefixCls, popupClassName } = this;
|
||||
|
||||
let selectColumnCount = 0;
|
||||
if (showHour) {
|
||||
selectColumnCount += 1;
|
||||
|
|
@ -259,8 +255,14 @@ export default {
|
|||
if (use12Hours) {
|
||||
selectColumnCount += 1;
|
||||
}
|
||||
popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`;
|
||||
return popupClassName;
|
||||
// Keep it for old compatibility
|
||||
return classNames(
|
||||
popupClassName,
|
||||
{
|
||||
[`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
|
||||
},
|
||||
`${prefixCls}-panel-column-${selectColumnCount}`,
|
||||
);
|
||||
},
|
||||
|
||||
setOpen(open) {
|
||||
|
|
@ -291,8 +293,8 @@ export default {
|
|||
},
|
||||
renderClearButton() {
|
||||
const { sValue } = this;
|
||||
const { prefixCls, allowEmpty, clearText } = this.$props;
|
||||
if (!allowEmpty || !sValue) {
|
||||
const { prefixCls, allowEmpty, clearText, disabled } = this.$props;
|
||||
if (!allowEmpty || !sValue || disabled) {
|
||||
return null;
|
||||
}
|
||||
const clearIcon = getComponentFromProp(this, 'clearIcon');
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
// based on rc-time-picker 3.6.2
|
||||
// based on rc-time-picker 3.7.3
|
||||
export { default } from './TimePicker';
|
||||
|
|
|
|||
Loading…
Reference in New Issue