Example of input form

gulpfile.coffee

@@ -76,6 +76,6 @@ gulp.task "dependencies", ->
 gulp.task "init", ["source", "style", "dependencies"]
 
 gulp.task "default", ->
-  gulp.run ["server", "init"]
+  gulp.run ["server"]
   gulp.watch path.source, ["source"]
   gulp.watch path.style, ["style"]

source/app.cjsx

@@ -2,12 +2,13 @@
 
 SPArouter       = require "spa-router"
 # -- components
-Button          = require "./components/button"
+
 Router          = require "./components/router"
 # -- forms
 FormSession     = require "./forms/form.session"
 # -- Screens
 ScreenConsole   = require "./screens/console"
+ScreenForm      = require "./screens/form"
 # -- Modules
 C               = require "./modules/constants"
 
@@ -39,6 +40,8 @@ App = React.createClass
 
   # -- Render
   render: ->
+    # return <ScreenForm />
+
     if @state.session
       avatar = "http://soyjavi.com/assets/img/soyjavi.hat.jpg"
     else

source/components/button.cjsx

@@ -19,6 +19,10 @@ module.exports = React.createClass
 
   # -- 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>
     </button>

source/components/form.cjsx

@@ -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: ->
+    @

source/components/input.cjsx

@@ -9,27 +9,57 @@ module.exports = React.createClass
     label       : React.PropTypes.string
     value       : React.PropTypes.string
     type        : React.PropTypes.string
-    disabled    : React.PropTypes.boolean
-    onChange    : React.PropTypes.function
+    required    : React.PropTypes.bool
+    disabled    : React.PropTypes.bool
+    # -- Events
+    onChange    : React.PropTypes.func
+    onBlur      : React.PropTypes.func
+    onFocus     : React.PropTypes.func
 
   getDefaultProps: ->
     type        : "text"
     disabled    : false
 
+  getInitialState: ->
+    value       : @props.value
+
   # -- Events
   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: ->
-    <div data-component="input">
+    <div data-component-input={@props.type}>
       <input
         type={@props.type}
-        value={@props.value}
+        value={@state.value}
         placeholder={@props.hint} 
         disabled={@props.disabled}
-        required={@props.required} />
+        required={@props.required}
+        onBlur={@onBlur}
+        onFocus={@onFocus}
+        onChange={@onChange}/>
       <span className="bar"></span>
       { <label>{@props.label}</label> if @props.label }
       { <span className="error">{@props.error}</span> if @props.error }
     </div>
+
+  # -- Extends
+  getValue: ->
+    @state.value
+
+  setValue: (data) ->
+    @setState value: data
+
+  clearValue: ->
+    @setState ""

source/screens/console.cjsx

@@ -8,7 +8,7 @@ ListItem        = require "../components/list_item"
 module.exports  = React.createClass
 
   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">
       <List dataSource={mock} itemFactory={ListItem} onScroll={@props.onScroll} />
     </article>

source/screens/form.cjsx

@@ -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>

source/styles/components/form.styl

@@ -1,4 +1,5 @@
 form
+  background-color                        : WHITE
   padding                                 : SPACE
   // -- Classes
   &.session

source/styles/components/input.styl

@@ -1,4 +1,4 @@
-[data-component="input"]
+[data-component-input]
   position                          : relative
   margin-bottom                     : SPACE