@axeptio/design-system
Version:
Design System for Axeptio
1 lines • 10.9 kB
JavaScript
(()=>{"use strict";var t={n:e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return t.d(o,{a:o}),o},d:(e,o)=>{for(var i in o)t.o(o,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:o[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>v});const o=require("react");var i=t.n(o);const n=require("styled-components");var s=t.n(n);function r(){return r=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(t[i]=o[i])}return t},r.apply(this,arguments)}var a=o.createElement("svg",{viewBox:"-2 -5 14 20",height:"100%",width:"100%",style:{position:"absolute",top:0}},o.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"})),h=o.createElement("svg",{height:"100%",width:"100%",viewBox:"-2 -5 17 21",style:{position:"absolute",top:0}},o.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}));function c(t){if(7===t.length)return t;for(var e="#",o=1;o<4;o+=1)e+=t[o]+t[o];return e}function l(t,e,o,i,n){return function(t,e,o,i,n){var s=(t-o)/(e-o);if(0===s)return i;if(1===s)return n;for(var r="#",a=1;a<6;a+=2){var h=parseInt(i.substr(a,2),16),c=parseInt(n.substr(a,2),16),l=Math.round((1-s)*h+s*c).toString(16);1===l.length&&(l="0"+l),r+=l}return r}(t,e,o,c(i),c(n))}var d=function(t){function e(e){t.call(this,e);var o=e.height,i=e.width,n=e.checked;this.t=e.handleDiameter||o-2,this.i=Math.max(i-o,i-(o+this.t)/2),this.o=Math.max(0,(o-this.t)/2),this.state={h:n?this.i:this.o},this.l=0,this.u=0,this.p=this.p.bind(this),this.v=this.v.bind(this),this.g=this.g.bind(this),this.k=this.k.bind(this),this.m=this.m.bind(this),this.M=this.M.bind(this),this.T=this.T.bind(this),this.$=this.$.bind(this),this.C=this.C.bind(this),this.D=this.D.bind(this),this.O=this.O.bind(this),this.S=this.S.bind(this)}return t&&(e.__proto__=t),(e.prototype=Object.create(t&&t.prototype)).constructor=e,e.prototype.componentDidMount=function(){this.W=!0},e.prototype.componentDidUpdate=function(t){t.checked!==this.props.checked&&this.setState({h:this.props.checked?this.i:this.o})},e.prototype.componentWillUnmount=function(){this.W=!1},e.prototype.I=function(t){this.H.focus(),this.setState({R:t,j:!0,B:Date.now()})},e.prototype.L=function(t){var e=this.state,o=e.R,i=e.h,n=(this.props.checked?this.i:this.o)+t-o;e.N||t===o||this.setState({N:!0});var s=Math.min(this.i,Math.max(this.o,n));s!==i&&this.setState({h:s})},e.prototype.U=function(t){var e=this.state,o=e.h,i=e.N,n=e.B,s=this.props.checked,r=(this.i+this.o)/2;this.setState({h:this.props.checked?this.i:this.o});var a=Date.now()-n;(!i||a<250||s&&o<=r||!s&&o>=r)&&this.A(t),this.W&&this.setState({N:!1,j:!1}),this.l=Date.now()},e.prototype.p=function(t){t.preventDefault(),"number"==typeof t.button&&0!==t.button||(this.I(t.clientX),window.addEventListener("mousemove",this.v),window.addEventListener("mouseup",this.g))},e.prototype.v=function(t){t.preventDefault(),this.L(t.clientX)},e.prototype.g=function(t){this.U(t),window.removeEventListener("mousemove",this.v),window.removeEventListener("mouseup",this.g)},e.prototype.k=function(t){this.X=null,this.I(t.touches[0].clientX)},e.prototype.m=function(t){this.L(t.touches[0].clientX)},e.prototype.M=function(t){t.preventDefault(),this.U(t)},e.prototype.$=function(t){Date.now()-this.l>50&&(this.A(t),Date.now()-this.u>50&&this.W&&this.setState({j:!1}))},e.prototype.C=function(){this.u=Date.now()},e.prototype.D=function(){this.setState({j:!0})},e.prototype.O=function(){this.setState({j:!1})},e.prototype.S=function(t){this.H=t},e.prototype.T=function(t){t.preventDefault(),this.H.focus(),this.A(t),this.W&&this.setState({j:!1})},e.prototype.A=function(t){var e=this.props;(0,e.onChange)(!e.checked,t,e.id)},e.prototype.render=function(){var t=this.props,e=t.checked,i=t.disabled,n=t.className,s=t.offColor,a=t.onColor,h=t.offHandleColor,c=t.onHandleColor,d=t.checkedIcon,p=t.uncheckedIcon,u=t.checkedHandleIcon,f=t.uncheckedHandleIcon,m=t.boxShadow,b=t.activeBoxShadow,y=t.height,g=t.width,v=t.borderRadius,w=function(t,e){var o={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&-1===e.indexOf(i)&&(o[i]=t[i]);return o}(t,["checked","disabled","className","offColor","onColor","offHandleColor","onHandleColor","checkedIcon","uncheckedIcon","checkedHandleIcon","uncheckedHandleIcon","boxShadow","activeBoxShadow","height","width","borderRadius","handleDiameter"]),x=this.state,k=x.h,S=x.N,C=x.j,M={position:"relative",display:"inline-block",textAlign:"left",opacity:i?.5:1,direction:"ltr",borderRadius:y/2,WebkitTransition:"opacity 0.25s",MozTransition:"opacity 0.25s",transition:"opacity 0.25s",touchAction:"none",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},E={height:y,width:g,margin:Math.max(0,(this.t-y)/2),position:"relative",background:l(k,this.i,this.o,s,a),borderRadius:"number"==typeof v?v:y/2,cursor:i?"default":"pointer",WebkitTransition:S?null:"background 0.25s",MozTransition:S?null:"background 0.25s",transition:S?null:"background 0.25s"},T={height:y,width:Math.min(1.5*y,g-(this.t+y)/2+1),position:"relative",opacity:(k-this.o)/(this.i-this.o),pointerEvents:"none",WebkitTransition:S?null:"opacity 0.25s",MozTransition:S?null:"opacity 0.25s",transition:S?null:"opacity 0.25s"},I={height:y,width:Math.min(1.5*y,g-(this.t+y)/2+1),position:"absolute",opacity:1-(k-this.o)/(this.i-this.o),right:0,top:0,pointerEvents:"none",WebkitTransition:S?null:"opacity 0.25s",MozTransition:S?null:"opacity 0.25s",transition:S?null:"opacity 0.25s"},D={height:this.t,width:this.t,background:l(k,this.i,this.o,h,c),display:"inline-block",cursor:i?"default":"pointer",borderRadius:"number"==typeof v?v-1:"50%",position:"absolute",transform:"translateX("+k+"px)",top:Math.max(0,(y-this.t)/2),outline:0,boxShadow:C?b:m,border:0,WebkitTransition:S?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",MozTransition:S?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s",transition:S?null:"background-color 0.25s, transform 0.25s, box-shadow 0.15s"},_={height:this.t,width:this.t,opacity:Math.max(2*(1-(k-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:S?null:"opacity 0.25s",MozTransition:S?null:"opacity 0.25s",transition:S?null:"opacity 0.25s"},O={height:this.t,width:this.t,opacity:Math.max(2*((k-this.o)/(this.i-this.o)-.5),0),position:"absolute",left:0,top:0,pointerEvents:"none",WebkitTransition:S?null:"opacity 0.25s",MozTransition:S?null:"opacity 0.25s",transition:S?null:"opacity 0.25s"};return o.createElement("div",{className:n,style:M},o.createElement("div",{className:"react-switch-bg",style:E,onClick:i?null:this.T,onMouseDown:function(t){return t.preventDefault()}},d&&o.createElement("div",{style:T},d),p&&o.createElement("div",{style:I},p)),o.createElement("div",{className:"react-switch-handle",style:D,onClick:function(t){return t.preventDefault()},onMouseDown:i?null:this.p,onTouchStart:i?null:this.k,onTouchMove:i?null:this.m,onTouchEnd:i?null:this.M,onTouchCancel:i?null:this.O},f&&o.createElement("div",{style:_},f),u&&o.createElement("div",{style:O},u)),o.createElement("input",r({},{type:"checkbox",role:"switch","aria-checked":e,checked:e,disabled:i,style:{border:0,clip:"rect(0 0 0 0)",height:1,margin:-1,overflow:"hidden",padding:0,position:"absolute",width:1}},w,{ref:this.S,onFocus:this.D,onBlur:this.O,onKeyUp:this.C,onChange:this.$})))},e}(o.Component);d.defaultProps={disabled:!1,offColor:"#888",onColor:"#080",offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:a,checkedIcon:h,boxShadow:null,activeBoxShadow:"0 0 2px 3px #3bf",height:28,width:56},i().createElement;var p=s().div.withConfig({displayName:"Switch__Root",componentId:"sc-1txd35a-0"})(["display:flex;align-items:center;justify-content:space-between;gap:20px;color:red;"]),u=(0,n.css)(["font-size:12px;font-family:",";color:",";"],(function(t){return t.theme.fonts.text}),(function(t){return t.theme.colors.secondary})),f=s().div.withConfig({displayName:"Switch__SwitchDescription",componentId:"sc-1txd35a-1"})(["",";font-size:14px;font-weight:bold;"],u),m=s().div.withConfig({displayName:"Switch__SwitchContainer",componentId:"sc-1txd35a-2"})(["display:flex;align-items:center;justify-content:flex-end;"]),b=s().div.withConfig({displayName:"Switch__OffSwitchLabel",componentId:"sc-1txd35a-3"})(["",";font-weight:",";cursor:",";text-align:right;margin-right:8px;"],u,(function(t){return t.checked?"bold":"normal"}),(function(t){return t.checked?"default":"pointer"})),y=s().div.withConfig({displayName:"Switch__OnSwitchLabel",componentId:"sc-1txd35a-4"})(["",";font-weight:",";cursor:",";text-align:left;margin-left:8px;flex-basis:55px;"],u,(function(t){return t.checked?"bold":"normal"}),(function(t){return t.checked?"default":"pointer"})),g=s().div.withConfig({displayName:"Switch__HandleIcon",componentId:"sc-1txd35a-5"})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;svg{width:","px;}"],(function(t){return t.large?17:14}));const v=function(t){var e=t.active,s=t.large,r=t.label,a=t.offText,h=t.onText,c=t.onChange,l=(0,n.useTheme)(),u=(0,o.useState)(e),v=u[0],w=u[1],x=function(t){w(t),null==c||c(t)};return i().createElement(p,null,r&&i().createElement(f,null,r),i().createElement(m,null,a&&i().createElement(b,{checked:!v,onClick:function(){v&&x(!v)}},a),i().createElement(d,{onChange:x,checked:v,height:s?30:26,width:s?54:44,handleDiameter:s?22:18,offColor:l.colors.grey.v300,onColor:l.colors.primary,offHandleColor:"#fff",onHandleColor:"#fff",uncheckedIcon:null,checkedIcon:null,uncheckedHandleIcon:i().createElement(g,{large:s},i().createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},i().createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",fill:l.colors.grey.v400}))),checkedHandleIcon:i().createElement(g,{large:s},i().createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},i().createElement("path",{d:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",fill:l.colors.primary}))),boxShadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 3px 4px 0px rgba(0, 0, 0, 0.03), 0px 6px 9px 0px rgba(0, 0, 0, 0.04), 0px 13px 18px 0px rgba(0, 0, 0, 0.05), 0px 36px 49px 0px rgba(0, 0, 0, 0.07);",activeBoxShadow:!1}),h&&i().createElement(y,{checked:v,onClick:function(){v||x(!0)}},h)))};var w=exports;for(var x in e)w[x]=e[x];e.__esModule&&Object.defineProperty(w,"__esModule",{value:!0})})();