atlas/packages/app/src/shared/components/TextField/TextField.tsx

import React, { useState, useRef, useEffect } from 'react'
import { useCSS, TextFieldStyleProps } from './TextField.style'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { spacing } from './../../theme'

type TextFieldProps = {
  label: string
  helper?: string
  value?: string
  icon?: IconProp | undefined
  onChange?: (e: React.ChangeEvent) => void
} & TextFieldStyleProps

export default function TextField({
  label,
  helper = '',
  value = '',
  icon,
  disabled = false,
  onChange,
  ...styleProps
}: TextFieldProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [isActive, setIsActive] = useState(!!value)
  const [inputTextValue, setInputTextValue] = useState(value)
  const styles = useCSS({ isActive, disabled, ...styleProps })

  useEffect(() => {
    if (inputRef.current != null) {
      if (isActive) {
        inputRef.current.focus()
      } else {
        inputRef.current.blur()
      }
    }
  }, [isActive, inputRef])

  function onTextFieldClick() {
    if (!disabled) setIsActive(true)
  }

  function onInputTextBlur() {
    setIsActive(false)
  }

  // FIXME: add correct typing to event, see here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
  function onInputTextChange(event: any): void {
    if (!disabled) setInputTextValue(event.currentTarget.value)
  }

  return (
    <div css={styles.wrapper}>
      <div css={styles.container} onClick={onTextFieldClick}>
        <div css={styles.border}>
          <div
            css={styles.label}
            style={
              !inputTextValue && !isActive
                ? {}
                : {
                    position: 'absolute',
                    top: '-8px',
                    left: '5px',
                    fontSize: '0.7rem',
                    padding: `0 ${spacing.xs}`,
                  }
            }
          >
            {label}
          </div>
          <input
            css={styles.input}
            style={{ display: !!inputTextValue || isActive ? 'block' : 'none' }}
            ref={inputRef}
            type="text"
            value={inputTextValue}
            onChange={onInputTextChange}
            onBlur={onInputTextBlur}
            disabled={disabled}
          />
          {!!icon && <FontAwesomeIcon icon={icon || 'check'} css={styles.icon} />}
        </div>
      </div>
      {!!helper && <p css={styles.helper}>{helper}</p>}
    </div>
  )
}