@trendmicro/react-checkbox - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-checkbox v2.1.1 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
+/*! react-checkbox v3.0.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
 module.exports =
@@ -38,5 +38,2 @@ /******/ (function(modules) { // webpackBootstrap
 /******/
-/******/ 	// identity function for calling harmony imports with the correct context
-/******/ 	__webpack_require__.i = function(value) { return value; };
-/******/
 /******/ 	// define getter function for harmony exports
@@ -69,3 +66,3 @@ /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
@@ -80,2 +77,17 @@ /************************************************************************/
 
+var _Checkbox = __webpack_require__(1);
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _Checkbox2.default;
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
@@ -91,19 +103,19 @@ value: true
 
-var _react = __webpack_require__(6);
+var _classnames = __webpack_require__(2);
 
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _react = __webpack_require__(3);
+
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = __webpack_require__(5);
+var _propTypes = __webpack_require__(4);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _classnames = __webpack_require__(4);
+var _chainedFunction = __webpack_require__(5);
 
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _chainedFunction = __webpack_require__(3);
-
 var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
 
-var _index = __webpack_require__(2);
+var _index = __webpack_require__(6);
 
@@ -124,2 +136,4 @@ var _index2 = _interopRequireDefault(_index);
 
+var noop = function noop() {};
+
 var Checkbox = (_temp2 = _class = function (_PureComponent) {
@@ -139,9 +153,5 @@ _inherits(Checkbox, _PureComponent);
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.fields = {
-            checkbox: null
-        }, _this.actions = {
-            onChange: function onChange() {
-                if (typeof _this.props.indeterminate !== 'undefined') {
-                    _this.fields.checkbox.indeterminate = _this.props.indeterminate;
-                }
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.checkbox = null, _this.onChange = function (event) {
+            if (typeof _this.props.indeterminate !== 'undefined') {
+                _this.checkbox.indeterminate = !!_this.props.indeterminate;
             }
@@ -157,10 +167,14 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
             var _props = this.props,
+                label = _props.label,
+                inputClassName = _props.inputClassName,
+                inputStyle = _props.inputStyle,
+                disabled = _props.disabled,
+                defaultIndeterminate = _props.defaultIndeterminate,
+                _props$onChange = _props.onChange,
+                onChange = _props$onChange === undefined ? noop : _props$onChange,
                 className = _props.className,
+                style = _props.style,
                 children = _props.children,
-                disabled = _props.disabled,
-                defaultIndeterminate = _props.defaultIndeterminate,
-                props = _objectWithoutProperties(_props, ['className', 'children', 'disabled', 'defaultIndeterminate']);
+                props = _objectWithoutProperties(_props, ['label', 'inputClassName', 'inputStyle', 'disabled', 'defaultIndeterminate', 'onChange', 'className', 'style', 'children']);
 
-            var onChange = props.onChange || function () {};
-            delete props.onChange;
             delete props.indeterminate;
@@ -171,21 +185,24 @@
                 {
-                    className: (0, _classnames2.default)(className, _index2.default['control-checkbox'], _defineProperty({}, _index2.default.disabled, disabled))
+                    className: (0, _classnames2.default)(className, _index2.default.controlCheckbox, _defineProperty({}, _index2.default.disabled, disabled)),
+                    style: style
                 },
                 _react2.default.createElement('input', _extends({}, props, {
-                    type: 'checkbox',
-                    disabled: disabled,
-                    className: _index2.default['input-checkbox'],
                     ref: function ref(node) {
-                        _this2.fields.checkbox = node;
+                        _this2.checkbox = node;
                         var indeterminate = typeof _this2.props.indeterminate !== 'undefined' ? _this2.props.indeterminate : defaultIndeterminate;
-                        node && (_this2.fields.checkbox.indeterminate = indeterminate);
+                        node && (_this2.checkbox.indeterminate = indeterminate);
                     },
-                    onChange: (0, _chainedFunction2.default)(this.actions.onChange, onChange)
+                    type: 'checkbox',
+                    disabled: disabled,
+                    className: (0, _classnames2.default)(inputClassName, _index2.default.inputCheckbox),
+                    style: inputStyle,
+                    onChange: (0, _chainedFunction2.default)(this.onChange, onChange)
                 })),
-                _react2.default.createElement('i', { className: _index2.default['control-indicator'] }),
-                _react2.default.createElement(
+                _react2.default.createElement('i', { className: _index2.default.controlIndicator }),
+                label ? _react2.default.createElement(
                     'span',
-                    { className: _index2.default.controlText },
-                    children
-                )
+                    { className: _index2.default.textLabel },
+                    label
+                ) : null,
+                children
             );
@@ -196,3 +213,6 @@ }
         get: function get() {
-            return this.fields.checkbox.checked;
+            if (!this.checkbox) {
+                return null;
+            }
+            return this.checkbox.checked;
         }
@@ -202,3 +222,6 @@ }, {
         get: function get() {
-            return this.fields.checkbox.indeterminate;
+            if (!this.checkbox) {
+                return null;
+            }
+            return this.checkbox.indeterminate;
         }
@@ -209,2 +232,5 @@ }]);
 }(_react.PureComponent), _class.propTypes = {
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
+    inputClassName: _propTypes2.default.object,
+    inputStyle: _propTypes2.default.object,
     disabled: _propTypes2.default.bool,
@@ -222,22 +248,6 @@ checked: _propTypes2.default.bool,
 /***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _Checkbox = __webpack_require__(0);
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-module.exports = _Checkbox2.default;
-
-/***/ }),
 /* 2 */
 /***/ (function(module, exports) {
 
-// removed by extract-text-webpack-plugin
-module.exports = {"control-checkbox":"checkbox---control-checkbox---2Mo4k","controlCheckbox":"checkbox---control-checkbox---2Mo4k","input-checkbox":"checkbox---input-checkbox---3hbfZ","inputCheckbox":"checkbox---input-checkbox---3hbfZ","control-indicator":"checkbox---control-indicator---dcwXW","controlIndicator":"checkbox---control-indicator---dcwXW","control-text":"checkbox---control-text---3IJSz","controlText":"checkbox---control-text---3IJSz","disabled":"checkbox---disabled---eCY9b"};
+module.exports = require("classnames");
 
@@ -248,3 +258,3 @@ /***/ }),
 
-module.exports = require("chained-function");
+module.exports = require("react");
 
@@ -255,3 +265,3 @@ /***/ }),
 
-module.exports = require("classnames");
+module.exports = require("prop-types");
 
@@ -262,3 +272,3 @@ /***/ }),
 
-module.exports = require("prop-types");
+module.exports = require("chained-function");
 
@@ -269,3 +279,4 @@ /***/ }),
 
-module.exports = require("react");
+// removed by extract-text-webpack-plugin
+module.exports = {"control-checkbox":"checkbox---control-checkbox---2Mo4k","controlCheckbox":"checkbox---control-checkbox---2Mo4k","input-checkbox":"checkbox---input-checkbox---3hbfZ","inputCheckbox":"checkbox---input-checkbox---3hbfZ","control-indicator":"checkbox---control-indicator---dcwXW","controlIndicator":"checkbox---control-indicator---dcwXW","text-label":"checkbox---text-label---2D19D","textLabel":"checkbox---text-label---2D19D","disabled":"checkbox---disabled---eCY9b","control-text":"checkbox---control-text---3IJSz","controlText":"checkbox---control-text---3IJSz"};
 
@@ -272,0 +283,0 @@ /***/ })

package.json

 {
   "name": "@trendmicro/react-checkbox",
-  "version": "2.1.1",
-  "description": "Trend Micro Components: React Checkbox",
+  "version": "3.0.0",
+  "description": "React Checkbox component",
   "main": "lib/index.js",
@@ -11,4 +11,3 @@ "files": [
   "scripts": {
-    "prepublish": "npm run lint && npm test && npm run clean && npm run bowersync && npm run build && npm run build-examples",
-    "bowersync": "./scripts/bowersync",
+    "prepublish": "npm run lint && npm test && npm run clean && npm run build && npm run build-examples",
     "build": "webpack && npm run cleancss",
@@ -19,4 +18,3 @@ "build-examples": "cd examples; webpack",
     "demo": "http-server -p 8000 docs/",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint --fix ./src",
+    "lint": "eslint ./src ./test",
     "test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
@@ -53,44 +51,49 @@ "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
     "classnames": "^2.2.5",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@trendmicro/react-buttons": "~1.0.4",
-    "babel-cli": "~6.24.1",
-    "babel-core": "~6.24.1",
-    "babel-eslint": "~7.2.2",
-    "babel-loader": "~6.4.1",
+    "@trendmicro/react-buttons": "~1.2.1",
+    "babel-cli": "~6.26.0",
+    "babel-core": "~6.26.0",
+    "babel-eslint": "~8.0.3",
+    "babel-loader": "~7.1.2",
     "babel-plugin-transform-decorators-legacy": "~1.3.4",
-    "babel-preset-es2015": "~6.24.1",
+    "babel-preset-env": "~1.6.1",
     "babel-preset-react": "~6.24.1",
     "babel-preset-stage-0": "~6.24.1",
-    "clean-css": "~4.0.12",
-    "clean-css-cli": "~4.0.12",
-    "coveralls": "~2.13.0",
-    "css-loader": "~0.28.0",
-    "eslint": "~3.19.0",
-    "eslint-config-trendmicro": "~0.5.1",
-    "eslint-loader": "~1.7.1",
-    "eslint-plugin-import": "~2.2.0",
-    "eslint-plugin-jsx-a11y": "~2.2.3",
-    "eslint-plugin-react": "~6.10.3",
-    "extract-text-webpack-plugin": "~2.1.0",
-    "file-loader": "~0.11.1",
+    "clean-css": "~4.1.9",
+    "clean-css-cli": "~4.1.10",
+    "coveralls": "~3.0.0",
+    "css-loader": "~0.28.7",
+    "enzyme": "~3.2.0",
+    "enzyme-adapter-react-16": "~1.1.1",
+    "eslint": "~4.13.1",
+    "eslint-config-trendmicro": "~1.2.0",
+    "eslint-loader": "~1.9.0",
+    "eslint-plugin-import": "~2.8.0",
+    "eslint-plugin-jsx-a11y": "~6.0.3",
+    "eslint-plugin-react": "~7.5.1",
+    "extract-text-webpack-plugin": "~3.0.2",
+    "file-loader": "~1.1.6",
     "find-imports": "~0.5.2",
-    "html-webpack-plugin": "~2.28.0",
-    "http-server": "~0.9.0",
+    "html-webpack-plugin": "~2.30.1",
+    "http-server": "~0.10.0",
+    "jsdom": "~11.5.1",
     "nib": "~1.1.2",
     "react": "^0.14.0 || >=15.0.0",
     "react-dom": "^0.14.0 || >=15.0.0",
-    "rimraf": "^2.6.2",
-    "style-loader": "~0.16.1",
+    "rimraf": "~2.6.2",
+    "sinon": "~4.1.3",
+    "style-loader": "~0.19.1",
+    "styled-components": "~2.3.3",
     "stylint": "~1.5.9",
     "stylint-loader": "~1.0.0",
     "stylus-loader": "~3.0.1",
-    "tap": "~10.3.2",
-    "trendmicro-ui": "~0.4.2",
-    "url-loader": "~0.5.8",
-    "webpack": "~2.4.1",
-    "webpack-dev-server": "~2.4.2",
-    "which": "~1.2.14"
+    "tap": "~11.0.1",
+    "trendmicro-ui": "~0.5.0",
+    "url-loader": "~0.6.2",
+    "webpack": "~3.10.0",
+    "webpack-dev-server": "~2.9.7",
+    "which": "~1.3.0"
   }
 }

README.md

@@ -28,31 +28,72 @@ # react-checkbox [![build status](https://travis-ci.org/trendmicro-frontend/react-checkbox.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-checkbox) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-checkbox/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-checkbox?branch=master)
 
+```jsx
+<Checkbox label="Checkbox label" />
+```
+
+The label prop is optional, you can use children to pass through the component.
+
+```jsx
+<Checkbox label="Checkbox label">
+    <p style={{ marginLeft: 24 }}>
+        Lorem ipsum dolor sit amet...
+    </p>
+</Checkbox>
+
+<Checkbox>
+    <span style={{ verticalAlign: 'middle', marginLeft: 8 }}>
+        Lorem ipsum dolor sit amet...
+    </span>
+</Checkbox>
+```
+
+### Uncontrolled Checkbox
+
 ```js
-// Basic
-<Checkbox />
+// Default checked
+<Checkbox defaultChecked />
 
+// Default partially checked
+<Checkbox defaultChecked defaultIndeterminate />
+```
+
+### Controlled Checkbox
+
+```js
 // Checked
-<Checkbox defaultChecked />
-
-// Force checked
 <Checkbox checked />
 
-// Partial checked
-<Checkbox defaultIndeterminate />
+// Partially checked
+<Checkbox checked indeterminate />
+```
 
-// Partial checked. Force indeterminate status (Do not change by click)
-<Checkbox indeterminate />
+## API
 
-// Disabled
-<Checkbox disabled />
+### Properties
 
-// With Label
-<Checkbox>
-    Normal
-</Checkbox>
+Name | Type | Default | Description
+:--- | :--- | :------ | :----------
+children | any | | Children to pass through the component.
+className | Object | | Customized class name for the component.
+style | Object | | Customized style for the component.
+label | Node or String | | Text label to attach next to the checkbox element.
+inputClassName | Object | | Customized class name for the checkbox element.
+inputStyle | Object | | Customized style for the checkbox element.
+disabled | Boolean | false | If true, the checkbox shown as disabled and cannot be modified.
+checked | Boolean | | The checked state of the checkbox element.
+defaultChecked | Boolean | | The default checked state of the checkbox element.
+indeterminate | Boolean | | The indeterminate state of the checkbox element.
+defaultIndeterminate | Boolean | false | The default indeterminate state of the checkbox element.
 
-// Get checked status of checkbox by this.checkbox.checked
-// Get indeterminate status of checkbox by this.checkbox.indeterminate
+### Class Properties
+
+Use the ref property to get a reference to the component:
+
+```jsx
 <Checkbox
     ref={node => {
-        this.checkbox = node;
+        if (node) {
+            this.checkbox = node;
+            console.log(this.checkbox.checked);
+            console.log(this.checkbox.indeterminate);
+        }
     }}
@@ -62,73 +103,9 @@ />
 
+Name | Type | Description
+:--- | :--- | :----------
+checked | Boolean | Get the checked state.
+indeterminate | Boolean | Get the indeterminate state.
 
-## API
-
-### Properties
-<table>
-    <thead>
-        <tr>
-            <th align="left">Name</th>
-            <th align="left">Type</th>
-            <th align="left">Default</th>
-            <th align="left">Description</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>defaultChecked</td>
-            <td>Boolean</td>
-            <td></td>
-            <td>Specify default checked status for checkbox</td>
-        </tr>
-        <tr>
-            <td>checked</td>
-            <td>Boolean</td>
-            <td></td>
-            <td>Force checked status for checkbox</td>
-        </tr>
-        <tr>
-            <td>defaultIndeterminate</td>
-            <td>Boolean</td>
-            <td>false</td>
-            <td>Specify default indeterminate status for checkbox</td>
-        </tr>
-        <tr>
-            <td>indeterminate</td>
-            <td>Boolean</td>
-            <td></td>
-            <td>Force indeterminate status for checkbox</td>
-        </tr>
-        <tr>
-            <td>disabled</td>
-            <td>Boolean</td>
-            <td>false</td>
-            <td>Specify disabled status for checkbox</td>
-        </tr>
-  </tbody>
-</table>
-
-<table>
-    <thead>
-        <tr>
-            <th align="left">Name</th>
-            <th align="left">Type</th>
-            <th align="left">Description</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>checked</td>
-            <td>Boolean</td>
-            <td>Get checked status</td>
-        </tr>
-        <tr>
-            <td>indeterminate</td>
-            <td>Boolean</td>
-            <td>Get indeterminate status</td>
-        </tr>
-  </tbody>
-</table>
-
 ## License
 
 MIT

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35728

increased by4.35%

Lines of code

298

increased by4.93%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

43

increased by13.16%

Number of lines in readme file

110

decreased by-17.29%

Dependency changes

• Updatedprop-types@^15.6.0