apeman-react-form/lib/with_form.jsx

/**
 * Higher order component with form
 * @function withForm
 * @param {function} Component - A component constructor
 * @returns {function} - Wrapped component
 */
'use strict'

import {wrap} from 'breact'
import classnames from 'classnames'
import {ApStyle} from 'apeman-react-style'
import uuid from 'uuid'
import {spinalcase} from 'stringcase'
import React, {PropTypes as types} from 'react'
import {alpha} from 'apemancolor'

const noop = () => null

/** @lends withForm */
function withForm (Component) {
  return wrap(Component, {
    propTypes: {
      /** Form id */
      id: types.string,
      /** Submit handling */
      onSubmit: types.func,
      /** Cancel handling */
      onCancel: types.func,
      /** Update values */
      onUpdate: types.func.isRequired,
      /** Form values */
      values: types.object.isRequired,
      /** Form errors */
      errors: types.object,
      /** Error color */
      errorColor: types.string
    },

    getDefaultProps () {
      return {
        onSubmit: noop,
        onCancel: noop,
        onUpdate: noop,
        values: {},
        errors: null,
        errorColor: '#E11'
      }
    },

    render () {
      const s = this
      let { props } = s
      let {
        id = `form-${s.uuid}`,
        errors
      } = props
      let errorList = s.renderErrorList(errors, id)
      let errorStyle = s.renderErrorStyle(errors, id)
      let idOf = (name) => `${id}-${spinalcase(name)}`
      return (
        <Component { ...props }
                   id={ id }
                   idOf={ idOf }
                   errorStyle={ errorStyle }
                   errorList={ errorList }
        />
      )
    },

    componentWillMount () {
      const s = this
      s.uuid = uuid.v4()
    },

    // ------------------
    // Custom
    // ------------------

    renderErrorList (errors, id) {
      let names = Object.keys(errors || {})
      let className = classnames('ap-form-error-list', {
        'ap-form-error-list-empty': names.length === 0
      })
      return (
        <ul className={ className }
            id={ `error-list-for-${id}` }
        >
          {
            names.map((name) => (
              <li key={ name }
                  className='ap-form-error-list-item'
              >{ errors[ name ] }</li>
            ))
          }
        </ul>
      )
    },

    renderErrorStyle (errors, id) {
      const s = this
      let { errorColor } = s.props
      let data = Object.keys(errors || {})
        .reduce((data, name) => Object.assign(data, {
          [`#${id} [name="${name}"]`]: {
            borderColor: errorColor,
            backgroundColor: alpha(errorColor, 0.1)
          }
        }), {})
      return (
        <ApStyle data={ data }/>
      )
    }
  })
}

export default withForm