🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-checkbox-group

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-checkbox-group - npm Package Compare versions

Comparing version

1.0.4
to
3.0.0

2

package.json
{
"name": "react-checkbox-group",
"version": "1.0.4",
"version": "3.0.0",
"description": "Sensible checkbox groups manipulation for DOM.",

@@ -5,0 +5,0 @@ "main": "react-checkbox-group.js",

144

react-checkbox-group.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CheckboxGroup = exports.Checkbox = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var _react = require('react');
function checkbox(name, checkedValues, onChange) {
return function Checkbox(props) {
var checked = checkedValues.indexOf(props.value) >= 0;
var boxChange = onChange.bind(null, props.value);
var _react2 = _interopRequireDefault(_react);
return React.createElement('input', _extends({}, props, {
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var Checkbox = exports.Checkbox = _react2.default.createClass({
displayName: 'Checkbox',
contextTypes: {
checkboxGroup: _react2.default.PropTypes.object.isRequired
},
componentWillMount: function componentWillMount() {
if (!(this.context && this.context.checkboxGroup)) {
throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
}
},
render: function render() {
var _context$checkboxGrou = this.context.checkboxGroup;
var name = _context$checkboxGrou.name;
var checkedValues = _context$checkboxGrou.checkedValues;
var onChange = _context$checkboxGrou.onChange;
var optional = {};
if (checkedValues) {
optional.checked = checkedValues.indexOf(this.props.value) >= 0;
}
if (typeof onChange === 'function') {
optional.onChange = onChange.bind(null, this.props.value);
}
return _react2.default.createElement('input', _extends({}, this.props, {
type: 'checkbox',
name: name,
checked: checked,
onChange: boxChange
}));
};
}
name: name
}, optional));
}
});
module.exports = React.createClass({
var CheckboxGroup = exports.CheckboxGroup = _react2.default.createClass({
displayName: 'CheckboxGroup',
propTypes: {
name: _react.PropTypes.string,
defaultValue: _react.PropTypes.array,
value: _react.PropTypes.array,
onChange: _react.PropTypes.func,
children: _react.PropTypes.node.isRequired,
Component: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func, _react.PropTypes.object])
},
getDefaultProps: function getDefaultProps() {
return {
Component: "div"
};
},
childContextTypes: {
checkboxGroup: _react2.default.PropTypes.object
},
getChildContext: function getChildContext() {
return {
checkboxGroup: {
name: this.props.name,
checkedValues: this.state.value,
onChange: this._onCheckboxChange
}
};
},
getInitialState: function getInitialState() {

@@ -28,12 +89,37 @@ return {

},
isControlledComponent: function isControlledComponent() {
return !!this.props.value;
},
componentWillReceiveProps: function componentWillReceiveProps(newProps) {
if (newProps.value) {
this.setState({ value: newProps.value });
this.setState({
value: newProps.value
});
}
},
onCheckboxChange: function onCheckboxChange(checkboxValue, event) {
render: function render() {
var _props = this.props;
var Component = _props.Component;
var name = _props.name;
var value = _props.value;
var onChange = _props.onChange;
var children = _props.children;
var rest = _objectWithoutProperties(_props, ['Component', 'name', 'value', 'onChange', 'children']);
return _react2.default.createElement(
Component,
rest,
children
);
},
getValue: function getValue() {
return this.state.value;
},
_isControlledComponent: function _isControlledComponent() {
return !!this.props.value;
},
_onCheckboxChange: function _onCheckboxChange(checkboxValue, event) {
var newValue;

@@ -48,3 +134,3 @@ if (event.target.checked) {

if (!this.isControlledComponent()) {
if (!this._isControlledComponent()) {
this.setState({ value: newValue });

@@ -58,23 +144,3 @@ } else {

}
},
getValue: function getValue() {
return this.state.value;
},
render: function render() {
var _props = this.props;
var name = _props.name;
var value = _props.value;
var children = _props.children;
var checkedValues;
if (!this.isControlledComponent()) {
checkedValues = this.state.value;
} else {
checkedValues = value;
}
var renderedChildren = children(checkbox(name, checkedValues, this.onCheckboxChange));
return renderedChildren && React.Children.only(renderedChildren);
}
});

121

react-checkbox-group.jsx

@@ -1,36 +0,100 @@

var React = require('react');
import React, {PropTypes} from 'react';
function checkbox(name, checkedValues, onChange) {
return function Checkbox(props) {
var checked = checkedValues.indexOf(props.value) >= 0;
let boxChange = onChange.bind(null, props.value);
export const Checkbox = React.createClass({
displayName: 'Checkbox',
contextTypes: {
checkboxGroup: React.PropTypes.object.isRequired
},
componentWillMount: function() {
if (!(this.context && this.context.checkboxGroup)) {
throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
}
},
render: function() {
const {name, checkedValues, onChange} = this.context.checkboxGroup;
const optional = {};
if(checkedValues) {
optional.checked = (checkedValues.indexOf(this.props.value) >= 0);
}
if(typeof onChange === 'function') {
optional.onChange = onChange.bind(null, this.props.value);
}
return (
<input
{...props}
{...this.props}
type="checkbox"
name={name}
checked={checked}
onChange={boxChange}
/>
{...optional} />
);
}
}
});
module.exports = React.createClass({
export const CheckboxGroup = React.createClass({
displayName: 'CheckboxGroup',
propTypes: {
name: PropTypes.string,
defaultValue: PropTypes.array,
value: PropTypes.array,
onChange: PropTypes.func,
children: PropTypes.node.isRequired,
Component: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.object,
])
},
getDefaultProps: function() {
return {
Component: "div"
};
},
childContextTypes: {
checkboxGroup: React.PropTypes.object
},
getChildContext: function() {
return {
checkboxGroup: {
name: this.props.name,
checkedValues: this.state.value,
onChange: this._onCheckboxChange
}
}
},
getInitialState: function() {
return {
value: this.props.value || this.props.defaultValue || []
};
}
},
isControlledComponent: function() {
return !!this.props.value;
},
componentWillReceiveProps(newProps) {
componentWillReceiveProps: function(newProps) {
if (newProps.value) {
this.setState({value: newProps.value});
this.setState({
value: newProps.value
});
}
},
onCheckboxChange: function(checkboxValue, event) {
render: function() {
const {Component, name, value, onChange, children, ...rest} = this.props;
return <Component {...rest}>{children}</Component>;
},
getValue: function() {
return this.state.value;
},
_isControlledComponent: function() {
return !!this.props.value;
},
_onCheckboxChange: function(checkboxValue, event) {
var newValue;

@@ -44,3 +108,3 @@ if (event.target.checked) {

if (!this.isControlledComponent()) {
if (!this._isControlledComponent()) {
this.setState({value: newValue});

@@ -55,20 +119,3 @@ }

}
},
getValue: function() {
return this.state.value;
},
render: function() {
var {name, value, children} = this.props;
var checkedValues;
if (!this.isControlledComponent()) {
checkedValues = this.state.value;
}
else {
checkedValues = value;
}
var renderedChildren = children(checkbox(name, checkedValues, this.onCheckboxChange));
return renderedChildren && React.Children.only(renderedChildren);
},
}
});

51

README.md

@@ -20,12 +20,8 @@ # [React](http://facebook.github.io/react/)-checkbox-group

```javascript
import {Checkbox, CheckboxGroup} from 'react-checkbox-group';
<CheckboxGroup name="fruits" value={['kiwi', 'pineapple']} onChange={this.fruitsChanged}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>

@@ -41,3 +37,5 @@ ```

```
and further
```javascript

@@ -55,3 +53,7 @@ function handleChange(newValues) {

bower install react-checkbox-group
```
or
```sh
npm install react-checkbox-group

@@ -63,5 +65,8 @@ ```

```javascript
var CheckboxGroup = require('react-checkbox-group');
// or
import CheckboxGroup from 'react-checkbox-group';
var Check = require('react-checkbox-group');
var Checkbox = Check.Checkbox;
var CheckboxGroup = Check.CheckboxGroup;
// or ES6
import {Checkbox, CheckboxGroup} from 'react-checkbox-group';
```

@@ -95,19 +100,7 @@

value={this.state.fruits}
onChange={this.fruitsChanged}
>
{
Checkbox => (
<form>
<label>
<Checkbox value="apple"/> Apple
</label>
<label>
<Checkbox value="orange"/> Orange
</label>
<label>
<Checkbox value="watermelon"/> Watermelon
</label>
</form>
)
}
onChange={this.fruitsChanged}>
<label><Checkbox value="apple"/> Apple</label>
<label><Checkbox value="orange"/> Orange</label>
<label><Checkbox value="watermelon"/> Watermelon</label>
</CheckboxGroup>

@@ -114,0 +107,0 @@ );

125

test/react-checkbox-group_spec.js

@@ -1,8 +0,6 @@

var React = require('react');
var ReactDOM = require('react-dom');
var expect = require('chai').expect;
var CheckboxGroup = require('../react-checkbox-group.jsx');
var ReactTestUtils = require('react-addons-test-utils');
var renderIntoDocument = ReactTestUtils.renderIntoDocument;
var Simulate = ReactTestUtils.Simulate;
import React from 'react';
import ReactDOM from 'react-dom';
import {expect} from 'chai';
import {Checkbox, CheckboxGroup} from '../react-checkbox-group.jsx';
import {Simulate, renderIntoDocument} from 'react-addons-test-utils';

@@ -22,10 +20,4 @@ function _findInputWithValue(wrapper, value) {

<CheckboxGroup name="fruit">
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>

@@ -42,11 +34,5 @@ );

<CheckboxGroup name="fruit" defaultValue={fruits}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>

@@ -69,11 +55,5 @@ );

<CheckboxGroup name="fruit" defaultValue={fruits}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,

@@ -91,11 +71,5 @@ div

<CheckboxGroup name="fruit" defaultValue={fruits}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,

@@ -119,11 +93,5 @@ div

<CheckboxGroup name="fruit" value={fruits}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,

@@ -141,11 +109,5 @@ div

<CheckboxGroup name="fruit" value={fruits}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,

@@ -162,2 +124,33 @@ div

it('Checks the correct boxes when props change', function() {
// Create an element to re-render to
var div = document.createElement('div');
var fruits = ['watermelon', 'pineapple'];
var component = ReactDOM.render(
<CheckboxGroup name="fruit" value={['watermelon']}>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,
div
);
// Re-render in same div with different prop value
var component = ReactDOM.render(
<CheckboxGroup name="fruit" value={['watermelon', 'kiwi']}>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>,
div
);
var newValue = component.getValue();
expect(newValue.length).to.equal(2);
expect(newValue).to.include('kiwi');
expect(newValue).to.include('watermelon');
expect(newValue).to.not.include('pineapple');
});
it('Calls `onChange` with the correct new value', function() {

@@ -174,11 +167,5 @@ var fruits = ['kiwi', 'watermelon'];

<CheckboxGroup name="fruit" value={fruits} onChange={onChange}>
{
Checkbox => (
<div>
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</div>
)
}
<Checkbox value="kiwi"/>
<Checkbox value="pineapple"/>
<Checkbox value="watermelon"/>
</CheckboxGroup>

@@ -185,0 +172,0 @@ );