docs

Author: jquense

build/babel.js

@@ -19,7 +19,7 @@ args._.forEach(function (input) {
       , data = babel.transformFileSync(file, {
           externalHelpers: true,
           plugins: [
-            "babel-plugin-external-helpers:after"
+            'babel-plugin-external-helpers:after'
           ]
         });
 

docs/components/ApiMenuItem.jsx

@@ -14,7 +14,7 @@ var ApiMenuItem = React.createClass({
     window.scrollTo(window.pageXOffset, anchor.offsetTop)
   },
 
-  render: function() {
+  render() {
 
     if( this.props.divider)
       return  <MenuItem divider={true}></MenuItem>
@@ -30,4 +30,4 @@ var ApiMenuItem = React.createClass({
 
 });
 
-module.exports = ApiMenuItem;
+module.exports = ApiMenuItem;

docs/components/EditableExample.jsx

@@ -1,119 +1,31 @@
-'use strict';
-
 var React = require('react')
   , ReactDOM = require('react-dom')
-  , CodeMirrorEditor = require('./codemirror')
-  , babel = require('babel/browser')
-  , config = require('json!../../.babelrc')
+  , Playground = require('@jquense/component-playground')
   , ReactWidgets = require('../../src/index')
   , MultiselectTagList = require('react-widgets/MultiselectTagList')
   , List = require('react-widgets/List')
   , genData = require('./generate-data');
 
-function listOfPeople(){
-  return genData(15)
-}
-
-function scopedEval(code, mountNode)  {
-  var context = { ReactWidgets: { ...ReactWidgets, MultiselectTagList, List }, listOfPeople, mountNode, React, ReactDOM }
 
-  return (new Function( 'with(this) { ' + code + '}')).call(context);
+var scope = {
+  ReactWidgets: { ...ReactWidgets, MultiselectTagList, List },
+  listOfPeople(){
+    return genData(15)
+  },
+  React,
+  ReactDOM
 }
 
-config.plugins = []
-
 module.exports = React.createClass({
-
-  propTypes: {
-    codeText: React.PropTypes.string.isRequired,
-    transformer: React.PropTypes.func,
-    renderCode: React.PropTypes.bool
-  },
-
-  getDefaultProps: function() {
-    return {
-      transformer: function(code) {
-        return babel.transform(code, config).code;
-      }
-    };
-  },
-
-  getInitialState: function() {
-    return {
-      code: this.props.codeText
-    };
-  },
-
-  handleCodeChange: function(value) {
-    this.setState({code: value, error: null },
-      () => this.executeCode());
-
-  },
-
-  compileCode: function() {
-    return this.props.transformer(this.state.code);
-  },
-
-  render: function() {
-
+  render() {
     return (
-      <div className="editable-example row">
-        <div className='editable-rendered col-md-5 col-md-push-7'>
-          <div ref="mount" />
-        </div>
-        <div className='editable-editor col-md-7 col-md-pull-5'>
-          <CodeMirrorEditor key="jsx"
-            onChange={this.handleCodeChange}
-            value={this.state.code}/>
-          { this.state.error &&
-            <div className='text-danger editable-error'>{this.state.error}</div>
-          }
-        </div>
-      </div>
-      );
-  },
-
-  componentDidMount: function() {
-    this.executeCode();
-  },
-
-  componentWillUpdate: function(nextProps, nextState) {
-    clearTimeout(this.timeoutID);
-    // execute code only when the state's not being updated by switching tab
-    // this avoids re-displaying the error, which comes after a certain delay
-    if (this.state.code !== nextState.code)
-      setTimeout(() => this.executeCode());
-  },
-
-  setTimeout: function() {
-    clearTimeout(this.timeoutID);
-    this.timeoutID = window.setTimeout.apply(null, arguments);
-  },
-
-  componentWillUnmount: function() {
-    var mountNode = this.refs.mount;
-
-    try {
-      ReactDOM.unmountComponentAtNode(mountNode);
-    }
-    catch (e) { }
-  },
-
-  executeCode: function() {
-    var mountNode = this.refs.mount;
-
-    try {
-      ReactDOM.unmountComponentAtNode(mountNode);
-    }
-    catch (e) { }
-
-    try {
-      scopedEval(this.compileCode(), mountNode);
-    }
-    catch (err) {
-      this.setTimeout(() => {
-        this.setState({ error: err.toString() })
-      }, 1000);
-    }
+      <Playground
+        {...this.props}
+        mode='text/jsx'
+        theme='oceanicnext'
+        babelConfig={{ stage: 0 }}
+        scope={scope}
+      />
+    );
   }
 });

docs/components/PropHeader.jsx

@@ -9,7 +9,7 @@ var ApiPropHeader = React.createClass({
   },
 
   render: function() {
-    var { 
+    var {
          children
        , handler
        , type
@@ -22,20 +22,39 @@ var ApiPropHeader = React.createClass({
        <h3 className='prop-header' id={`/${id}`}>
         <a href={'#/' + id }>
         { children }
-        { type && 
+        { type &&
           <small>
             { type }
-            { props.default && 
+            { props.default &&
               <Default>{props.default}</Default>
             }
           </small>
         }
-        { controllable && 
+        { controllable &&
           <strong>{`controllable (${handler}, ${defaultKey(children)})`}</strong>
         }
         </a>
        </h3>
     );
+  },
+
+  localizable(prop, localizers) {
+    let locales = localizers.reduce((obj, l) => {
+      obj[l] = require('../../src/localizers/' + l)
+      return obj
+    }, {})
+    
+    let select = e => locales[e.target.value]()
+
+    return (
+      <span>
+        <select>
+          {
+            localizers.map(l => <option>{l}</option>)
+          }
+        </select>
+      </span>
+    )
   }
 
 });
@@ -44,4 +63,4 @@ function defaultKey(key){
   return 'default' + key.charAt(0).toUpperCase() + key.substr(1)
 }
 
-module.exports = ApiPropHeader;
+module.exports = ApiPropHeader;

docs/components/codemirror.jsx

@@ -21,13 +21,15 @@ var NumberPicker   = require('./pages/NumberPicker.api.md')
 //var Migration      = require('./pages/Migration.jsx')
 var Advanced       = require('./pages/Advanced.jsx')
 var Locale         = require('./pages/i18n.md');
+var Controllables  = require('./pages/controllables.md');
 
 var history = require('react-router/lib/HashHistory').history
 
 
 require('../vendor/codemirror.css')
-require('../vendor/neo.css')
 require('../vendor/styles.css')
+require('../vendor/oceanic-prism.css')
+require('../vendor/oceanic-codemirror.css')
 require('react-widgets/less/react-widgets.less')
 require('../docs.css')
 
@@ -172,6 +174,7 @@ ReactDOM.render((
 
       <Route path="advanced" component={Advanced} />
       <Route path="i18n" component={Locale} />
+      <Route path="controllables" component={Controllables} />
     </Route>
   </Router>
 ), document.getElementById('app-mount'));

docs/components/docs.jsx

@@ -6,12 +6,7 @@ building each widget entirely in React, it can leverage all of the benefits of t
 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.
 
 In keeping with the [React approach](http://facebook.github.io/react/docs/forms.html#controlled-components) to
-form input components, each widget can be <em>controlled</em> or <em>uncontrolled</em>. If a `value` prop
-is set the widget's value is said to be <em>controlled</em>, meaning the parent is responsible for managing its
-state. If the widget does not provide a `value` prop, the widget becomes <em>uncontrolled</em> or responsible for
-managing its own value with no other input, you can set a starting value for an uncontrolled widget
-with the `defaultValue` prop. In addition to the `value` prop, widgets may allow other
-props (such as `open` or `search`) to be controlled as well.
+form input components, each widget can be [_controlled_ or _uncontrolled_](controllables).
 
 Some widgets can also be "bound" to a set of data (traditionally an array of models) through a `data` prop.
 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
 Stylesheets, images, and fonts are found in the `dist` directory. You can use Webpack to `require()` the styles,
 or include the css normally. The included icons are provided by - <a href="http://fontawesome.io">Font Awesome by Dave Gandy</a>
 
-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).
-
-
 #### Webpack
 
 ```js
-  import { render } from 'react-dom';
+import { render } from 'react-dom';
 
-  import 'react-widgets/lib/less/react-widgets.less';
+import 'react-widgets/lib/less/react-widgets.less';
 
-  import DropdownList from 'react-widgets/lib/DropdownList';
+import DropdownList from 'react-widgets/lib/DropdownList';
 
-  render(<DropdownList/>, document.getElementById('app-root'))
+render(<DropdownList/>, document.getElementById('app-root'))
 ```
 
 If are using Webpack to handle styles in your application you are probably already configured to load
-the `react-widgets` styles without any additional work. If not you will have to use
+the `react-widgets` styles without any additional work. If not, you will have to use
 the `css-loader`, `style-loader`, `file-loader`, `url-loader` and, optionally, the `less-loader`.
 Below is a common configuration:
 
 ```js
-  loaders: [
-    { test: /\\.css$/,  loader: "style-loader!css-loader" },
-    { test: /\\.less$/, loader: "style-loader!css-loader!less-loader" },
-    { test: /\\.gif$/, loader: "url-loader?mimetype=image/png" },
-    { test: /\\.woff(2)?(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
-    { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
-  ]
+loaders: [
+  { test: /\\.css$/,  loader: "style-loader!css-loader" },
+  { test: /\\.less$/, loader: "style-loader!css-loader!less-loader" },
+  { test: /\\.gif$/, loader: "url-loader?mimetype=image/png" },
+  { test: /\\.woff(2)?(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
+  { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
+]
 ```
 
 #### Global Build
 
 ```html
- <link href="dist/css/react-widgets.css" rel="stylesheet"/>
- <script src="http://fb.me/react-0.14.0.js"></script>
- <script src="http://fb.me/react-dom-0.14.0.js"></script>
- <script src='node_modules/react-widgets/dist/react-widgets.js'></script>
- <script>
+<link href="dist/css/react-widgets.css" rel="stylesheet"/>
+<script src="http://fb.me/react-0.14.0.js"></script>
+<script src="http://fb.me/react-dom-0.14.0.js"></script>
+<script src='node_modules/react-widgets/dist/react-widgets.js'></script>
+<script>
   var DropdownList = ReactWidgets.DropDownlist;
 
   ReactDom.render(<DropdownList/>, document.getElementById('app-root'))
- </script>
+</script>
 ```
 
 ### I18n and Localization