feat: update time-picker

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

@@ -1,9 +1,20 @@
 import { mount } from '@vue/test-utils';
 import VcTimePicker from '../../vc-time-picker/TimePicker';
 import TimePicker from '..';
+import moment from 'moment';
 import focusTest from '../../../tests/shared/focusTest';
 
 describe('TimePicker', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
   focusTest(TimePicker);
 
   it('renders addon correctly', () => {
@@ -20,4 +31,26 @@ describe('TimePicker', () => {
     });
     expect(addonWrapper.html()).toMatchSnapshot();
   });
+
+  it('allowEmpty deprecated', () => {
+    mount({
+      render() {
+        return <TimePicker allowEmpty />;
+      },
+    });
+    expect(errorSpy).toBeCalledWith(
+      'Warning: `allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
+    );
+  });
+  it('not render clean icon when allowClear is false', () => {
+    const wrapper = mount(
+      {
+        render() {
+          return <TimePicker defaultValue={moment('2000-01-01 00:00:00')} allowClear={false} />;
+        },
+      }
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
 });

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

@@ -3,7 +3,7 @@
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | addon | some addon to timepicker panel bottom | slot \| slot-scope | - |
-| allowEmpty | allow clearing text | boolean | true |
+| 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() |
@@ -21,6 +21,7 @@
 | 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 |

components/time-picker/index.jsx

@@ -1,9 +1,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 interopDefault from '../_util/interopDefault';
 import {
@@ -14,6 +16,7 @@ import {
   isValidElement,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
+import { ConfigConsumerProps } from '../config-provider';
 
 export function generateShowHourMinuteSecond(format) {
   // Ref: http://momentjs.com/docs/#/parsing/string-format/
@@ -53,10 +56,12 @@ export const TimePickerProps = () => ({
   minuteStep: PropTypes.number,
   secondStep: PropTypes.number,
   allowEmpty: PropTypes.bool,
+  allowClear: PropTypes.bool,
   inputReadOnly: PropTypes.bool,
   clearText: PropTypes.string,
   defaultOpenValue: PropTypes.object,
   popupClassName: PropTypes.string,
+  popupStyle: PropTypes.object,
   suffixIcon: PropTypes.any,
   align: PropTypes.object,
   placement: PropTypes.any,
@@ -69,7 +74,6 @@ const TimePicker = {
   name: 'ATimePicker',
   mixins: [BaseMixin],
   props: initDefaultProps(TimePickerProps(), {
-    prefixCls: 'ant-time-picker',
     align: {
       offset: [0, -2],
     },
@@ -94,6 +98,10 @@ const TimePicker = {
     if (value && !interopDefault(moment).isMoment(value)) {
       throw new Error('The value/defaultValue of TimePicker must be a moment object, ');
     }
+    warning(
+      !hasProp(this, 'allowEmpty'),
+      '`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
+    );
     return {
       sValue: value,
     };
@@ -135,23 +143,15 @@ const TimePicker = {
       return 'HH:mm:ss';
     },
 
-    renderTimePicker(locale) {
-      const props = getOptionProps(this);
-      delete props.defaultValue;
+    getAllowClear() {
+      const { allowClear, allowEmpty } = this.$props;
+      if ('allowClear' in this.$props) {
+        return allowClear;
+      }
+      return allowEmpty;
+    },
 
-      const format = this.getDefaultFormat();
-      const className = {
-        [`${props.prefixCls}-${props.size}`]: !!props.size,
-      };
-      const tempAddon = getComponentFromProp(this, 'addon', {}, false);
-      const addon = panel => {
-        return tempAddon ? (
-          <div class={`${props.prefixCls}-panel-addon`}>
-            {typeof tempAddon === 'function' ? tempAddon(panel) : tempAddon}
-          </div>
-        ) : null;
-      };
-      const { prefixCls, getPopupContainer } = props;
+    renderInputIcon(prefixCls) {
       let suffixIcon = getComponentFromProp(this, 'suffixIcon');
       suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
       const clockIcon = (suffixIcon &&
@@ -163,25 +163,56 @@ const TimePicker = {
           <span class={`${prefixCls}-clock-icon`}>{suffixIcon}</span>
         ))) || <Icon type="clock-circle" class={`${prefixCls}-clock-icon`} theme="outlined" />;
 
-      const inputIcon = <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
+      return <span class={`${prefixCls}-icon`}>{clockIcon}</span>;
+    },
+
+    renderClearIcon(prefixCls) {
+      const clearIcon = <Icon type="close-circle" class={`${prefixCls}-clear`} theme="filled" />;
+      return clearIcon;
+    },
+
+    renderTimePicker(locale) {
+      let props = getOptionProps(this);
+      props = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']);
 
-      const clearIcon = (
-        <Icon type="close-circle" class={`${prefixCls}-panel-clear-btn-icon`} theme="filled" />
-      );
+      const {
+        prefixCls: customizePrefixCls,
+        getPopupContainer,
+        placeholder,
+        size,
+      } = props;
+      const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+      const prefixCls = getPrefixCls('time-picker', customizePrefixCls);
+
+      const format = this.getDefaultFormat();
+      const pickerClassName = {
+        [`${prefixCls}-${size}`]: !!size,
+      };
+      const tempAddon = getComponentFromProp(this, 'addon', {}, false);
+      const pickerAddon = panel => {
+        return tempAddon ? (
+          <div class={`${prefixCls}-panel-addon`}>
+            {typeof tempAddon === 'function' ? tempAddon(panel) : tempAddon}
+          </div>
+        ) : null;
+      };
+      const inputIcon = this.renderInputIcon(prefixCls);
+      const clearIcon = this.renderClearIcon(prefixCls);
       const { getPopupContainer: getContextPopupContainer } = this.configProvider;
       const timeProps = {
         props: {
           ...generateShowHourMinuteSecond(format),
           ...props,
+          prefixCls,
           getPopupContainer: getPopupContainer || getContextPopupContainer,
           format,
           value: this.sValue,
-          placeholder: props.placeholder === undefined ? locale.placeholder : props.placeholder,
-          addon,
+          placeholder: placeholder === undefined ? locale.placeholder : placeholder,
+          addon: pickerAddon,
           inputIcon,
           clearIcon,
         },
-        class: className,
+        class: pickerClassName,
         ref: 'timePicker',
         on: {
           ...this.$listeners,

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

@@ -4,7 +4,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | addon | 选择框底部显示自定义的内容 | slot \| slot-scope | 无 |
-| allowEmpty | 是否展示清除按钮 | boolean | true |
+| allowClear | 是否展示清除按钮 | boolean | true |
 | autoFocus | 自动获取焦点 | boolean | false |
 | clearText | 清除按钮的提示文案 | string | clear |
 | defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() |
@@ -22,6 +22,7 @@
 | 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 |