sgpl/components/input.js

import { h, Component } from 'preact'
const noOp = val => val

class Input extends Component {
  constructor (props) {
    super(props)
    if (props.getSetter) {
      this.setter = props.getSetter(props.name)
    }
    this.state = {
      hasChanged: false,
      valid: this.isValid(props.value)
    }
  }

  isValid (val) {
    if (!this.props.test) {
      return true
    }
    return this.props.test(val)
  }

  componentDidMount () {
    const { value } = this.props
    if (value) {
      this.updateValue(value)
    } else {
      const result = this.isValid(value)
      this.setState({valid: result})
      this.setter && this.setter({validity: result})
    }
  }

  updateValue (val) {
    const { type, clean, test } = this.props
    if (type === 'number' && val && typeof val === 'string') {
      val = Number(val)
    }
    if (clean) {
      val = clean(val)
    }
    const update = {
      value: val
    }
    if (test) {
      const result = this.isValid(val)
      this.setState({valid: result})
      update.validity = result
    }
    if (this.setter) {
      this.setter(update)
    }
  }

  render ({
    name,
    autoFocus = false,
    label,
    subLabel,
    helpText,
    value,
    containerClasses = 'mv2',
    onFocus = noOp,
    placeholder,
    disabled = false,
    className = 'pa2 input-reset br2 bg-transparent hover-bg w-100 ba',
    getSetter = null,
    clean = noOp,
    test = null,
    min,
    max,
    inputmode,
    pattern,
    type = 'text'},
    {
      valid,
      hasChanged
    }) {
    const isCheckbox = type === 'checkbox'
    const isTextarea = type === 'textarea'

    if (isCheckbox) {
      className = 'mr2'
    }

    if (type === 'number' && !inputmode) {
      inputmode = 'numeric'
    }

    const onInput = e => {
      if (!this.state.hasChanged) {
        this.setState({hasChanged: true})
      }
      this.updateValue(e.target.value)
    }

    const colorClasses = (hasChanged && !valid) ? 'b--red' : 'b--black-40'
    const inputClasses = className + ' ' + colorClasses

    return (
      h('div', {
        key: name,
        className: containerClasses
      }, [
        (label || subLabel) && !isCheckbox && (
          h('label', {
            className: 'db fw9 lh-copy f6',
            htmlFor: name
          }, [
            label,
            ' ',
            subLabel && h('span', { className: 'f6 fw5' }, [subLabel])
          ])
        ),
        !isTextarea && !isCheckbox && (
          h('input', {
            className: inputClasses,
            autoFocus,
            name,
            type,
            placeholder,
            onFocus,
            onInput,
            value,
            disabled,
            id: name,
            min,
            max,
            inputmode,
            pattern,
            'data-e2e': `${name}Input`
          })
        ),
        isTextarea && (
          h('textarea', {
            className: inputClasses,
            autoFocus,
            name,
            placeholder,
            onFocus,
            onInput,
            value,
            disabled,
            id: name,
            'data-e2e': `${name}Input`
          }, [placeholder])
        ),
        type === 'checkbox' && (
          h('div', {className: 'flex items-center'}, [
            h('input', {
              className: inputClasses,
              autoFocus,
              name,
              type: 'checkbox',
              onFocus,
              onChange: e => {
                this.updateValue(e.target.checked)
              },
              value,
              disabled,
              id: name,
              'data-e2e': `${name}Input`
            }),
            h('label', {
              className: 'fw6 lh-copy f6',
              htmlFor: name
            }, [
              label,
              ' ',
              subLabel && h('span', {className: 'f6 fw5'}, [subLabel])
            ])
          ])
        ),
        helpText && h('span', {className: 'f6 fw5 lh-copy'}, [helpText])
      ])
    )
  }
}

export default Input