├── dist ├── react-utils-helper └── index.html ├── src ├── dispatcher │ └── App.js ├── components │ └── ComponentHelper │ │ ├── repeat │ │ ├── index.jsx │ │ └── example.jsx │ │ ├── hide │ │ ├── example.jsx │ │ └── index.jsx │ │ ├── show │ │ ├── example.jsx │ │ └── index.jsx │ │ ├── switch │ │ ├── when.jsx │ │ ├── default.jsx │ │ ├── example.jsx │ │ └── index.jsx │ │ ├── index.js │ │ ├── input │ │ ├── example.jsx │ │ └── index.jsx │ │ ├── textarea │ │ ├── index.jsx │ │ └── example.jsx │ │ ├── radio │ │ ├── example.jsx │ │ └── index.jsx │ │ ├── select │ │ ├── example.jsx │ │ └── index.jsx │ │ └── checkbox │ │ ├── index.jsx │ │ └── example.jsx ├── mixins │ ├── AppDispatcher.js │ └── formMixin.js ├── components.js └── index.jsx ├── .gitignore ├── lib ├── repeat │ ├── index.js │ └── example.js ├── switch │ ├── when.js │ ├── default.js │ ├── example.js │ └── index.js ├── show │ ├── example.js │ └── index.js ├── hide │ ├── example.js │ └── index.js ├── formMixin.js ├── index.js ├── input │ ├── example.js │ └── index.js ├── select │ ├── example.js │ └── index.js ├── textarea │ ├── index.js │ └── example.js ├── radio │ ├── example.js │ └── index.js └── checkbox │ ├── example.js │ └── index.js ├── Gulpfile.js ├── Gruntfile.js ├── README.md ├── package.json ├── webpack.config.js └── LICENSE /dist/react-utils-helper: -------------------------------------------------------------------------------- 1 | react-utils-helper -------------------------------------------------------------------------------- /src/dispatcher/App.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Dispatcher = require('flux').Dispatcher; 4 | 5 | module.exports = new Dispatcher(); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/scripts/ 2 | node_modules/ 3 | bower_components/ 4 | 5 | ## generic files to ignore 6 | *~ 7 | *.lock 8 | *.DS_Store 9 | *.swp 10 | *.out 11 | 12 | 13 | npm-debug.log -------------------------------------------------------------------------------- /lib/repeat/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = function(array, callback ){ 12 | return _.forEach(array,callback); 13 | }; -------------------------------------------------------------------------------- /src/components/ComponentHelper/repeat/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = function(array, callback ){ 12 | return _.forEach(array,callback); 13 | }; -------------------------------------------------------------------------------- /src/components/ComponentHelper/repeat/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Repeat = require('./index.jsx'); 8 | 9 | var arr = [1, 2, 3, 4, 5 ]; 10 | 11 | 12 | module.exports =
13 | {Repeat(arr, function(val){ 14 | return {val}; 15 | })} 16 |
; 17 | -------------------------------------------------------------------------------- /lib/repeat/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Repeat = require('./index.jsx'); 8 | 9 | var arr = [1, 2, 3, 4, 5 ]; 10 | 11 | 12 | module.exports = React.createElement("div", null, 13 | Repeat(arr, function(val){ 14 | return React.createElement("span", null, val); 15 | }) 16 | ); 17 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var react = require('gulp-react'); 3 | 4 | gulp.task('default', function () { 5 | return gulp.src([ 6 | 'src/components/ComponentHelper/**/*.jsx', 7 | 'src/components/ComponentHelper/index.js', 8 | 'src/mixins/formMixin.js']) 9 | .pipe(react({harmony:true})) 10 | .pipe(gulp.dest('lib')); 11 | }); -------------------------------------------------------------------------------- /src/components/ComponentHelper/hide/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Hide = require('./index.jsx'); 8 | module.exports =
9 | 10 |
11 | Hello 12 |
13 |
14 | World 15 |
16 | asdasd 17 | 18 | 19 |
; 20 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/show/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Show = require('./index.jsx'); 8 | module.exports =
9 | 10 |
11 | Hello 12 |
13 |
14 | World 15 |
16 | asdasd 17 | 18 | 19 |
; 20 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/switch/when.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | var When = React.createClass({ 12 | 13 | render: function(){ 14 | return (
15 | {this.props.children} 16 |
17 | ); 18 | } 19 | }); 20 | 21 | module.exports = When; -------------------------------------------------------------------------------- /lib/switch/when.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | var When = React.createClass({displayName: "When", 12 | 13 | render: function(){ 14 | return (React.createElement("div", null, 15 | this.props.children 16 | ) 17 | ); 18 | } 19 | }); 20 | 21 | module.exports = When; -------------------------------------------------------------------------------- /src/components/ComponentHelper/switch/default.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | var Default = React.createClass({ 12 | 13 | render: function(){ 14 | return (
15 | {this.props.children} 16 |
17 | ); 18 | } 19 | }); 20 | 21 | module.exports = Default; -------------------------------------------------------------------------------- /lib/switch/default.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | var Default = React.createClass({displayName: "Default", 12 | 13 | render: function(){ 14 | return (React.createElement("div", null, 15 | this.props.children 16 | ) 17 | ); 18 | } 19 | }); 20 | 21 | module.exports = Default; -------------------------------------------------------------------------------- /lib/show/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Show = require('./index.jsx'); 8 | module.exports = React.createElement("div", null, 9 | React.createElement(Show, {model: true}, 10 | React.createElement("div", null, 11 | "Hello" 12 | ), 13 | React.createElement("div", null, 14 | "World" 15 | ), 16 | "asdasd" 17 | ) 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /lib/hide/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Hide = require('./index.jsx'); 8 | module.exports = React.createElement("div", null, 9 | React.createElement(Hide, {model: false}, 10 | React.createElement("div", null, 11 | "Hello" 12 | ), 13 | React.createElement("div", null, 14 | "World" 15 | ), 16 | "asdasd" 17 | ) 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /src/mixins/AppDispatcher.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var AppDispatcher = require("dispatcher/App"); 4 | 5 | module.exports = { 6 | 7 | dispatcherTokens: [], 8 | 9 | registerAppDispatcher: function(fn) { 10 | 11 | this.dispatcherTokens.push(AppDispatcher.register(fn)); 12 | 13 | }, 14 | 15 | componentDidUnmount: function() { 16 | 17 | for(var i in this.dispatcherTokens) 18 | AppDispatcher.unregister(this.dispatcherTokens[i]); 19 | 20 | } 21 | 22 | }; -------------------------------------------------------------------------------- /lib/formMixin.js: -------------------------------------------------------------------------------- 1 | 2 | var formMixin = { 3 | link: function(name){ 4 | var that = this; 5 | return { 6 | getValue: function(){ 7 | return that.state[name]; 8 | }, 9 | onChange: function(value, e){ 10 | 11 | var state = {}; 12 | state[name] = value; 13 | that.setState(state); 14 | 15 | } 16 | } 17 | } 18 | }; 19 | 20 | module.exports = formMixin; -------------------------------------------------------------------------------- /src/mixins/formMixin.js: -------------------------------------------------------------------------------- 1 | 2 | var formMixin = { 3 | link: function(name){ 4 | var that = this; 5 | return { 6 | getValue: function(){ 7 | return that.state[name]; 8 | }, 9 | onChange: function(value, e){ 10 | 11 | var state = {}; 12 | state[name] = value; 13 | that.setState(state); 14 | 15 | } 16 | } 17 | } 18 | }; 19 | 20 | module.exports = formMixin; -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | var grunt = require('grunt'); 2 | grunt.loadNpmTasks('grunt-react'); 3 | grunt.loadNpmTasks('grunt-es6-transpiler'); 4 | 5 | 6 | grunt.initConfig({ 7 | react: { 8 | dynamic_mappings: { 9 | options: { 10 | harmony: true 11 | }, 12 | 13 | expand: true, 14 | cwd: 'src/components/ComponentHelper/', 15 | src: ['**/*.jsx'], 16 | dest: 'lib', 17 | ext: '.js' 18 | 19 | } 20 | 21 | } 22 | 23 | }); 24 | 25 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | module.exports = { 8 | Hide: require('./hide'), 9 | Show: require('./show'), 10 | Switch: require('./switch'), 11 | When: require('./switch/when'), 12 | Default: require('./switch/default'), 13 | Input: require('./input'), 14 | Repeat: require('./repeat'), 15 | Textarea: require('./textarea'), 16 | Select: require('./select'), 17 | Checkbox: require('./checkbox'), 18 | Radio: require('./radio'), 19 | FormMixin: require('./formMixin') 20 | }; -------------------------------------------------------------------------------- /src/components/ComponentHelper/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | module.exports = { 8 | Hide: require('./hide'), 9 | Show: require('./show'), 10 | Switch: require('./switch'), 11 | When: require('./switch/when'), 12 | Default: require('./switch/default'), 13 | Input: require('./input'), 14 | Repeat: require('./repeat'), 15 | Textarea: require('./textarea'), 16 | Select: require('./select'), 17 | Checkbox: require('./checkbox'), 18 | Radio: require('./radio'), 19 | FormMixin: require('./formMixin') 20 | }; -------------------------------------------------------------------------------- /src/components/ComponentHelper/switch/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Switch = require('./index.jsx'); 8 | var When = require('./when.jsx'); 9 | var Default = require('./default.jsx'); 10 | 11 | var value=2; 12 | module.exports =
13 | 14 | one 15 | two 16 | three 17 | four 18 | five 19 | six 20 | default 21 | 22 | 23 |
; 24 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/hide/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({ 12 | 13 | getDefaultProps: function(){ 14 | model: true 15 | }, 16 | 17 | render: function(){ 18 | var child = this.props.children ? this.props.children : null; 19 | var renderChildren = function(){ 20 | return _.map(child, function(val){ 21 | if(typeof(val) == "object") 22 | return val.props.children; 23 | else 24 | return val; 25 | }); 26 | } 27 | return
28 | {this.props.model ? null : renderChildren() } 29 |
30 | } 31 | }); -------------------------------------------------------------------------------- /src/components/ComponentHelper/show/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({ 12 | 13 | getDefaultProps: function(){ 14 | model: true 15 | }, 16 | 17 | render: function(){ 18 | 19 | var child = this.props.children ? this.props.children : null; 20 | var renderChildren = function(){ 21 | return _.map(child, function(val){ 22 | if(typeof(val) == "object") 23 | return val.props.children; 24 | else 25 | return val; 26 | }); 27 | } 28 | return
29 | {this.props.model ? renderChildren() :null } 30 |
31 | } 32 | }); -------------------------------------------------------------------------------- /lib/hide/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({displayName: "exports", 12 | 13 | getDefaultProps: function(){ 14 | model: true 15 | }, 16 | 17 | render: function(){ 18 | var child = this.props.children ? this.props.children : null; 19 | var renderChildren = function(){ 20 | return _.map(child, function(val){ 21 | if(typeof(val) == "object") 22 | return val.props.children; 23 | else 24 | return val; 25 | }); 26 | } 27 | return React.createElement("div", null, 28 | this.props.model ? null : renderChildren() 29 | ) 30 | } 31 | }); -------------------------------------------------------------------------------- /lib/show/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({displayName: "exports", 12 | 13 | getDefaultProps: function(){ 14 | model: true 15 | }, 16 | 17 | render: function(){ 18 | 19 | var child = this.props.children ? this.props.children : null; 20 | var renderChildren = function(){ 21 | return _.map(child, function(val){ 22 | if(typeof(val) == "object") 23 | return val.props.children; 24 | else 25 | return val; 26 | }); 27 | } 28 | return React.createElement("div", null, 29 | this.props.model ? renderChildren() :null 30 | ) 31 | } 32 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # react-utils-helper 3 | A bunch of helper components for React 4 | 5 | [![NPM version](https://badge.fury.io/js/react-utils-helper.svg)](http://badge.fury.io/js/react-utils-helper) 6 | 7 | Under active development - APIs will change. 8 | 9 | ## Docs 10 | 11 | A [docs site](http://react-utils.github.io/react-utils-helper/) with live editable examples is a work in progress 12 | 13 | ## Contributions 14 | 15 | Yes please! 16 | 17 | - Run `npm install`, `webpack --watch` to run tests while you develop (however this hides any build errors, you can see these with `gulp build`) 18 | - Add tests for any new or changed functionality 19 | - See [issues](https://github.com/react-utils/react-utils-helper/issues) for some ideas 20 | - Follow existing style 21 | -------------------------------------------------------------------------------- /lib/switch/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Switch = require('./index.jsx'); 8 | var When = require('./when.jsx'); 9 | var Default = require('./default.jsx'); 10 | 11 | var value=2; 12 | module.exports = React.createElement("div", null, 13 | React.createElement(Switch, {expression: value}, 14 | React.createElement(When, {switchCase: 1}, "one"), 15 | React.createElement(When, {switchCase: 2}, "two"), 16 | React.createElement(When, {switchCase: 3}, "three"), 17 | React.createElement(When, {switchCase: 4}, "four"), 18 | React.createElement(When, {switchCase: 5}, "five"), 19 | React.createElement(When, {switchCase: 6}, "six"), 20 | React.createElement(Default, null, "default") 21 | ) 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Utils - Sahusoft 7 | 8 | 9 | 10 | 11 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/switch/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({ 12 | 13 | getDefaultProps: function(){ 14 | condition: '' 15 | 16 | }, 17 | 18 | render: function(){ 19 | var that = this; 20 | 21 | var child = this.props.children ? this.props.children : null; 22 | 23 | var renderWhen = function(){ 24 | var cases = _.find(child, function(val){ 25 | if(val.type.displayName == "When" && val.props.switchCase == that.props.expression){ 26 | return val; 27 | } else 28 | return null; 29 | }); 30 | if(cases){ 31 | return cases; 32 | } else { 33 | return _.find(child, function(val){ 34 | if(val.type.displayName == "Default") 35 | return val; 36 | else 37 | return null; 38 | }); 39 | } 40 | }; 41 | 42 | return
43 | {renderWhen()} 44 |
45 | } 46 | }); -------------------------------------------------------------------------------- /lib/switch/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var _ = require('lodash'); 10 | 11 | module.exports = React.createClass({displayName: "exports", 12 | 13 | getDefaultProps: function(){ 14 | condition: '' 15 | 16 | }, 17 | 18 | render: function(){ 19 | var that = this; 20 | 21 | var child = this.props.children ? this.props.children : null; 22 | 23 | var renderWhen = function(){ 24 | var cases = _.find(child, function(val){ 25 | if(val.type.displayName == "When" && val.props.switchCase == that.props.expression){ 26 | return val; 27 | } else 28 | return null; 29 | }); 30 | if(cases){ 31 | return cases; 32 | } else { 33 | return _.find(child, function(val){ 34 | if(val.type.displayName == "Default") 35 | return val; 36 | else 37 | return null; 38 | }); 39 | } 40 | }; 41 | 42 | return React.createElement("div", null, 43 | renderWhen() 44 | ) 45 | } 46 | }); -------------------------------------------------------------------------------- /src/components/ComponentHelper/input/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Input = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({ 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "name": "Something" 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.textbox = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | name : this.state.textbox 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | render: function(){ 35 | return
36 | Input: 37 | 38 |

39 | Current State: {this.state.name} 40 |

41 | Set State: 42 |
; 43 | } 44 | 45 | }); 46 | 47 | module.exports = ; 48 | -------------------------------------------------------------------------------- /src/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | module.exports = [ 8 | 9 | { 10 | serialNumber: '0.0.1', 11 | name: 'Repeat', 12 | example: require('./components/ComponentHelper/repeat/example') 13 | }, 14 | { 15 | serialNumber: '0.0.1', 16 | name: 'Switch', 17 | example: require('./components/ComponentHelper/switch/example') 18 | }, 19 | { 20 | serialNumber: '0.0.1', 21 | name: 'Hide', 22 | example: require('./components/ComponentHelper/hide/example') 23 | }, 24 | { 25 | serialNumber: '0.0.1', 26 | name: 'Show', 27 | example: require('./components/ComponentHelper/show/example') 28 | }, 29 | { 30 | serialNumber: '0.0.1', 31 | name: 'Input', 32 | example: require('./components/ComponentHelper/input/example') 33 | }, 34 | { 35 | serialNumber: '0.0.1', 36 | name: 'Textarea', 37 | example: require('./components/ComponentHelper/textarea/example') 38 | }, 39 | { 40 | serialNumber: '0.0.1', 41 | name: 'Select', 42 | example: require('./components/ComponentHelper/select/example') 43 | }, 44 | { 45 | serialNumber: '0.0.1', 46 | name: 'Radio', 47 | example: require('./components/ComponentHelper/radio/example') 48 | }, 49 | { 50 | serialNumber: '0.0.1', 51 | name: 'Checkbox', 52 | example: require('./components/ComponentHelper/checkbox/example') 53 | } 54 | 55 | ]; -------------------------------------------------------------------------------- /src/components/ComponentHelper/textarea/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Textarea = React.createClass({ 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | } 19 | }, 20 | value: null, 21 | onChange: null, 22 | defaultValue: null 23 | } 24 | }, 25 | 26 | handleChange: function(e){ 27 | var value = e.target.value; 28 | this.props.model.onChange.call(null, value, e); 29 | 30 | if(this.props.onChange) 31 | this.props.onChange.apply(null, arguments); 32 | 33 | }, 34 | 35 | render: function(){ 36 | 37 | var {model, onChange, ...other } = this.props; 38 | 39 | var props = other; 40 | 41 | if(!props.value) { 42 | if(!props.defaultValue){ 43 | props.value = this.props.model.getValue(); 44 | 45 | } else { 46 | props.defaultValue = this.props.model.getValue(); 47 | } 48 | } 49 | 50 | return 45 |
46 | 47 | 48 | ; 49 | } 50 | 51 | }); 52 | 53 | module.exports = ; 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-utils-helper", 3 | "version": "0.1.3", 4 | "description": "A bunch of helper components for React", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "lodash": "^3.3.1", 8 | "react": "^0.12.2" 9 | }, 10 | "devDependencies": { 11 | "bootstrap": "^3.3.2", 12 | "css": "^2.2.0", 13 | "css-loader": "^0.9.1", 14 | "es6-transpiler": "^0.7.18", 15 | "file-loader": "^0.8.1", 16 | "font-awesome": "^4.3.0", 17 | "grunt-es6-transpiler": "^1.0.2", 18 | "grunt-jsx": "^0.1.8", 19 | "gulp": "^3.8.11", 20 | "gulp-es6-transpiler": "^1.0.1", 21 | "gulp-react": "^2.1.0", 22 | "jQuery": "^1.7.4", 23 | "jquery": "^2.1.3", 24 | "jsx-loader": "^0.12.2", 25 | "less": "^2.4.0", 26 | "less-loader": "^2.0.0", 27 | "react-bootstrap": "^0.16.0", 28 | "style": "0.0.3", 29 | "style-loader": "^0.8.3", 30 | "url-loader": "^0.5.5" 31 | }, 32 | "scripts": { 33 | "test": "echo \"Error: no test specified\" && exit 1" 34 | }, 35 | "repository": { 36 | "type": "git", 37 | "url": "https://github.com/react-utils/react-utils-helper.git" 38 | }, 39 | "author": "suraj@sahusoft.com", 40 | "license": " ", 41 | "bugs": { 42 | "url": "https://github.com/react-utils/react-utils-helper/issues" 43 | }, 44 | "homepage": "https://github.com/react-utils/react-utils-helper", 45 | "keywords": [ 46 | "A", 47 | "Utility", 48 | "Tool", 49 | "for", 50 | "React" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/select/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Select = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({ 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "classroom_id": 2 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.select = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | classroom_id : this.state.select 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | 35 | render: function(){ 36 | return
37 | 49 | 50 |
; 51 | } 52 | 53 | }); 54 | 55 | module.exports = ; 56 | -------------------------------------------------------------------------------- /lib/input/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Input = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({displayName: "MyComponent", 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "name": "Something" 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.textbox = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | name : this.state.textbox 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | render: function(){ 35 | return React.createElement("div", null, 36 | "Input:", 37 | React.createElement(Input, {model: this.link("name"), onChange: this.dummyAjaxCall}), 38 | React.createElement("br", null), React.createElement("br", null), 39 | "Current State: ", this.state.name, 40 | React.createElement("br", null), React.createElement("br", null), 41 | "Set State: ", React.createElement("input", {type: "text", onChange: this.handleChange}), React.createElement("button", {type: "button", onClick: this.changeState}, "Change State") 42 | ); 43 | } 44 | 45 | }); 46 | 47 | module.exports = React.createElement(MyComponent, null); 48 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/radio/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Radio = React.createClass({ 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | 19 | } 20 | }, 21 | value: null, 22 | onChange: null 23 | } 24 | }, 25 | 26 | handleChange: function(e){ 27 | var value = e.target.value; 28 | 29 | this.props.model.onChange.call(null, value, e); 30 | 31 | if(this.props.onChange) 32 | this.props.onChange.apply(null, arguments); 33 | 34 | }, 35 | 36 | 37 | render: function(){ 38 | 39 | var {model, onChange, ...other } = this.props; 40 | 41 | var props = other; 42 | 43 | 44 | if(!props.value) { 45 | 46 | if(!props.defaultValue){ 47 | props.value = this.props.model.getValue(); 48 | 49 | } else { 50 | props.defaultValue = this.props.model.getValue(); 51 | } 52 | } 53 | 54 | var checked ; 55 | if(this.props.model.getValue() == this.props.value) 56 | checked = true; 57 | else 58 | checked = false; 59 | 60 | return ; 61 | } 62 | }); 63 | 64 | module.exports = Radio; -------------------------------------------------------------------------------- /lib/select/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Select = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({displayName: "MyComponent", 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "classroom_id": 2 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.select = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | classroom_id : this.state.select 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | 35 | render: function(){ 36 | return React.createElement("div", null, 37 | React.createElement(Select, { 38 | model: this.link("classroom_id"), 39 | options: 40 | [ 41 | {id: 1, value: "One"}, 42 | {id: 2, value: "Two"}, 43 | {id: 3, value: "Three"} 44 | ] 45 | } 46 | ), 47 | "Current State: ", this.state.classroom_id, " ", React.createElement("br", null), 48 | "Set State: ", React.createElement("input", {type: "text", onChange: this.handleChange}), React.createElement("button", {type: "button", onClick: this.changeState}, "Change State") 49 | 50 | ); 51 | } 52 | 53 | }); 54 | 55 | module.exports = React.createElement(MyComponent, null); 56 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react/addons'); 8 | 9 | require('bootstrap/dist/css/bootstrap.min.css'); 10 | 11 | window.jQuery = require('jquery'); 12 | window.$ = window.jQuery; 13 | 14 | require('bootstrap/dist/js/bootstrap.js'); 15 | 16 | var components = require('./components.js'); 17 | 18 | var Button = require('react-bootstrap').Button; 19 | var ModalTrigger = require('react-bootstrap').ModalTrigger; 20 | var Modal = require('react-bootstrap').Modal; 21 | 22 | React.renderComponent(( 23 |
24 |
25 |
26 |

List of React Component Helpers

27 | 28 | 29 | 30 | 31 | 32 | 33 | {components.map(function(component) { 34 | 35 | var reactClass = 36 |
37 | {component.example} 38 |
39 | ; 40 | 41 | return 42 | 43 | 44 | 49 | ; 50 | 51 | })} 52 |
Ver.Name of the component
{component.serialNumber}{component.name} 45 | 46 | 47 | 48 |
53 |
54 |
55 |
), document.getElementById('content') 56 | ); 57 | 58 | module.exports = {}; -------------------------------------------------------------------------------- /lib/textarea/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Textarea = React.createClass({displayName: "Textarea", 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | } 19 | }, 20 | value: null, 21 | onChange: null, 22 | defaultValue: null 23 | } 24 | }, 25 | 26 | handleChange: function(e){ 27 | var value = e.target.value; 28 | this.props.model.onChange.call(null, value, e); 29 | 30 | if(this.props.onChange) 31 | this.props.onChange.apply(null, arguments); 32 | 33 | }, 34 | 35 | render: function(){ 36 | 37 | var $__0= this.props,model=$__0.model,onChange=$__0.onChange,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{model:1,onChange:1}); 38 | 39 | var props = other; 40 | 41 | if(!props.value) { 42 | if(!props.defaultValue){ 43 | props.value = this.props.model.getValue(); 44 | 45 | } else { 46 | props.defaultValue = this.props.model.getValue(); 47 | } 48 | } 49 | 50 | return React.createElement("textarea", React.__spread({}, props, {onChange: this.handleChange})); 51 | } 52 | }); 53 | 54 | module.exports = Textarea; -------------------------------------------------------------------------------- /lib/input/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Input = React.createClass({displayName: "Input", 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | 19 | } 20 | }, 21 | value: null, 22 | onChange: null, 23 | defaultValue: null 24 | } 25 | }, 26 | 27 | handleChange: function(e){ 28 | var value = e.target.value; 29 | 30 | this.props.model.onChange.call(null, value, e); 31 | 32 | if(this.props.onChange) 33 | this.props.onChange.apply(null, arguments); 34 | 35 | }, 36 | 37 | 38 | render: function(){ 39 | 40 | var $__0= this.props,model=$__0.model,onChange=$__0.onChange,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{model:1,onChange:1}); 41 | 42 | var props = other; 43 | 44 | if(!props.value) { 45 | if(!props.defaultValue){ 46 | props.value = this.props.model.getValue(); 47 | 48 | } else { 49 | props.defaultValue = this.props.model.defaultValue; 50 | } 51 | } 52 | 53 | return React.createElement("input", React.__spread({}, props, {type: "text", onChange: this.handleChange})); 54 | } 55 | }); 56 | 57 | module.exports = Input; -------------------------------------------------------------------------------- /lib/radio/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Radio = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({displayName: "MyComponent", 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "classroom_id": 2 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.textbox = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | classroom_id : this.state.textbox 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | 35 | render: function(){ 36 | return React.createElement("div", null, " Input: ", React.createElement("br", null), 37 | React.createElement(Radio, {model: this.link("classroom_id"), name: "name", value: {name: 'Suraj'}}), "1 ", React.createElement("br", null), 38 | React.createElement(Radio, {model: this.link("classroom_id"), name: "name", value: 2}), "2 ", React.createElement("br", null), 39 | React.createElement(Radio, {model: this.link("classroom_id"), name: "name", value: 3}), "3 ", React.createElement("br", null), 40 | "Current State: ", this.state.classroom_id, " ", React.createElement("br", null), 41 | "Set State: ", React.createElement("input", {type: "text", onChange: this.handleChange}), React.createElement("button", {type: "button", onClick: this.changeState}, "Change State") 42 | 43 | ); 44 | } 45 | 46 | }); 47 | 48 | module.exports = React.createElement(MyComponent, null); 49 | -------------------------------------------------------------------------------- /lib/textarea/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Textarea = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({displayName: "MyComponent", 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "description": "Something" 17 | }; 18 | }, 19 | 20 | handleChange: function(e){ 21 | this.state.textarea = e.target.value; 22 | }, 23 | 24 | changeState: function(){ 25 | this.setState({ 26 | description : this.state.textarea 27 | }) ; 28 | }, 29 | 30 | dummyAjaxCall: function(){ 31 | console.log("ajax call"); 32 | }, 33 | 34 | 35 | render: function(){ 36 | return React.createElement("div", null, 37 | "Input: ", React.createElement("br", null), 38 | React.createElement(Textarea, {model: this.link("description"), onChange: this.dummyAjaxCall, rows: 5, cols: 40}), 39 | React.createElement("br", null), " ", React.createElement("br", null), 40 | "Current State: ", this.state.description, 41 | React.createElement("br", null), " ", React.createElement("br", null), 42 | 43 | "Set State: ", React.createElement("br", null), 44 | React.createElement("textarea", {rows: 5, cols: 40, onChange: this.handleChange}), 45 | React.createElement("br", null), 46 | React.createElement("button", {type: "button", onClick: this.changeState}, "Change State") 47 | 48 | ); 49 | } 50 | 51 | }); 52 | 53 | module.exports = React.createElement(MyComponent, null); 54 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/checkbox/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Checkbox = React.createClass({ 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | 19 | } 20 | }, 21 | trueValue: true, 22 | falseValue: false, 23 | value: null, 24 | onChange: null 25 | } 26 | }, 27 | 28 | handleChange: function(e){ 29 | var value; 30 | if(e.target.checked == true){ 31 | value = this.props.trueValue; 32 | } else 33 | value = this.props.falseValue; 34 | 35 | this.props.model.onChange.call(null, value, e); 36 | 37 | if(this.props.onChange) 38 | this.props.onChange.apply(null, arguments); 39 | 40 | }, 41 | 42 | 43 | render: function(){ 44 | 45 | var {model, checked, onChange, trueValue, falseValue, ...other } = this.props; 46 | 47 | var props = other; 48 | 49 | 50 | if(!props.value) { 51 | 52 | if(!props.defaultValue){ 53 | props.value = this.props.model.getValue(); 54 | 55 | } else { 56 | props.defaultValue = this.props.model.getValue(); 57 | } 58 | } 59 | var checked ; 60 | if(this.props.model.getValue() == this.props.trueValue) 61 | checked = true; 62 | else 63 | checked = false; 64 | 65 | return
66 | 67 |
; 68 | } 69 | }); 70 | 71 | module.exports = Checkbox; -------------------------------------------------------------------------------- /src/components/ComponentHelper/checkbox/example.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Checkbox = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({ 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "isValid": true, 17 | "isChecked": "Yes" 18 | }; 19 | }, 20 | 21 | handleChange: function(field, e){ 22 | var state = {}; 23 | switch(field){ 24 | case 'isValid': 25 | if(this.state[field] == false) 26 | state[field] = true; 27 | else 28 | state[field] = false; 29 | break; 30 | case 'isChecked': 31 | if(this.state[field] == "No") 32 | state[field] = "Yes"; 33 | else 34 | state[field] = "No" 35 | break; 36 | 37 | } 38 | 39 | this.setState(state) ; 40 | }, 41 | 42 | render: function(){ 43 | return
44 | 45 |
46 | Current State: {String(this.state.isValid)}
47 | Set State: 48 |
49 | 50 | 51 |
52 | Current State: {this.state.isChecked}
53 | Set State: 54 |
; 55 | } 56 | 57 | }); 58 | 59 | module.exports = ; 60 | -------------------------------------------------------------------------------- /lib/radio/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Radio = React.createClass({displayName: "Radio", 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | 19 | } 20 | }, 21 | value: null, 22 | onChange: null 23 | } 24 | }, 25 | 26 | handleChange: function(e){ 27 | var value = e.target.value; 28 | 29 | this.props.model.onChange.call(null, value, e); 30 | 31 | if(this.props.onChange) 32 | this.props.onChange.apply(null, arguments); 33 | 34 | }, 35 | 36 | 37 | render: function(){ 38 | 39 | var $__0= this.props,model=$__0.model,onChange=$__0.onChange,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{model:1,onChange:1}); 40 | 41 | var props = other; 42 | 43 | 44 | if(!props.value) { 45 | 46 | if(!props.defaultValue){ 47 | props.value = this.props.model.getValue(); 48 | 49 | } else { 50 | props.defaultValue = this.props.model.getValue(); 51 | } 52 | } 53 | 54 | var checked ; 55 | if(this.props.model.getValue() == this.props.value) 56 | checked = true; 57 | else 58 | checked = false; 59 | 60 | return React.createElement("input", React.__spread({}, props, {type: "radio", checked: checked, onChange: this.handleChange})); 61 | } 62 | }); 63 | 64 | module.exports = Radio; -------------------------------------------------------------------------------- /lib/checkbox/example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | var React = require('react') 7 | var Checkbox = require('./index.jsx'); 8 | var formMixin = require('mixins/formMixin'); 9 | 10 | var MyComponent = React.createClass({displayName: "MyComponent", 11 | 12 | mixins: [formMixin], 13 | 14 | getInitialState: function(){ 15 | return { 16 | "isValid": true, 17 | "isChecked": "Yes" 18 | }; 19 | }, 20 | 21 | handleChange: function(field, e){ 22 | var state = {}; 23 | switch(field){ 24 | case 'isValid': 25 | if(this.state[field] == false) 26 | state[field] = true; 27 | else 28 | state[field] = false; 29 | break; 30 | case 'isChecked': 31 | if(this.state[field] == "No") 32 | state[field] = "Yes"; 33 | else 34 | state[field] = "No" 35 | break; 36 | 37 | } 38 | 39 | this.setState(state) ; 40 | }, 41 | 42 | render: function(){ 43 | return React.createElement("div", null, 44 | React.createElement(Checkbox, {model: this.link("isValid")}), 45 | React.createElement("br", null), 46 | "Current State: ", String(this.state.isValid), " ", React.createElement("br", null), 47 | "Set State: ", React.createElement("button", {type: "button", onClick: this.handleChange.bind(null, 'isValid')}, "Change State"), 48 | React.createElement("br", null), 49 | 50 | React.createElement(Checkbox, {model: this.link("isChecked"), trueValue: "Yes", falseValue: "No"}), 51 | React.createElement("br", null), 52 | "Current State: ", this.state.isChecked, " ", React.createElement("br", null), 53 | "Set State: ", React.createElement("button", {type: "button", onClick: this.handleChange.bind(null, 'isChecked')}, "Change State") 54 | ); 55 | } 56 | 57 | }); 58 | 59 | module.exports = React.createElement(MyComponent, null); 60 | -------------------------------------------------------------------------------- /src/components/ComponentHelper/select/index.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | var _ = require('lodash'); 9 | 10 | 11 | var Select = React.createClass({ 12 | 13 | getDefaultProps: function(){ 14 | return { 15 | model: { 16 | onChange: function(){ 17 | 18 | }, 19 | getValue: function(){ 20 | 21 | } 22 | }, 23 | formatResult: function(row) { 24 | if(row.id) 25 | return row.id; 26 | else 27 | return row; 28 | }, 29 | 30 | formatSelection: function(row) { 31 | if(row.text) 32 | return row.text; 33 | else if(row.value) 34 | return row.value; 35 | else 36 | return row; 37 | } 38 | } 39 | }, 40 | 41 | handleChange: function(e){ 42 | 43 | var selectedObj = _.find(this.props.options, function(row, i){ 44 | return i == e.target.value; 45 | }); 46 | var result = this.props.formatResult(selectedObj); 47 | this.props.model.onChange(result, e); 48 | }, 49 | 50 | render: function(){ 51 | var that = this; 52 | 53 | var renderOptions = function(){ 54 | 55 | return _.map(that.props.options, function(val, i){ 56 | return ; 57 | }); 58 | }; 59 | 60 | var {model,option,optionsKey, ...other} = this.props; 61 | 62 | var value; 63 | 64 | if(this.props.formatResult){ 65 | var selectedObj = _.findIndex(this.props.options, function(row){ 66 | return that.props.formatResult(row) == that.props.model.getValue(); 67 | }); 68 | value = selectedObj; 69 | } 70 | else 71 | value = this.props.model.getValue(); 72 | return ; 75 | } 76 | }); 77 | 78 | module.exports = Select; -------------------------------------------------------------------------------- /lib/checkbox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | 9 | var Checkbox = React.createClass({displayName: "Checkbox", 10 | 11 | getDefaultProps: function(){ 12 | return { 13 | model: { 14 | onChange: function(){ 15 | 16 | }, 17 | getValue: function(){ 18 | 19 | } 20 | }, 21 | trueValue: true, 22 | falseValue: false, 23 | value: null, 24 | onChange: null 25 | } 26 | }, 27 | 28 | handleChange: function(e){ 29 | var value; 30 | if(e.target.checked == true){ 31 | value = this.props.trueValue; 32 | } else 33 | value = this.props.falseValue; 34 | 35 | this.props.model.onChange.call(null, value, e); 36 | 37 | if(this.props.onChange) 38 | this.props.onChange.apply(null, arguments); 39 | 40 | }, 41 | 42 | 43 | render: function(){ 44 | 45 | var $__0= this.props,model=$__0.model,checked=$__0.checked,onChange=$__0.onChange,trueValue=$__0.trueValue,falseValue=$__0.falseValue,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{model:1,checked:1,onChange:1,trueValue:1,falseValue:1}); 46 | 47 | var props = other; 48 | 49 | 50 | if(!props.value) { 51 | 52 | if(!props.defaultValue){ 53 | props.value = this.props.model.getValue(); 54 | 55 | } else { 56 | props.defaultValue = this.props.model.getValue(); 57 | } 58 | } 59 | var checked ; 60 | if(this.props.model.getValue() == this.props.trueValue) 61 | checked = true; 62 | else 63 | checked = false; 64 | 65 | return React.createElement("div", null, 66 | React.createElement("input", React.__spread({}, props, {type: "checkbox", checked: checked, onChange: this.handleChange})) 67 | ); 68 | } 69 | }); 70 | 71 | module.exports = Checkbox; -------------------------------------------------------------------------------- /lib/select/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jsx React.DOM 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | var _ = require('lodash'); 9 | 10 | 11 | var Select = React.createClass({displayName: "Select", 12 | 13 | getDefaultProps: function(){ 14 | return { 15 | model: { 16 | onChange: function(){ 17 | 18 | }, 19 | getValue: function(){ 20 | 21 | } 22 | }, 23 | formatResult: function(row) { 24 | if(row.id) 25 | return row.id; 26 | else 27 | return row; 28 | }, 29 | 30 | formatSelection: function(row) { 31 | if(row.text) 32 | return row.text; 33 | else if(row.value) 34 | return row.value; 35 | else 36 | return row; 37 | } 38 | } 39 | }, 40 | 41 | handleChange: function(e){ 42 | 43 | var selectedObj = _.find(this.props.options, function(row, i){ 44 | return i == e.target.value; 45 | }); 46 | var result = this.props.formatResult(selectedObj); 47 | this.props.model.onChange(result, e); 48 | }, 49 | 50 | render: function(){ 51 | var that = this; 52 | 53 | var renderOptions = function(){ 54 | 55 | return _.map(that.props.options, function(val, i){ 56 | return React.createElement("option", {value: i}, that.props.formatSelection? that.props.formatSelection(val) : ''); 57 | }); 58 | }; 59 | 60 | var $__0= this.props,model=$__0.model,option=$__0.option,optionsKey=$__0.optionsKey,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{model:1,option:1,optionsKey:1}); 61 | 62 | var value; 63 | 64 | if(this.props.formatResult){ 65 | var selectedObj = _.findIndex(this.props.options, function(row){ 66 | return that.props.formatResult(row) == that.props.model.getValue(); 67 | }); 68 | value = selectedObj; 69 | } 70 | else 71 | value = this.props.model.getValue(); 72 | return React.createElement("select", React.__spread({}, other, {value: value, onChange: that.handleChange}), 73 | renderOptions() 74 | ); 75 | } 76 | }); 77 | 78 | module.exports = Select; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Webpack development server configuration 3 | * 4 | * This file is set up for serving the webpak-dev-server, which will watch for changes and recompile as required if 5 | * the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload. 6 | */ 7 | 8 | 'use strict'; 9 | 10 | module.exports = { 11 | context: __dirname, 12 | output: { 13 | publicPath: '/scripts/', 14 | path: __dirname + "/dist/scripts", 15 | filename: "main.js" 16 | }, 17 | resolve: { 18 | alias: { 19 | 'jquery.ui.widget': "jquery.ui.widget/jquery.ui.widget.js" 20 | }, 21 | modulesDirectories: ['node_modules', 'src'], 22 | extensions: ['', '.js', '.jsx'] 23 | }, 24 | cache: true, 25 | debug: true, 26 | devtool: false, 27 | entry: './src/index.jsx', 28 | plugins: [], 29 | stats: { 30 | colors: true, 31 | reasons: true 32 | }, 33 | module: { 34 | preLoaders: [], 35 | loaders: [ 36 | { 37 | test: /\.css$/, 38 | loader: 'style!css' 39 | }, { 40 | test: /\.less$/, 41 | loader: 'style-loader!css-loader!less-loader' 42 | }, { 43 | test: /\.gif/, 44 | loader: 'url-loader?limit=100000&minetype=image/gif' 45 | }, { 46 | test: /\.jpg/, 47 | loader: 'url-loader?limit=100000&minetype=image/jpg' 48 | }, { 49 | test: /\.png/, 50 | loader: 'url-loader?limit=100000&minetype=image/png' 51 | }, { 52 | test: /\.jsx$/, 53 | loaders: ['jsx-loader?harmony'] 54 | }, { 55 | test: /\.js$/, 56 | loaders: ['jsx-loader?harmony'] 57 | }/*, 58 | { 59 | test: /\.woff$/, 60 | loader: "url-loader?limit=10000&minetype=application/font-woff" 61 | }, 62 | { 63 | test: /\.ttf$/, 64 | loader: "file-loader" 65 | }, 66 | { 67 | test: /\.eot$/, 68 | loader: "file-loader" 69 | }, 70 | { 71 | test: /\.svg$/, 72 | loader: "file-loader" 73 | }*/, 74 | { 75 | test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, 76 | loader: "url-loader?limit=10000&minetype=application/font-woff" 77 | }, 78 | { 79 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 80 | loader: "file-loader" 81 | }, 82 | { 83 | test: /\.(png|woff|woff2|eot|ttf|svg)$/, 84 | loader: 'url-loader?limit=100000' 85 | } 86 | ] 87 | } 88 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | --------------------------------------------------------------------------------