@bizhermit/react-sdk/popups/mask.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=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.useMask=exports.MaskProvider=void 0;const react_1=__importStar(require("react")),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),flex_box_1=__importStar(require("../elements/flex-box")),cn="bh-mask",MaskContainer=react_1.default.forwardRef(((e,t)=>{const[n,a]=(0,react_1.useState)();return(0,react_1.useMemo)((()=>{e.$hook?._set({show:e=>a({...e,visible:!0}),close:()=>a({visible:!1})})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn,(0,attributes_1.ftoCn)(e.$fto)),ref:t},react_1.default.createElement(flex_box_1.default,{$fto:"f",$row:e.$row,$wrap:e.$wrap,$left:e.$left,$center:e.$center,$right:e.$right,$top:e.$top,$middle:e.$middle,$bottom:e.$bottom,$scroll:e.$scroll??!0,$padding:e.$padding,className:e.$className,...e.$data},e.children),n?.visible?react_1.default.createElement(MaskWall,{$state:n}):react_1.default.createElement(react_1.default.Fragment,null),Style)})),MaskWall=e=>{const t=(0,react_1.useRef)(),n=(0,react_1.useCallback)((e=>{if(null==e)return;const n=[],a=t.current?.parentElement;if(!a)return;a.childNodes.forEach((e=>{e!==a&&n.push(e)}));let r=!1;const s=e=>{r=n.indexOf(e)>=0,!r&&e.parentElement&&s(e.parentElement)};return s(e),r&&t.current.focus(),r}),[]);return(0,react_1.useEffect)((()=>{t.current.focus();const e=e=>{"Tab"===e.key&&setTimeout((()=>{n(document.activeElement)&&e.target?.focus?.()}),0)};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[]),react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,`${cn}-wall`),ref:t,tabIndex:0,onKeyDown:e=>{e.stopPropagation(),e.preventDefault()},onBlur:e=>{null!=e.relatedTarget&&e.relatedTarget.className.indexOf(cn)>=0||n(e.relatedTarget)}},e.$state.image?react_1.default.createElement("div",{className:`${cn}-image`,"data-image":e.$state.image}):react_1.default.createElement(react_1.default.Fragment,null),e.$state.content?react_1.default.createElement("div",{className:`${cn}-cont`},e.$state.content):react_1.default.createElement(react_1.default.Fragment,null))},Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(({})=>`\n.${cn} {\n  box-sizing: border-box;\n  position: relative;\n  flex: none;\n  overflow: visible;\n}\n.${cn}-wall {\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  outline: none;\n  z-index: 2000000000;\n  flex: none;\n  background: ${css_var_1.default.mask.bgc};\n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.${cn}-image {\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n.${cn}-cont {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  margin-top: 10px;\n}\n.${cn} > .${flex_box_1.flexBoxCn} {\n  z-index: 0;\n}\n.${cn}-image::before,\n.${cn}-image::after {\n  ${css_var_1.CssPV.ba}\n}\n.${cn}-image[data-image="spin"] {\n  height: calc(${css_var_1.default.size} * 2);\n  width: calc(${css_var_1.default.size} * 2);\n}\n.${cn}-image[data-image="spin"]::before,\n.${cn}-image[data-image="spin"]::after {\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  border-radius: 50%;\n}\n.${cn}-image[data-image="spin"]::before {\n  border-left: 8px solid ${css_var_1.default.mask.ifc};\n  border-right: 8px double ${css_var_1.default.mask.ifc};\n  border-top: 8px double ${css_var_1.default.mask.ifc};\n  border-bottom: 8px double ${css_var_1.default.mask.ifc};\n  animation: maskSpin 1s linear 0s infinite normal;\n}\n.${cn}-image[data-image="spin"]::after {\n  border-left: 8px solid ${css_var_1.default.mask.ifc};\n  border-right: 8px solid ${css_var_1.default.mask.ifc};\n  border-top: 8px solid transparent;\n  border-bottom: 8px solid transparent;\n  animation: maskSpin 1.5s linear 0s infinite normal;\n}\n@keyframes maskSpin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n.${cn}-image[data-image="flow"] {\n  height: calc(${css_var_1.default.size} / 2);\n  width: 50%;\n  border-radius: calc(${css_var_1.default.size} / 4);\n  border: 2px solid ${css_var_1.default.mask.ifc};\n}\n.${cn}-image[data-image="flow"]::before {\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 20%;\n  border-radius: calc(${css_var_1.default.size} / 4);\n  background: ${css_var_1.default.mask.ifc};\n  animation: maskFlow 2s linear 0s infinite normal;\n}\n@keyframes maskFlow {\n  0% { left: -20%; }\n  100% { left: 120%; }\n}\n`)),MaskContext=(0,react_1.createContext)({show:()=>{console.log("not set")},close:()=>{console.log("not set")}}),MaskProvider=e=>{const t=(0,exports.useMask)({...e.initProps});return react_1.default.createElement(MaskContext.Provider,{value:t},react_1.default.createElement(MaskContainer,{...e,$fto:e.$fto??"f",$hook:t},e.children))};exports.MaskProvider=MaskProvider;const useMask=e=>{const t=(0,react_1.useRef)({}),n=(0,react_1.useContext)(MaskContext);return(0,react_1.useEffect)((()=>{null==t.current?.show&&null!=n._set&&(t.current=n),e?.show&&t.current.show?.(e)}),[]),{close:(0,react_1.useCallback)((()=>{t.current.close?.()}),[]),show:(0,react_1.useCallback)((n=>{t.current.show?.({...e,...n})}),[]),_set:(0,react_1.useCallback)((e=>{t.current=e}),[])}};exports.useMask=useMask,exports.default=MaskContainer;