Example of input form
parent
704a52757b
commit
0389469982
|
@ -76,6 +76,6 @@ gulp.task "dependencies", ->
|
||||||
gulp.task "init", ["source", "style", "dependencies"]
|
gulp.task "init", ["source", "style", "dependencies"]
|
||||||
|
|
||||||
gulp.task "default", ->
|
gulp.task "default", ->
|
||||||
gulp.run ["server", "init"]
|
gulp.run ["server"]
|
||||||
gulp.watch path.source, ["source"]
|
gulp.watch path.source, ["source"]
|
||||||
gulp.watch path.style, ["style"]
|
gulp.watch path.style, ["style"]
|
||||||
|
|
|
@ -2,12 +2,13 @@
|
||||||
|
|
||||||
SPArouter = require "spa-router"
|
SPArouter = require "spa-router"
|
||||||
# -- components
|
# -- components
|
||||||
Button = require "./components/button"
|
|
||||||
Router = require "./components/router"
|
Router = require "./components/router"
|
||||||
# -- forms
|
# -- forms
|
||||||
FormSession = require "./forms/form.session"
|
FormSession = require "./forms/form.session"
|
||||||
# -- Screens
|
# -- Screens
|
||||||
ScreenConsole = require "./screens/console"
|
ScreenConsole = require "./screens/console"
|
||||||
|
ScreenForm = require "./screens/form"
|
||||||
# -- Modules
|
# -- Modules
|
||||||
C = require "./modules/constants"
|
C = require "./modules/constants"
|
||||||
|
|
||||||
|
@ -39,6 +40,8 @@ App = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
|
# return <ScreenForm />
|
||||||
|
|
||||||
if @state.session
|
if @state.session
|
||||||
avatar = "http://soyjavi.com/assets/img/soyjavi.hat.jpg"
|
avatar = "http://soyjavi.com/assets/img/soyjavi.hat.jpg"
|
||||||
else
|
else
|
||||||
|
|
|
@ -19,6 +19,10 @@ module.exports = React.createClass
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<button onClick={@onClick} className={@props.style} disabled={@props.disabled}>
|
<button data-component="button"
|
||||||
|
onClick={@onClick}
|
||||||
|
className={@props.style}
|
||||||
|
disabled={@props.disabled}>
|
||||||
|
{ <span className="icon {{@props.icon}}"></span> if @props.icon }
|
||||||
<abbr>{@props.caption}</abbr>
|
<abbr>{@props.caption}</abbr>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -0,0 +1,64 @@
|
||||||
|
###
|
||||||
|
@todo
|
||||||
|
###
|
||||||
|
|
||||||
|
Input = require "./input"
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
propTypes:
|
||||||
|
attributes : React.PropTypes.array.required
|
||||||
|
storage : React.PropTypes.bool
|
||||||
|
# -- Events
|
||||||
|
onSubmit : React.PropTypes.func
|
||||||
|
onError : React.PropTypes.func
|
||||||
|
onValid : React.PropTypes.func
|
||||||
|
|
||||||
|
getDefaultProps: ->
|
||||||
|
storage : false
|
||||||
|
|
||||||
|
getInitialState: ->
|
||||||
|
attributes : @props.attributes
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
onSubmit: (event) ->
|
||||||
|
event.preventDefault()
|
||||||
|
@props.onSubmit? event, @getValue()
|
||||||
|
|
||||||
|
onChange: (event) ->
|
||||||
|
console.log "form.onChange"
|
||||||
|
is_valid = true
|
||||||
|
values = @getValue()
|
||||||
|
# for attr in @props.attributes when attr.required and values[attr.ref].trim() is ""
|
||||||
|
# console.log attr.ref
|
||||||
|
# is_valid = false
|
||||||
|
# break
|
||||||
|
|
||||||
|
console.log "is_valid", is_valid
|
||||||
|
# @TODO: Handler if have errors
|
||||||
|
# @props.onChange? event, @getValue()
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
<form onSubmit={@onSubmit} onChange={@onChange}>
|
||||||
|
{
|
||||||
|
for attribute, index in @props.attributes
|
||||||
|
<Input ref={attribute.ref}
|
||||||
|
type={attribute.type}
|
||||||
|
value={attribute.value}
|
||||||
|
label={attribute.label}
|
||||||
|
required={attribute.required}
|
||||||
|
disabled={attribute.disabled}/>
|
||||||
|
}
|
||||||
|
<button>submit</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
# -- Extends
|
||||||
|
getValue: ->
|
||||||
|
value = {}
|
||||||
|
value[ref] = el.getValue() for ref, el of @refs
|
||||||
|
value
|
||||||
|
|
||||||
|
setValue: ->
|
||||||
|
@
|
|
@ -9,27 +9,57 @@ module.exports = React.createClass
|
||||||
label : React.PropTypes.string
|
label : React.PropTypes.string
|
||||||
value : React.PropTypes.string
|
value : React.PropTypes.string
|
||||||
type : React.PropTypes.string
|
type : React.PropTypes.string
|
||||||
disabled : React.PropTypes.boolean
|
required : React.PropTypes.bool
|
||||||
onChange : React.PropTypes.function
|
disabled : React.PropTypes.bool
|
||||||
|
# -- Events
|
||||||
|
onChange : React.PropTypes.func
|
||||||
|
onBlur : React.PropTypes.func
|
||||||
|
onFocus : React.PropTypes.func
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
type : "text"
|
type : "text"
|
||||||
disabled : false
|
disabled : false
|
||||||
|
|
||||||
|
getInitialState: ->
|
||||||
|
value : @props.value
|
||||||
|
|
||||||
# -- Events
|
# -- Events
|
||||||
onChange: (event) ->
|
onChange: (event) ->
|
||||||
console.log "onChange"
|
value = event.target.value
|
||||||
|
@setState value: value
|
||||||
|
@props.onChange? event, value
|
||||||
|
|
||||||
|
onBlur: (event) ->
|
||||||
|
console.log "onBlur"
|
||||||
|
@props.onBlur? event, value
|
||||||
|
|
||||||
|
onFocus: (event) ->
|
||||||
|
console.log "onFocus"
|
||||||
|
@props.onFocus? event, value
|
||||||
|
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<div data-component="input">
|
<div data-component-input={@props.type}>
|
||||||
<input
|
<input
|
||||||
type={@props.type}
|
type={@props.type}
|
||||||
value={@props.value}
|
value={@state.value}
|
||||||
placeholder={@props.hint}
|
placeholder={@props.hint}
|
||||||
disabled={@props.disabled}
|
disabled={@props.disabled}
|
||||||
required={@props.required} />
|
required={@props.required}
|
||||||
|
onBlur={@onBlur}
|
||||||
|
onFocus={@onFocus}
|
||||||
|
onChange={@onChange}/>
|
||||||
<span className="bar"></span>
|
<span className="bar"></span>
|
||||||
{ <label>{@props.label}</label> if @props.label }
|
{ <label>{@props.label}</label> if @props.label }
|
||||||
{ <span className="error">{@props.error}</span> if @props.error }
|
{ <span className="error">{@props.error}</span> if @props.error }
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
# -- Extends
|
||||||
|
getValue: ->
|
||||||
|
@state.value
|
||||||
|
|
||||||
|
setValue: (data) ->
|
||||||
|
@setState value: data
|
||||||
|
|
||||||
|
clearValue: ->
|
||||||
|
@setState ""
|
||||||
|
|
|
@ -8,7 +8,7 @@ ListItem = require "../components/list_item"
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
mock = (id: i, title: "Title #{i}" for i in [1..128])
|
mock = (id: i, title: "Title #{i}" for i in [1..200])
|
||||||
<article data-screen="console">
|
<article data-screen="console">
|
||||||
<List dataSource={mock} itemFactory={ListItem} onScroll={@props.onScroll} />
|
<List dataSource={mock} itemFactory={ListItem} onScroll={@props.onScroll} />
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
###
|
||||||
|
@todo
|
||||||
|
###
|
||||||
|
|
||||||
|
# -- Components
|
||||||
|
Form = require "../components/form"
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
onFormSubmit: (event, value) ->
|
||||||
|
console.log "onFormSubmit", value
|
||||||
|
|
||||||
|
onFormError: (event, value) ->
|
||||||
|
console.log "onFormChange", arguments
|
||||||
|
|
||||||
|
onFormValid: (event, value) ->
|
||||||
|
console.log "onFormChange", arguments
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
attributes = [
|
||||||
|
ref: "name", label: "Your Name", required: true
|
||||||
|
,
|
||||||
|
ref: "description", type: "textarea", label: "Description", value: "Doer"
|
||||||
|
,
|
||||||
|
ref: "years", type: "number", label: "Years"
|
||||||
|
,
|
||||||
|
ref: "twitter", label: "Nickname", disabled: true
|
||||||
|
,
|
||||||
|
type: "Button"
|
||||||
|
]
|
||||||
|
<section data-screen="form">
|
||||||
|
<Form attributes={attributes}
|
||||||
|
onSubmit={@onFormSubmit}
|
||||||
|
onError={@onFormError}
|
||||||
|
onValid={@onFormValid}
|
||||||
|
/>
|
||||||
|
</section>
|
|
@ -1,4 +1,5 @@
|
||||||
form
|
form
|
||||||
|
background-color : WHITE
|
||||||
padding : SPACE
|
padding : SPACE
|
||||||
// -- Classes
|
// -- Classes
|
||||||
&.session
|
&.session
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
[data-component="input"]
|
[data-component-input]
|
||||||
position : relative
|
position : relative
|
||||||
margin-bottom : SPACE
|
margin-bottom : SPACE
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue