react-candlestick
Version:
This is a switch and stylish React component that create checkbox into toggle switch button.
1 lines • 10.8 kB
JavaScript
module.exports=function(n){var e={};function c(r){if(e[r])return e[r].exports;var t=e[r]={i:r,l:!1,exports:{}};return n[r].call(t.exports,t,t.exports,c),t.l=!0,t.exports}return c.m=n,c.c=e,c.d=function(n,e,r){c.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:r})},c.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},c.t=function(n,e){if(1&e&&(n=c(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var t in n)c.d(r,t,function(e){return n[e]}.bind(null,t));return r},c.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return c.d(e,"a",e),e},c.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},c.p="",c(c.s=7)}([function(n,e){n.exports=require("react")},function(n,e){n.exports=require("prop-types")},function(n,e){n.exports=require("lodash")},function(n,e,r){var t=r(4),i=r(5);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[n.i,i,""]]);t(i,{insert:"head",singleton:!1}),n.exports=i.locals||{}},function(n,e,r){"use strict";var t,i,s=(i={},function(n){if(void 0===i[n]){var e=document.querySelector(n);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}i[n]=e}return i[n]}),d=[];function f(n){for(var e=-1,r=0;r<d.length;r++)if(d[r].identifier===n){e=r;break}return e}function l(n,e){for(var r={},t=[],i=0;i<n.length;i++){var s=n[i],u=e.base?s[0]+e.base:s[0],k=r[u]||0,y="".concat(u," ").concat(k);r[u]=k+1;var x=f(y),j={css:s[1],media:s[2],sourceMap:s[3]};-1!==x?(d[x].references++,d[x].updater(j)):d.push({identifier:y,updater:function(n,e){var r,t,i,s;return i=e.singleton?(s=m++,r=h=h||p(e),t=b.bind(null,r,s,!1),b.bind(null,r,s,!0)):(r=p(e),t=function(n,e,r){var t=r.css,i=r.media,s=r.sourceMap;if(i?n.setAttribute("media",i):n.removeAttribute("media"),s&&btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(s))))," */")),n.styleSheet)n.styleSheet.cssText=t;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(t))}}.bind(null,r,e),function(){!function(n){null!==n.parentNode&&n.parentNode.removeChild(n)}(r)}),t(n),function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap)return;t(n=e)}else i()}}(j,e),references:1}),t.push(y)}return t}function p(n){var e,t=document.createElement("style"),i=n.attributes||{};if(void 0!==i.nonce||(e=r.nc)&&(i.nonce=e),Object.keys(i).forEach((function(n){t.setAttribute(n,i[n])})),"function"==typeof n.insert)n.insert(t);else{var d=s(n.insert||"head");if(!d)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");d.appendChild(t)}return t}var u,k=(u=[],function(n,e){return u[n]=e,u.filter(Boolean).join("\n")});function b(n,e,r,t){var i,s,d=r?"":t.media?"@media ".concat(t.media," {").concat(t.css,"}"):t.css;n.styleSheet?n.styleSheet.cssText=k(e,d):(i=document.createTextNode(d),(s=n.childNodes)[e]&&n.removeChild(s[e]),s.length?n.insertBefore(i,s[e]):n.appendChild(i))}var h=null,m=0;n.exports=function(n,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=(void 0===t&&(t=Boolean(window&&document&&document.all&&!window.atob)),t));var r=l(n=n||[],e);return function(n){if(n=n||[],"[object Array]"===Object.prototype.toString.call(n)){for(var t=0;t<r.length;t++){var i=f(r[t]);d[i].references--}for(var s=l(n,e),u=0;u<r.length;u++){var k=f(r[u]);0===d[k].references&&(d[k].updater(),d.splice(k,1))}r=s}}}},function(n,e,r){(e=r(6)(!1)).push([n.i,"/* ========================================================================\r\n * @author Edouard Tack <edouard@tackacoder.fr>\r\n * React Candlestick latest version\r\n * Licensed under MIT (https://github.com/EdouardTack/react-candlestick/blob/master/LICENSE)\r\n * ======================================================================== */\r\n:root {\r\n --candlestick-bg-color: #F5F5F5;\r\n --candlestick-border-color: #E8E8E8;\r\n --candlestick-on-bg-color: #5CB85C;\r\n --candlestick-on-border-color: #B8E0B8;\r\n --candlestick-off-bg-color: #D9534F;\r\n --candlestick-off-border-color: #EDAEAB;\r\n}\r\n\r\n.candlestick-wrapper {\r\n position: relative;\r\n display: inline-block;\r\n width: 60px;\r\n height: auto;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg.candlestick-disabled {\r\n cursor: not-allowed;\r\n opacity: 0.4;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg.candlestick-readonly {\r\n cursor: not-allowed;\r\n opacity: 0.7;\r\n}\r\n\r\n/* !!! */\r\n/* ! DEFAULT MODE ! */\r\n/* !!! */\r\n.candlestick-wrapper .candlestick-bg,\r\n.candlestick-wrapper .candlestick-bg .candlestick-off:before,\r\n.candlestick-wrapper .candlestick-bg .candlestick-on:after {\r\n background-color: var(--candlestick-bg-color);\r\n border: 2px solid var(--candlestick-border-color);\r\n height: 16px;\r\n border-radius: 15px;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-on,\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-on .candlestick-off:before,\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-on .candlestick-on:after {\r\n background-color: var(--candlestick-on-bg-color);\r\n border-color: var(--candlestick-on-border-color);\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-off,\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-off .candlestick-off:before,\r\n.candlestick-wrapper .candlestick-bg.candlestick-bg-off .candlestick-on:after {\r\n background-color: var(--candlestick-off-bg-color);\r\n border-color: var(--candlestick-off-border-color);\r\n\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg .candlestick-toggle {\r\n position: absolute;\r\n z-index: 10;\r\n top: 50%;\r\n transform: translateX(-50%) translateY(-50%);\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background-color: var(--candlestick-bg-color);\r\n border: 1px solid var(--candlestick-border-color);\r\n box-shadow: 2px 2px 4px rgba(60, 60, 60, 0.75);\r\n transition: left 0.75s;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-neutral {\r\n left: 50%;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-on {\r\n left: 80%;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-off {\r\n left: 20%;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg .candlestick-off,\r\n.candlestick-wrapper .candlestick-bg .candlestick-neutral,\r\n.candlestick-wrapper .candlestick-bg .candlestick-on {\r\n display: inline-block;\r\n vertical-align: middle;\r\n height: 16px;\r\n width: 18px;\r\n}\r\n\r\n.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-off,\r\n.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-neutral,\r\n.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-on {\r\n cursor: pointer;\r\n}\r\n",""]),n.exports=e},function(n,e,r){"use strict";n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var r=function(n,e){var r=n[1]||"",t=n[3];if(!t)return r;if(e&&"function"==typeof btoa){var i=function(n){var e=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e);return"/*# ".concat(r," */")}(t),s=t.sources.map((function(n){return"/*# sourceURL=".concat(t.sourceRoot||"").concat(n," */")}));return[r].concat(s).concat([i]).join("\n")}return[r].join("\n")}(e,n);return e[2]?"@media ".concat(e[2]," {").concat(r,"}"):r})).join("")},e.i=function(n,r,t){"string"==typeof n&&(n=[[null,n,""]]);var i={};if(t)for(var s=0;s<this.length;s++){var d=this[s][0];null!=d&&(i[d]=!0)}for(var u=0;u<n.length;u++){var k=[].concat(n[u]);t&&i[k[0]]||(r&&(k[2]?k[2]="".concat(r," and ").concat(k[2]):k[2]=r),e.push(k))}},e}},function(n,e,r){"use strict";r.r(e);var t=r(0),i=r.n(t),s=r(1),d=r.n(s),u=r(2);function w(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(n)){var r=[],t=!0,i=!1,s=void 0;try{for(var d,u=n[Symbol.iterator]();!(t=(d=u.next()).done)&&(r.push(d.value),!e||r.length!==e);t=!0);}catch(n){i=!0,s=n}finally{try{t||null==u.return||u.return()}finally{if(i)throw s}}return r}}(n,e)||function(n,e){if(n){if("string"==typeof n)return a(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(n,e):void 0}}(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}function o(n){var e=w(n.choices||[1,0,""],3),r=e[0],s=e[1],d=e[2],k=n.onChange||function(n){},h=w(Object(t.useState)(n.id||"candlestick-"+Math.random().toString(8).substr(2,9)),1)[0],m=w(Object(t.useState)(void 0===n.defaultValue?d:("number"==typeof n.defaultValue?Object(u.toNumber):Object(u.toString))(n.defaultValue)),2),y=m[0],x=m[1],j=w(Object(t.useState)("neutral"),2),E=j[0],S=j[1];function p(n,e){g()||v()||(S(e),x(n),k(n))}Object(t.useEffect)((function(){y===r?S("on"):y===s?S("off"):y===d&&S("neutral"),x(y)}),[d,s,r,y]);var O,C,g=function(){return n.disabled||!1},v=function(){return n.readonly||!1};return i.a.createElement("div",{className:"candlestick-wrapper candlestick-contents"},i.a.createElement("div",{id:h,className:(C=["candlestick-bg","candlestick-bg-"+E],g()&&C.push("candlestick-disabled"),v()&&C.push("candlestick-readonly"),C.join(" "))},i.a.createElement("div",{className:"candlestick-off",onClick:function(){p(s,"off")}}),i.a.createElement("div",{className:"candlestick-neutral",onClick:function(){p(d,"neutral")}}),i.a.createElement("div",{className:"candlestick-on",onClick:function(){p(r,"on")}}),i.a.createElement("div",{className:"candlestick-toggle candlestick-position-"+E})),(O={name:h,type:"hidden",value:y},g()&&(O.disabled="disabled"),v()&&(O.readOnly="readonly"),i.a.createElement("input",O)))}r(3),o.propTypes={choices:d.a.array,defaultValue:d.a.oneOfType([d.a.number,d.a.string]),disabled:d.a.bool,id:d.a.string,onChange:d.a.func,readonly:d.a.bool},e.default=o}]);