@bizhermit/react-sdk/elements/function-key-container.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var u=Object.getOwnPropertyDescriptor(t,n);u&&!("get"in u?!t.__esModule:u.writable||u.configurable)||(u={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,u)}: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.generateFunctionKeyProps=exports.useFunctionKey=exports.useFunctionKeyContainer=void 0;const string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),css_var_1=require("../styles/css-var"),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),button_1=__importStar(require("./button")),flex_box_1=__importDefault(require("./flex-box")),label_1=__importDefault(require("./label")),cn="bh-fnk",functionKeys=["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"],FunctionKeyContext=(0,react_1.createContext)({setFunctionKeyActions:()=>"",removeFunctionKeyActions:()=>{},focus:()=>{}}),FunctionKeyContainer=react_1.default.forwardRef(((e,t)=>{const n=(0,react_1.useRef)();(0,react_1.useImperativeHandle)(t,(()=>n.current));const r=(0,react_1.useRef)(null==e.$defaultActions?[]:[{id:string_utils_1.default.generateUuidV4(),actions:e.$defaultActions}]),[u,c]=(0,react_1.useState)(0),a=e=>{for(let t=r.current.length-1;t>=0;t--){const n=r.current[t]?.actions?.[e];if(n)return n}},s=(0,react_1.useMemo)((()=>{const t=[];if(e.$hideButton)return t;for(let n=0;n<12;n++){const r=a(n),u=!0===e.$disabled||!0===r?.disabled||null==r?.click;t.push(react_1.default.createElement(button_1.default,{key:n,...r?.buttonAttributes,className:`${cn}-btn ${r?.buttonAttributes?.className??""}`,disabled:u||r?.buttonAttributes?.disabled,$click:r?.click},react_1.default.createElement(flex_box_1.default,{$center:!0,$fto:"f"},r?.removeKeyLabel?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(label_1.default,null,"F",n+1),r?.label)))}return t}),[u,e.$disabled,e.$hideButton]),o=(t,n)=>{if(e.$disabled)return;const r=a(n);null!=r&&(r.disabled||null!=r.click&&(r.click((()=>{})),t.stopPropagation(),t.preventDefault()))};return(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>n.current?.focus()})}),[e.$hook?._set]),(0,react_1.useEffect)((()=>{null==n.current?.querySelector("*:focus")&&n.current.focus()}),[]),react_1.default.createElement(FunctionKeyContext.Provider,{value:{setFunctionKeyActions:e=>{const t=string_utils_1.default.generateUuidV4();return r.current.push({id:t,actions:e}),c((e=>e+1)),t},removeFunctionKeyActions:e=>{for(let t=0,n=r.current.length;t<n;t++)if(r.current[t].id===e){r.current.splice(t,1);break}c((e=>e+1))},focus:()=>n.current?.focus()}},react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn,(0,attributes_1.ftoCn)(e.$fto)),ref:n,tabIndex:e.tabIndex??-1,onKeyDown:e=>{switch(e.key){case"F1":o(e,0);break;case"F2":o(e,1);break;case"F3":o(e,2);break;case"F4":o(e,3);break;case"F5":o(e,4);break;case"F6":o(e,5);break;case"F7":o(e,6);break;case"F8":o(e,7);break;case"F9":case"F10":o(e,8);break;case"F11":o(e,10);break;case"F12":o(e,11)}}},react_1.default.createElement("div",{className:`${cn}-cont ${cn}`},e.children),e.$hideButton?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${cn}-keys`},s),Style))})),useFunctionKeyContainer=()=>{const e=(0,react_1.useRef)({});return{_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useFunctionKeyContainer=useFunctionKeyContainer;const useFunctionKey=(e,t)=>{const n=(0,react_1.useContext)(FunctionKeyContext);return(0,react_1.useEffect)((()=>{const t=n.setFunctionKeyActions(e);return()=>{n.removeFunctionKeyActions(t)}}),t??[]),{focus:()=>n.focus()}};exports.useFunctionKey=useFunctionKey;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  outline: none;\n}\n.${cn}-cont {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex: 1;\n  min-height: 0px;\n  width: 100%;\n}\n.${cn}-keys {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n  flex: none;\n}\n.${button_1.buttonCn}.${cn}-btn {\n  flex: 1;\n}\n.${button_1.buttonCn}.${cn}-btn > .${button_1.buttonCn}-body {\n  padding: 0px;\n}\n`)),generateFunctionKeyProps=e=>{const t=[];for(let e=0;e<12;e++)t.push(null);if(null==e)return t;const n={set:(e,r)=>(t[Number(e.replace("F",""))-1]=r,n)};return e(n),t};exports.generateFunctionKeyProps=generateFunctionKeyProps,exports.default=FunctionKeyContainer;