feat: update time-picker

components/time-picker/demo/index.vue

@@ -7,7 +7,7 @@ import HideColumn from './hide-column'
 import IntervalOptions from './interval-options'
 import Size from './size'
 import Value from './value'
-
+import Suffix from './suffix'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 const md = {
@@ -39,6 +39,7 @@ export default {
         <IntervalOptions/>
         <Size/>
         <Value/>
+        <Suffix/>
         <api>
           <CN slot='cn' />
           <US/>

components/time-picker/demo/suffix.md

@@ -0,0 +1,28 @@
+<cn>
+#### 后缀图标
+点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
+</cn>
+
+<us>
+#### Suffix
+Click `TimePicker`, and then we could select or input a time in panel.
+</us>
+
+```html
+<template>
+  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
+    <a-icon type="smile" slot="suffixIcon"/>
+  </a-time-picker>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+    onChange(time, timeString){
+      console.log(time, timeString);
+    }
+  },
+}
+</script>
+```

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

@@ -22,6 +22,7 @@
 | placeholder | display when there's no value | string | "Select a time" |
 | popupClassName | className of panel | string | '' |
 | 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/) | - |
 

components/time-picker/index.jsx

@@ -5,8 +5,10 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'
 import defaultLocale from './locale/en_US'
 import BaseMixin from '../_util/BaseMixin'
 import PropTypes from '../_util/vue-types'
+import Icon from '../icon'
 import interopDefault from '../_util/interopDefault'
-import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
+import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
 
 export function generateShowHourMinuteSecond (format) {
   // Ref: http://momentjs.com/docs/#/parsing/string-format/
@@ -52,6 +54,7 @@ export const TimePickerProps = () => ({
   clearText: PropTypes.string,
   defaultOpenValue: PropTypes.object,
   popupClassName: PropTypes.string,
+  suffixIcon: PropTypes.any,
   align: PropTypes.object,
   placement: PropTypes.any,
   transitionName: PropTypes.string,
@@ -136,7 +139,41 @@ const TimePicker = {
       const className = {
         [`${props.prefixCls}-${props.size}`]: !!props.size,
       }
-      const tempAddon = getComponentFromProp(this, 'addon')
+      let addon = getComponentFromProp(this, 'addon')
+      addon = addon ? <div class={`${props.prefixCls}-panel-addon`}>
+        {addon}
+      </div> : null
+      const { prefixCls } = props
+      let suffixIcon = getComponentFromProp(this, 'suffixIcon')
+      suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
+      const clockIcon = 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'
+        />
+      )
+
+      const inputIcon = (
+        <span class={`${prefixCls}-icon`}>
+          {clockIcon}
+        </span>
+      )
+
+      const clearIcon = (
+        <Icon
+          type='close-circle'
+          class={`${prefixCls}-panel-clear-btn-icon`}
+          theme='filled'
+        />
+      )
       const timeProps = {
         props: {
           ...generateShowHourMinuteSecond(format),
@@ -144,6 +181,9 @@ const TimePicker = {
           format,
           value: this.sValue,
           placeholder: props.placeholder === undefined ? locale.placeholder : props.placeholder,
+          addon,
+          inputIcon,
+          clearIcon,
         },
         class: className,
         ref: 'timePicker',
@@ -155,13 +195,7 @@ const TimePicker = {
         },
       }
       return (
-        <VcTimePicker {...timeProps}>
+        <VcTimePicker {...timeProps}/>
-          {tempAddon ? <template slot='addon'>
-            <div class={`${props.prefixCls}-panel-addon`}>
-              {tempAddon}
-            </div>
-          </template> : null}
-        </VcTimePicker>
       )
     },
   },

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

@@ -23,6 +23,7 @@
 | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
 | popupClassName | 弹出层类名 | string | '' |
 | secondStep | 秒选项间隔 | number | 1 |
+| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
 | value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
 

components/time-picker/locale/it_IT.js

@@ -1,5 +1,5 @@
 const locale = {
-  placeholder: 'Selezionare il tempo',
+  placeholder: 'Selezionare l\'orario',
 }
 
 export default locale

components/time-picker/locale/mn_MN.js

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Цаг сонгох',
+}
+
+export default locale

components/vc-time-picker/TimePicker.jsx

@@ -60,6 +60,7 @@ export default {
     id: PropTypes.string,
     inputIcon: PropTypes.any,
     clearIcon: PropTypes.any,
+    addon: PropTypes.any,
   }, {
     clearText: 'clear',
     prefixCls: 'rc-time-picker',
@@ -207,7 +208,7 @@ export default {
           onKeydown={onKeyDown2}
           clearIcon={clearIcon}
         >
-          {this.$slots.addon}
+          {getComponentFromProp(this, 'addon')}
         </Panel>
       )
     },