From 8acf054fee36e30e9c1a22f61297c48b7038747e Mon Sep 17 00:00:00 2001 From: Gustavo Moneiro Date: Wed, 14 Aug 2019 11:57:30 -0300 Subject: [PATCH 1/3] Add 'componentDidUpdate' lifecicle event. --- package-lock.json | 55 ++++++++++++++++++++-------- src/bootstrap-switch-button-react.js | 7 ++++ 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index c5a585f..683b7d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bootstrap-switch-button-react", - "version": "1.0.1", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1702,13 +1702,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -1750,6 +1752,7 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, + "optional": true, "requires": { "remove-trailing-separator": "^1.0.1" } @@ -3426,7 +3429,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3447,12 +3451,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3467,17 +3473,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3594,7 +3603,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3606,6 +3616,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3620,6 +3631,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3627,12 +3639,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3651,6 +3665,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3731,7 +3746,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3743,6 +3759,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3828,7 +3845,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3864,6 +3882,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3883,6 +3902,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3926,12 +3946,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -4001,13 +4023,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -5189,7 +5213,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", diff --git a/src/bootstrap-switch-button-react.js b/src/bootstrap-switch-button-react.js index b23c8aa..ef26f92 100644 --- a/src/bootstrap-switch-button-react.js +++ b/src/bootstrap-switch-button-react.js @@ -50,6 +50,13 @@ export default class BootstrapSwitchButton extends React.Component { }; } + componentDidUpdate(_, prevState) { + const { checked } = this.props + if(typeof checked === "boolean" && checked !== prevState.checked) { + this.setState({ checked }) + } + } + toggle = event => { this.state.checked ? this.off() : this.on(); }; From 5c4e12580d0614c385849898e5ddd0fa747a783b Mon Sep 17 00:00:00 2001 From: Gustavo Moneiro Date: Wed, 14 Aug 2019 11:58:40 -0300 Subject: [PATCH 2/3] Update build. --- lib/bootstrap-switch-button-react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/bootstrap-switch-button-react.js b/lib/bootstrap-switch-button-react.js index 41a50e8..c2408f2 100644 --- a/lib/bootstrap-switch-button-react.js +++ b/lib/bootstrap-switch-button-react.js @@ -1 +1 @@ -module.exports=function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)e.d(r,o,function(n){return t[n]}.bind(null,o));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=1)}([function(t,n){t.exports=require("react")},function(t,n,e){"use strict";e.r(n),e.d(n,"default",function(){return u});var r=e(0),o=e.n(r);e(2);function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function c(t,n){return(c=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function l(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var u=function(t){function n(t){var e,r,c;return function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,c=s(n).call(this,t),e=!c||"object"!==i(c)&&"function"!=typeof c?a(r):c,l(a(e),"toggle",function(t){e.state.checked?e.off():e.on()}),l(a(e),"off",function(){e.state.disabled||(e.setState({checked:!1}),e.props.onChange&&e.props.onChange(!1))}),l(a(e),"on",function(){e.state.disabled||(e.setState({checked:!0}),e.props.onChange&&e.props.onChange(!0))}),l(a(e),"enable",function(){e.setState({disabled:!1})}),l(a(e),"disable",function(){e.setState({disabled:!0})}),l(a(e),"render",function(){var t={};e.state.width&&(t.width=e.state.width+"px"),e.state.height&&(t.height=e.state.height+"px");var n={};return e.state.height&&(n.lineHeight="calc("+e.state.height+"px * 0.8)"),o.a.createElement("div",{className:"switch btn "+(e.state.checked?"on btn-"+e.state.onstyle:"off btn-"+e.state.offstyle)+(e.state.size?" btn-"+e.state.size:"")+(e.state.style?" "+e.state.style:""),style:t,onClick:e.toggle},o.a.createElement("div",{className:"switch-group"},o.a.createElement("label",{className:"switch-on btn btn-"+e.state.onstyle+(e.state.size?" btn-"+e.state.size:""),style:n},e.state.onlabel),o.a.createElement("label",{className:"switch-off btn btn-"+e.state.offstyle+(e.state.size?" btn-"+e.state.size:""),style:n},e.state.offlabel),o.a.createElement("span",{className:"switch-handle btn btn-light"+(e.state.size?"btn-"+e.state.size:"")})))}),e.state={checked:"boolean"==typeof e.props.checked&&e.props.checked,disabled:"boolean"==typeof e.props.disabled&&e.props.disabled,onlabel:e.props.onlabel||"On",offlabel:e.props.offlabel||"Off",onstyle:e.props.onstyle||"primary",offstyle:e.props.offstyle||"light",size:e.props.size||"",style:e.props.style||"",width:e.props.width||null,height:e.props.height||null},e}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&c(t,n)}(n,o.a.Component),n}()},function(t,n,e){var r=e(3);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(r,o);r.locals&&(t.exports=r.locals)},function(t,n,e){(t.exports=e(4)(!1)).push([t.i,'/*\\\n|*| :: Bootstrap Switch Button ::\n|*|\n|*| Bootstrap Switch Button (React)\n|*| https://github.com/gitbrent/bootstrap-switch-button-react\n|*|\n|*| This library is released under the MIT Public License (MIT)\n|*|\n|*| Bootstrap Switch Button (C) 2019-present Brent Ely (https://github.com/gitbrent)\n|*|\n|*| Permission is hereby granted, free of charge, to any person obtaining a copy\n|*| of this software and associated documentation files (the "Software"), to deal\n|*| in the Software without restriction, including without limitation the rights\n|*| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n|*| copies of the Software, and to permit persons to whom the Software is\n|*| furnished to do so, subject to the following conditions:\n|*|\n|*| The above copyright notice and this permission notice shall be included in all\n|*| copies or substantial portions of the Software.\n|*|\n|*| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n|*| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n|*| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n|*| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n|*| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n|*| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n|*| SOFTWARE.\n\\*/\n\n.btn-group-xs > .btn, .btn-xs {\n\tpadding: .35rem .4rem .25rem .4rem;\n\tfont-size: .875rem;\n\tline-height: .5;\n\tborder-radius: .2rem;\n}\n\n.checkbox label .switch, .checkbox-inline .switch {\n\tmargin-left: -1.25rem;\n\tmargin-right: .35rem;\n}\n\n.switch {\n\tposition: relative;\n\toverflow: hidden;\n}\n.switch.btn.btn-light, .switch.btn.btn-outline-light {\n\tborder-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */\n}\n.switch input[type="checkbox"] {\n\tdisplay: none;\n}\n.switch-group {\n\tposition: absolute;\n\twidth: 200%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttransition: left 0.35s;\n\t-webkit-transition: left 0.35s;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n}\n.switch.off .switch-group {\n\tleft: -100%;\n}\n.switch-on {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 50%;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n}\n.switch-off {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 50%;\n\tright: 0;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbox-shadow: none;\n}\n.switch-handle {\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding-top: 0px;\n\tpadding-bottom: 0px;\n\theight: 100%;\n\twidth: 0px;\n\tborder-width: 0 1px;\n\tbackground-color: #fff;\n}\n\n.switch.btn-outline-primary .switch-handle {\n\tbackground-color: var(--primary);\n\tborder-color: var(--primary);\n}\n.switch.btn-outline-secondary .switch-handle {\n\tbackground-color: var(--secondary);\n\tborder-color: var(--secondary);\n}\n.switch.btn-outline-success .switch-handle {\n\tbackground-color: var(--success);\n\tborder-color: var(--success);\n}\n.switch.btn-outline-danger .switch-handle {\n\tbackground-color: var(--danger);\n\tborder-color: var(--danger);\n}\n.switch.btn-outline-warning .switch-handle {\n\tbackground-color: var(--warning);\n\tborder-color: var(--warning);\n}\n.switch.btn-outline-info .switch-handle {\n\tbackground-color: var(--info);\n\tborder-color: var(--info);\n}\n.switch.btn-outline-light .switch-handle {\n\tbackground-color: var(--light);\n\tborder-color: var(--light);\n}\n.switch.btn-outline-dark .switch-handle {\n\tbackground-color: var(--dark);\n\tborder-color: var(--dark);\n}\n.switch[class*="btn-outline"]:hover .switch-handle {\n\tbackground-color: var(--light);\n\topacity: 0.5;\n}\n\n/* NOTE: Must come first, so classes below override as needed */\n/* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */\n\n.switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); }\n.switch-on.btn { padding-right: 1.5rem; }\n.switch-off.btn { padding-left: 1.5rem; }\n\n.switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); }\n.switch-on.btn-lg { padding-right: 2rem; }\n.switch-off.btn-lg { padding-left: 2rem; }\n.switch-handle.btn-lg { width: 2.5rem; }\n\n.switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); }\n.switch-on.btn-sm { padding-right: 1rem; }\n.switch-off.btn-sm { padding-left: 1rem; }\n\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\n.switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; }\n.switch-on.btn-xs { padding-right: .8rem; }\n.switch-off.btn-xs { padding-left: .8rem; }\n',""])},function(t,n,e){"use strict";t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var e=function(t,n){var e=t[1]||"",r=t[3];if(!r)return e;if(n&&"function"==typeof btoa){var o=(s=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[e].concat(i).concat([o]).join("\n")}var s;return[e].join("\n")}(n,t);return n[2]?"@media "+n[2]+"{"+e+"}":e}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o=0&&u.splice(n,1)}function m(t){var n=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return e.nc}();r&&(t.attrs.nonce=r)}return g(n,t.attrs),p(t,n),n}function g(t,n){Object.keys(n).forEach(function(e){t.setAttribute(e,n[e])})}function w(t,n){var e,r,o,i;if(n.transform&&t.css){if(!(i="function"==typeof n.transform?n.transform(t.css):n.transform.default(t.css)))return function(){};t.css=i}if(n.singleton){var s=l++;e=c||(c=m(n)),r=O.bind(null,e,s,!1),o=O.bind(null,e,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=function(t){var n=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",g(n,t.attrs),p(t,n),n}(n),r=function(t,n,e){var r=e.css,o=e.sourceMap,i=void 0===n.convertToAbsoluteUrls&&o;(n.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,e,n),o=function(){b(e),e.href&&URL.revokeObjectURL(e.href)}):(e=m(n),r=function(t,n){var e=n.css,r=n.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}.bind(null,e),o=function(){b(e)});return r(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;r(t=n)}else o()}}t.exports=function(t,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(n=n||{}).attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||"boolean"==typeof n.singleton||(n.singleton=s()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var e=h(t,n);return d(e,n),function(t){for(var r=[],o=0;o .btn, .btn-xs {\n\tpadding: .35rem .4rem .25rem .4rem;\n\tfont-size: .875rem;\n\tline-height: .5;\n\tborder-radius: .2rem;\n}\n\n.checkbox label .switch, .checkbox-inline .switch {\n\tmargin-left: -1.25rem;\n\tmargin-right: .35rem;\n}\n\n.switch {\n\tposition: relative;\n\toverflow: hidden;\n}\n.switch.btn.btn-light, .switch.btn.btn-outline-light {\n\tborder-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */\n}\n.switch input[type="checkbox"] {\n\tdisplay: none;\n}\n.switch-group {\n\tposition: absolute;\n\twidth: 200%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttransition: left 0.35s;\n\t-webkit-transition: left 0.35s;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n}\n.switch.off .switch-group {\n\tleft: -100%;\n}\n.switch-on {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 50%;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n}\n.switch-off {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 50%;\n\tright: 0;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbox-shadow: none;\n}\n.switch-handle {\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding-top: 0px;\n\tpadding-bottom: 0px;\n\theight: 100%;\n\twidth: 0px;\n\tborder-width: 0 1px;\n\tbackground-color: #fff;\n}\n\n.switch.btn-outline-primary .switch-handle {\n\tbackground-color: var(--primary);\n\tborder-color: var(--primary);\n}\n.switch.btn-outline-secondary .switch-handle {\n\tbackground-color: var(--secondary);\n\tborder-color: var(--secondary);\n}\n.switch.btn-outline-success .switch-handle {\n\tbackground-color: var(--success);\n\tborder-color: var(--success);\n}\n.switch.btn-outline-danger .switch-handle {\n\tbackground-color: var(--danger);\n\tborder-color: var(--danger);\n}\n.switch.btn-outline-warning .switch-handle {\n\tbackground-color: var(--warning);\n\tborder-color: var(--warning);\n}\n.switch.btn-outline-info .switch-handle {\n\tbackground-color: var(--info);\n\tborder-color: var(--info);\n}\n.switch.btn-outline-light .switch-handle {\n\tbackground-color: var(--light);\n\tborder-color: var(--light);\n}\n.switch.btn-outline-dark .switch-handle {\n\tbackground-color: var(--dark);\n\tborder-color: var(--dark);\n}\n.switch[class*="btn-outline"]:hover .switch-handle {\n\tbackground-color: var(--light);\n\topacity: 0.5;\n}\n\n/* NOTE: Must come first, so classes below override as needed */\n/* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */\n\n.switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); }\n.switch-on.btn { padding-right: 1.5rem; }\n.switch-off.btn { padding-left: 1.5rem; }\n\n.switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); }\n.switch-on.btn-lg { padding-right: 2rem; }\n.switch-off.btn-lg { padding-left: 2rem; }\n.switch-handle.btn-lg { width: 2.5rem; }\n\n.switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); }\n.switch-on.btn-sm { padding-right: 1rem; }\n.switch-off.btn-sm { padding-left: 1rem; }\n\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\n.switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; }\n.switch-on.btn-xs { padding-right: .8rem; }\n.switch-off.btn-xs { padding-left: .8rem; }\n',""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(s=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var s;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o=0&&u.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return g(e,t.attrs),p(t,e),e}function g(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function w(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var s=l++;n=c||(c=m(e)),r=O.bind(null,n,s,!1),o=O.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",g(e,t.attrs),p(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,n,e),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=m(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){b(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=h(t,e);return d(n,e),function(t){for(var r=[],o=0;o Date: Mon, 14 Oct 2019 08:52:51 -0300 Subject: [PATCH 3/3] Render child item. --- lib/bootstrap-switch-button-react.js | 2 +- package-lock.json | 53 +++++++------------------ src/bootstrap-switch-button-react.js | 59 ++++++++++++++++------------ 3 files changed, 48 insertions(+), 66 deletions(-) diff --git a/lib/bootstrap-switch-button-react.js b/lib/bootstrap-switch-button-react.js index c2408f2..e838d67 100644 --- a/lib/bootstrap-switch-button-react.js +++ b/lib/bootstrap-switch-button-react.js @@ -1 +1 @@ -module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return f});var r=n(0),o=n.n(r);n(2);function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t,e){for(var n=0;n .btn, .btn-xs {\n\tpadding: .35rem .4rem .25rem .4rem;\n\tfont-size: .875rem;\n\tline-height: .5;\n\tborder-radius: .2rem;\n}\n\n.checkbox label .switch, .checkbox-inline .switch {\n\tmargin-left: -1.25rem;\n\tmargin-right: .35rem;\n}\n\n.switch {\n\tposition: relative;\n\toverflow: hidden;\n}\n.switch.btn.btn-light, .switch.btn.btn-outline-light {\n\tborder-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */\n}\n.switch input[type="checkbox"] {\n\tdisplay: none;\n}\n.switch-group {\n\tposition: absolute;\n\twidth: 200%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttransition: left 0.35s;\n\t-webkit-transition: left 0.35s;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n}\n.switch.off .switch-group {\n\tleft: -100%;\n}\n.switch-on {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 50%;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n}\n.switch-off {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 50%;\n\tright: 0;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbox-shadow: none;\n}\n.switch-handle {\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding-top: 0px;\n\tpadding-bottom: 0px;\n\theight: 100%;\n\twidth: 0px;\n\tborder-width: 0 1px;\n\tbackground-color: #fff;\n}\n\n.switch.btn-outline-primary .switch-handle {\n\tbackground-color: var(--primary);\n\tborder-color: var(--primary);\n}\n.switch.btn-outline-secondary .switch-handle {\n\tbackground-color: var(--secondary);\n\tborder-color: var(--secondary);\n}\n.switch.btn-outline-success .switch-handle {\n\tbackground-color: var(--success);\n\tborder-color: var(--success);\n}\n.switch.btn-outline-danger .switch-handle {\n\tbackground-color: var(--danger);\n\tborder-color: var(--danger);\n}\n.switch.btn-outline-warning .switch-handle {\n\tbackground-color: var(--warning);\n\tborder-color: var(--warning);\n}\n.switch.btn-outline-info .switch-handle {\n\tbackground-color: var(--info);\n\tborder-color: var(--info);\n}\n.switch.btn-outline-light .switch-handle {\n\tbackground-color: var(--light);\n\tborder-color: var(--light);\n}\n.switch.btn-outline-dark .switch-handle {\n\tbackground-color: var(--dark);\n\tborder-color: var(--dark);\n}\n.switch[class*="btn-outline"]:hover .switch-handle {\n\tbackground-color: var(--light);\n\topacity: 0.5;\n}\n\n/* NOTE: Must come first, so classes below override as needed */\n/* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */\n\n.switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); }\n.switch-on.btn { padding-right: 1.5rem; }\n.switch-off.btn { padding-left: 1.5rem; }\n\n.switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); }\n.switch-on.btn-lg { padding-right: 2rem; }\n.switch-off.btn-lg { padding-left: 2rem; }\n.switch-handle.btn-lg { width: 2.5rem; }\n\n.switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); }\n.switch-on.btn-sm { padding-right: 1rem; }\n.switch-off.btn-sm { padding-left: 1rem; }\n\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\n.switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; }\n.switch-on.btn-xs { padding-right: .8rem; }\n.switch-off.btn-xs { padding-left: .8rem; }\n',""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(s=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var s;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o=0&&u.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return g(e,t.attrs),p(t,e),e}function g(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function w(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var s=l++;n=c||(c=m(e)),r=O.bind(null,n,s,!1),o=O.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",g(e,t.attrs),p(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,n,e),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=m(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){b(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=h(t,e);return d(n,e),function(t){for(var r=[],o=0;o .btn, .btn-xs {\n\tpadding: .35rem .4rem .25rem .4rem;\n\tfont-size: .875rem;\n\tline-height: .5;\n\tborder-radius: .2rem;\n}\n\n.checkbox label .switch, .checkbox-inline .switch {\n\tmargin-left: -1.25rem;\n\tmargin-right: .35rem;\n}\n\n.switch {\n\tposition: relative;\n\toverflow: hidden;\n}\n.switch.btn.btn-light, .switch.btn.btn-outline-light {\n\tborder-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */\n}\n.switch input[type="checkbox"] {\n\tdisplay: none;\n}\n.switch-group {\n\tposition: absolute;\n\twidth: 200%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttransition: left 0.35s;\n\t-webkit-transition: left 0.35s;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n}\n.switch.off .switch-group {\n\tleft: -100%;\n}\n.switch-on {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 50%;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n}\n.switch-off {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 50%;\n\tright: 0;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbox-shadow: none;\n}\n.switch-handle {\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding-top: 0px;\n\tpadding-bottom: 0px;\n\theight: 100%;\n\twidth: 0px;\n\tborder-width: 0 1px;\n\tbackground-color: #fff;\n}\n\n.switch.btn-outline-primary .switch-handle {\n\tbackground-color: var(--primary);\n\tborder-color: var(--primary);\n}\n.switch.btn-outline-secondary .switch-handle {\n\tbackground-color: var(--secondary);\n\tborder-color: var(--secondary);\n}\n.switch.btn-outline-success .switch-handle {\n\tbackground-color: var(--success);\n\tborder-color: var(--success);\n}\n.switch.btn-outline-danger .switch-handle {\n\tbackground-color: var(--danger);\n\tborder-color: var(--danger);\n}\n.switch.btn-outline-warning .switch-handle {\n\tbackground-color: var(--warning);\n\tborder-color: var(--warning);\n}\n.switch.btn-outline-info .switch-handle {\n\tbackground-color: var(--info);\n\tborder-color: var(--info);\n}\n.switch.btn-outline-light .switch-handle {\n\tbackground-color: var(--light);\n\tborder-color: var(--light);\n}\n.switch.btn-outline-dark .switch-handle {\n\tbackground-color: var(--dark);\n\tborder-color: var(--dark);\n}\n.switch[class*="btn-outline"]:hover .switch-handle {\n\tbackground-color: var(--light);\n\topacity: 0.5;\n}\n\n/* NOTE: Must come first, so classes below override as needed */\n/* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */\n\n.switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); }\n.switch-on.btn { padding-right: 1.5rem; }\n.switch-off.btn { padding-left: 1.5rem; }\n\n.switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); }\n.switch-on.btn-lg { padding-right: 2rem; }\n.switch-off.btn-lg { padding-left: 2rem; }\n.switch-handle.btn-lg { width: 2.5rem; }\n\n.switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); }\n.switch-on.btn-sm { padding-right: 1rem; }\n.switch-off.btn-sm { padding-left: 1rem; }\n\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\n.switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; }\n.switch-on.btn-xs { padding-right: .8rem; }\n.switch-off.btn-xs { padding-left: .8rem; }\n',""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(s=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var s;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o=0&&u.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return g(e,t.attrs),p(t,e),e}function g(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function w(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var s=l++;n=c||(c=m(e)),r=O.bind(null,n,s,!1),o=O.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",g(e,t.attrs),p(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}.bind(null,n,e),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=m(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){b(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=h(t,e);return d(n,e),function(t){for(var r=[],o=0;o
- - - + { !this.props.children && +
+ + + +
+ } +
+ {this.props.children} +
);