feat(input): add clearable and clear event

components/input/input-icon-clear.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import useTheme from '../styles/use-theme'
+
+interface Props {
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
+  heightRatio?: string | undefined
+  disabled?: boolean
+}
+
+const InputIconClear: React.FC<Props> = ({
+  onClick, heightRatio, disabled,
+}) => {
+  const theme = useTheme()
+  const width = useMemo(() => {
+    return heightRatio ? `calc(10.66px * ${heightRatio})` : '18px'
+  }, [heightRatio])
+  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    event.nativeEvent.stopImmediatePropagation()
+    onClick && onClick(event)
+  }
+  return (
+    <div onClick={clickHandler}>
+      <svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+        strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
+        <path d="M18 6L6 18" />
+        <path d="M6 6l12 12" />
+      </svg>
+  
+      <style jsx>{`
+        div {
+          padding: 0 ${theme.layout.gapHalf};
+          margin: 0;
+          display: inline-flex;
+          align-items: center;
+          height: 100%;
+          cursor: ${disabled ? 'not-allowed' : 'pointer'};
+          box-sizing: border-box;
+          transition: color 150ms ease 0s;
+          color: ${theme.palette.accents_3};
+        }
+        
+        div:hover {
+          color: ${disabled ? theme.palette.accents_3 : theme.palette.foreground};
+        }
+        
+        svg {
+          color: currentColor;
+          width: ${width};
+          height: ${width};
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default InputIconClear

components/input/input.tsx

@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import InputLabel from './input-label'
 import InputIcon from './input-icon'
+import InputClearIcon from './input-icon-clear'
 import { getSizes, getColors } from './styles'
 import { NormalSizes, NormalTypes } from '../utils/prop-types'
 
@@ -20,12 +21,15 @@ interface Props {
   iconRight?: React.ReactNode
   width?: string
   className?: string
+  clearable?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
 const defaultProps = {
   disabled: false,
   readOnly: false,
+  clearable: false,
   width: 'initial',
   size: 'medium',
   status: 'default',
@@ -39,7 +43,7 @@ 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,
-  width, className, ...props
+  onClearClick, clearable, width, className, ...props
 }) => {
   const theme = useTheme()
   const [selfValue, setSelfValue] = useState<string>(initialValue)
@@ -59,9 +63,15 @@ 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)
+  }
 
   useEffect(() => {
     if (value === undefined) return
@@ -83,6 +93,9 @@ const Input: React.FC<InputProps> = ({
           onChange={changeHandler}
           {...props}
         />
+        {clearable && <InputClearIcon heightRatio={heightRatio}
+          disabled={disabled || readOnly}
+          onClick={clearHandler} />}
         {iconRight && <InputIcon icon={iconRight} ratio={heightRatio} />}
       </div>
       {labelRight && <InputLabel fontSize={fontSize} isRight={true}>{labelRight}</InputLabel>}

pages/docs/components/input.mdx

@@ -75,7 +75,7 @@ Retrieve text input from a user.
 `} />
 
 <Playground
-  title="icon"
+  title="Icon"
   scope={{ Input, GitIcon }}
   code={`
 <>
@@ -83,6 +83,15 @@ Retrieve text input from a user.
 </>
 `} />
 
+<Playground
+  title="Clearable"
+  scope={{ Input }}
+  code={`
+<>
+  <Input clearable initialValue="The Evil Rabbit" />
+</>
+`} />
+
 <Playground
   title="Get Change"
   scope={{ Input, useState }}
@@ -132,11 +141,13 @@ Retrieve text input from a user.
 | **status** | current status | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
 | **readOnly** | native attr | `boolean` | - | `false` |
 | **disabled** | disable input | `boolean` | - | `false` |
+| **clearable** | show clear icon | `boolean` | - | `false` |
 | **label** | text label for input | `string` | - | - |
 | **icon** | icon for input | `React.ReactNode` | - | - |
 | **labelRight** | text label at right for input | `string` | - | - |
 | **iconRight** | icon at right for input | `React.ReactNode` | - | - |
 | **onChange** | change event | `(e: React.ChangeEvent) => void` | - | - |
+| **onClearClick** | clear icon event | `(e: React.MouseEvent) => void` | - | - |
 | ... | native props | `InputHTMLAttributes` | `'alt', 'type', 'className', ...` | - |
 
 <Attributes.Title>useInput</Attributes.Title>