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