export default function FormInput()

in app/src/components/FormInput/FormInput.js [24:69]

• 41 lines of code
• 9 McCabe index (conditional complexity)

export default function FormInput({ children, className, disabled, error, label, type, ...rest }) {
  const statusClassNames = classNames({
    [css.disabled]: !!disabled,
    [css.error]: !!error,
    [css.hasLabel]: !!label,
  })

  const inputClassNames = classNames(css.input, statusClassNames)

  const labelClassNames = classNames(css.label, className, {
    [css[type]]: type === 'search' || type === 'checkbox' || type === 'radio',
  })

  return (
    <label id="form" className={labelClassNames}>
      {(type === 'checkbox' || type === 'radio') && (
        <>
          <input type={type} className={statusClassNames} disabled={disabled} {...rest} />
          <span />
        </>
      )}

      {label}

      {(type === 'text' || type === 'password') && (
        <input type={type} className={inputClassNames} disabled={disabled} {...rest} />
      )}
      {type === 'textarea' && (
        <textarea className={inputClassNames} disabled={disabled} {...rest}>
          {children}
        </textarea>
      )}
      {type === 'search' && (
        <>
          <input type="text" className={inputClassNames} disabled={disabled} {...rest} />
          <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m16.6177513 14.496431 4.8068699 4.8068699c.5857864.5857864.5857864 1.5355339 0 2.1213203s-1.5355339.5857864-2.1213203 0l-4.8068699-4.8068699c-1.2814131.8723474-2.8293751 1.3822487-4.496431 1.3822487-4.418278 0-8-3.581722-8-8s3.581722-8 8-8 8 3.581722 8 8c0 1.6670559-.5099013 3.2150179-1.3822487 4.496431zm-6.6177513.503569c2.7614237 0 5-2.2385763 5-5 0-2.76142375-2.2385763-5-5-5-2.76142375 0-5 2.23857625-5 5 0 2.7614237 2.23857625 5 5 5z"
              fillRule="evenodd"
            />
          </svg>
        </>
      )}
    </label>
  )
}