@bizhermit/react-sdk/elements/inputs/radio-buttons.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(t,e,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(e,n);r&&!("get"in r?!e.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,a,r)}:function(t,e,n,a){void 0===a&&(a=n),t[a]=e[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),__importStar=this&&this.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)"default"!==n&&Object.prototype.hasOwnProperty.call(t,n)&&__createBinding(e,t,n);return __setModuleDefault(e,t),e},__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.RadioButtonStyle=exports.useRadioButtons=exports.radioButtonCn=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),source_1=require("../../hooks/source"),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"),icon_1=require("../icon"),label_1=__importStar(require("../label")),cn="bh-rdo";exports.radioButtonCn=`${cn}_btn`;const RadioButtons=react_1.default.forwardRef(((t,e)=>{const n=t.$labelDataName||"label",a=t.$valueDataName||"value",r=t.$signalDataName||"signal",{loading:s,source:o}=(0,source_1.useSource)(t.$source,{preventSourceMemo:t.$preventSourceMemo,changeSource:t=>{if(null!=d){if(null!=t.find((t=>(0,value_1.equalValue)(t[a],d))))return}const e=t[0];null!=e&&c.current(e[a])}}),{val:d,set:c,buf:i}=(0,value_1.default)(t,{setChangeCtx:t=>{const e=null==t.before?void 0:o.find((e=>(0,value_1.equalValue)(e[a],t.before))),n=o.find((e=>(0,value_1.equalValue)(e[a],t.after)));return{...t,beforeData:e,afterData:n}}}),l=(0,react_1.useRef)();(0,react_1.useImperativeHandle)(e,(()=>l.current));const u=e=>{t.$disabled||t.$readOnly||s||c.current(e)},$=t=>{const e=document.activeElement;null!=e&&e.classList.contains(`${cn}-item`)&&(t?e.nextElementSibling?.focus():e.previousElementSibling?.focus())};(0,react_1.useEffect)((()=>{t.$hook?._set({focus:()=>{if(!l.current)return;let t=l.current.querySelector(`.${cn}-item[data-selected="true"]`);null==t&&(t=l.current.querySelector(`.${cn}-item`)),null!=t&&t.focus()},getValue:()=>i.current,setValue:t=>c.current(t)})}),[t.$hook?._set,l]);const f=(0,input_1.inputMode)(t),_=(0,react_1.useMemo)((()=>{let e=!1;const s=o?.map((s=>{const o=s[n],c=s[a],i=s[r],l=(0,value_1.equalValue)(d,c);return l&&(e=!0),react_1.default.createElement("div",{key:c??null,className:`${cn}-item`,"data-selected":l,"data-signal":i||t.$signal,tabIndex:0,onClick:()=>{u(c)},onKeyDown:t=>{(0,dom_1.pressPositiveKey)(t,(()=>{u(c)}),!0)}},t.$hideRadioButton?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:exports.radioButtonCn,"data-selected":l,"data-m":f}),string_utils_1.default.isString(o)?react_1.default.createElement(label_1.default,{className:`${cn}-lbl`},o):o)}));return!e&&(o?.length??0)>0&&setTimeout((()=>{c.current(o[0][a])}),0),s}),[d,o,s,f,t.$signal,t.$hideRadioButton,t.$disabled,t.$readOnly]);return react_1.default.createElement("div",{...(0,input_1.inputAttributes)(t,cn),ref:l,"data-flow":t.$column?"column":"row","data-nowrap":t.$nowrap,"data-hrb":t.$hideRadioButton,onKeyDown:t=>{switch(t.key){case"ArrowRight":case"ArrowDown":$(!0);break;case"ArrowLeft":case"ArrowUp":$(!1)}}},_,input_style_1.default,exports.RadioButtonStyle,Style)})),useRadioButtons=()=>{const t=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{t.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>t.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((e=>{t.current.setValue?.(e)}),[]),_set:(0,react_1.useCallback)((e=>{t.current=e}),[])}};exports.useRadioButtons=useRadioButtons;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:t})=>`\n.${input_style_1.inputCn}.${cn} {\n  flex-wrap: wrap;\n  width: unset;\n  height: unset;\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2 + ${css_var_1.default.phsize});\n  padding-bottom: unset;\n  padding-left: unset;\n  padding-right: unset;\n}\n.${input_style_1.inputCn}.${cn}:not([placeholder]) {\n  padding-top: unset;\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n}\n.${cn}[data-flow="column"] {\n  flex-direction: column;\n  align-items: stretch;\n  height: unset;\n}\n.${cn}[data-flow="row"] {\n  flex-direction: row;\n}\n.${cn}[data-nowrap="true"] {\n  flex-wrap: nowrap;\n}\n.${cn}-item {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  white-space: nowrap;\n  padding: ${css_var_1.default.pdy} ${css_var_1.default.pdx};\n  min-height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy} * 2);\n  min-width: calc(${css_var_1.default.size} + ${css_var_1.default.pdx} * 2);\n  outline-offset: -2px;\n  flex: 1 0 auto;\n}\n.${cn}[data-flow="row"]:not([data-hrb="true"]) > .${cn}-item:not(:last-child) {\n  margin-right: 5px;\n}\n.${cn}[data-hrb="true"] > .${cn}-item > .${cn}-lbl {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.${cn}[data-hrb="true"] > .${cn}-item {\n  justify-content: center;\n}\n.${cn}[data-flow="column"] > .${cn}-item,\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item {\n  justify-content: flex-start;\n}\n.${cn}[data-m="e"] > .${cn}-item {\n  cursor: pointer;\n  user-select: none;\n}\n.${cn}[data-m="d"] > .${cn}-item {\n  ${css_var_1.CssPV.inactOpacity}\n}\n.${exports.radioButtonCn} + .${cn}-lbl {\n  padding-left: unset;\n}\n.${cn}-item > .${exports.radioButtonCn}[data-m="d"] {\n  opacity: unset;\n}\n.${cn}[data-hrb="true"] > .${cn}-item::before {\n  ${css_var_1.CssPV.ba};\n  z-index: -1;\n${(0,css_var_1.switchDesign)(t,{fm:"transition: box-shadow 0.2s;",neumorphism:"transition: box-shadow 0.1s;"})}\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item::before {\n  top: ${css_var_1.default.pdy};\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n${(0,css_var_1.switchDesign)(t,{fm:`\n  width: calc(100% - ${css_var_1.default.pdx} * 2);\n  left: ${css_var_1.default.pdx};\n`,neumorphism:"\n  width: 100%;\n  left: 0px;\n"})}\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item:first-child::before {\n  left: ${css_var_1.default.pdx};\n${(0,css_var_1.switchDesign)(t,{fm:`width: calc(100% - ${css_var_1.default.pdx} * 2);`,neumorphism:`\n  width: calc(100% - ${css_var_1.default.pdx});\n  border-top-left-radius: ${css_var_1.default.bdr};\n  border-bottom-left-radius: ${css_var_1.default.bdr};\n`})} \n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item:last-child::before {\n${(0,css_var_1.switchDesign)(t,{fm:`width: calc(100% - ${css_var_1.default.pdx} * 2);`,neumorphism:`\n  width: calc(100% - ${css_var_1.default.pdx});\n  border-top-right-radius: ${css_var_1.default.bdr};\n  border-bottom-right-radius: ${css_var_1.default.bdr};\n`})} \n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item::before {\n  top: ${css_var_1.default.pdy};\n  left: ${css_var_1.default.pdx};\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n${(0,css_var_1.switchDesign)(t,{fm:`width: calc(100% - ${css_var_1.default.pdx} * 2);`,neumorphism:`width: calc(100% - ${css_var_1.default.pdx} * 2);`})}\n}\n${(0,css_var_1.switchDesign)(t,{fm:`\n.${cn}-item:focus > .${exports.radioButtonCn}[data-m="e"]::before {\n  outline: 1px solid ${css_var_1.default.default.ipt.bdc};\n  outline-offset: 2px;\n}\n.${cn}-item:hover > .${exports.radioButtonCn}[data-m="e"]::before {\n  border-width: 2px;\n  border-style: solid;\n}\n.${cn}[data-hrb="true"][data-flow="row"][data-m="e"] > .${cn}-item::before {\n  box-shadow: 0 -4px 0 -2px ${css_var_1.default.default.ipt.off} inset;\n}\n.${cn}[data-hrb="true"][data-flow="row"][data-m="e"] > .${cn}-item:not([data-selected="true"]):hover::before {\n  box-shadow: 0 -4px 0 -2px ${css_var_1.default.default.ipt.on} inset;\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item[data-selected="true"]::before {\n  box-shadow: 0 -4px 0px -2px ${css_var_1.default.default.bdc} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"][data-m="e"] > .${cn}-item::before {\n  box-shadow: 4px 0 0 -2px ${css_var_1.default.default.ipt.off} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"][data-m="e"] > .${cn}-item:not([data-selected="true"]):hover::before {\n  box-shadow: 4px 0 0 -2px ${css_var_1.default.default.ipt.on} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item[data-selected="true"]::before {\n  box-shadow: 4px 0 0 -2px ${css_var_1.default.default.bdc} inset;\n}\n${(0,css_var_1.signalIterator)(((t,e,n)=>`\n.${cn}-item${n} > .${exports.radioButtonCn}::before {\n  border-color: ${e.ipt.bdc};\n}\n.${cn}-item${n}:focus > .${exports.radioButtonCn}::before {\n  outline-color: ${e.ipt.bdc};\n}\n.${cn}-item${n} > .${exports.radioButtonCn}[data-selected="true"]::after {\n  background: ${e.fc};\n}\n.${cn}-item${n} .${cn}-lbl,\n.${cn}-item${n} .${label_1.labelCn} {\n  color: ${e.fc};\n}\n.${cn}-item${n} .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.fc};\n}\n.${cn}[data-hrb="true"][data-flow="row"][data-m="e"] > .${cn}-item${n}::before {\n  box-shadow: 0 -4px 0 -2px ${e.ipt.off} inset;\n}\n.${cn}[data-hrb="true"][data-flow="row"][data-m="e"] > .${cn}-item${n}:not([data-selected="true"]):hover::before {\n  box-shadow: 0 -4px 0 -2px ${e.ipt.on} inset;\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item${n}[data-selected="true"]::before {\n  box-shadow: 0 -4px 0px -2px ${e.bdc} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"][data-m="e"] > .${cn}-item${n}::before {\n  box-shadow: 4px 0 0 -2px ${e.ipt.off} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"][data-m="e"] > .${cn}-item${n}:not([data-selected="true"]):hover::before {\n  box-shadow: 4px 0 0 -2px ${e.ipt.on} inset;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item${n}[data-selected="true"]::before {\n  box-shadow: 4px 0 0 -2px ${e.bdc} inset;\n}`)).join("")}`,neumorphism:`\n.${cn}-item:hover > .${exports.radioButtonCn}[data-m="e"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdD};\n}\n.${cn}[data-hrb="true"][data-m="e"] > .${cn}-item::before {\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n}\n.${cn}[data-hrb="true"][data-m="e"] > .${cn}-item[data-selected="true"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item[data-selected="true"],\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item[data-selected="true"]:first-child {\n  padding-top: calc(${css_var_1.default.pdy} + 1px);\n}\n.${cn}[data-hrb="true"][data-m="e"] > .${cn}-item:not([data-selected="true"]):hover::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}[data-hrb="true"][data-m="r"] > .${cn}-item[data-selected="true"]::before,\n.${cn}[data-hrb="true"][data-m="d"] > .${cn}-item[data-selected="true"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}\n.${cn}[data-hrb="true"][data-m="r"] > .${cn}-item:not([data-selected="true"])::before,\n.${cn}[data-hrb="true"][data-m="d"] > .${cn}-item:not([data-selected="true"])::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdS};\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item {\n  min-height: ${css_var_1.default.size};\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item::before {\n  top: 0px;\n  height: 100%;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:first-child,\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:last-child {\n  height: calc(${css_var_1.default.size} + ${css_var_1.default.pdy});\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item:not(:first-child) {\n  padding-left: unset;\n}\n.${cn}[data-hrb="true"][data-flow="row"] > .${cn}-item:not(:last-child) {\n  padding-right: unset;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:not(:first-child) {\n  padding-top: unset;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:not(:last-child) {\n  padding-bottom: unset;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item[data-selected="true"]:not(:first-child) {\n  padding-top: 1px;\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:first-child::before {\n  top: ${css_var_1.default.pdy};\n  height: calc(100% - ${css_var_1.default.pdy});\n  border-top-left-radius: ${css_var_1.default.bdr};\n  border-top-right-radius: ${css_var_1.default.bdr};\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:last-child::before {\n  top: 0px;\n  height: calc(100% - ${css_var_1.default.pdy});\n  border-bottom-left-radius: ${css_var_1.default.bdr};\n  border-bottom-right-radius: ${css_var_1.default.bdr};\n}\n.${cn}[data-hrb="true"][data-flow="column"] > .${cn}-item:first-child:last-child::before {\n  height: calc(100% - ${css_var_1.default.pdy} * 2);\n}\n.${cn}-item > .${exports.radioButtonCn}[data-selected="true"]::after {\n  background: ${css_var_1.default.default.ipt.fc};\n}\n${(0,css_var_1.signalIterator)(((t,e,n)=>`\n.${cn}-item${n} .${cn}-lbl,\n.${cn}-item${n} .${label_1.labelCn} {\n  color: ${e.fc};\n}\n.${cn}-item${n} .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.fc};\n}\n.${cn}[data-hrb="true"] > .${cn}-item${n}[data-selected="true"] .${cn}-lbl,\n.${cn}[data-hrb="true"] > .${cn}-item${n}[data-selected="true"] .${label_1.labelCn} {\n  color: ${e.ipt.fc};\n}\n.${cn}[data-hrb="true"] > .${cn}-item${n}[data-selected="true"] .${icon_1.iconCn} {\n  --bh-icon-fc: ${e.ipt.fc};\n}\n.${cn}[data-hrb="true"] > .${cn}-item${n}[data-selected="true"]::before {\n  background: ${e.ipt.on};\n}`)).join("")}\n`})}\n`));exports.RadioButtonStyle=react_1.default.createElement(jsx_style_1.default,{id:exports.radioButtonCn,depsDesign:!0},(({design:t})=>`\n.${exports.radioButtonCn} {\n  box-sizing: border-box;\n  position: relative;\n  height: ${css_var_1.default.size};\n  width: ${css_var_1.default.size};\n  flex: none;\n}\n.${exports.radioButtonCn}[data-m="e"] {\n  cursor: pointer;\n}\n.${exports.radioButtonCn}::before,\n.${exports.radioButtonCn}::after {\n  ${css_var_1.CssPV.ba}\n  border-radius: 50%;\n}\n.${exports.radioButtonCn}::before {\n  height: 60%;\n  width: 60%;\n  left: 20%;\n  top: 20%;\n${(0,css_var_1.switchDesign)(t,{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${(0,css_var_1.switchDesign)(t,{fm:`\n.${exports.radioButtonCn}[data-m="e"]::before {\n  background: ${css_var_1.default.default.ipt.off};\n}`,neumorphism:`\n.${exports.radioButtonCn}[data-m="e"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}\n.${exports.radioButtonCn}[data-m="r"]::before,\n.${exports.radioButtonCn}[data-m="d"]::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}`})}\n.${exports.radioButtonCn}::after {\n  left: 33%;\n  top: 33%;\n  height: 34%;\n  width: 34%;\n${(0,css_var_1.switchDesign)(t,{fm:"transition: background 0.2s;",neumorphism:"transition: background 0.2s, box-shadow 0.2s;"})}\n}\n.${exports.radioButtonCn}[data-selected="true"]::after {\n${(0,css_var_1.switchDesign)(t,{fm:`background: ${css_var_1.default.default.fc};`,neumorphism:`\n  background: ${css_var_1.default.default.fc};\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n`})}\n}\n${(0,css_var_1.switchDesign)(t,{fm:`\n.${exports.radioButtonCn}[data-m="e"]:hover::before {\n  border-width: 2px;\n  border-style: solid;\n}`,neumorphism:`\n.${exports.radioButtonCn}[data-m="e"]:hover::before {\n  box-shadow: ${css_var_1.CssPV.ccvSdD};\n}`})}\n.${exports.radioButtonCn}[data-m="d"] {\n  ${css_var_1.CssPV.inactOpacity}\n}\n`)),exports.default=RadioButtons;