feat: update time-picker

antdv-demo

@@ -1 +1 @@
-Subproject commit c2521df74700792b5cd6c353cf9fce91fbd40e19
+Subproject commit aae9db4ae607a00f4c8482c159bfaf71fe982595

components/time-picker/index.jsx

@@ -1,4 +1,5 @@
 import omit from 'omit.js';
+import { inject, provide } from 'vue';
 import VcTimePicker from '../vc-time-picker';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import BaseMixin from '../_util/BaseMixin';
@@ -13,11 +14,9 @@ import {
   getOptionProps,
   getComponent,
   isValidElement,
-  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
 import {
   checkValidate,
   stringToMoment,
@@ -69,10 +68,21 @@ export const TimePickerProps = () => ({
   clearIcon: PropTypes.any,
   locale: PropTypes.object,
   valueFormat: PropTypes.string,
+  onChange: PropTypes.func,
+  onAmPmChange: PropTypes.func,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeydown: PropTypes.func,
+  onOpenChange: PropTypes.func,
+  'onUpdate:value': PropTypes.func,
+  'onUpdate:open': PropTypes.func,
 });
 
 const TimePicker = {
   name: 'ATimePicker',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: initDefaultProps(TimePickerProps(), {
     align: {
@@ -88,18 +98,15 @@ const TimePicker = {
     focusOnOpen: true,
     allowClear: true,
   }),
-  model: {
-    prop: 'value',
-    event: 'change',
+  created() {
+    provide('savePopupRef', this.savePopupRef);
   },
-  provide() {
+  setup() {
     return {
-      savePopupRef: this.savePopupRef,
+      configProvider: inject('configProvider', ConfigConsumerProps),
     };
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
+
   data() {
     const { value, defaultValue, valueFormat } = this;
 
@@ -148,16 +155,17 @@ const TimePicker = {
     savePopupRef(ref) {
       this.popupRef = ref;
     },
+    saveTimePicker(timePickerRef) {
+      this.timePickerRef = timePickerRef;
+    },
     handleChange(value) {
       if (!hasProp(this, 'value')) {
         this.setState({ sValue: value });
       }
       const { format = 'HH:mm:ss' } = this;
-      this.$emit(
-        'change',
-        this.valueFormat ? momentToString(value, this.valueFormat) : value,
-        (value && value.format(format)) || '',
-      );
+      const val = this.valueFormat ? momentToString(value, this.valueFormat) : value;
+      this.$emit('update:value', val);
+      this.$emit('change', val, (value && value.format(format)) || '');
     },
 
     handleOpenClose({ open }) {
@@ -166,11 +174,11 @@ const TimePicker = {
     },
 
     focus() {
-      this.$refs.timePicker.focus();
+      this.timePickerRef.focus();
     },
 
     blur() {
-      this.$refs.timePicker.blur();
+      this.timePickerRef.blur();
     },
 
     renderInputIcon(prefixCls) {
@@ -201,13 +209,14 @@ const TimePicker = {
     renderTimePicker(locale) {
       let props = getOptionProps(this);
       props = omit(props, ['defaultValue', 'suffixIcon', 'allowEmpty', 'allowClear']);
-
+      const { class: className } = this.$attrs;
       const { prefixCls: customizePrefixCls, getPopupContainer, placeholder, size } = props;
       const getPrefixCls = this.configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('time-picker', customizePrefixCls);
 
       const format = this.getDefaultFormat();
       const pickerClassName = {
+        [className]: className,
         [`${prefixCls}-${size}`]: !!size,
       };
       const tempAddon = getComponent(this, 'addon', {}, false);
@@ -222,27 +231,23 @@ const TimePicker = {
       const clearIcon = this.renderClearIcon(prefixCls);
       const { getPopupContainer: getContextPopupContainer } = this.configProvider;
       const timeProps = {
-        props: {
-          ...generateShowHourMinuteSecond(format),
-          ...props,
-          allowEmpty: this.getAllowClear(),
-          prefixCls,
-          getPopupContainer: getPopupContainer || getContextPopupContainer,
-          format,
-          value: this.sValue,
-          placeholder: placeholder === undefined ? locale.placeholder : placeholder,
-          addon: pickerAddon,
-          inputIcon,
-          clearIcon,
-        },
+        ...generateShowHourMinuteSecond(format),
+        ...props,
+        ...this.$attrs,
+        allowEmpty: this.getAllowClear(),
+        prefixCls,
+        getPopupContainer: getPopupContainer || getContextPopupContainer,
+        format,
+        value: this.sValue,
+        placeholder: placeholder === undefined ? locale.placeholder : placeholder,
+        addon: pickerAddon,
+        inputIcon,
+        clearIcon,
         class: pickerClassName,
-        ref: 'timePicker',
-        on: {
-          ...getListeners(this),
-          change: this.handleChange,
-          open: this.handleOpenClose,
-          close: this.handleOpenClose,
-        },
+        ref: this.saveTimePicker,
+        onChange: this.handleChange,
+        onOpen: this.handleOpenClose,
+        onClose: this.handleOpenClose,
       };
       return <VcTimePicker {...timeProps} />;
     },
@@ -253,16 +258,15 @@ const TimePicker = {
       <LocaleReceiver
         componentName="TimePicker"
         defaultLocale={this.getDefaultLocale()}
-        scopedSlots={{ default: this.renderTimePicker }}
+        children={this.renderTimePicker}
       />
     );
   },
 };
 
 /* istanbul ignore next */
-TimePicker.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(TimePicker.name, TimePicker);
+TimePicker.install = function(app) {
+  app.component(TimePicker.name, TimePicker);
 };
 
 export default TimePicker;

components/vc-time-picker/Combobox.jsx

@@ -20,6 +20,7 @@ const formatOption = (option, disabledOptions) => {
 };
 
 const Combobox = {
+  inheritAttrs: false,
   mixins: [BaseMixin],
   name: 'Combobox',
   props: {

components/vc-time-picker/Header.jsx

@@ -3,6 +3,8 @@ import BaseMixin from '../_util/BaseMixin';
 import moment from 'moment';
 
 const Header = {
+  inheritAttrs: false,
+  name: 'Header',
   mixins: [BaseMixin],
   props: {
     format: PropTypes.string,
@@ -41,8 +43,8 @@ const Header = {
       // Wait one frame for the panel to be positioned before focusing
       const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
       requestAnimationFrame(() => {
-        this.$refs.input.focus();
-        this.$refs.input.select();
+        this.refInput.focus();
+        this.refInput.select();
       });
     }
   },
@@ -160,19 +162,14 @@ const Header = {
       return (
         <input
           class={`${prefixCls}-input ${invalidClass}`}
-          ref="input"
+          ref={ref => {
+            this.refInput = ref;
+          }}
           onKeydown={this.onKeyDown}
           value={str}
           placeholder={placeholder}
           onInput={this.onInputChange}
           readonly={!!inputReadOnly}
-          {...{
-            directives: [
-              {
-                name: 'ant-input',
-              },
-            ],
-          }}
         />
       );
     },

components/vc-time-picker/Panel.jsx

@@ -1,9 +1,10 @@
 import moment from 'moment';
+import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import Header from './Header';
 import Combobox from './Combobox';
-import { getComponent, getListeners } from '../_util/props-util';
+import { getComponent } from '../_util/props-util';
 
 function noop() {}
 
@@ -31,6 +32,8 @@ function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
 }
 
 const Panel = {
+  name: 'Panel',
+  inheritAttrs: false,
   mixins: [BaseMixin],
   props: {
     clearText: PropTypes.string,
@@ -144,8 +147,8 @@ const Panel = {
       sValue,
       currentSelectPanel,
     } = this;
+    const { class: className, onEsc = noop, onKeydown = noop } = this.$attrs;
     const clearIcon = getComponent(this, 'clearIcon');
-    const { esc = noop, keydown = noop } = getListeners(this);
 
     const disabledHourOptions = this.disabledHours2();
     const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);
@@ -173,14 +176,14 @@ const Panel = {
       secondOptions,
     );
     return (
-      <div class={`${prefixCls}-inner`}>
+      <div className={classNames(className, `${prefixCls}-inner`)}>
         <Header
           clearText={clearText}
           prefixCls={prefixCls}
           defaultOpenValue={validDefaultOpenValue}
           value={sValue}
           currentSelectPanel={currentSelectPanel}
-          onEsc={esc}
+          onEsc={onEsc}
           format={format}
           placeholder={placeholder}
           hourOptions={hourOptions}
@@ -191,7 +194,7 @@ const Panel = {
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
           focusOnOpen={focusOnOpen}
-          onKeydown={keydown}
+          onKeydown={onKeydown}
           inputReadOnly={inputReadOnly}
           clearIcon={clearIcon}
         />

components/vc-time-picker/Select.jsx

@@ -23,7 +23,9 @@ const scrollTo = (element, to, duration) => {
 };
 
 const Select = {
+  name: 'Select',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     prefixCls: PropTypes.string,
     options: PropTypes.array,
@@ -101,6 +103,10 @@ const Select = {
       this.setState({ active: false });
     },
 
+    saveList(node) {
+      this.list = node;
+    },
+
     scrollToSelected(duration) {
       // move to selected item
       const select = this.$el;
@@ -131,7 +137,7 @@ const Select = {
 
     return (
       <div class={cls} onMouseenter={this.handleMouseEnter} onMouseleave={this.handleMouseLeave}>
-        <ul ref="list">{this.getOptions()}</ul>
+        <ul ref={this.saveList}>{this.getOptions()}</ul>
       </div>
     );
   },

components/vc-time-picker/TimePicker.jsx

@@ -15,10 +15,14 @@ import Panel from './Panel';
 import placements from './placements';
 
 function noop() {}
+function refFn(field, component) {
+  this[field] = component;
+}
 
 export default {
   name: 'VcTimePicker',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(
     {
       prefixCls: PropTypes.string,
@@ -93,6 +97,8 @@ export default {
     },
   ),
   data() {
+    this.saveInputRef = refFn.bind(this, 'picker');
+    this.savePanelRef = refFn.bind(this, 'panelInstance');
     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this;
     return {
       sOpen: open,
@@ -210,7 +216,7 @@ export default {
         <Panel
           clearText={clearText}
           prefixCls={`${prefixCls}-panel`}
-          ref="panel"
+          ref={this.savePanelRef}
           value={sValue}
           inputReadOnly={inputReadOnly}
           onChange={this.onPanelChange}
@@ -278,11 +284,11 @@ export default {
     },
 
     focus() {
-      this.$refs.picker.focus();
+      this.picker.focus();
     },
 
     blur() {
-      this.$refs.picker.blur();
+      this.picker.blur();
     },
     onFocus(e) {
       this.__emit('focus', e);
@@ -298,13 +304,11 @@ export default {
       }
       const clearIcon = getComponent(this, 'clearIcon');
       if (isValidElement(clearIcon)) {
-        const { click } = getEvents(clearIcon) || {};
+        const { onClick } = getEvents(clearIcon) || {};
         return cloneElement(clearIcon, {
-          on: {
-            click: (...args) => {
-              if (click) click(...args);
-              this.onClear(...args);
-            },
+          onClick: (...args) => {
+            if (onClick) onClick(...args);
+            this.onClear(...args);
           },
         });
       }
@@ -343,6 +347,7 @@ export default {
       onBlur,
       popupStyle,
     } = this;
+    const { class: className, style } = this.$attrs;
     const popupClassName = this.getPopupClassName();
     const inputIcon = getComponent(this, 'inputIcon');
     return (
@@ -359,12 +364,12 @@ export default {
         popupTransitionName={transitionName}
         popupVisible={sOpen}
         onPopupVisibleChange={this.onVisibleChange}
+        popup={this.getPanelElement()}
       >
-        <template slot="popup">{this.getPanelElement()}</template>
-        <span class={`${prefixCls}`}>
+        <span class={classNames(prefixCls, className)} style={style}>
           <input
             class={`${prefixCls}-input`}
-            ref="picker"
+            ref={this.saveInputRef}
             type="text"
             placeholder={placeholder}
             name={name}

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/slider/demo/basic';
+import demo from '../antdv-demo/docs/time-picker/demo/basic';
 
 export default {
   components: {

examples/index.js

@@ -33,6 +33,7 @@ import {
   Transfer,
   Slider,
   Carousel,
+  TimePicker,
   notification,
   message,
 } from 'ant-design-vue';
@@ -83,4 +84,5 @@ app
   .use(Transfer)
   .use(Slider)
   .use(Carousel)
+  .use(TimePicker)
   .mount('#app');