Merge pull request #3 from soyjavi/docs

First version of documentation
react-toolbox · Jul 8, 2015 · 818749f · 818749f
2 parents a786df1 + 8344e94
commit 818749f
Show file tree

Hide file tree

Showing 27 changed files with 401 additions and 123 deletions.
diff --git a/components/aside/aside.md b/components/aside/aside.md
@@ -0,0 +1,37 @@
+# Aside
+
+```
+var Aside = require('react-toolbox/components/aside');
+
+<Aside>
+  <header/>
+  <section>
+    <h1>Hello World</h1>
+  </section>
+  <footer/>
+</Aside>
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **active**        | Bool          | false           | If true, component will be show by default.|
+| **className**     | String        |                 | Sets the class-styles of the Component.|
+| **hideable**      | Bool          | false           | If true, the componente can be hideable clicking in it.|
+| **type**          | String        | "left"          | Type of the component, overwrite this property if you need set a different stylesheet. Options: "left" or "right"|
+
+## Methods
+
+#### show
+Show component.
+
+```
+aside_instance.show();
+```
+
+#### hide
+Hide component.
+```
+aside_instance.hide();
+```
diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
@@ -1,23 +1,17 @@
-###
-@todo
-###
-
 require './style'
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    type        : React.PropTypes.string.required
     active      : React.PropTypes.bool
-    hideable    : React.PropTypes.bool
     className   : React.PropTypes.string
+    hideable    : React.PropTypes.bool
+    type        : React.PropTypes.string.required
 
   getDefaultProps: ->
-    type        : "left"
-    active      : false
-    hideable    : false
     className   : ""
+    type        : "left"
 
   getInitialState: ->
     active      : @props.active

diff --git a/components/autocomplete/autocomplete.md b/components/autocomplete/autocomplete.md
@@ -0,0 +1,54 @@
+# Aside
+
+```
+var Autocomplete = require('react-toolbox/components/autocomplete');
+
+var data = [
+   { '1': 'Never' },
+   { '2': 'Every Night' },
+   { '3': 'Weeknights' },
+   { '4': 'Weekends' },
+   { '5': 'Weekly' },
+];
+
+<Autocomplete label="Period" dataSource={data} value='4' />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **className**     | String        |                 | Sets the class-styles of the Component.|
+| **colors**        | Object        |                 | JSON data representing all colors per key in the dropdown.||
+| **dataSource**    | Object        |                 | JSON data representing all items in the component.|
+| **disabled**      | Boolean       |                 | If true, component will be disabled.|
+| **error**         | String        |                 | Sets the error string.|
+| **exact**         | Bool          | true            | If true, component only accepts values from dataSource property..|
+| **label**         | String        |                 | The text string to use for the floating label element.|
+| **multiple**      | Bool          | true            | If true, component can hold multiple values.|
+| **onChange**      | Function      |                 | Callback function that is fired when the components's value changes.|
+| **required**      | Boolean       |                 | If true, component needs has a value.|
+| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
+| **value**         | String        |                 | Default value using JSON data.|
+
+## Methods
+
+#### getValue
+Returns the value of the input.
+
+```
+input_instance.getValue();
+```
+
+#### setValue
+Sets the value of the input element.
+
+```
+input_instance.setValue(newValue);
+```
+
+#### setError
+
+```
+input_instance.setError("Something is wrong...");
+```
diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
@@ -1,33 +1,30 @@
-###
-@todo
-###
-
 require './style'
 Input = require '../input'
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    type        : React.PropTypes.string
-    dataSource  : React.PropTypes.object
+    className   : React.PropTypes.string
     colors      : React.PropTypes.object
-    multiple    : React.PropTypes.bool
+    dataSource  : React.PropTypes.object
+    disabled    : React.PropTypes.bool
+    error       : React.PropTypes.string
     exact       : React.PropTypes.bool
-    # -- Inherit for <Input/>
     label       : React.PropTypes.string
-    value       : React.PropTypes.string
-    error       : React.PropTypes.string
-    required    : React.PropTypes.bool
-    disabled    : React.PropTypes.bool
+    multiple    : React.PropTypes.bool
     onChange    : React.PropTypes.func
+    required    : React.PropTypes.bool
+    type        : React.PropTypes.string
+    value       : React.PropTypes.string
 
   getDefaultProps: ->
-    type        : "text"
-    dataSource  : {}
+    className   : ""
     colors      : {}
-    multiple    : true
+    dataSource  : {}
     exact       : true
+    multiple    : true
+    type        : "text"
 
   getInitialState: ->
     focus       : false

diff --git a/components/button/button.md b/components/button/button.md
@@ -0,0 +1,35 @@
+# Button
+
+```
+var Button = require('react-toolbox/components/button');
+
+<Button caption="Login" />
+<Button caption="Primary" className="primary" icon="access_alarm" />
+<Button caption="Secondary" className="secondary" />
+<Button caption="Disabled" disabled />
+
+<Button type="circle" icon="access_alarm" />
+<Button type="circle" icon="explore" className="primary" />
+<Button type="circle" icon="zoom_in" className="secondary" />
+<Button type="circle" icon="input" disabled={true} />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **caption**       | String        |                 | The text string to use for the floating label element.|
+| **className**     | String        |                 | Set the class-styles of the Component.|
+| **disabled**      | Boolean       |                 | If true, component will be disabled.|
+| **icon**          | String        |                 | Default value using JSON data.|
+| **loading**       | Boolean       |                 | If true, component will be disabled and show a loading animation.|
+| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
+
+## Methods
+
+#### loading
+If true, component will be disabled and show a loading animation.
+
+```
+input_instance.loading(true);
+```
diff --git a/components/button/index.cjsx b/components/button/index.cjsx
@@ -1,7 +1,3 @@
-###
-@todo
-###
-
 require './style'
 FontIcon = require "../font_icon"
 Ripple   = require "../ripple"
@@ -10,19 +6,19 @@ module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    type        : React.PropTypes.string
     caption     : React.PropTypes.string
-    icon        : React.PropTypes.string
-    style       : React.PropTypes.string
+    className   : React.PropTypes.string
     disabled    : React.PropTypes.bool
+    icon        : React.PropTypes.string
     loading     : React.PropTypes.bool
+    type        : React.PropTypes.string
 
   getDefaultProps: ->
+    className   : ""
     type        : "square"
-    disabled    : false
-    loading     : false
 
   getInitialState: ->
+    loading     : @props.loading
     ripple      : undefined
 
   # -- Lifecycle
@@ -41,12 +37,17 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
+
     <button data-component-button={@props.type}
             onClick={@onClick}
-            className={@props.style}
-            disabled={@props.disabled or @props.loading}
+            className={@props.className}
+            disabled={@props.disabled or @state.loading}
             data-flex="horizontal center">
       { <FontIcon value={@props.icon} /> if @props.icon }
       { <abbr>{@props.caption}</abbr> if @props.caption }
-      <Ripple origin={@state.ripple} loading={@props.loading} />
+      <Ripple origin={@state.ripple} loading={@state.loading} />
     </button>
+
+  # -- Extends
+  loading: (value) ->
+    @setState loading: value
diff --git a/components/dialog/dialog.md b/components/dialog/dialog.md
@@ -0,0 +1,40 @@
+# Dialog
+
+```
+var Dialog  = require('react-toolbox/components/dialog');
+var actions = [
+  { caption: "Cancel", style: "transparent", onClick: this.onClose }
+,
+  { caption: "Save", style: "transparent", onClick: this.onSave }
+]
+
+<Dialog title='Hello World' actions={actions}>
+  /* -- more content -- */
+</Dialog>
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **actions**       | Array         |                 | A array of actions callbacks for the component.|
+| **active**        | Boolean       |                 | If true, component will be shows.|
+| **className**     | String        | "normal"        | Set the class-styles of the Component.|
+| **title**         | String        |                 | The text string to use for the title of the component.|
+| **type**          | String        |                 | Type of the component, overwrite this property if you need set a different stylesheet.|
+
+## Methods
+
+#### show
+Shows the dialog.
+
+```
+dialog_instance.show();
+```
+
+#### hide
+Hides the dialog.
+
+```
+dialog_instance.hide();
+```
diff --git a/components/dialog/index.cjsx b/components/dialog/index.cjsx
@@ -1,7 +1,3 @@
-###
-@todo
-###
-
 require './style'
 Button      = require '../button'
 Navigation  = require '../navigation'
@@ -10,16 +6,15 @@ module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    type        : React.PropTypes.string
+    actions     : React.PropTypes.array
+    active      : React.PropTypes.bool
     className   : React.PropTypes.string
     title       : React.PropTypes.string
-    active      : React.PropTypes.bool
-    actions     : React.PropTypes.array
+    type        : React.PropTypes.string
 
   getDefaultProps: ->
-    className   : "normal"
-    active      : false
     actions     : []
+    className   : "normal"
 
   getInitialState: ->
     active      : @props.active

diff --git a/components/dropdown/doc.md b/components/dropdown/doc.md
@@ -1,6 +1,5 @@
 # Dropdown
 
-
 ```
 var DropDown = require('react-toolbox/components/dropdown');
 

diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
@@ -1,5 +1,4 @@
 ###
-@todo
 v2
   - can set a icon like dispatcher
   - can set different template (maybe use a kind of mixin )

diff --git a/components/font_icon/font_icon.md b/components/font_icon/font_icon.md
@@ -0,0 +1,13 @@
+# FontIcon
+
+```
+var FontIcon  = require('react-toolbox/components/font_icon');
+
+<FontIcon value='add' />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **value**         | String        |                 | The keyString for the icon you want representate.|
diff --git a/components/font_icon/index.cjsx b/components/font_icon/index.cjsx
@@ -1,8 +1,3 @@
-###
-@todo
-###
-
-
 # require './style'
 
 module.exports = React.createClass