@bizhermit/react-sdk
Version:
React SDK
1 lines • 6.15 kB
JavaScript
;var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckButtonStyle=exports.useCheckBox=exports.checkBoxCn=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=__importDefault(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),dom_1=require("../../utils/dom"),input_1=require("../../utils/input"),label_1=require("../label"),cn="bh-ckb";exports.checkBoxCn=`${cn}_btn`;const CheckBox=react_1.default.forwardRef(((e,t)=>{const n=e.$checkedValue??!0,r=e.$uncheckedValue??!1,o=(0,react_1.useRef)(),{val:c,set:s,buf:a}=(0,value_1.default)(e),d=()=>{e.$disabled||e.$readOnly||s.current((0,value_1.equalValue)(c,n)?r:n)};(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>o.current?.focus(),getValue:()=>a.current,setValue:e=>s.current(e)})}),[e.$hook?._set]);const i=(0,input_1.inputMode)(e);return react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:t},react_1.default.createElement("div",{className:`${cn}-body`,ref:o,tabIndex:e.$disabled?void 0:e.tabIndex??0,onClick:d,onKeyDown:t=>{(0,dom_1.pressPositiveKey)(t,(()=>{d()}),!0),e.onKeyDown?.(t)}},react_1.default.createElement("div",{className:exports.checkBoxCn,"data-m":i,"data-checked":(0,value_1.equalValue)(c,n)}),e.children),input_style_1.default,exports.CheckButtonStyle,Style)})),useCheckBox=()=>{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)((t=>{e.current.setValue?.(t)}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useCheckBox=useCheckBox;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn} {\n width: unset;\n align-items: center;\n}\n.${cn}-body {\n ${css_var_1.CssPV.flex}\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n flex: none;\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}[data-m="d"] > .${cn}-body > .${exports.checkBoxCn} {\n opacity: unset;\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${cn}[data-m="e"] > .${cn}-body:focus > .${exports.checkBoxCn}::before {\n outline: 1px solid ${css_var_1.default.default.ipt.bdc};\n outline-offset: 2px;\n}\n.${cn}[data-m="e"] > .${cn}-body:hover > .${exports.checkBoxCn}::before {\n border-width: 2px;\n border-style: solid;\n}`,neumorphism:`\n.${cn}[data-m="e"] > .${cn}-body:hover > .${exports.checkBoxCn}::before {\n box-shadow: ${css_var_1.CssPV.ccvSdD};\n}`})}\n${(0,css_var_1.signalIterator)(((t,n,r)=>`\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${cn}${r} > .${cn}-body > .${exports.checkBoxCn}::before {\n border-color: ${n.ipt.bdc};\n}\n.${cn}${r} > .${cn}-body:focus > .${exports.checkBoxCn}::before {\n outline-color: ${n.ipt.bdc};\n}\n.${cn}${r} > .${cn}-body > .${exports.checkBoxCn}[data-m="e"]::before {\n background: ${n.ipt.off};\n}`})}\n.${cn}${r} > .${cn}-body > .${exports.checkBoxCn}[data-checked="true"]::after {\n border-color: ${n.fc};\n}\n.${cn}${r} > .${cn}-body {\n color: ${n.fc};\n}`)).join("")}\n`));exports.CheckButtonStyle=react_1.default.createElement(jsx_style_1.default,{id:exports.checkBoxCn,depsDesign:!0},(({design:e})=>`\n.${exports.checkBoxCn} {\n box-sizing: border-box;\n position: relative;\n overflow: visible;\n height: ${css_var_1.default.size};\n width: ${css_var_1.default.size};\n}\n.${exports.checkBoxCn}::before,\n.${exports.checkBoxCn}::after {\n ${css_var_1.CssPV.ba}\n}\n.${exports.checkBoxCn}::before {\n height: 76%;\n width: 76%;\n top: 12%;\n left: 12%;\n${(0,css_var_1.switchDesign)(e,{c:`border-radius: ${css_var_1.default.bdr};`,fm:`\n border: 1px solid ${css_var_1.default.default.ipt.bdc};\n transition: border-width 0.1s;\n`,neumorphism:"transition: box-shadow 0.1s;"})}\n}\n.${exports.checkBoxCn}::after {\n height: 60%;\n width: 40%;\n top: 10%;\n left: 31%;\n transform: rotate(40deg);\n border-bottom: 2.5px solid transparent;\n border-right: 2.5px solid transparent;\n border-radius: 1px;\n transition: border-color 0.1s;\n}\n.${exports.checkBoxCn}[data-checked="true"]::after {\n border-color: ${css_var_1.default.default.ipt.fc};\n}\n.${exports.checkBoxCn}[data-m="e"] {\n cursor: pointer;\n}\n.${exports.checkBoxCn}[data-m="e"]::before {\n${(0,css_var_1.switchDesign)(e,{fm:`background: ${css_var_1.default.default.ipt.off};`,neumorphism:`box-shadow: ${css_var_1.CssPV.ccvSd};`})}\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${exports.checkBoxCn}[data-m="e"]:hover::before {\n border-width: 2px;\n border-style: solid;\n}`,neumorphism:`\n.${exports.checkBoxCn}[data-m="e"]:hover::before {\n box-shadow: ${css_var_1.CssPV.ccvSdD};\n}\n.${exports.checkBoxCn}[data-m="r"]::before,\n.${exports.checkBoxCn}[data-m="d"]::before {\n box-shadow: ${css_var_1.CssPV.ccvSdS};\n}`})}\n.${exports.checkBoxCn}[data-m="d"] {\n ${css_var_1.CssPV.inactOpacity}\n}\n.${exports.checkBoxCn} + .${label_1.labelCn} {\n padding-left: 3px;\n}\n.${exports.checkBoxCn}[data-m="e"] + .${label_1.labelCn} {\n user-select: none;\n}\n`)),exports.default=CheckBox;