react/components/input/password.tsx

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 = () => {
    setVisible(v => !v)
    /* istanbul ignore next */
    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)