From 43cd5a3ec1bbed58638a210e25a1d4bc1cc3229c Mon Sep 17 00:00:00 2001
From: xdddi <35244644+xdddi@users.noreply.github.com>
Date: Thu, 2 Apr 2020 22:26:14 +0800
Subject: [PATCH] feat(Input): hint icon overlap (#1729)

Co-authored-by: wb-xd391517 <wb-xd391517@alibaba-inc.com>
---
 src/date-picker/date-picker.jsx  |  2 +-
 src/date-picker/main.scss        |  2 +-
 src/date-picker/month-picker.jsx |  2 +-
 src/date-picker/range-picker.jsx |  2 +-
 src/date-picker/week-picker.jsx  |  2 +-
 src/date-picker/year-picker.jsx  |  2 +-
 src/input/input.jsx              | 18 +++++++++++++-----
 src/time-picker/main.scss        |  2 +-
 src/time-picker/time-picker.jsx  |  2 +-
 9 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
index baf2442981..913a8d5362 100644
--- a/src/date-picker/date-picker.jsx
+++ b/src/date-picker/date-picker.jsx
@@ -704,7 +704,7 @@ class DatePicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}
diff --git a/src/date-picker/main.scss b/src/date-picker/main.scss
index d618ac3b1e..0b6382c9e7 100644
--- a/src/date-picker/main.scss
+++ b/src/date-picker/main.scss
@@ -59,7 +59,7 @@
         vertical-align: baseline;
     }
 
-    &-symble-calendar-icon::before {
+    &-symbol-calendar-icon::before {
         content: $date-picker-calendar-icon;
     }
 }
diff --git a/src/date-picker/month-picker.jsx b/src/date-picker/month-picker.jsx
index 09c6faa51f..82759d5fb1 100644
--- a/src/date-picker/month-picker.jsx
+++ b/src/date-picker/month-picker.jsx
@@ -447,7 +447,7 @@ class MonthPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}
diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
index 3d72c83c75..65d7687968 100644
--- a/src/date-picker/range-picker.jsx
+++ b/src/date-picker/range-picker.jsx
@@ -1132,7 +1132,7 @@ class RangePicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                 />
diff --git a/src/date-picker/week-picker.jsx b/src/date-picker/week-picker.jsx
index b079007751..9b51dcbb9e 100644
--- a/src/date-picker/week-picker.jsx
+++ b/src/date-picker/week-picker.jsx
@@ -409,7 +409,7 @@ class WeekPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={value && hasClear}
diff --git a/src/date-picker/year-picker.jsx b/src/date-picker/year-picker.jsx
index d26c2fc2b7..ce779e3f6a 100644
--- a/src/date-picker/year-picker.jsx
+++ b/src/date-picker/year-picker.jsx
@@ -432,7 +432,7 @@ class YearPicker extends Component {
                     hint={
                         <Icon
                             type="calendar"
-                            className={`${prefix}date-picker-symble-calendar-icon`}
+                            className={`${prefix}date-picker-symbol-calendar-icon`}
                         />
                     }
                     hasClear={allowClear}
diff --git a/src/input/input.jsx b/src/input/input.jsx
index 47384eecc6..c4498c5900 100644
--- a/src/input/input.jsx
+++ b/src/input/input.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon';
@@ -179,12 +179,20 @@ export default class Input extends Base {
         if (hint || showClear) {
             let hintIcon = null;
             if (hint) {
-                hintIcon =
-                    typeof hint === 'string' ? (
+                if (typeof hint === 'string') {
+                    hintIcon = (
                         <Icon type={hint} className={`${prefix}input-hint`} />
-                    ) : (
-                        hint
                     );
+                } else if (isValidElement(hint)) {
+                    hintIcon = cloneElement(hint, {
+                        className: classNames(
+                            hint.props.className,
+                            `${prefix}input-hint`
+                        ),
+                    });
+                } else {
+                    hintIcon = hint;
+                }
             } else {
                 hintIcon = (
                     <Icon
diff --git a/src/time-picker/main.scss b/src/time-picker/main.scss
index 5f8066c641..3b4ef53e20 100644
--- a/src/time-picker/main.scss
+++ b/src/time-picker/main.scss
@@ -24,7 +24,7 @@
         box-shadow: $time-picker-panel-shadow;
     }
 
-    &-symble-clock-icon::before {
+    &-symbol-clock-icon::before {
         content: $time-picker-clock-icon;
     }
 }
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index 8e28ef9935..89ca0b768c 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -414,7 +414,7 @@ class TimePicker extends Component {
             hint: (
                 <Icon
                     type="clock"
-                    className={`${prefix}time-picker-symble-clock-icon`}
+                    className={`${prefix}time-picker-symbol-clock-icon`}
                 />
             ),
         };