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