feat(input): add password

components/input/index.ts

@@ -1,6 +1,8 @@
 import Input from './input'
 import Textarea from '../textarea'
+import InputPassword from './password'
 
 Input.Textarea = Textarea
+Input.Password = InputPassword
 
 export default Input

components/input/input-icon.tsx

@@ -4,10 +4,12 @@ import useTheme from '../styles/use-theme'
 export interface InputIconProps {
   icon: React.ReactNode
   ratio: string
+  clickable: boolean
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
 const InputIcon: React.FC<InputIconProps> = React.memo(({
-  icon, ratio,
+  icon, ratio, clickable, onClick,
 }) => {
   const theme = useTheme()
   const width = useMemo(() => {
@@ -18,21 +20,22 @@ const InputIcon: React.FC<InputIconProps> = React.memo(({
   }, [theme.layout.gap, ratio])
 
   return (
-    <span className="input-icon">
+    <span className="input-icon" onClick={onClick}>
       {icon}
       <style jsx>{`
         .input-icon {
           box-sizing: content-box;
           display: flex;
           width: ${width};
-          height: ${width};
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 ${padding};
           line-height: 1;
           position: relative;
+          cursor: ${clickable ? 'pointer' : 'default'};
+          pointer-events: ${clickable ? 'auto' : 'none'};
         }
       `}</style>
     </span>

components/input/input-props.ts

@@ -0,0 +1,40 @@
+import React from 'react'
+import { NormalSizes, NormalTypes } from 'components/utils/prop-types'
+
+export interface Props {
+  value?: string
+  initialValue?: string
+  placeholder?: string
+  size?: NormalSizes
+  status?: NormalTypes
+  readOnly?: boolean
+  disabled?: boolean
+  label?: string
+  labelRight?: string
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
+  iconClickable?: boolean
+  width?: string
+  className?: string
+  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
+  onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  autoComplete: string
+}
+
+export const defaultProps = {
+  disabled: false,
+  readOnly: false,
+  clearable: false,
+  iconClickable: false,
+  width: 'initial',
+  size: 'medium' as NormalSizes,
+  status: 'default' as NormalTypes,
+  autoComplete: 'off',
+  className: '',
+  placeholder: '',
+  initialValue: '',
+}

components/input/input.tsx

@@ -1,47 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import useTheme from '../styles/use-theme'
 import InputLabel from './input-label'
 import InputBlockLabel from './input-block-label'
 import InputIcon from './input-icon'
 import InputClearIcon from './input-icon-clear'
 import Textarea from '../textarea/textarea'
+import InputPassword from './password'
 import { getSizes, getColors } from './styles'
-import { NormalSizes, NormalTypes } from '../utils/prop-types'
-
-interface Props {
-  value?: string
-  initialValue?: string
-  placeholder?: string
-  size?: NormalSizes
-  status?: NormalTypes
-  readOnly?: boolean
-  disabled?: boolean
-  label?: string
-  labelRight?: string
-  icon?: React.ReactNode
-  iconRight?: React.ReactNode
-  width?: string
-  className?: string
-  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 = {
-  disabled: false,
-  readOnly: false,
-  clearable: false,
-  width: 'initial',
-  size: 'medium' as NormalSizes,
-  status: 'default' as NormalTypes,
-  autoComplete: 'off',
-  className: '',
-  placeholder: '',
-  initialValue: '',
-}
+import { Props, defaultProps } from './input-props'
 
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
 export type InputProps = Props & typeof defaultProps & NativeAttrs
@@ -57,14 +23,16 @@ const simulateChangeEvent = (
   }
 }
 
-const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
-  placeholder, label, labelRight, size, status, disabled,
-  icon, iconRight, initialValue, onChange, readOnly, value,
-  onClearClick, clearable, width, className, onBlur, onFocus,
-  autoComplete, children, ...props
-}) => {
-  const ref = useRef<HTMLInputElement>(null)
+const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputProps>>(({
+  label, labelRight, size, status, icon, iconRight, iconClickable, onIconClick,
+  initialValue, onChange, readOnly, value, onClearClick, clearable, width,
+  className, onBlur, onFocus, autoComplete, placeholder, children, disabled,
+  ...props
+}, ref: React.Ref<HTMLInputElement | null>) => {
   const theme = useTheme()
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => inputRef.current)
+
   const [selfValue, setSelfValue] = useState<string>(initialValue)
   const [hover, setHover] = useState<boolean>(false)
   const { heightRatio, fontSize } = useMemo(() => getSizes(size),[size])
@@ -86,17 +54,18 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
     setSelfValue(event.target.value)
     onChange && onChange(event)
   }
-
+  
   const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     setSelfValue('')
     onClearClick && onClearClick(event)
-    if (!ref.current) return
+    if (!inputRef.current) return
     
-    const changeEvent = simulateChangeEvent(ref.current, event)
+    const changeEvent = simulateChangeEvent(inputRef.current, event)
     changeEvent.target.value = ''
     onChange && onChange(changeEvent)
+    inputRef.current.focus()
   }
-  
+
   const focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
     setHover(true)
     onFocus && onFocus(e)
@@ -105,20 +74,30 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
     setHover(false)
     onBlur && onBlur(e)
   }
-
+  
+  const iconClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return
+    onIconClick && onIconClick(e)
+  }
+  const iconProps = useMemo(() => ({
+    ratio: heightRatio,
+    clickable: iconClickable,
+    onClick: iconClickHandler,
+  }), [heightRatio, iconClickable])
+  
   useEffect(() => {
     if (value === undefined) return
     setSelfValue(value)
   }, [value])
-
+  
   return (
     <div className="with-label">
       {children && <InputBlockLabel>{children}</InputBlockLabel>}
       <div className={`input-container ${className}`}>
         {label && <InputLabel fontSize={fontSize}>{label}</InputLabel>}
         <div className={`input-wrapper ${hover ? 'hover' : ''} ${disabled ? 'disabled' : ''} ${labelClasses}`}>
-          {icon && <InputIcon icon={icon} ratio={heightRatio} />}
-          <input type="text" ref={ref}
+          {icon && <InputIcon icon={icon} {...iconProps} />}
+          <input type="text" ref={inputRef}
             className={`${disabled ? 'disabled' : ''} ${iconClasses}`}
             value={selfValue}
             placeholder={placeholder}
@@ -135,7 +114,7 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
             heightRatio={heightRatio}
             disabled={disabled || readOnly}
             onClick={clearHandler} />}
-          {iconRight && <InputIcon icon={iconRight} ratio={heightRatio} />}
+          {iconRight && <InputIcon icon={iconRight} {...iconProps} />}
         </div>
         {labelRight && <InputLabel fontSize={fontSize} isRight={true}>{labelRight}</InputLabel>}
       </div>
@@ -225,10 +204,11 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
       `}</style>
     </div>
   )
-}
+})
 
-type InputComponent<P = {}> = React.FC<P> & {
+type InputComponent<P = {}> = React.ForwardRefExoticComponent<P> & {
   Textarea: typeof Textarea
+  Password: typeof InputPassword
 }
 
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs

components/input/password-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+interface Props {
+  visible: boolean
+}
+
+const PasswordIcon: React.FC<Props> = ({ visible }) => {
+  return (
+    <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+      strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color: 'currentColor' }}>
+      {!visible ? (
+        <>
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+          <circle cx="12" cy="12" r="3"/>
+        </>
+      ) : (
+        <>
+          <path
+            d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
+          <path d="M1 1l22 22"/>
+        </>
+      )}
+    </svg>
+  )
+}
+
+export default PasswordIcon

components/input/password.tsx

@@ -0,0 +1,51 @@
+import React, { useImperativeHandle, useMemo, useRef, useState } from 'react'
+import withDefaults from '../utils/with-defaults'
+import { Props, defaultProps } from './input-props'
+import PasswordIcon from './password-icon'
+import Input from './input'
+
+interface PasswordProps extends Props {
+  hideToggle?: boolean
+}
+
+const passwordDefaultProps = {
+  ...defaultProps,
+  hideToggle: false,
+}
+
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>
+export type InputPasswordProps = PasswordProps & typeof passwordDefaultProps & NativeAttrs
+
+const InputPassword = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPasswordProps>>(({
+  hideToggle, children, ...props
+}, ref: React.Ref<HTMLInputElement | null>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [visible, setVisible] = useState<boolean>(false)
+  useImperativeHandle(ref, () => inputRef.current)
+  
+  const iconClickHandler = () => {
+    if (hideToggle) return
+    setVisible(v => !v)
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+  
+  const inputProps = useMemo(() => ({
+    ...props,
+    ref: inputRef,
+    iconClickable: true,
+    onIconClick: iconClickHandler,
+    type: visible ? 'text' : 'password',
+  }), [props, iconClickHandler, visible, inputRef])
+  const icon = useMemo(() => {
+    if (hideToggle) return null
+    return <PasswordIcon visible={visible} />
+  }, [hideToggle, visible])
+  
+  return (
+    <Input iconRight={icon} {...inputProps}>{children}</Input>
+  )
+})
+
+export default withDefaults(InputPassword, passwordDefaultProps)