├── .gitignore
├── LICENSE
├── README.md
├── build
    ├── .module-cache
    │   ├── 21601c991df382c16f79632ece3553383d1e8da6.js
    │   ├── 9d049c38d26ecdc2abca55ef78235964b876e175.js
    │   ├── c1be310da0568fccd0e35bc0cd5c98f6618bd510.js
    │   ├── f8cb066c8ec8ebba4cc662e00b955e4f69a6e180.js
    │   └── manifest
    │   │   ├── 21601c991df382c16f79632ece3553383d1e8da6.json
    │   │   ├── 9d049c38d26ecdc2abca55ef78235964b876e175.json
    │   │   ├── c1be310da0568fccd0e35bc0cd5c98f6618bd510.json
    │   │   └── f8cb066c8ec8ebba4cc662e00b955e4f69a6e180.json
    ├── Demo.js
    ├── RadioOption.js
    ├── RadioOptionGroup.js
    ├── RadioOtherOption.js
    └── index.html
├── components
    ├── Demo.jsx
    ├── RadioOption.jsx
    ├── RadioOptionGroup.jsx
    └── RadioOtherOption.jsx
├── demo
    └── index.html
├── package.json
└── stores
    └── radioOptions.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**
2 | 
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jesse Skinner
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # reactjs-radio-group
2 | Demo of implementing a group of radio options with React.js 
3 | 


--------------------------------------------------------------------------------
/build/.module-cache/21601c991df382c16f79632ece3553383d1e8da6.js:
--------------------------------------------------------------------------------
 1 | var RadioOtherOption = React.createClass({displayName: "RadioOtherOption",
 2 | 	propTypes: {
 3 | 		name: React.PropTypes.string.isRequired
 4 | 	},
 5 | 	getInitialState: function () {
 6 | 		return {
 7 | 			checked: false
 8 | 		};
 9 | 	},
10 | 	onChange: function (event) {
11 | 		var input = event.target;
12 | 
13 | 		this.setState({
14 | 			checked: input.checked
15 | 		});
16 | 	},
17 | 	componentDidUpdate: function (prevProps, prevState) {
18 | 		var input = this.refs.input.getDOMNode();
19 | 
20 | 		if (prevState.checked !== input.checked) {
21 | 			this.setState({
22 | 				checked: input.checked
23 | 			});
24 | 		}
25 | 	},
26 | 	render: function () {
27 | 		return (
28 | 			React.createElement("p", {className: "form-group radio"}, 
29 | 				React.createElement("label", null, 
30 | 					React.createElement("input", {ref: "input", onChange: this.onChange, type: "radio", 
31 | 						name: this.props.name, value: "other"}), 
32 | 					"Other"
33 | 				), 
34 | 
35 | 				this.state.checked && (
36 | 					React.createElement("label", {className: "form-inline"}, 
37 | 						"Please specify:", 
38 | 						React.createElement("input", {type: "text", name: "referrer_other"})
39 | 					)
40 | 				)
41 | 			)
42 | 		);
43 | 	}
44 | });


--------------------------------------------------------------------------------
/build/.module-cache/9d049c38d26ecdc2abca55ef78235964b876e175.js:
--------------------------------------------------------------------------------
 1 | var Demo = React.createClass({displayName: "Demo",
 2 | 	render: function () {
 3 | 		var radioOptions = [
 4 | 			{ value: 'newspaper', label: 'Newspaper' },
 5 | 			{ value: 'radio', label: 'Radio' },
 6 | 			{ value: 'tv', label: 'Television' },
 7 | 			{ value: 'search', label: 'Search Engine' },
 8 | 			{ value: 'social', label: 'Social Media' }
 9 | 		];
10 | 
11 | 		return (
12 | 
13 | 			React.createElement("div", {className: "container"}, 
14 | 				React.createElement("h1", null, "React.js Radio Group Demo"), 
15 | 				
16 | 				React.createElement("form", null, 
17 | 					React.createElement("p", {className: "h3"}, "How did you hear about us?"), 
18 | 
19 | 					React.createElement(RadioOptionGroup, {
20 | 						name: "referrer", 
21 | 						other: true, 
22 | 						options: radioOptions}
23 | 					), 
24 | 
25 | 					React.createElement("p", null, React.createElement("input", {type: "submit"}))
26 | 				)
27 | 			)
28 | 
29 | 		);
30 | 	}
31 | });


--------------------------------------------------------------------------------
/build/.module-cache/c1be310da0568fccd0e35bc0cd5c98f6618bd510.js:
--------------------------------------------------------------------------------
 1 | var RadioOptionGroup = React.createClass({displayName: "RadioOptionGroup",
 2 | 	propTypes: {
 3 | 		other: React.PropTypes.bool,
 4 | 		name: React.PropTypes.string.isRequired,
 5 | 		options: React.PropTypes.array.isRequired
 6 | 	},
 7 | 	onChange: function (event) {
 8 | 		if (this.props.other) {
 9 | 			this.refs.other.forceUpdate();
10 | 		}
11 | 	},
12 | 	render: function () {
13 | 		var name = this.props.name;
14 | 
15 | 		return (
16 | 			React.createElement("div", {onChange: this.onChange}, 
17 | 				this.props.options.map(function (option) {
18 | 					return (
19 | 						React.createElement(RadioOption, {name: name, value: option.value, key: option.value}, 
20 | 							option.label
21 | 						)
22 | 					);
23 | 				}), 
24 | 
25 | 				this.props.other && React.createElement(RadioOtherOption, {name: name, ref: "other"})
26 | 			)
27 | 		);
28 | 	}
29 | });


--------------------------------------------------------------------------------
/build/.module-cache/f8cb066c8ec8ebba4cc662e00b955e4f69a6e180.js:
--------------------------------------------------------------------------------
 1 | var RadioOption = React.createClass({displayName: "RadioOption",
 2 | 	propTypes: {
 3 | 		value: React.PropTypes.string.isRequired,
 4 | 		name: React.PropTypes.string.isRequired,
 5 | 		children: React.PropTypes.node
 6 | 	},
 7 | 	render: function () {
 8 | 		return (
 9 | 			React.createElement("p", {className: "radio"}, 
10 | 				React.createElement("label", null, 
11 | 					React.createElement("input", {type: "radio", name: this.props.name, value: this.props.value}), 
12 | 					this.props.children
13 | 				)
14 | 			)
15 | 		);
16 | 	}
17 | 
18 | });


--------------------------------------------------------------------------------
/build/.module-cache/manifest/21601c991df382c16f79632ece3553383d1e8da6.json:
--------------------------------------------------------------------------------
1 | {".js":"21601c991df382c16f79632ece3553383d1e8da6.js"}


--------------------------------------------------------------------------------
/build/.module-cache/manifest/9d049c38d26ecdc2abca55ef78235964b876e175.json:
--------------------------------------------------------------------------------
1 | {".js":"9d049c38d26ecdc2abca55ef78235964b876e175.js"}


--------------------------------------------------------------------------------
/build/.module-cache/manifest/c1be310da0568fccd0e35bc0cd5c98f6618bd510.json:
--------------------------------------------------------------------------------
1 | {".js":"c1be310da0568fccd0e35bc0cd5c98f6618bd510.js"}


--------------------------------------------------------------------------------
/build/.module-cache/manifest/f8cb066c8ec8ebba4cc662e00b955e4f69a6e180.json:
--------------------------------------------------------------------------------
1 | {".js":"f8cb066c8ec8ebba4cc662e00b955e4f69a6e180.js"}


--------------------------------------------------------------------------------
/build/Demo.js:
--------------------------------------------------------------------------------
 1 | function Demo(props) {
 2 | 	return React.createElement(
 3 | 		"div",
 4 | 		{ className: "container" },
 5 | 		React.createElement(
 6 | 			"h1",
 7 | 			null,
 8 | 			"React.js Radio Group Demo"
 9 | 		),
10 | 		React.createElement(
11 | 			"form",
12 | 			null,
13 | 			React.createElement(
14 | 				"p",
15 | 				{ className: "h3" },
16 | 				"How did you hear about us?"
17 | 			),
18 | 			React.createElement(RadioOptionGroup, {
19 | 				name: "referrer",
20 | 				options: props.options,
21 | 				onCheck: props.onCheck
22 | 			}),
23 | 			React.createElement(
24 | 				"p",
25 | 				null,
26 | 				React.createElement("input", { type: "submit" })
27 | 			)
28 | 		)
29 | 	);
30 | }


--------------------------------------------------------------------------------
/build/RadioOption.js:
--------------------------------------------------------------------------------
 1 | function RadioOption(props) {
 2 | 	return React.createElement(
 3 | 		"p",
 4 | 		{ className: "radio" },
 5 | 		React.createElement(
 6 | 			"label",
 7 | 			null,
 8 | 			React.createElement("input", { type: "radio",
 9 | 				onClick: props.onCheck,
10 | 				checked: props.checked,
11 | 				name: props.name,
12 | 				value: props.value }),
13 | 			props.children
14 | 		)
15 | 	);
16 | }
17 | 
18 | RadioOption.propTypes = {
19 | 	value: React.PropTypes.string.isRequired,
20 | 	name: React.PropTypes.string.isRequired,
21 | 	checked: React.PropTypes.bool.isRequired,
22 | 	children: React.PropTypes.node
23 | };


--------------------------------------------------------------------------------
/build/RadioOptionGroup.js:
--------------------------------------------------------------------------------
 1 | function RadioOptionGroup(props) {
 2 | 	var name = props.name;
 3 | 
 4 | 	return React.createElement(
 5 | 		'div',
 6 | 		null,
 7 | 		props.options.map(function (option) {
 8 | 			function onCheck() {
 9 | 				props.onCheck(option.value);
10 | 			}
11 | 
12 | 			if (option.value === 'other') {
13 | 				return React.createElement(RadioOtherOption, {
14 | 					key: option.value,
15 | 					name: name,
16 | 					checked: option.checked,
17 | 					onCheck: onCheck });
18 | 			} else {
19 | 				return React.createElement(
20 | 					RadioOption,
21 | 					{
22 | 						key: option.value,
23 | 						name: name,
24 | 						value: option.value,
25 | 						checked: option.checked,
26 | 						onCheck: onCheck,
27 | 						key: option.value },
28 | 					option.label
29 | 				);
30 | 			}
31 | 		})
32 | 	);
33 | }
34 | 
35 | RadioOptionGroup.propTypes = {
36 | 	other: React.PropTypes.bool,
37 | 	name: React.PropTypes.string.isRequired,
38 | 	options: React.PropTypes.array.isRequired
39 | };


--------------------------------------------------------------------------------
/build/RadioOtherOption.js:
--------------------------------------------------------------------------------
 1 | function RadioOtherOption(props) {
 2 | 	return React.createElement(
 3 | 		"p",
 4 | 		{ className: "form-group radio" },
 5 | 		React.createElement(
 6 | 			"label",
 7 | 			null,
 8 | 			React.createElement("input", {
 9 | 				onClick: props.onCheck,
10 | 				checked: props.checked,
11 | 				type: "radio",
12 | 				name: props.name, value: "other" }),
13 | 			"Other"
14 | 		),
15 | 		props.checked && React.createElement(
16 | 			"label",
17 | 			{ className: "form-inline" },
18 | 			"Please specify:",
19 | 			React.createElement("input", { type: "text", name: "referrer_other" })
20 | 		)
21 | 	);
22 | }
23 | 
24 | RadioOtherOption.propTypes = {
25 | 	name: React.PropTypes.string.isRequired,
26 | 	checked: React.PropTypes.bool.isRequired
27 | };


--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>React.js Radio Group Demo</title>
 6 | 
 7 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 8 | </head>
 9 | <body>
10 | 
11 | <div id="demo"></div>
12 | 
13 | <script src="http://fb.me/react-0.14.2.min.js"></script>
14 | <script src="http://fb.me/react-dom-0.14.2.min.js"></script>
15 | 
16 | <script src="../node_modules/hoverboard/dist/hoverboard.min.js"></script>
17 | 
18 | <script src="Demo.js"></script>
19 | <script src="RadioOption.js"></script>
20 | <script src="RadioOtherOption.js"></script>
21 | <script src="RadioOptionGroup.js"></script>
22 | <script src="../stores/radioOptions.js"></script>
23 | 
24 | <script>
25 | radioOptions.getState(function (options) {
26 | 	ReactDOM.render(
27 | 		React.createElement(Demo, {
28 | 			onCheck: radioOptions.check,
29 | 			options: options
30 | 		}),
31 | 		document.getElementById('demo')
32 | 	);
33 | });
34 | </script>
35 | 
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/components/Demo.jsx:
--------------------------------------------------------------------------------
 1 | function Demo(props) {
 2 | 	return (
 3 | 
 4 | 		<div className="container">
 5 | 			<h1>React.js Radio Group Demo</h1>
 6 | 			
 7 | 			<form>
 8 | 				<p className="h3">How did you hear about us?</p>
 9 | 
10 | 				<RadioOptionGroup
11 | 					name="referrer"
12 | 					options={props.options}
13 | 					onCheck={props.onCheck}
14 | 				/>
15 | 
16 | 				<p><input type="submit"/></p>
17 | 			</form>
18 | 		</div>
19 | 
20 | 	);
21 | }
22 | 


--------------------------------------------------------------------------------
/components/RadioOption.jsx:
--------------------------------------------------------------------------------
 1 | function RadioOption(props) {
 2 | 	return (
 3 | 		<p className="radio">
 4 | 			<label>
 5 | 				<input type="radio"
 6 | 					onClick={props.onCheck}
 7 | 					checked={props.checked}
 8 | 					name={props.name}
 9 | 					value={props.value}/>
10 | 				{props.children}
11 | 			</label>
12 | 		</p>
13 | 	);
14 | }
15 | 
16 | RadioOption.propTypes = {
17 | 	value: React.PropTypes.string.isRequired,
18 | 	name: React.PropTypes.string.isRequired,
19 | 	checked: React.PropTypes.bool.isRequired,
20 | 	children: React.PropTypes.node
21 | };
22 | 


--------------------------------------------------------------------------------
/components/RadioOptionGroup.jsx:
--------------------------------------------------------------------------------
 1 | function RadioOptionGroup(props) {
 2 | 	var name = props.name;
 3 | 
 4 | 	return (
 5 | 		<div>
 6 | 			{props.options.map(function (option) {
 7 | 				function onCheck() {
 8 | 					props.onCheck(option.value);
 9 | 				}
10 | 
11 | 				if (option.value === 'other') {
12 | 					return (
13 | 						<RadioOtherOption
14 | 							key={option.value}
15 | 							name={name}
16 | 							checked={option.checked}
17 | 							onCheck={onCheck} />
18 | 					);
19 | 				} else {
20 | 					return (
21 | 						<RadioOption
22 | 							key={option.value}
23 | 							name={name}
24 | 							value={option.value}
25 | 							checked={option.checked}
26 | 							onCheck={onCheck}
27 | 							key={option.value}>
28 | 							{option.label}
29 | 						</RadioOption>
30 | 					);
31 | 				}
32 | 			})}
33 | 		</div>
34 | 	);
35 | }
36 | 
37 | RadioOptionGroup.propTypes = {
38 | 	other: React.PropTypes.bool,
39 | 	name: React.PropTypes.string.isRequired,
40 | 	options: React.PropTypes.array.isRequired
41 | };
42 | 


--------------------------------------------------------------------------------
/components/RadioOtherOption.jsx:
--------------------------------------------------------------------------------
 1 | function RadioOtherOption(props) {
 2 | 	return (
 3 | 		<p className="form-group radio">
 4 | 			<label>
 5 | 				<input
 6 | 					onClick={props.onCheck}
 7 | 					checked={props.checked}
 8 | 					type="radio"
 9 | 					name={props.name} value="other"/>
10 | 				Other
11 | 			</label>
12 | 
13 | 			{props.checked && (
14 | 				<label className="form-inline">
15 | 					Please specify:
16 | 					<input type="text" name="referrer_other"/>
17 | 				</label>
18 | 			)}
19 | 		</p>
20 | 	);
21 | }
22 | 
23 | RadioOtherOption.propTypes = {
24 | 	name: React.PropTypes.string.isRequired,
25 | 	checked: React.PropTypes.bool.isRequired
26 | };
27 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>React.js Radio Group Demo</title>
 6 | 
 7 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 8 | </head>
 9 | <body>
10 | 
11 | <div id="demo"></div>
12 | 
13 | <script src="http://fb.me/react-0.14.2.js"></script>
14 | <script src="http://fb.me/react-dom-0.14.2.js"></script>
15 | <script src="../node_modules/hoverboard/dist/hoverboard.min.js"></script>
16 | 
17 | <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
18 | <script src="../components/Demo.jsx" type="text/jsx"></script>
19 | <script src="../components/RadioOption.jsx" type="text/jsx"></script>
20 | <script src="../components/RadioOtherOption.jsx" type="text/jsx"></script>
21 | <script src="../components/RadioOptionGroup.jsx" type="text/jsx"></script>
22 | 
23 | <script src="../stores/radioOptions.js"></script>
24 | 
25 | <script type="text/jsx">
26 | radioOptions.getState(function (options) {
27 | 	ReactDOM.render(
28 | 		<Demo
29 | 			onCheck={radioOptions.check}
30 | 			options={options} />,
31 | 		document.getElementById('demo')
32 | 	);
33 | });
34 | </script>
35 | 
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reactjs-radio-group",
 3 |   "version": "1.0.0",
 4 |   "description": "Demo of implementing a group of radio options with React.js",
 5 |   "main": "index.js",
 6 |   "dependencies": {
 7 |     "babel-cli": "^6.1.2",
 8 |     "babel-preset-react": "^6.1.2",
 9 |     "hoverboard": "^2.0.2"
10 |   },
11 |   "devDependencies": {},
12 |   "scripts": {
13 |     "build": "./node_modules/.bin/babel --presets react components --out-dir build",
14 |     "test": "echo \"Error: no test specified\" && exit 1"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/jesseskinner/reactjs-radio-group.git"
19 |   },
20 |   "author": "",
21 |   "license": "ISC",
22 |   "bugs": {
23 |     "url": "https://github.com/jesseskinner/reactjs-radio-group/issues"
24 |   },
25 |   "homepage": "https://github.com/jesseskinner/reactjs-radio-group#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/stores/radioOptions.js:
--------------------------------------------------------------------------------
 1 | var radioOptions = Hoverboard({
 2 | 	init: function (state, options) {
 3 | 		return options;
 4 | 	},
 5 | 	check: function (state, value) {
 6 | 		return state.map(function (option) {
 7 | 			return {
 8 | 				value: option.value,
 9 | 				label: option.label,
10 | 				checked: value === option.value
11 | 			};
12 | 		});
13 | 	}
14 | });
15 | 
16 | radioOptions.init([
17 | 	{ value: 'newspaper', label: 'Newspaper', checked: false },
18 | 	{ value: 'radio', label: 'Radio', checked: false },
19 | 	{ value: 'tv', label: 'Television', checked: false },
20 | 	{ value: 'search', label: 'Search Engine', checked: false },
21 | 	{ value: 'social', label: 'Social Media', checked: false },
22 | 	{ value: 'other', label: 'Other', checked: false }
23 | ]);
24 | 
25 | 


--------------------------------------------------------------------------------