fix(input): hide clear icon when value is undefined

components/input/input-icon-clear.tsx

@@ -2,13 +2,14 @@ import React, { useMemo } from 'react'
 import useTheme from '../styles/use-theme'
 
 interface Props {
+  visibale: boolean
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
   heightRatio?: string | undefined
   disabled?: boolean
 }
 
 const InputIconClear: React.FC<Props> = ({
-  onClick, heightRatio, disabled,
+  onClick, heightRatio, disabled, visibale,
 }) => {
   const theme = useTheme()
   const width = useMemo(() => {
@@ -21,7 +22,7 @@ const InputIconClear: React.FC<Props> = ({
     onClick && onClick(event)
   }
   return (
-    <div onClick={clickHandler}>
+    <div onClick={clickHandler} className={`${visibale ? 'visibale' : ''}`}>
       <svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
         strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
         <path d="M18 6L6 18" />
@@ -39,6 +40,13 @@ const InputIconClear: React.FC<Props> = ({
           box-sizing: border-box;
           transition: color 150ms ease 0s;
           color: ${theme.palette.accents_3};
+          visibility: hidden;
+          opacity: 0;
+        }
+        
+        .visibale {
+          visibility: visible;
+          opacity: 1;
         }
         
         div:hover {

components/input/input-icon.tsx

@@ -32,6 +32,7 @@ const InputIcon: React.FC<InputIconProps> = React.memo(({
           margin: 0;
           padding: 0 ${padding};
           line-height: 1;
+          position: relative;
         }
       `}</style>
     </span>

components/input/input.tsx

@@ -24,6 +24,9 @@ interface Props {
   clearable?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  autoComplete: string
 }
 
 const defaultProps = {
@@ -33,6 +36,7 @@ const defaultProps = {
   width: 'initial',
   size: 'medium',
   status: 'default',
+  autoComplete: 'off',
   className: '',
   placeholder: '',
   initialValue: '',
@@ -43,12 +47,14 @@ export type InputProps = Props & typeof defaultProps & React.InputHTMLAttributes
 const Input: React.FC<InputProps> = ({
   placeholder, label, labelRight, size, status, disabled,
   icon, iconRight, initialValue, onChange, readOnly, value,
-  onClearClick, clearable, width, className, ...props
+  onClearClick, clearable, width, className, onBlur, onFocus,
+  autoComplete, ...props
 }) => {
   const theme = useTheme()
   const [selfValue, setSelfValue] = useState<string>(initialValue)
   const [hover, setHover] = useState<boolean>(false)
   const { heightRatio, fontSize } = useMemo(() => getSizes(size),[size])
+  const showClearIcon = useMemo(() => clearable && selfValue !== '', [selfValue, clearable])
   const labelClasses = useMemo(
     () =>  labelRight ? 'right-label' : (label ? 'left-label' : ''),
     [label, labelRight],
@@ -63,15 +69,23 @@ const Input: React.FC<InputProps> = ({
   )
   const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled || readOnly) return
-    console.log(123, event.target.value)
     setSelfValue(event.target.value)
     onChange && onChange(event)
   }
-  
+
   const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     setSelfValue('')
     onClearClick && onClearClick(event)
   }
+  
+  const focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHover(true)
+    onFocus && onFocus(e)
+  }
+  const blurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHover(false)
+    onBlur && onBlur(e)
+  }
 
   useEffect(() => {
     if (value === undefined) return
@@ -88,12 +102,15 @@ const Input: React.FC<InputProps> = ({
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readOnly}
-          onFocus={() => setHover(true)}
-          onBlur={() => setHover(false)}
+          onFocus={focusHandler}
+          onBlur={blurHandler}
           onChange={changeHandler}
+          autoComplete={autoComplete}
           {...props}
         />
-        {clearable && <InputClearIcon heightRatio={heightRatio}
+        {clearable && <InputClearIcon
+          visibale={showClearIcon}
+          heightRatio={heightRatio}
           disabled={disabled || readOnly}
           onClick={clearHandler} />}
         {iconRight && <InputIcon icon={iconRight} ratio={heightRatio} />}