@bizhermit/react-sdk/elements/inputs/toggle-box.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,n,t,c){void 0===c&&(c=t);var r=Object.getOwnPropertyDescriptor(n,t);r&&!("get"in r?!n.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return n[t]}}),Object.defineProperty(e,c,r)}:function(e,n,t,c){void 0===c&&(c=t),e[c]=n[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(n,e,t);return __setModuleDefault(n,e),n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToggleBox=void 0;const react_1=__importStar(require("react")),value_1=__importStar(require("../../hooks/value")),css_var_1=__importStar(require("../../styles/css-var")),input_style_1=__importStar(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),dom_1=require("../../utils/dom"),input_1=require("../../utils/input"),cn="bh-tgb",ToggleBox=react_1.default.forwardRef(((e,n)=>{const t=e.$checkedValue??!0,c=e.$uncheckedValue??!1,r=(0,react_1.useRef)(),{val:a,set:s,buf:o}=(0,value_1.default)(e),i=()=>{e.$disabled||e.$readOnly||s.current((0,value_1.equalValue)(a,t)?c:t)};return(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>r.current?.focus(),getValue:()=>o.current,setValue:e=>s.current(e)})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:n},react_1.default.createElement("div",{ref:r,className:`${cn}-body`,tabIndex:e.$disabled?void 0:e.tabIndex??0,onClick:i,onKeyDown:n=>{(0,dom_1.pressPositiveKey)(n,(()=>{i()}),!0),e.onKeyDown?.(n)},"data-checked":(0,value_1.equalValue)(a,t)},react_1.default.createElement("div",{className:`${cn}-switch`})),input_style_1.default,Style)})),useToggleBox=()=>{const e=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{e.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>e.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((n=>{e.current.setValue?.(n)}),[]),_set:(0,react_1.useCallback)((n=>{e.current=n}),[])}};exports.useToggleBox=useToggleBox;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${input_style_1.inputCn}.${cn} {\n${(0,css_var_1.switchDesign)(e,{flat:`width: calc(${css_var_1.default.size} * 1.75);`,material:`width: calc(${css_var_1.default.size} * 1.8);`,neumorphism:`width: calc(${css_var_1.default.size} * 2);`})}\n  user-select: none;\n}\n.${cn}-body {\n  box-sizing: border-box;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  outline-offset: 1px;\n}\n.${cn}[data-m="e"] > .${cn}-body {\n  cursor: pointer;\n}\n.${cn}[data-m="d"] > .${cn}-body {\n  ${css_var_1.CssPV.inactOpacity}\n}\n.${cn}-body::before {\n  ${css_var_1.CssPV.ba}\n${(0,css_var_1.switchDesign)(e,{c:`\n  border-radius: calc(${css_var_1.default.size} / 2);\n  transition: background 0.3s;\n`,fm:"\n  height: calc(100% - 10px);\n  width: calc(100% - 10px);\n  top: 5px;\n  left: 5px;\n  border-width: 1px;\n  border-style: solid;\n",neumorphism:"\n  height: calc(100% - 2px);\n  width: calc(100% - 2px);\n  top: 1px;\n  left: 1px;\n"})}\n}\n.${cn}-switch {\n  box-sizing: border-box;\n  position: absolute;\n  transition: left 0.3s;\n  height: 100%;\n  width: ${css_var_1.default.size};\n  top: 0px;\n}\n.${cn}-body[data-checked="false"] > .${cn}-switch {\n  left: 0px;\n}\n.${cn}-body[data-checked="true"] > .${cn}-switch {\n  left: calc(100% - ${css_var_1.default.size});\n}\n.${cn}-switch::before {\n  ${css_var_1.CssPV.ba}\n${(0,css_var_1.switchDesign)(e,{c:"border-radius: 50%;",fm:"\n  height: calc(100% - 4px);\n  width: calc(100% - 4px);\n  top: 2px;\n  left: 2px;\n  border-width: 1px;\n  border-style: solid;\n",flat:"transition: border-color 0.1s, border-width 0.1s;",material:"transition: box-shadow 0.1s, border-width 0.1s;",neumorphism:`\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  top: 3px;\n  left: 3px;\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n  background: ${css_var_1.default.bgc};\n`})}\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${cn}[data-m="e"] > .${cn}-body:focus > .${cn}-switch::before {\n  outline: 1px solid ${css_var_1.default.default.ipt.bdc};\n  outline-offset: -3px;\n}\n.${cn}[data-m="e"] > .${cn}-body:hover > .${cn}-switch::before {\n  border-width: 2px;\n  border-style: solid;\n}\n${(0,css_var_1.signalIterator)(((e,n,t)=>`\n.${cn}${t} > .${cn}-body::before {\n  border-color: ${n.ipt.bdc};\n}\n.${cn}${t}[data-m="e"] > .${cn}-body::before {\n  background: ${n.ipt.off};\n}\n.${cn}${t} > .${cn}-body > .${cn}-switch::before {\n  border-color: ${n.ipt.bdc};\n  background: ${n.ipt.knob};\n}\n.${cn}${t} > .${cn}-body[data-checked="true"]::before {\n  background: ${n.ipt.on};\n}\n.${cn}${t}[data-m="e"] > .${cn}-body:focus > .${cn}-switch::before {\n  outline-color: ${n.ipt.bdc};\n}\n`)).join("")}\n`,material:`\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-switch::before {\n  box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-m="e"] > .${cn}-body:hover > .${cn}-switch::before {\n  box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-m="e"] > .${cn}-body:hover:active .${cn}-switch::before {\n  top: 3px;\n  box-shadow: none;\n}`,neumorphism:`\n.${cn}[data-m="e"] > .${cn}-body::before {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}\n.${cn}[data-m="e"] > .${cn}-body:hover > .${cn}-switch::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}[data-m="r"] .${cn}-body::before,\n.${cn}[data-m="d"] .${cn}-body::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}\n.${cn}[data-m="r"] .${cn}-body > .${cn}-switch::before,\n.${cn}[data-m="d"] .${cn}-body > .${cn}-switch::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdS};\n}\n${(0,css_var_1.signalIterator)(((e,n,t)=>`\n.${cn}${t} > .${cn}-body[data-checked="true"]::before {\n  background: ${n.ipt.on};\n}`)).join("")}`})}\n`));exports.default=ToggleBox;