initial commit

Author: ziad-saab

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+bower_components

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+bower_components
+bower.json

README.md

@@ -0,0 +1,104 @@
+# [React](http://facebook.github.io/react/)-checkbox-group
+## Heavily inspired from https://github.com/chenglou/react-radio-group
+
+This is your average checkbox group:
+
+```html
+<form>
+  <input type="checkbox" name="fruit" value="apple" />Apple
+  <input type="checkbox" name="fruit" value="orange" />Orange
+  <input type="checkbox" name="fruit" value="watermelon" />Watermelon
+</form>
+```
+
+Repetitive, hard to manipulate and easily desynchronized.
+Lift up `name`, give the group an initial checked values array, and optionally remove the form tag:
+
+```html
+<CheckboxGroup name="fruit" value={['apple','watermelon']}>
+  <input type="checkbox" value="apple" />Apple
+  <input type="checkbox" value="orange" />Orange
+  <input type="checkbox" value="watermelon" />Watermelon
+</CheckboxGroup>
+```
+
+Listen for changes, get the new value as intuitively as possible:
+
+```html
+<CheckboxGroup name="fruit" value={['apple','watermelon']} ref="fruitsGroup" onChange={this.handleChange}>
+// further...
+
+this.refs.fruitsGroup.getCheckedValues(); // => whatever's currently checked
+```
+
+That's it for the API! See below for a complete example.
+
+## Install
+
+```sh
+bower install react-checkbox-group
+or
+npm install react-checkbox-group
+```
+
+Simply require it to use it:
+
+```javascript
+var CheckboxGroup = require('react-checkbox-group');
+```
+
+## Example
+
+```html
+/**
+* @jsx React.DOM
+*/
+var Demo = React.createClass({
+  getInitialState: function() {
+    return {value: ['apple','watermelon']};
+  },
+
+  componentDidMount: function() {
+    // Add orange and remove watermelon after 1 second
+    setTimeout(function() {
+      this.setState({value: ['apple','orange']});
+    }.bind(this), 1000);
+  },
+
+  render: function() {
+    // the checkboxes can be arbitrarily deep. They will always be fetched and
+    // attached the `name` attribute correctly. `value` is optional
+    return (
+      <CheckboxGroup
+        name="fruits"
+        value={this.state.value}
+        ref="fruitsGroup"
+        onChange={this.handleChange}
+      >
+        <div>
+          <label>
+            <input type="checkbox" value="apple"/>Apple
+          </label>
+          <label>
+            <input type="checkbox" value="orange"/>Orange
+          </label>
+          <label>
+            <input type="checkbox" value="watermelon"/>Watermelon
+          </label>
+        </div>
+      </CheckboxGroup>
+    );
+  },
+
+  handleChange: function() {
+    // will return the currently selected checkbox values as an array, possibly empty
+    var selectedFruits = this.refs.fruitsGroup.getCheckedValues();
+  }
+});
+
+React.renderComponent(<Demo/>, document.body);
+```
+
+## License
+
+MIT.

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-checkbox-group",
+  "version": "0.1.4",
+  "author": "Ziad Saab <[email protected]>",
+  "description": "Sensible checkbox groups manipulation for DOM.",
+  "main": "react-checkbox-group.jsx",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "package.json"
+  ],
+  "keywords": [
+    "facebook",
+    "react",
+    "checkbox",
+    "group",
+    "dom",
+    "input"
+  ],
+  "dependencies": {
+    "react": "~0.11.1"
+  },
+  "license": "MIT"
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-checkbox-group",
+  "version": "0.1.4",
+  "description": "Sensible checkbox groups manipulation for DOM.",
+  "main": "react-checkbox-group.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ziad-saab/react-checkbox-group.git"
+  },
+  "keywords": [
+    "facebook",
+    "react",
+    "checkbox",
+    "group",
+    "dom",
+    "input"
+  ],
+  "author": "Ziad Saab <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ziad-saab/react-checkbox-group/issues"
+  },
+  "homepage": "https://github.com/ziad-saab/react-checkbox-group",
+  "dependencies": {
+    "react": "~0.11.1"
+  }
+}

react-checkbox-group.jsx

@@ -0,0 +1,77 @@
+/**
+* @jsx React.DOM
+*/
+var React = require('react');
+
+var CheckboxGroup = module.exports = React.createClass({
+  getInitialState: function() {
+    return {defaultValue: this.props.defaultValue || []};
+  },
+
+  componentDidMount: function() {
+    this.setCheckboxNames();
+    this.setCheckedBoxes();
+  },
+
+  componentDidUpdate: function() {
+    this.setCheckboxNames();
+    this.setCheckedBoxes();
+  },
+
+  render: function() {
+    return this.transferPropsTo(
+      <div onChange={this.props.onChange}>
+        {this.props.children}
+      </div>
+    );
+  },
+
+  setCheckboxNames: function() {
+    // stay DRY and don't put the same `name` on all checkboxes manually. Put it on
+    // the tag and it'll be done here
+    var $checkboxes = this.getCheckboxes();
+    for (var i = 0, length = $checkboxes.length; i < length; i++) {
+      $checkboxes[i].setAttribute('name', this.props.name);
+    }
+  },
+
+  getCheckboxes: function() {
+    return this.getDOMNode().querySelectorAll('input[type="checkbox"]');
+  },
+
+  setCheckedBoxes: function() {
+    var $checkboxes = this.getCheckboxes();
+    // if `value` is passed from parent, always use that value. This is similar
+    // to React's controlled component. If `defaultValue` is used instead,
+    // subsequent updates to defaultValue are ignored. Note: when `defaultValue`
+    // and `value` are both passed, the latter takes precedence, just like in
+    // a controlled component
+    var destinationValue = this.props.value != null
+      ? this.props.value
+      : this.state.defaultValue;
+
+    for (var i = 0, length = $checkboxes.length; i < length; i++) {
+      var $checkbox = $checkboxes[i];
+
+      // intentionally use implicit conversion for those who accidentally used,
+      // say, `valueToChange` of 1 (integer) to compare it with `value` of "1"
+      // (auto conversion to valid html value from React)
+      if (destinationValue.indexOf($checkbox.value) >= 0) {
+        $checkbox.checked = true;
+      }
+    }
+  },
+
+  getCheckedValues: function() {
+    var $checkboxes = this.getCheckboxes();
+
+    var checked = [];
+    for (var i = 0, length = $checkboxes.length; i < length; i++) {
+      if ($checkboxes[i].checked) {
+        checked.push($checkboxes[i].value);
+      }
+    }
+
+    return checked;
+  }
+});