Setting values by default

components/autocomplete.cjsx

@@ -10,7 +10,7 @@ module.exports = React.createClass
   # -- States & Properties
   propTypes:
     type        : React.PropTypes.string
-    dataSource  : React.PropTypes.object #or React.PropTypes.array
+    dataSource  : React.PropTypes.object
     multiple    : React.PropTypes.bool
     exact       : React.PropTypes.bool
     # -- Inherit for <Input/>
@@ -33,6 +33,10 @@ module.exports = React.createClass
     sugestions  : {}
     values      : {}
 
+  # -- Lifecycle
+  componentDidMount: ->
+    @setValue @props.value if @props.value
+
   # -- Events
   onFocus: ->
     @refs.sugestions.getDOMNode().scrollTop = 0
@@ -78,7 +82,7 @@ module.exports = React.createClass
             {<li id={key}>{label}</li> for key, label of @state.values}
           </ul>
       }
-      <Input {...@props} ref="input" onChange={@onChange}
+      <Input {...@props} value="" ref="input" onChange={@onChange}
              onKeyPress={@onKeyPress} onFocus={@onFocus} onBlur={@onBlur}/>
       <ul ref="sugestions" data-role="sugestions" onClick={@onSelect}>
         {<li id={key}>{label}</li> for key, label of @state.sugestions}
@@ -92,8 +96,12 @@ module.exports = React.createClass
     else
       Object.keys(@state.values)?[0]
 
-  setValue: ->
-    # @TODO
+  setValue: (data) ->
+    data = [data] if typeof data is 'string'
+    values = {}
+    values[key] = label for key, label of @state.dataSource when key in data
+    @setState values: values
+    @refs.input.setValue values[Object.keys(values)?[0]] unless @state.multiple
 
   setError: (data) ->
     @refs.input.setError data

spec/index.cjsx

@@ -1,10 +1,11 @@
 "use strict"
 
 # -- Components
-Button    = require "../components/button"
-Form      = require "../components/form"
+Autocomplete  = require "../components/autocomplete"
+Button        = require "../components/button"
+Form          = require "../components/form"
 
-Dialog    = require './examples/dialog'
+Dialog        = require './examples/dialog'
 
 Test = React.createClass
   getInitialState: ->
@@ -28,6 +29,10 @@ Test = React.createClass
     console.log "onShowDialog"
     @refs.dialog.show()
 
+  onAutocompleteValues: ->
+    console.log @refs.autocomplete_multiple.getValue()
+    console.log @refs.autocomplete_simple.getValue()
+
   # -- Render
   render: ->
     attributes = [
@@ -55,11 +60,28 @@ Test = React.createClass
     ,
       type: "submit", caption: "Send", style: "primary anchor", disabled: true
     ]
+    attributes = []
+
+    countries = ["Spain", "England", "USA", "Thailand", "Tongo", "Slovenia"]
+    countries_selected = ["USA", "Tongo"]
+    countries_obj =
+      "ES-es"   : "Spain"
+      "TH-th"   : "Thailand"
+      "EN-gb"   : "England"
+      "EN-en"   : "USA"
+    countries_obj_selected = "TH-th"
 
     <app>
       <h1>React-Kit <small>New way for create</small></h1>
       <br/>
 
+      <h2>Autocomplete</h2>
+      <Autocomplete ref="autocomplete_multiple" placeholder="elements is up to you..."
+                    dataSource={countries} value={countries_selected}/>
+      <Autocomplete ref="autocomplete_simple" multiple=false exact=false
+                    dataSource={countries_obj} value={countries_obj_selected}/>
+      <Button caption="Get values of autocomplete" onClick={@onAutocompleteValues} />
+
       <h2>Forms</h2>
       <Form attributes={attributes} />