zt-react-components - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

lib/Checkbox.js

@@ -11,3 +11,4 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-right: 7px;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n\n    label:hover > &:not([disabled]) {\n        border-color: #000;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-right: 7px;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n\n    label:hover > &:not([disabled]) {\n        border-color: #000;\n    }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n\n    margin-right: 7px;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n\n    svg {\n        opacity: ", "\n    }\n\n    &:hover:not([disabled]) {\n        border-color: #000;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n\n    margin-right: 7px;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n\n    svg {\n        opacity: ", "\n    }\n\n    &:hover:not([disabled]) {\n        border-color: #000;\n    }\n"]),
+    _templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n"]);
 
@@ -30,2 +31,4 @@ var _react = require("react");
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -76,4 +79,9 @@
     return size === "large" ? _designGuideline.fontSizes.slightlyLarger : _designGuideline.fontSizes.default;
+}, function (_ref6) {
+    var checked = _ref6.checked;
+    return checked ? 1 : 0;
 });
 
+var Input = _styledComponents2.default.input(_templateObject2);
+
 /**
@@ -84,11 +92,2 @@ * Very sexy and simple checkbox (actually span) that can be:
  * - and of course checked.
- *
- * NOTE: Render it inside of label to enable unbelievable hover styles.
- *
- * NOTE: Give it a name and you will get a hidden input for free!
- * Hidden input is for forms where it is needed to post form data.
- *
- * NOTE: Click on hidden input stops propagation because of IE:
- * by default clicking on a label will make the event to propagate to a child input.
- * Then the input will bubble it back to the label, causing another click event.
  */
@@ -99,34 +98,60 @@
 
-    function Checkbox() {
+    function Checkbox(props) {
         _classCallCheck(this, Checkbox);
 
-        return _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
+        var _this = _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call(this, props));
+
+        _this.state = {
+            isChecked: !!props.checked || props.defaultChecked
+        };
+        return _this;
     }
 
     _createClass(Checkbox, [{
+        key: "componentWillReceiveProps",
+        value: function componentWillReceiveProps(nextProps) {
+            if (nextProps.checked !== this.props.checked) {
+                this.setState({ isChecked: nextProps.checked });
+            }
+        }
+    }, {
+        key: "onChange",
+        value: function onChange(evt) {
+            var onChange = this.props.onChange;
+
+
+            if (this.props.checked === undefined) {
+                this.setState({ isChecked: evt.target.checked });
+            }
+
+            onChange && onChange(evt);
+        }
+    }, {
         key: "render",
         value: function render() {
+            var _props = this.props,
+                size = _props.size,
+                disabled = _props.disabled,
+                props = _objectWithoutProperties(_props, ["size", "disabled"]);
+
+            var isChecked = this.state.isChecked;
+
+
             return _react2.default.createElement(
                 CheckboxElement,
                 {
-                    checked: this.props.checked,
-                    size: this.props.size,
-                    disabled: this.props.disabled
+                    checked: isChecked,
+                    size: size,
+                    disabled: disabled
                 },
-                this.props.checked && _react2.default.createElement(Checkmark, null),
-                this.props.name && this.renderHiddenInput()
+                _react2.default.createElement(Checkmark, null),
+                _react2.default.createElement(Input, _extends({}, props, {
+                    type: "checkbox",
+                    value: isChecked,
+                    checked: isChecked,
+                    onChange: this.onChange.bind(this),
+                    disabled: disabled
+                }))
             );
         }
-    }, {
-        key: "renderHiddenInput",
-        value: function renderHiddenInput() {
-            return _react2.default.createElement("input", {
-                type: "hidden",
-                name: this.props.name,
-                value: this.props.checked,
-                onClick: function onClick(event) {
-                    return event.stopPropagation();
-                }
-            });
-        }
     }]);
@@ -138,8 +163,8 @@
 Checkbox.propTypes = {
-    name: _propTypes2.default.string,
-    // small or large
-    size: _propTypes2.default.string,
+    size: _propTypes2.default.oneOf(["small", "large"]),
     checked: _propTypes2.default.bool,
-    disabled: _propTypes2.default.bool
+    defaultChecked: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
+    onChange: _propTypes2.default.func
 };
 exports.default = Checkbox;

package.json

@@ -1,1 +0,1 @@
-{"name":"zt-react-components","version":"1.0.3","description":"Commonly used React components for ZeroTurnaround products","license":"Apache-2.0","main":"lib/index.js","files":["dist","lib","src"],"scripts":{"build":"yarn build:commonjs && yarn build:umd","build:commonjs":"babel src -d lib","build:commonjs:watch":"yarn build -- --watch","build:umd":"webpack src/index.js dist/zt-react-components.js","build:umd:watch":"yarn build:umd -- --watch","test":"jest","test:watch":"jest --watch","test:update":"jest --u","lint":"eslint .","prepublish":"yarn build"},"repository":{"type":"git","url":"https://github.com/zeroturnaround/zt-react-components.git"},"peerDependencies":{"react":">=15.0.0"},"dependencies":{"prop-types":"^15.5.10","styled-components":"^2.0.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-eslint":"^7.2.3","babel-loader":"^7.0.0","babel-plugin-inline-react-svg":"^0.4.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","eslint":"^3.19.0","eslint-config-zt":"^1.4.0","eslint-plugin-react":"^7.0.1","jest":"^20.0.4","jest-styled-components":"next","react":"^15.6.1","react-test-renderer":"^15.5.4","webpack":"^2.6.1"},"jest":{"testEnvironment":"node"}}
+{"name":"zt-react-components","version":"1.1.0","description":"Commonly used React components for ZeroTurnaround products","license":"Apache-2.0","main":"lib/index.js","files":["dist","lib","src"],"scripts":{"build":"yarn build:commonjs && yarn build:umd","build:commonjs":"babel src -d lib","build:commonjs:watch":"yarn build -- --watch","build:umd":"webpack src/index.js dist/zt-react-components.js","build:umd:watch":"yarn build:umd -- --watch","test":"jest","test:watch":"jest --watch","test:update":"jest --u","lint":"eslint .","prepublish":"yarn build"},"repository":{"type":"git","url":"https://github.com/zeroturnaround/zt-react-components.git"},"peerDependencies":{"react":">=15.0.0"},"dependencies":{"prop-types":"^15.5.10","styled-components":"^2.0.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-eslint":"^7.2.3","babel-loader":"^7.0.0","babel-plugin-inline-react-svg":"^0.4.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","eslint":"^3.19.0","eslint-config-zt":"^1.4.0","eslint-plugin-react":"^7.0.1","jest":"^20.0.4","jest-styled-components":"next","react":"^15.6.1","react-test-renderer":"^15.5.4","webpack":"^2.6.1"},"jest":{"testEnvironment":"node"}}

src/Checkbox.js

@@ -11,2 +11,3 @@ import React, {PureComponent} from "react";
     justify-content: center;
+    position: relative;
 
@@ -24,3 +25,7 @@ margin-right: 7px;
 
-    label:hover > &:not([disabled]) {
+    svg {
+        opacity: ${({checked}) => checked ? 1 : 0}
+    }
+
+    &:hover:not([disabled]) {
         border-color: #000;
@@ -30,2 +35,11 @@ }
 
+const Input = styled.input`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+`;
+
 /**
@@ -36,44 +50,59 @@ * Very sexy and simple checkbox (actually span) that can be:
  * - and of course checked.
- *
- * NOTE: Render it inside of label to enable unbelievable hover styles.
- *
- * NOTE: Give it a name and you will get a hidden input for free!
- * Hidden input is for forms where it is needed to post form data.
- *
- * NOTE: Click on hidden input stops propagation because of IE:
- * by default clicking on a label will make the event to propagate to a child input.
- * Then the input will bubble it back to the label, causing another click event.
  */
 export default class Checkbox extends PureComponent {
     static propTypes = {
-        name: PropTypes.string,
-        // small or large
-        size: PropTypes.string,
+        size: PropTypes.oneOf(["small", "large"]),
         checked: PropTypes.bool,
-        disabled: PropTypes.bool
+        defaultChecked: PropTypes.bool,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isChecked: !!props.checked || props.defaultChecked
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.checked !== this.props.checked) {
+            this.setState({isChecked: nextProps.checked});
+        }
+    }
+
+    onChange(evt) {
+        const {onChange} = this.props;
+
+        if (this.props.checked === undefined) {
+            this.setState({isChecked: evt.target.checked});
+        }
+
+        onChange && onChange(evt);
+    }
+
     render() {
+        const { size, disabled, ...props } = this.props;
+        const { isChecked } = this.state;
+
         return (
             <CheckboxElement
-                checked={this.props.checked}
-                size={this.props.size}
-                disabled={this.props.disabled}
+                checked={isChecked}
+                size={size}
+                disabled={disabled}
             >
-                {this.props.checked && <Checkmark />}
-                {this.props.name && this.renderHiddenInput()}
+                <Checkmark />
+
+                <Input
+                    {...props}
+                    type="checkbox"
+                    value={isChecked}
+                    checked={isChecked}
+                    onChange={this.onChange.bind(this)}
+                    disabled={disabled}
+                />
             </CheckboxElement>
         );
     }
-
-    renderHiddenInput() {
-        return (
-            <input
-                type="hidden"
-                name={this.props.name}
-                value={this.props.checked}
-                onClick={(event) => event.stopPropagation()}
-            />
-        );
-    }
 }

No alert changes

Improved metrics

Total package byte prevSize

315074

increased by0.82%

Lines of code

8322

increased by0.63%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes