Determine type of fieldset

old
Javi 2015-08-20 11:30:18 +07:00
parent 4217e5289d
commit 92bd5ca242
1 changed files with 42 additions and 24 deletions

View File

@ -2,10 +2,19 @@
@todo
###
Autocomplete = require '../autocomplete'
Dropdown = require '../dropdown'
Input = require '../input'
Switch = require '../switch'
# -- Components
Autocomplete = require './autocomplete'
Dropdown = require './dropdown'
Input = require './input'
Switch = require './switch'
# -- Constants
TYPE =
AUTOCOMPLETE: 'autocomplete'
CHECKBOX : 'checkbox'
DROPDOWN : 'dropdown'
LABEL : 'label'
RADIO : 'radio'
SWITCH : 'switch'
module.exports = React.createClass
@ -14,24 +23,26 @@ module.exports = React.createClass
attributes : React.PropTypes.array
className : React.PropTypes.string
label : React.PropTypes.string
value : React.PropTypes.any
onChange : React.PropTypes.func
getDefaultProps: ->
attributes : []
className : ''
getInitialState: ->
attributes : @props.attributes
value_object : _determineTypeOfValue @props.attributes
type : _determineType @props.attributes
# -- Lifecycle
componentWillReceiveProps: (next_props) ->
if attributes = next_props.attributes
@setState attributes: attributes, value_object: _determineTypeOfValue attributes
@setValue attributes
@setState attributes: attributes, type: _determineType attributes
@setValue next_props.value or @props.value
# -- Events
onChange: (event) ->
unless @state.value_object
if @state.type is TYPE.RADIO
for ref, el of @refs when el.refs.input.getDOMNode() isnt event.target
el.setValue false
@ -41,28 +52,28 @@ module.exports = React.createClass
is_valid = false
@refs[attr.ref].setError? 'Required field'
break
setTimeout (=> @props.onChange? event, @), 10
setTimeout (=> @props.onChange event, @), 10 if @props.onChange?
# -- Render
render: ->
<fieldset data-react-toolbox='fieldset'
<div data-react-toolbox='fieldset'
className={@props.className} onChange={@onChange}>
{ <label>{@props.label}</label> if @props.label }
{
for attribute, index in @state.attributes
if attribute.type is 'label'
if attribute.type is TYPE.LABEL
<label>{attribute.caption}</label>
else if attribute.type is 'autocomplete'
else if attribute.type is TYPE.AUTOCOMPLETE
<Autocomplete key={index} {...attribute} onChange={@onChange}/>
else if attribute.type is 'dropdown'
else if attribute.type is TYPE.DROPDOWN
<Dropdown key={index} {...attribute} onChange={@onChange}/>
else if attribute.type is 'switch'
else if attribute.type is TYPE.SWITCH
<Switch key={index} {...attribute} onChange={@onChange}/>
else
<Input key={index} {...attribute} />
}
{ @props.children }
</fieldset>
</div>
# -- Extends
clean: ->
@ -70,19 +81,26 @@ module.exports = React.createClass
getValue: ->
value = {}
if @state.value_object
if @state.type isnt TYPE.RADIO
value[ref] = input.getValue() for ref, input of @refs when input.getValue?
else
value = ref for ref, input of @refs when input.getValue?() is true
value
setValue: (data = []) ->
@refs[field.ref]?.setValue? field.value for field in data
setValue: (data = {}) ->
if data instanceof Object
@refs[key]?.setValue? value for key, value of data
else
@refs[key].setValue? key is data for key of @refs
# -- Internal methods
_determineTypeOfValue = (attributes) ->
value_object = false
for attribute in attributes when attribute.type not in ['label', 'radio']
value_object = true
break
value_object
_determineType = (attributes) ->
type = ''
group_radio = true
group_checkbox = true
for attribute in attributes when attribute.type isnt TYPE.LABEL
group_radio = false if attribute.type isnt TYPE.RADIO
group_checkbox = false if attribute.type isnt TYPE.CHECKBOX
type = TYPE.RADIO if group_radio
type = TYPE.CHECKBOX if group_checkbox
type