Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cf-component-checkbox

Package Overview
Dependencies
Maintainers
11
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cf-component-checkbox - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

dist/cf-component-checkbox.js

33

lib/Checkbox.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -11,5 +21,2 @@

var React = require('react');
var PropTypes = React.PropTypes;
var Checkbox = function (_React$Component) {

@@ -33,6 +40,6 @@ _inherits(Checkbox, _React$Component);

return React.createElement(
return _react2.default.createElement(
'label',
{ htmlFor: this.props.name, className: className },
React.createElement('input', {
_react2.default.createElement('input', {
type: 'checkbox',

@@ -46,3 +53,3 @@ className: 'cf-checkbox__input',

}),
this.props.label && React.createElement(
this.props.label && _react2.default.createElement(
'span',

@@ -57,12 +64,12 @@ { className: 'cf-checkbox__label' },

return Checkbox;
}(React.Component);
}(_react2.default.Component);
Checkbox.propTypes = {
label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired
label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.oneOf([false])]).isRequired,
name: _react.PropTypes.string.isRequired,
value: _react.PropTypes.string.isRequired,
checked: _react.PropTypes.bool.isRequired,
onChange: _react.PropTypes.func.isRequired
};
module.exports = Checkbox;
exports.default = Checkbox;
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Checkbox = require('./Checkbox');
var _Checkbox2 = _interopRequireDefault(_Checkbox);
var _includes = require('lodash/includes');
var _includes2 = _interopRequireDefault(_includes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -11,8 +29,2 @@

var React = require('react');
var PropTypes = React.PropTypes;
var Checkbox = require('./Checkbox');
var includes = require('lodash/includes');
var CheckboxGroup = function (_React$Component) {

@@ -40,3 +52,3 @@ _inherits(CheckboxGroup, _React$Component);

return includes(_this2.props.values, option.value);
return (0, _includes2.default)(_this2.props.values, option.value);
}).map(function (option) {

@@ -53,7 +65,7 @@ return option.value;

return React.createElement(
return _react2.default.createElement(
'div',
{ className: 'cf-checkbox__group' },
this.props.options.map(function (option) {
return React.createElement(Checkbox, {
return _react2.default.createElement(_Checkbox2.default, {
key: option.name,

@@ -63,3 +75,3 @@ label: option.label,

value: option.value,
checked: includes(_this3.props.values, option.value),
checked: (0, _includes2.default)(_this3.props.values, option.value),
onChange: function onChange(e) {

@@ -75,14 +87,14 @@ return _this3.handleChange(option.value, e.target.checked);

return CheckboxGroup;
}(React.Component);
}(_react2.default.Component);
CheckboxGroup.propTypes = {
values: PropTypes.arrayOf(PropTypes.string).isRequired,
onChange: PropTypes.func.isRequired,
options: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
values: _react.PropTypes.arrayOf(_react.PropTypes.string).isRequired,
onChange: _react.PropTypes.func.isRequired,
options: _react.PropTypes.arrayOf(_react.PropTypes.shape({
label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.oneOf([false])]).isRequired,
name: _react.PropTypes.string.isRequired,
value: _react.PropTypes.string.isRequired
})).isRequired
};
module.exports = CheckboxGroup;
exports.default = CheckboxGroup;
'use strict';
exports.Checkbox = require('./Checkbox');
exports.CheckboxGroup = require('./CheckboxGroup');
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CheckboxGroup = exports.Checkbox = undefined;
var _Checkbox = require('./Checkbox');
var _Checkbox2 = _interopRequireDefault(_Checkbox);
var _CheckboxGroup = require('./CheckboxGroup');
var _CheckboxGroup2 = _interopRequireDefault(_CheckboxGroup);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Checkbox = _Checkbox2.default;
exports.CheckboxGroup = _CheckboxGroup2.default;
{
"name": "cf-component-checkbox",
"description": "CloudFlare Checkbox Component",
"version": "3.0.1",
"description": "Cloudflare Checkbox Component",
"version": "3.1.0",
"main": "lib/index.js",
"module": "es/index.js",
"jsnext:main": "es/index.js",
"author": "James Kyle <jkyle@cloudflare.com>",

@@ -12,11 +14,7 @@ "license": "BSD-3-Clause",

"dependencies": {
"lodash": "^4.1.0",
"react": "^0.14.2 || ^15.0.0-0"
"lodash": "^4.1.0"
},
"devDependencies": {
"assert-equal-jsx": "^1.0.0",
"enzyme": "^2.3.0",
"react-addons-test-utils": "^15.0.0-0",
"react-dom": "^15.0.0-0"
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
}
}
# cf-component-checkbox
> CloudFlare Checkbox Component
> Cloudflare Checkbox Component

@@ -13,10 +13,7 @@ ## Installation

```js
const React = require('react');
const {
Checkbox,
CheckboxGroup
} = require('../../src/index');
```jsx
import React from 'react';
import { Checkbox, CheckboxGroup } from 'cf-component-checkbox';
class Application extends React.Component {
class CheckboxComponent extends React.Component {
constructor(props) {

@@ -27,3 +24,3 @@ super(props);

checkbox2: false,
checkboxValues: ["option1"]
checkboxValues: ['option1']
};

@@ -37,3 +34,3 @@ this.onCheckboxGroupChange = this.onCheckboxGroupChange.bind(this);

});
};
}

@@ -43,4 +40,2 @@ render() {

<div>
<h1>CloudFlare Checkbox Component Example</h1>
<p>You can create them individually with <code>Checkbox</code></p>

@@ -53,3 +48,4 @@

checked={this.state.checkbox1}
onChange={checked => this.setState({ checkbox1: checked })}/>
onChange={checked => this.setState({ checkbox1: checked })}
/>

@@ -61,3 +57,4 @@ <Checkbox

checked={this.state.checkbox2}
onChange={checked => this.setState({ checkbox2: checked })}/>
onChange={checked => this.setState({ checkbox2: checked })}
/>

@@ -72,5 +69,8 @@ <p>Or as a group with <code>CheckboxGroup</code></p>

{ label: 'Option 2', name: 'group-option-2', value: 'option2' }
]}/>
]}
/>
<p>You can also disable a label by passing <code>false</code> explicitly</p>
<p>
You can also disable a label by passing <code>false</code> explicitly
</p>

@@ -82,3 +82,4 @@ <Checkbox

checked={this.state.checkbox1}
onChange={checked => this.setState({ checkbox1: checked })}/>
onChange={checked => this.setState({ checkbox1: checked })}
/>
</div>

@@ -88,2 +89,4 @@ );

}
export default CheckboxComponent;
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc