Documentation for <Dropdown/> and onChange callback

react-toolbox · Jun 30, 2015 · f3ce007 · f3ce007
1 parent 9fc0199
commit f3ce007
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/components/dropdown/doc.md b/components/dropdown/doc.md
@@ -0,0 +1,44 @@
+# Dropdown
+
+
+```
+var DropDown = require('react-toolbox/components/dropdown');
+
+var data = [
+   { '1': 'Never' },
+   { '2': 'Every Night' },
+   { '3': 'Weeknights' },
+   { '4': 'Weekends' },
+   { '5': 'Weekly' },
+];
+
+<DropDown dataSource={data} value='2' />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description |
+|:-                 |:-:            | :-              |:-|
+| **type**          | String        | "normal"        | Type of the component, overwrite this property if you need set a different stylesheet.
+| **className**     | String        |                 | Set the class-styles of the Component.
+| **dataSource**    | Object        |                 | JSON data representing all items in the dropdown.
+| **value**         | String        |                 | Default value using JSON data.
+| **label**         | String        |                 | The text string to use for the floating label element.
+| **disabled**      | Boolean       | false           | Set components disabled.
+| **onChange**      | Function      |                 | Callback function that is fired when the components's value changes.
+
+## Methods
+
+#### getValue
+Returns the value of the input.
+
+```
+dropdown_instance.getValue();
+```
+
+#### setValue
+Sets the value of the input element.
+
+```
+dropdown_instance.setValue(newValue);
+```
diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
@@ -18,6 +18,7 @@ module.exports = React.createClass
     value       : React.PropTypes.string
     label       : React.PropTypes.string
     disabled    : React.PropTypes.disabled
+    onChange    : React.PropTypes.func
 
   getDefaultProps: ->
     type        : "normal"
@@ -42,9 +43,10 @@ module.exports = React.createClass
         active    : false
         value     : target.getAttribute "id"
         ripple :
-            left  : event.pageX - client?.left
-            top   : event.pageY - client?.top
-            width : (client?.width * 2)
+          left    : event.pageX - client?.left
+          top     : event.pageY - client?.top
+          width   : (client?.width * 2)
+      @props.onChange event, @
 
   # -- Render
   render: ->

diff --git a/spec/components/dropdown.cjsx b/spec/components/dropdown.cjsx
@@ -16,11 +16,6 @@ module.exports = React.createClass
       "EN-en"   : "USA"
       "FR-fr"   : "France"
 
-  # -- Events
-  onAutocompleteValues: (ref, method) ->
-    console.log @refs.autocomplete_multiple.getValue()
-    console.log @refs.autocomplete_simple.getValue()
-
   # -- Render
   render: ->
     countries_selected = ["USA", "Tongo"]