feat: update vc-time-picker to 3.6.2

components/vc-time-picker/Combobox.jsx

@@ -28,6 +28,7 @@ const Combobox = {
     prefixCls: PropTypes.string,
     value: PropTypes.object,
     // onChange: PropTypes.func,
+    // onAmPmChange: PropTypes.func,
     showHour: PropTypes.bool,
     showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
@@ -71,6 +72,7 @@ const Combobox = {
             }
           }
         }
+        this.__emit('amPmChange', ampm);
       } else {
         value.second(+itemValue);
       }

components/vc-time-picker/Header.jsx

@@ -158,29 +158,6 @@ const Header = {
       this.__emit('keydown', e);
     },
 
-    onClear() {
-      this.__emit('clear');
-      this.setState({ str: '' });
-    },
-
-    getClearButton() {
-      const { prefixCls, allowEmpty, clearText } = this;
-      const clearIcon = getComponentFromProp(this, 'clearIcon');
-      if (!allowEmpty) {
-        return null;
-      }
-      return (
-        <a
-          role="button"
-          class={`${prefixCls}-clear-btn`}
-          title={clearText}
-          onMousedown={this.onClear}
-        >
-          {clearIcon || <i class={`${prefixCls}-clear-btn-icon`} />}
-        </a>
-      );
-    },
-
     getProtoValue() {
       return this.value || this.defaultOpenValue;
     },
@@ -207,7 +184,6 @@ const Header = {
     return (
       <div class={`${prefixCls}-input-wrap`}>
         {this.getInput()}
-        {this.getClearButton()}
       </div>
     );
   },

components/vc-time-picker/Panel.jsx

@@ -1,8 +1,8 @@
+import moment from 'moment';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import Header from './Header';
 import Combobox from './Combobox';
-import moment from 'moment';
 import { getComponentFromProp } from '../_util/props-util';
 
 function noop() {}
@@ -16,6 +16,20 @@ function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1)
   }
   return arr;
 }
+
+function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
+  const hour = hourOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.hour() - a) - Math.abs(time.hour() - b))[0];
+  const minute = minuteOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.minute() - a) - Math.abs(time.minute() - b))[0];
+  const second = secondOptions
+    .slice()
+    .sort((a, b) => Math.abs(time.second() - a) - Math.abs(time.second() - b))[0];
+  return moment(`${hour}:${minute}:${second}`, 'HH:mm:ss');
+}
+
 const Panel = {
   mixins: [BaseMixin],
   props: {
@@ -81,6 +95,10 @@ const Panel = {
       this.__emit('change', newValue);
     },
 
+    onAmPmChange(ampm) {
+      this.__emit('amPmChange', ampm);
+    },
+
     onCurrentSelectPanelChange(currentSelectPanel) {
       this.setState({ currentSelectPanel });
     },
@@ -157,13 +175,18 @@ const Panel = {
       hideDisabledOptions,
       secondStep,
     );
-
+    const validDefaultOpenValue = toNearestValidTime(
+      defaultOpenValue,
+      hourOptions,
+      minuteOptions,
+      secondOptions,
+    );
     return (
       <div class={`${prefixCls}-inner`}>
         <Header
           clearText={clearText}
           prefixCls={prefixCls}
-          defaultOpenValue={defaultOpenValue}
+          defaultOpenValue={validDefaultOpenValue}
           value={sValue}
           currentSelectPanel={currentSelectPanel}
           onEsc={esc}
@@ -187,9 +210,10 @@ const Panel = {
         <Combobox
           prefixCls={prefixCls}
           value={sValue}
-          defaultOpenValue={defaultOpenValue}
+          defaultOpenValue={validDefaultOpenValue}
           format={format}
           onChange={this.onChange}
+          onAmPmChange={this.onAmPmChange}
           showHour={showHour}
           showMinute={showMinute}
           showSecond={showSecond}

components/vc-time-picker/Select.jsx

@@ -17,7 +17,7 @@ const scrollTo = (element, to, duration) => {
   const perTick = (difference / duration) * 10;
 
   requestAnimationFrame(() => {
-    element.scrollTop = element.scrollTop + perTick;
+    element.scrollTop += perTick;
     if (element.scrollTop === to) return;
     scrollTo(element, to, duration - 10);
   });
@@ -66,18 +66,28 @@ const Select = {
           [`${prefixCls}-select-option-selected`]: selectedIndex === index,
           [`${prefixCls}-select-option-disabled`]: item.disabled,
         });
-        let onClick = noop;
+        const onClick = item.disabled
-        if (!item.disabled) {
+        ? undefined
-          onClick = this.onSelect.bind(this, item.value);
+        : () => {
-        }
+            this.onSelect(item.value);
+          };
         return (
-          <li class={cls} key={index} onClick={onClick} disabled={item.disabled}>
+          <li role="button" onClick={onClick} class={cls} key={index} disabled={item.disabled}>
             {item.value}
           </li>
         );
       });
     },
 
+    handleMouseEnter(e) {
+      this.setState({ active: true });
+      this.__emit('mouseenter', e);
+    },
+
+    handleMouseLeave() {
+      this.setState({ active: false });
+    },
+
     scrollToSelected(duration) {
       // move to selected item
       const select = this.$el;
@@ -93,15 +103,6 @@ const Select = {
       const to = topOption.offsetTop;
       scrollTo(select, to, duration);
     },
-
-    handleMouseEnter(e) {
-      this.setState({ active: true });
-      this.__emit('mouseenter', e);
-    },
-
-    handleMouseLeave() {
-      this.setState({ active: false });
-    },
   },
 
   render() {

components/vc-time-picker/TimePicker.jsx

@@ -1,10 +1,11 @@
+import moment from 'moment';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
+import { initDefaultProps, hasProp, getComponentFromProp,isValidElement, getEvents } from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
 import Trigger from '../vc-trigger';
 import Panel from './Panel';
 import placements from './placements';
-import moment from 'moment';
-import { initDefaultProps, hasProp, getComponentFromProp } from '../_util/props-util';
 
 function noop() {}
 
@@ -38,11 +39,13 @@ export default {
       showMinute: PropTypes.bool,
       showSecond: PropTypes.bool,
       popupClassName: PropTypes.string,
+      popupStyle: PropTypes.object,
       disabledHours: PropTypes.func,
       disabledMinutes: PropTypes.func,
       disabledSeconds: PropTypes.func,
       hideDisabledOptions: PropTypes.bool,
       // onChange: PropTypes.func,
+      // onAmPmChange: PropTypes.func,
       // onOpen: PropTypes.func,
       // onClose: PropTypes.func,
       // onFocus: PropTypes.func,
@@ -67,6 +70,7 @@ export default {
       defaultOpen: false,
       inputReadOnly: false,
       popupClassName: '',
+      popupStyle: {},
       align: {},
       id: '',
       allowEmpty: true,
@@ -116,7 +120,12 @@ export default {
       this.setValue(value);
     },
 
-    onPanelClear() {
+    onAmPmChange(ampm) {
+      this.__emit('amPmChange', ampm);
+    },
+
+    onClear(event) {
+      event.stopPropagation();
       this.setValue(null);
       this.setOpen(false);
     },
@@ -200,7 +209,7 @@ export default {
           value={sValue}
           inputReadOnly={inputReadOnly}
           onChange={this.onPanelChange}
-          onClear={this.onPanelClear}
+          onAmPmChange={this.onAmPmChange}
           defaultOpenValue={defaultOpenValue}
           showHour={showHour}
           showMinute={showMinute}
@@ -275,6 +284,37 @@ export default {
     onBlur(e) {
       this.__emit('blur', e);
     },
+    renderClearButton() {
+      const { sValue } = this;
+      const { prefixCls, allowEmpty, clearText } = this.$props;
+      if (!allowEmpty || !sValue) {
+        return null;
+      }
+      const clearIcon = getComponentFromProp(this, 'clearIcon');
+      if (isValidElement(clearIcon)) {
+        const { click } = getEvents(clearIcon) || {};
+        return cloneElement(clearIcon, {
+          on: {
+            click: (...args) => {
+              if (click) click(...args);
+              this.onClear(...args);
+            },
+          },
+        });
+      }
+
+      return (
+        <a
+          role="button"
+          class={`${prefixCls}-clear`}
+          title={clearText}
+          onClick={this.onClear}
+          tabIndex={0}
+        >
+          {clearIcon || <i class={`${prefixCls}-clear-icon`} />}
+        </a>
+      );
+    },
   },
 
   render() {
@@ -295,6 +335,7 @@ export default {
       sValue,
       onFocus,
       onBlur,
+      popupStyle,
     } = this;
     const popupClassName = this.getPopupClassName();
     const inputIcon = getComponentFromProp(this, 'inputIcon');
@@ -302,6 +343,7 @@ export default {
       <Trigger
         prefixCls={`${prefixCls}-panel`}
         popupClassName={popupClassName}
+        popupStyle={popupStyle}
         popupAlign={align}
         builtinPlacements={placements}
         popupPlacement={placement}
@@ -331,6 +373,7 @@ export default {
             id={id}
           />
           {inputIcon || <span class={`${prefixCls}-icon`} />}
+          {this.renderClearButton()}
         </span>
       </Trigger>
     );

components/vc-time-picker/assets/index.less

@@ -2,10 +2,40 @@
 
 .@{prefixClass} {
   display: inline-block;
+  position: relative;
   box-sizing: border-box;
   * {
     box-sizing: border-box;
   }
+
+  &-clear {
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 3px;
+    margin: 0;
+
+    &-icon:after {
+      content: "x";
+      font-size: 12px;
+      font-style: normal;
+      color: #aaa;
+      display: inline-block;
+      line-height: 1;
+      height: 20px;
+      width: 20px;
+      transition: color 0.3s ease;
+    }
+
+    &-icon:hover:after {
+      color: #666;
+    }
+  }
 }
 
 @import './index/Picker';

components/vc-time-picker/assets/index/Header.less

@@ -19,32 +19,4 @@
       border-color: red;
     }
   }
-
-  &-clear-btn {
-    position: absolute;
-    right: 6px;
-    cursor: pointer;
-    overflow: hidden;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    line-height: 20px;
-    top: 6px;
-    margin: 0;
-  }
-
-  &-clear-btn-icon:after {
-    content: 'x';
-    font-size: 12px;
-    font-style: normal;
-    color: #aaa;
-    display: inline-block;
-    line-height: 1;
-    width: 20px;
-    transition: color 0.3s ease;
-  }
-
-  &-clear-btn-icon:hover:after {
-    color: #666;
-  }
 }

components/vc-time-picker/assets/index/Select.less

@@ -33,7 +33,6 @@
 
   li {
     list-style: none;
-    box-sizing: content-box;
     margin: 0;
     padding: 0 0 0 16px;
     width: 100%;

components/vc-time-picker/index.js

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

components/vc-tree-select/src/Select.jsx

@@ -104,7 +104,8 @@ const Select = {
       treeDataSimpleMode: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
       treeNodeFilterProp: PropTypes.string,
       treeNodeLabelProp: PropTypes.string,
-      treeCheckable: PropTypes.oneOfType([PropTypes.bool, PropTypes.any]),
+      treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]),
+      // treeCheckable: PropTypes.any,
       treeCheckStrictly: PropTypes.bool,
       treeIcon: PropTypes.bool,
       treeLine: PropTypes.bool,
@@ -594,6 +595,7 @@ const Select = {
         disabled,
         inputValue,
         treeNodeLabelProp,
+        multiple,
         treeCheckable,
         treeCheckStrictly,
         autoClearSearchValue,

components/vc-tree-select/src/Selector/MultipleSelector/index.jsx

@@ -24,7 +24,7 @@ const MultipleSelector = {
     searchValue: PropTypes.string,
     labelInValue: PropTypes.bool,
     maxTagCount: PropTypes.number,
-    maxTagPlaceholder: PropTypes.any,
+    maxTagPlaceholder: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
 
     // onChoiceAnimationLeave: PropTypes.func,
   },