Skip to content

Commit f8dd6fb

Browse files
committed
docs
1 parent d8133f9 commit f8dd6fb

22 files changed

+526
-1052
lines changed

build/babel.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ args._.forEach(function (input) {
1919
, data = babel.transformFileSync(file, {
2020
externalHelpers: true,
2121
plugins: [
22-
"babel-plugin-external-helpers:after"
22+
'babel-plugin-external-helpers:after'
2323
]
2424
});
2525

docs/components/ApiMenuItem.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ var ApiMenuItem = React.createClass({
1414
window.scrollTo(window.pageXOffset, anchor.offsetTop)
1515
},
1616

17-
render: function() {
17+
render() {
1818

1919
if( this.props.divider)
2020
return <MenuItem divider={true}></MenuItem>
@@ -30,4 +30,4 @@ var ApiMenuItem = React.createClass({
3030

3131
});
3232

33-
module.exports = ApiMenuItem;
33+
module.exports = ApiMenuItem;

docs/components/EditableExample.jsx

Lines changed: 17 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,31 @@
1-
'use strict';
2-
31
var React = require('react')
42
, ReactDOM = require('react-dom')
5-
, CodeMirrorEditor = require('./codemirror')
6-
, babel = require('babel/browser')
7-
, config = require('json!../../.babelrc')
3+
, Playground = require('@jquense/component-playground')
84
, ReactWidgets = require('../../src/index')
95
, MultiselectTagList = require('react-widgets/MultiselectTagList')
106
, List = require('react-widgets/List')
117
, genData = require('./generate-data');
128

13-
function listOfPeople(){
14-
return genData(15)
15-
}
16-
17-
function scopedEval(code, mountNode) {
18-
var context = { ReactWidgets: { ...ReactWidgets, MultiselectTagList, List }, listOfPeople, mountNode, React, ReactDOM }
199

20-
return (new Function( 'with(this) { ' + code + '}')).call(context);
10+
var scope = {
11+
ReactWidgets: { ...ReactWidgets, MultiselectTagList, List },
12+
listOfPeople(){
13+
return genData(15)
14+
},
15+
React,
16+
ReactDOM
2117
}
2218

23-
config.plugins = []
24-
2519
module.exports = React.createClass({
26-
27-
propTypes: {
28-
codeText: React.PropTypes.string.isRequired,
29-
transformer: React.PropTypes.func,
30-
renderCode: React.PropTypes.bool
31-
},
32-
33-
getDefaultProps: function() {
34-
return {
35-
transformer: function(code) {
36-
return babel.transform(code, config).code;
37-
}
38-
};
39-
},
40-
41-
getInitialState: function() {
42-
return {
43-
code: this.props.codeText
44-
};
45-
},
46-
47-
handleCodeChange: function(value) {
48-
this.setState({code: value, error: null },
49-
() => this.executeCode());
50-
51-
},
52-
53-
compileCode: function() {
54-
return this.props.transformer(this.state.code);
55-
},
56-
57-
render: function() {
58-
20+
render() {
5921
return (
60-
<div className="editable-example row">
61-
<div className='editable-rendered col-md-5 col-md-push-7'>
62-
<div ref="mount" />
63-
</div>
64-
<div className='editable-editor col-md-7 col-md-pull-5'>
65-
<CodeMirrorEditor key="jsx"
66-
onChange={this.handleCodeChange}
67-
value={this.state.code}/>
68-
{ this.state.error &&
69-
<div className='text-danger editable-error'>{this.state.error}</div>
70-
}
71-
</div>
72-
</div>
73-
);
74-
},
75-
76-
componentDidMount: function() {
77-
this.executeCode();
78-
},
79-
80-
componentWillUpdate: function(nextProps, nextState) {
81-
clearTimeout(this.timeoutID);
82-
// execute code only when the state's not being updated by switching tab
83-
// this avoids re-displaying the error, which comes after a certain delay
84-
if (this.state.code !== nextState.code)
85-
setTimeout(() => this.executeCode());
86-
},
87-
88-
setTimeout: function() {
89-
clearTimeout(this.timeoutID);
90-
this.timeoutID = window.setTimeout.apply(null, arguments);
91-
},
92-
93-
componentWillUnmount: function() {
94-
var mountNode = this.refs.mount;
95-
96-
try {
97-
ReactDOM.unmountComponentAtNode(mountNode);
98-
}
99-
catch (e) { }
100-
},
101-
102-
executeCode: function() {
103-
var mountNode = this.refs.mount;
104-
105-
try {
106-
ReactDOM.unmountComponentAtNode(mountNode);
107-
}
108-
catch (e) { }
109-
110-
try {
111-
scopedEval(this.compileCode(), mountNode);
112-
}
113-
catch (err) {
114-
this.setTimeout(() => {
115-
this.setState({ error: err.toString() })
116-
}, 1000);
117-
}
22+
<Playground
23+
{...this.props}
24+
mode='text/jsx'
25+
theme='oceanicnext'
26+
babelConfig={{ stage: 0 }}
27+
scope={scope}
28+
/>
29+
);
11830
}
11931
});

docs/components/PropHeader.jsx

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var ApiPropHeader = React.createClass({
99
},
1010

1111
render: function() {
12-
var {
12+
var {
1313
children
1414
, handler
1515
, type
@@ -22,20 +22,39 @@ var ApiPropHeader = React.createClass({
2222
<h3 className='prop-header' id={`/${id}`}>
2323
<a href={'#/' + id }>
2424
{ children }
25-
{ type &&
25+
{ type &&
2626
<small>
2727
{ type }
28-
{ props.default &&
28+
{ props.default &&
2929
<Default>{props.default}</Default>
3030
}
3131
</small>
3232
}
33-
{ controllable &&
33+
{ controllable &&
3434
<strong>{`controllable (${handler}, ${defaultKey(children)})`}</strong>
3535
}
3636
</a>
3737
</h3>
3838
);
39+
},
40+
41+
localizable(prop, localizers) {
42+
let locales = localizers.reduce((obj, l) => {
43+
obj[l] = require('../../src/localizers/' + l)
44+
return obj
45+
}, {})
46+
47+
let select = e => locales[e.target.value]()
48+
49+
return (
50+
<span>
51+
<select>
52+
{
53+
localizers.map(l => <option>{l}</option>)
54+
}
55+
</select>
56+
</span>
57+
)
3958
}
4059

4160
});
@@ -44,4 +63,4 @@ function defaultKey(key){
4463
return 'default' + key.charAt(0).toUpperCase() + key.substr(1)
4564
}
4665

47-
module.exports = ApiPropHeader;
66+
module.exports = ApiPropHeader;

docs/components/codemirror.jsx

Lines changed: 0 additions & 61 deletions
This file was deleted.

docs/components/docs.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,15 @@ var NumberPicker = require('./pages/NumberPicker.api.md')
2121
//var Migration = require('./pages/Migration.jsx')
2222
var Advanced = require('./pages/Advanced.jsx')
2323
var Locale = require('./pages/i18n.md');
24+
var Controllables = require('./pages/controllables.md');
2425

2526
var history = require('react-router/lib/HashHistory').history
2627

2728

2829
require('../vendor/codemirror.css')
29-
require('../vendor/neo.css')
3030
require('../vendor/styles.css')
31+
require('../vendor/oceanic-prism.css')
32+
require('../vendor/oceanic-codemirror.css')
3133
require('react-widgets/less/react-widgets.less')
3234
require('../docs.css')
3335

@@ -172,6 +174,7 @@ ReactDOM.render((
172174

173175
<Route path="advanced" component={Advanced} />
174176
<Route path="i18n" component={Locale} />
177+
<Route path="controllables" component={Controllables} />
175178
</Route>
176179
</Router>
177180
), document.getElementById('app-mount'));

docs/components/pages/GettingStarted.md

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ building each widget entirely in React, it can leverage all of the benefits of t
66
and [philosophy](http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html). A big thanks to both of these libraries for solving most of the difficult problems already.
77

88
In keeping with the [React approach](http://facebook.github.io/react/docs/forms.html#controlled-components) to
9-
form input components, each widget can be <em>controlled</em> or <em>uncontrolled</em>. If a `value` prop
10-
is set the widget's value is said to be <em>controlled</em>, meaning the parent is responsible for managing its
11-
state. If the widget does not provide a `value` prop, the widget becomes <em>uncontrolled</em> or responsible for
12-
managing its own value with no other input, you can set a starting value for an uncontrolled widget
13-
with the `defaultValue` prop. In addition to the `value` prop, widgets may allow other
14-
props (such as `open` or `search`) to be controlled as well.
9+
form input components, each widget can be [_controlled_ or _uncontrolled_](controllables).
1510

1611
Some widgets can also be "bound" to a set of data (traditionally an array of models) through a `data` prop.
1712
While they work just as well with data primitives such as strings, numbers, and arrays, they really shine
@@ -42,48 +37,45 @@ bundlers like Webpack and Browserify to only package up the pieces you use savin
4237
Stylesheets, images, and fonts are found in the `dist` directory. You can use Webpack to `require()` the styles,
4338
or include the css normally. The included icons are provided by - <a href="http://fontawesome.io">Font Awesome by Dave Gandy</a>
4439

45-
The global browser has some additional steps for including, a library for handling number and date localization (see the for more info on Globalize, or using other libraries).
46-
47-
4840
#### Webpack
4941

5042
```js
51-
import { render } from 'react-dom';
43+
import { render } from 'react-dom';
5244

53-
import 'react-widgets/lib/less/react-widgets.less';
45+
import 'react-widgets/lib/less/react-widgets.less';
5446

55-
import DropdownList from 'react-widgets/lib/DropdownList';
47+
import DropdownList from 'react-widgets/lib/DropdownList';
5648

57-
render(<DropdownList/>, document.getElementById('app-root'))
49+
render(<DropdownList/>, document.getElementById('app-root'))
5850
```
5951

6052
If are using Webpack to handle styles in your application you are probably already configured to load
61-
the `react-widgets` styles without any additional work. If not you will have to use
53+
the `react-widgets` styles without any additional work. If not, you will have to use
6254
the `css-loader`, `style-loader`, `file-loader`, `url-loader` and, optionally, the `less-loader`.
6355
Below is a common configuration:
6456

6557
```js
66-
loaders: [
67-
{ test: /\\.css$/, loader: "style-loader!css-loader" },
68-
{ test: /\\.less$/, loader: "style-loader!css-loader!less-loader" },
69-
{ test: /\\.gif$/, loader: "url-loader?mimetype=image/png" },
70-
{ test: /\\.woff(2)?(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
71-
{ test: /\\.(ttf|eot|svg)(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
72-
]
58+
loaders: [
59+
{ test: /\\.css$/, loader: "style-loader!css-loader" },
60+
{ test: /\\.less$/, loader: "style-loader!css-loader!less-loader" },
61+
{ test: /\\.gif$/, loader: "url-loader?mimetype=image/png" },
62+
{ test: /\\.woff(2)?(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
63+
{ test: /\\.(ttf|eot|svg)(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
64+
]
7365
```
7466

7567
#### Global Build
7668

7769
```html
78-
<link href="dist/css/react-widgets.css" rel="stylesheet"/>
79-
<script src="http://fb.me/react-0.14.0.js"></script>
80-
<script src="http://fb.me/react-dom-0.14.0.js"></script>
81-
<script src='node_modules/react-widgets/dist/react-widgets.js'></script>
82-
<script>
70+
<link href="dist/css/react-widgets.css" rel="stylesheet"/>
71+
<script src="http://fb.me/react-0.14.0.js"></script>
72+
<script src="http://fb.me/react-dom-0.14.0.js"></script>
73+
<script src='node_modules/react-widgets/dist/react-widgets.js'></script>
74+
<script>
8375
var DropdownList = ReactWidgets.DropDownlist;
8476
8577
ReactDom.render(<DropdownList/>, document.getElementById('app-root'))
86-
</script>
78+
</script>
8779
```
8880

8981
### I18n and Localization

0 commit comments

Comments
 (0)