apeman-react-field/lib/ap_field_set.jsx

/**
 * Set of form field.
 * @class ApFieldSet
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import ReactDOM from 'react-dom'
import {ApLayoutMixin} from 'apeman-react-mixin-layout'
import uuid from 'uuid'
import {ApStyle} from 'apeman-react-style'
import numcal from 'numcal'

/** @lends ApFieldSet */
const ApFieldSet = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    plain: types.bool
  },

  mixins: [
    ApLayoutMixin
  ],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      plain: false,
      uuid: uuid.v4()
    }
  },

  render () {
    const s = this
    let { props, layouts } = s
    let { uuid } = props
    let style = {
      [`.ap-field-set-${uuid} .ap-field-label`]: layouts.label
    }
    return (
      <fieldset id={ props.id }
                className={ classnames('ap-field-set', {
                  'ap-field-set-plain': props.plain
                }, `ap-field-set-${uuid}`, props.className) }>
        <ApStyle className='ap-field-set-style'
                 data={ style }/>
        { props.children }
      </fieldset>
    )
  },

  // ------------------
  // For ApLayoutMixin
  // ------------------

  getInitialLayouts () {
    const s = this
    return {
      label: {}
    }
  },

  calcLayouts () {
    const s = this
    let node = ReactDOM.findDOMNode(s)

    let labels = node.querySelectorAll('.ap-field-label-inner')
    let labelWidth = numcal.max.apply(
        numcal, [ ...labels ].map((label) => label.getBoundingClientRect().width + 2)
      ) || null
    return {
      label: {
        minWidth: labelWidth ? parseInt(labelWidth) : null
      }
    }
  }
})

export default ApFieldSet