<Form/> can save in localstorage
parent
b8a2fb88b0
commit
248581e600
|
@ -3,6 +3,7 @@
|
||||||
###
|
###
|
||||||
|
|
||||||
Style = require './style/form'
|
Style = require './style/form'
|
||||||
|
Autocomplete = require "./autocomplete"
|
||||||
Button = require "./button"
|
Button = require "./button"
|
||||||
Input = require "./input"
|
Input = require "./input"
|
||||||
|
|
||||||
|
@ -11,7 +12,8 @@ module.exports = React.createClass
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
attributes : React.PropTypes.array
|
attributes : React.PropTypes.array
|
||||||
storage : React.PropTypes.bool
|
storage : React.PropTypes.string
|
||||||
|
className : React.PropTypes.string
|
||||||
# -- Events
|
# -- Events
|
||||||
onSubmit : React.PropTypes.func
|
onSubmit : React.PropTypes.func
|
||||||
onError : React.PropTypes.func
|
onError : React.PropTypes.func
|
||||||
|
@ -20,10 +22,9 @@ module.exports = React.createClass
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
attributes : []
|
attributes : []
|
||||||
storage : false
|
|
||||||
|
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
attributes : @props.attributes
|
attributes : if @props.storage then do @storage else @props.attributes
|
||||||
|
|
||||||
# -- Events
|
# -- Events
|
||||||
onSubmit: (event) ->
|
onSubmit: (event) ->
|
||||||
|
@ -39,6 +40,7 @@ module.exports = React.createClass
|
||||||
break
|
break
|
||||||
|
|
||||||
@props.onChange? event, @
|
@props.onChange? event, @
|
||||||
|
@storage value if @props.storage
|
||||||
if is_valid
|
if is_valid
|
||||||
@refs.submit?.getDOMNode().removeAttribute "disabled"
|
@refs.submit?.getDOMNode().removeAttribute "disabled"
|
||||||
@props.onValid? event, @
|
@props.onValid? event, @
|
||||||
|
@ -48,13 +50,14 @@ module.exports = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<form data-component-form
|
<form data-component-form className={@props.className}
|
||||||
onSubmit={@onSubmit}
|
onSubmit={@onSubmit} onChange={@onChange}>
|
||||||
onChange={@onChange}>
|
|
||||||
{
|
{
|
||||||
for attribute, index in @props.attributes
|
for attribute, index in @props.attributes
|
||||||
if attribute.type is "submit"
|
if attribute.type is "submit"
|
||||||
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
|
||||||
|
else if attribute.type is "autocomplete"
|
||||||
|
<Autocomplete {...attribute} onChange={@onChange}/>
|
||||||
else
|
else
|
||||||
<Input {...attribute} />
|
<Input {...attribute} />
|
||||||
}
|
}
|
||||||
|
@ -62,6 +65,17 @@ module.exports = React.createClass
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
# -- Extends
|
# -- Extends
|
||||||
|
storage: (value) ->
|
||||||
|
key = "react-toolbox-form-#{@props.storage}"
|
||||||
|
if value
|
||||||
|
store = {}
|
||||||
|
store[attr.ref] = value[attr.ref] for attr in @props.attributes when attr.storage
|
||||||
|
window.localStorage.setItem key, JSON.stringify store
|
||||||
|
else
|
||||||
|
store = JSON.parse window.localStorage.getItem key or {}
|
||||||
|
input.value = store?[input.ref] or input.value for input in @props.attributes
|
||||||
|
@props.attributes
|
||||||
|
|
||||||
getValue: ->
|
getValue: ->
|
||||||
value = {}
|
value = {}
|
||||||
value[ref] = el.getValue() for ref, el of @refs when el.getValue?
|
value[ref] = el.getValue() for ref, el of @refs when el.getValue?
|
||||||
|
|
Loading…
Reference in New Issue