@trendmicro/react-checkbox - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-checkbox v1.0.2 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
+/*! react-checkbox v2.0.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
 module.exports =
@@ -86,16 +86,20 @@ /******/ (function(modules) { // webpackBootstrap
 
-var _class, _temp;
+var _class, _temp2;
 
-var _react = __webpack_require__(5);
+var _react = __webpack_require__(6);
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = __webpack_require__(4);
+var _propTypes = __webpack_require__(5);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _classnames = __webpack_require__(3);
+var _classnames = __webpack_require__(4);
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _chainedFunction = __webpack_require__(3);
+
+var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
+
 var _index = __webpack_require__(2);
@@ -117,9 +121,25 @@
 
-var Checkbox = (_temp = _class = function (_PureComponent) {
+var Checkbox = (_temp2 = _class = function (_PureComponent) {
     _inherits(Checkbox, _PureComponent);
 
     function Checkbox() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
         _classCallCheck(this, Checkbox);
 
-        return _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        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;
+                }
+            }
+        }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -130,32 +150,45 @@
         value: function render() {
+            var _this2 = this;
+
             var _props = this.props,
                 className = _props.className,
-                children = _props.children,
+                defaultChecked = _props.defaultChecked,
                 disabled = _props.disabled,
-                indeterminate = _props.indeterminate,
-                text = _props.text,
-                props = _objectWithoutProperties(_props, ['className', 'children', 'disabled', 'indeterminate', 'text']);
+                defaultIndeterminate = _props.defaultIndeterminate,
+                props = _objectWithoutProperties(_props, ['className', 'defaultChecked', 'disabled', 'defaultIndeterminate']);
 
+            var onChange = props.onChange || function () {};
+            delete props.onChange;
+            delete props.indeterminate;
+
             return _react2.default.createElement(
-                'label',
+                'div',
                 {
-                    className: (0, _classnames2.default)(className, _index2.default.controlCheckbox, _defineProperty({}, _index2.default.disabled, disabled))
+                    className: (0, _classnames2.default)(className, _index2.default['control-checkbox'], _defineProperty({}, _index2.default.disabled, disabled))
                 },
                 _react2.default.createElement('input', _extends({}, props, {
                     type: 'checkbox',
+                    defaultChecked: defaultChecked,
                     disabled: disabled,
-                    className: _index2.default.inputCheckbox,
-                    ref: function ref(el) {
-                        return el && (el.indeterminate = indeterminate);
-                    }
+                    className: _index2.default['input-checkbox'],
+                    ref: function ref(node) {
+                        _this2.fields.checkbox = node;
+                        var indeterminate = typeof _this2.props.indeterminate !== 'undefined' ? _this2.props.indeterminate : defaultIndeterminate;
+                        node && (_this2.fields.checkbox.indeterminate = indeterminate);
+                    },
+                    onChange: (0, _chainedFunction2.default)(this.actions.onChange, onChange)
                 })),
-                _react2.default.createElement('i', { className: _index2.default.controlIndicator }),
-                _react2.default.createElement(
-                    'span',
-                    { className: _index2.default.controlText },
-                    text
-                ),
-                children
+                _react2.default.createElement('i', { className: _index2.default['control-indicator'] })
             );
         }
+    }, {
+        key: 'checked',
+        get: function get() {
+            return this.fields.checkbox.checked;
+        }
+    }, {
+        key: 'indeterminate',
+        get: function get() {
+            return this.fields.checkbox.indeterminate;
+        }
     }]);
@@ -165,7 +198,11 @@
 }(_react.PureComponent), _class.propTypes = {
-    checked: _propTypes2.default.bool,
+    defaultChecked: _propTypes2.default.bool,
     disabled: _propTypes2.default.bool,
     indeterminate: _propTypes2.default.bool,
-    text: _propTypes2.default.string
-}, _temp);
+    defaultIndeterminate: _propTypes2.default.bool
+}, _class.defaultProps = {
+    defaultChecked: false,
+    disabled: false,
+    defaultIndeterminate: false
+}, _temp2);
 exports.default = Checkbox;
@@ -193,3 +230,3 @@
 // 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 = {"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","disabled":"checkbox---disabled---eCY9b"};
 
@@ -200,3 +237,3 @@ /***/ }),
 
-module.exports = require("classnames");
+module.exports = require("chained-function");
 
@@ -207,3 +244,3 @@ /***/ }),
 
-module.exports = require("prop-types");
+module.exports = require("classnames");
 
@@ -214,2 +251,8 @@ /***/ }),
 
+module.exports = require("prop-types");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
 module.exports = require("react");
@@ -216,0 +259,0 @@

package.json

 {
   "name": "@trendmicro/react-checkbox",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Trend Micro Components: React Checkbox",
@@ -66,2 +66,3 @@ "main": "lib/index.js",
     "css-loader": "~0.28.0",
+    "chained-function": "~0.5.0",
     "eslint": "~3.19.0",
@@ -68,0 +69,0 @@ "eslint-config-trendmicro": "~0.5.1",

README.md

@@ -29,3 +29,30 @@ # 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)
 ```js
-<Checkbox className="checkbox-inline" text="Disabled label" disabled indeterminate />
+// Basic
+<Checkbox />
+
+// Checked
+<Checkbox defaultChecked />
+
+// Partial checked
+<Checkbox defaultIndeterminate />
+
+// Partial checked. Fixed indeterminate status (Do not change by click)
+<Checkbox indeterminate />
+
+// Disabled
+<Checkbox disabled />
+
+// With Label
+<label className="checkbox">
+    <Checkbox />
+    Normal
+</label>
+
+// Get checkbox checked status
+<Checkbox 
+    ref={node => {
+        this.checkbox = node;
+    }}
+/>
+// Get checked status by this.checkbox.checked
 ```
@@ -37,5 +64,60 @@
 ### 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>false</td>
+            <td>Specify default 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>false</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>
 
-Name | Type | Default | Description
-:--- | :--- | :------ | :----------
+<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>
 
@@ -42,0 +124,0 @@ ## License

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

32369

increased by16.94%

Lines of code

260

increased by11.59%

Number of lines in readme file

125

increased by190.7%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

38

increased by2.7%

No dependency changes