From a1074a6ace7500c9c801f1bc60d2175f78cdfc39 Mon Sep 17 00:00:00 2001
From: HeskeyBaozi <hezhiyu233@foxmail.com>
Date: Sat, 15 Sep 2018 00:32:14 +0800
Subject: [PATCH] add suffix icon interface to time-picker

---
 .../__tests__/__snapshots__/demo.test.js.snap | 35 +++++++++++++++++++
 components/time-picker/demo/suffix.md         | 31 ++++++++++++++++
 components/time-picker/index.en-US.md         |  1 +
 components/time-picker/index.tsx              | 24 ++++++++++---
 components/time-picker/index.zh-CN.md         |  1 +
 5 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 components/time-picker/demo/suffix.md

diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
index 5e3e5c6c18..bc1779d3b4 100644
--- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -411,6 +411,41 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
+<span
+  class="ant-time-picker "
+>
+  <input
+    class="ant-time-picker-input"
+    id=""
+    placeholder="Select time"
+    type="text"
+    value=""
+  />
+  <span
+    class="ant-time-picker-icon"
+  >
+    <i
+      class="anticon anticon-smile ant-time-picker-clock-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="smile"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+        />
+      </svg>
+    </i>
+  </span>
+</span>
+`;
+
 exports[`renders ./components/time-picker/demo/value.md correctly 1`] = `
 <span
   class="ant-time-picker "
diff --git a/components/time-picker/demo/suffix.md b/components/time-picker/demo/suffix.md
new file mode 100644
index 0000000000..e34496512d
--- /dev/null
+++ b/components/time-picker/demo/suffix.md
@@ -0,0 +1,31 @@
+---
+order: 12
+debug: true
+title:
+  zh-CN: 后缀图标
+  en-US: Suffix
+---
+
+## zh-CN
+
+点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
+
+## en-US
+
+Click `TimePicker`, and then we could select or input a time in panel.
+
+````jsx
+import { TimePicker, Icon } from 'antd';
+import moment from 'moment';
+
+function onChange(time, timeString) {
+  console.log(time, timeString);
+}
+
+const icon = <Icon type="smile" />;
+
+ReactDOM.render(
+  <TimePicker suffix={icon} onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
+  mountNode
+);
+````
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index 64aff2f541..72c24516cc 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -44,6 +44,7 @@ import moment from 'moment';
 | placeholder | display when there's no value | string | "Select a time" |
 | popupClassName | className of panel | string | '' |
 | secondStep | interval between seconds in picker | number | 1 |
+| suffix | The custom suffix icon | ReactNode | - |
 | use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
 | value | to set time | [moment](http://momentjs.com/) | - |
 | onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index febf716114..1e9de36f34 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -50,6 +50,7 @@ export interface TimePickerProps {
   clearText?: string;
   defaultOpenValue?: moment.Moment;
   popupClassName?: string;
+  suffix?: React.ReactNode;
 }
 
 export interface TimePickerLocale {
@@ -153,20 +154,35 @@ class TimePicker extends React.Component<TimePickerProps, any> {
       ) : null
     );
 
-    const inputIcon = (
-      <span className={`${props.prefixCls}-icon`}>
+    const { suffix, prefixCls } = props;
+    const clockIcon = suffix && (
+      React.isValidElement<{ className?: string }>(suffix)
+        ? React.cloneElement(
+          suffix,
+          {
+            className: classNames({
+              [suffix.props.className!]: suffix.props.className,
+              [`${prefixCls}-clock-icon`]: true,
+            }),
+          },
+        ) : <span className={`${prefixCls}-clock-icon`}>{suffix}</span>) || (
         <Icon
           type="clock-circle"
-          className={`${props.prefixCls}-clock-icon`}
+          className={`${prefixCls}-clock-icon`}
           theme="outlined"
         />
+      );
+
+    const inputIcon = (
+      <span className={`${prefixCls}-icon`}>
+        {clockIcon}
       </span>
     );
 
     const clearIcon = (
       <Icon
         type="close-circle"
-        className={`${props.prefixCls}-panel-clear-btn-icon`}
+        className={`${prefixCls}-panel-clear-btn-icon`}
         theme="filled"
       />
     );
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 086a685cbd..1eac9ac6cf 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -45,6 +45,7 @@ import moment from 'moment';
 | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
 | popupClassName | 弹出层类名 | string | '' |
 | secondStep | 秒选项间隔 | number | 1 |
+| suffix | 自定义的选择框后缀图标 | ReactNode | - |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
 | value | 当前时间 | [moment](http://momentjs.com/) | 无 |
 | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |