vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #3 from soyjavi/docs 

First version of documentation
old
Javi Jiménez 2015-07-08 08:54:11 +07:00
parent a786df1880 8344e94a37
commit 818749f6a6
27 changed files with 403 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/aside/aside.md Normal file
View File

@ -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();
```

12
components/aside/index.cjsx
View File

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

54
components/autocomplete/autocomplete.md Normal file
View File

@ -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...");
```

29
components/autocomplete/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require './style'
Input = require '../input'
@ -9,25 +5,26 @@ 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
exact : React.PropTypes.bool
# -- Inherit for <Input/>
label : React.PropTypes.string
value : React.PropTypes.string
error : React.PropTypes.string
required : React.PropTypes.bool
dataSource : React.PropTypes.object
disabled : React.PropTypes.bool
error : React.PropTypes.string
exact : React.PropTypes.bool
label : React.PropTypes.string
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

35
components/button/button.md Normal file
View File

@ -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);
```

25
components/button/index.cjsx
View File

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

40
components/dialog/dialog.md Normal file
View File

@ -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();
```

13
components/dialog/index.cjsx
View File

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

1
components/dropdown/doc.md
View File

@ -1,6 +1,5 @@
# Dropdown
```
var DropDown = require('react-toolbox/components/dropdown');

1
components/dropdown/index.cjsx
View File

@ -1,5 +1,4 @@
###
@todo
v2
- can set a icon like dispatcher
- can set different template (maybe use a kind of mixin )

13
components/font_icon/font_icon.md Normal file
View File

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

5
components/font_icon/index.cjsx
View File

@ -1,8 +1,3 @@
###
@todo
###
# require './style'
module.exports = React.createClass

40
components/form/form.md Normal file
View File

@ -0,0 +1,40 @@
# Form
```
var Form = require('react-toolbox/components/form');
var fields : [
{ref: "name", label: "Your Name", required: true, storage: true},
{ref: "description", multiline: true, label: "Description", value: "Doer"},
{ref: "birthdate", type: "date", label: "Birthdate"}
]
<Form attributes={fields} storage="my_toolbox_form" />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **attributes** | array | | Array of fields you want hold, fields can be instances of <Input/>, <Autocomplete>, <Dropdown> or <Button/>|
| **className** | String | | Set the class-styles of the Component.|
| **onChange** | Function | | Dispatch callback when values of the component changes.|
| **onError** | Function | | Dispatch callback when a required field is null or has incorrect type.|
| **onSubmit** | Function | | Dispatch callback when user clicks on submit <Button/> |
| **onValid** | Function | | Dispatch callback when all required fields are full-filled.|
| **Storage** | String | | Sets a localStorage key for save all current field values.|
## Methods
#### getValue
Returns the value of the form.
```
form_instance.getValue();
```
#### setValue
Sets the value of the form component.
```
form_instance.setValue(newValue);
```

18
components/form/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require "./style"
Autocomplete = require "../autocomplete"
Dropdown = require "../dropdown"
@ -13,13 +9,12 @@ module.exports = React.createClass
# -- States & Properties
propTypes:
attributes : React.PropTypes.array
storage : React.PropTypes.string
className : React.PropTypes.string
# -- Events
onSubmit : React.PropTypes.func
onError : React.PropTypes.func
onValid : React.PropTypes.func
onChange : React.PropTypes.func
onError : React.PropTypes.func
onSubmit : React.PropTypes.func
onValid : React.PropTypes.func
storage : React.PropTypes.string
getDefaultProps: ->
attributes : []
@ -29,7 +24,10 @@ module.exports = React.createClass
# -- Lifecycle
componentWillReceiveProps: (next_props) ->
@setValue (item for item in @storage next_props) if next_props.attributes
if next_props.attributes
attributes = @storage next_props
@setState attributes: attributes
@setValue (item for item in attributes)
# -- Events
onSubmit: (event) ->

1
components/index.coffee
View File

@ -16,4 +16,3 @@ module.exports =
Ripple : require "./ripple"
ProgressBar : require "./progress_bar"
# -- Tools
Router : require "./router"

5
components/input/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require './style'
module.exports = React.createClass
@ -13,6 +9,7 @@ module.exports = React.createClass
error : React.PropTypes.string
label : React.PropTypes.string
multiline : React.PropTypes.bool
onBlur : React.PropTypes.func
onChange : React.PropTypes.func
onKeyPress : React.PropTypes.func
onFocus : React.PropTypes.func

48
components/input/input.md Normal file
View File

@ -0,0 +1,48 @@
# Input
```
var Input = require('react-toolbox/components/input');
<Input value='Hello' required />
<Input multiline value='Lorem ipsum...' disabled />
<Input type='number' value='1980' label='Year of birthdate' />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **className** | String | | Sets the class-styles of the Component.|
| **disabled** | Boolean | false | If true, component will be disabled.|
| **error** | String | | Sets the error string.|
| **label** | String | | The text string to use for the floating label element.|
| **multiline** | Boolean | false | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
| **onBlur** | Function | | Callback function that is fired when components is blured.|
| **onChange** | Function | | Callback function that is fired when the components's value changes.|
| **onFocus** | Function | | Callback function that is fired when components is focused.|
| **onKeyPress** | Function | | Callback function that is fired when a key is pressed.|
| **required** | Boolean | false | If true, component needs has a value.|
| **type** | String | "normal" | 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...");
```

15
components/link/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require './style'
FontIcon = require "../font_icon"
@ -9,12 +5,15 @@ module.exports = React.createClass
# -- States & Properties
propTypes:
route : React.PropTypes.array
icon : React.PropTypes.string
caption : React.PropTypes.string
className : React.PropTypes.string
count : React.PropTypes.number
style : React.PropTypes.string
icon : React.PropTypes.string
onClick : React.PropTypes.func
route : React.PropTypes.array
getDefaultProps: ->
attributes : ""
# -- Events
onClick: (event) ->
@ -24,7 +23,7 @@ module.exports = React.createClass
render: ->
<a data-component-link=""
href={"##{@props.route}"}
className={@props.style}
className={@props.className}
onClick={@onClick}
data-flex="horizontal center">
{ <FontIcon value={@props.icon} /> if @props.icon }

19
components/link/link.md Normal file
View File

@ -0,0 +1,19 @@
# Link
```
var Link = require('react-toolbox/components/link');
<Link route='http://google.com' caption='Go to Google.com' />
<Link route='/profile/soyjavi' icon='user' />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **caption** | String | "normal" | he text string to use for the floating label element.|
| **className** | String | | Sets the class-styles of the Component.|
| **count** | Number | | Sets a count number behind caption property.|
| **icon** | String | | Sets a <FontIcon/> sub-component.|
| **onClick** | Function | | Dispatch event when user clicks on component.|
| **route** | String | | URL String|

10
components/list/index.cjsx
View File

@ -1,21 +1,19 @@
###
@todo
###
require './style'
module.exports = React.createClass
# -- States & Properties
propTypes:
type : React.PropTypes.string
className : React.PropTypes.string
dataSource : React.PropTypes.Array
ItemFactory : React.PropTypes.func
onClick : React.PropTypes.func
type : React.PropTypes.string
getDefaultProps: ->
type : "default"
attributes : ""
dataSource : []
type : "default"
# -- Events
onClick: (event, item) ->

21
components/list/list.md Normal file
View File

@ -0,0 +1,21 @@
# List
```
var List = require('react-toolbox/components/list');
var data = [];
var template = function(data) {
<a href=/item/{data.id}>{data.name}</a>
};
<List dataSource={data} ItemFactory={template} />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **className** | String | | Sets the class-styles of the Component.|
| **dataSource** | Array | required | JSON data representing all items in the list. |
| **ItemFactory** | Function | required | Callback who contains the item data representation.|
| **onClick** | Function | | Dispatch event when user clicks on any item sub-component.|
| **type** | String | | Type of the component, overwrite this property if you need set a different stylesheet.|

13
components/loading/loading.md Normal file
View File

@ -0,0 +1,13 @@
# Loading
```
var Loading = require('react-toolbox/components/loading');
<Loading type='fullscreen' />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **type** | String | normal | Type of the component, overwrite this property if you need set a different stylesheet.|

9
components/navigation/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require './style'
# -- Components
Button = require '../button'
@ -11,9 +7,10 @@ module.exports = React.createClass
# -- States & Properties
propTypes:
type : React.PropTypes.string
routes : React.PropTypes.array
actions : React.PropTypes.array
className : React.PropTypes.string
routes : React.PropTypes.array
type : React.PropTypes.string
getDefaultProps: ->
type : "default"

23
components/navigation/navigation.md Normal file
View File

@ -0,0 +1,23 @@
# Navigation
```
var Navigation = require('react-toolbox/components/navigation');
var routes = [
{route:'/profile/soyjavi', icon='user'},
{route:'http://google.com', caption='Go to Google.com'},
];
var actions = [
{caption:"Primary", style:"primary", icon="access_alarm"}
];
<Navigation routes={routes} actions={actions} />
```
## Properties
| Name | Type | Default | Description|
|:- |:-: | :- |:-|
| **actions** | Array | | Array of actions callbacks using <Button/> component definition.|
| **className** | String | | Sets the class-styles of the Component.|
| **routes** | Array | | Array of URL String using <Link/> component definition. |
| **type** | String | "normal" | Type of the component, overwrite this property if you need set a different stylesheet.|

4
components/ripple/index.cjsx
View File

@ -1,7 +1,3 @@
###
@todo
###
require './style'
module.exports = React.createClass

29
components/router/router.coffee
View File

@ -1,29 +0,0 @@
###
@todo
###
require "./style/ripple"
module.exports = React.createClass
# -- States & Properties
propTypes:
origin : React.PropTypes.object
getInitialState: ->
className : undefined
# -- Lifecycle
componentWillReceiveProps: (next_props) ->
@setState className: "active" if next_props.origin?
componentDidMount: ->
el = @getDOMNode()
for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
el.addEventListener key, (=> @setState className: undefined), false
# -- Render
render: ->
<div data-component-ripple
className={@state.className}
style={left: @props.origin?.left, top: @props.origin?.top} />

8
spec/components/button.cjsx
View File

@ -17,13 +17,13 @@ module.exports = React.createClass
<h2>Buttons</h2>
<p>lorem ipsum...</p>
<Button caption="Login" disabled=false />
<Button caption="Primary" style="primary" icon="access_alarm" />
<Button caption="Secondary" style="secondary" />
<Button caption="Primary" className="primary" icon="access_alarm" />
<Button caption="Secondary" className="secondary" />
<Button caption="Disabled" disabled={true} />
<Button type="circle" icon="access_alarm" />
<Button type="circle" icon="explore" style="primary" />
<Button type="circle" icon="zoom_in" style="secondary" />
<Button type="circle" icon="explore" className="primary" />
<Button type="circle" icon="zoom_in" className="secondary" />
<Button type="circle" icon="input" disabled={true} />
</section>