@bizhermit/react-sdk/elements/navigation-container.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=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,a,o)}: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.Navigation=exports.useNavigationContainer=void 0;const react_1=__importStar(require("react")),react_2=require("react"),core_style_1=require("../styles/core-style"),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),icon_1=require("./icon"),label_1=require("./label"),cn="bh-nvg",defaultEdgeHeight="10%",defaultEdgeWidth="5%",defaultAnimationInterval=10,defaultAnimationDuration=200,NavigationContainer=react_1.default.forwardRef(((e,t)=>{const n=e.children[0],a=n.props.$position??"left",o=n.props.$mode??"visible",[r,i]=(0,react_1.useState)((()=>"visible"===o)),s=(0,react_1.useRef)();(0,react_2.useEffect)((()=>{e.$hook?._set({openNavigation:()=>i(!0),closeNavigation:()=>i(!1),toggleNavigation:()=>i((e=>!e))})}),[e.$hook?._set]);const l=(0,react_1.useCallback)((()=>{i(!1)}),[]);return(0,react_2.useEffect)((()=>{let t=!0;const i=s.current,c=()=>{n.props.$toggled?.(r),e.$toggled?.(r)};if(r)if("edge"===o||"manual"===o){const e=Math.max(Math.floor(Math.max(n.props.$animationDuration??200,1)/10),1);if("left"===a||"right"===a){i.style.visibility="hidden",i.style.removeProperty("width"),i.style.removeProperty("max-width"),i.style.removeProperty("min-width"),i.style.removeProperty("display"),i.style.removeProperty("overflow");let a=n.props.$edgeSize??"5%";const r=i.offsetWidth;"number"==typeof a&&(a+="px"),"manual"===o&&(a="0px"),i.style.width=i.style.maxWidth=i.style.minWidth=a;const s=i.offsetWidth,l=Math.max(1,Math.floor((r-s)/e));i.style.removeProperty("visibility");const d=()=>{i.style.removeProperty("width"),i.style.removeProperty("max-width"),i.style.removeProperty("min-width"),c()};let p=s;const y=async()=>{t&&(p+=l,p>r?d():(i.style.width=i.style.maxWidth=i.style.minWidth=`${p}px`,setTimeout(y,10)))};y()}else{i.style.visibility="hidden",i.style.removeProperty("height"),i.style.removeProperty("max-height"),i.style.removeProperty("min-height"),i.style.removeProperty("display"),i.style.removeProperty("overflow");let a=n.props.$edgeSize??"10%";const r=i.offsetHeight;"number"==typeof a&&(a+="px"),"manual"===o&&(a="0px"),i.style.height=i.style.maxHeight=i.style.minHeight=a;const s=i.offsetHeight,l=Math.max(1,Math.floor((r-s)/e));i.style.removeProperty("visibility");const d=()=>{i.style.removeProperty("height"),i.style.removeProperty("max-height"),i.style.removeProperty("min-height"),c()};let p=s;const y=async()=>{t&&(p+=l,p>r?d():(i.style.height=i.style.maxHeight=i.style.minHeight=`${p}px`,setTimeout(y,10)))};y()}}else c();else"edge"===o||"manual"===o?setTimeout((()=>{if(!t)return;const e=Math.max(Math.floor(Math.max(n.props.$animationDuration??200,1)/10),1);if("left"===a||"right"===a){let a=n.props.$edgeSize??"5%";"number"==typeof a&&(a+="px"),"manual"===o&&(a="0px");const r=()=>{i.style.width=i.style.maxWidth=i.style.minWidth=a,i.style.removeProperty("hidden"),c()};i.style.removeProperty("display");const s=i.offsetWidth;i.style.overflow="hidden",i.style.removeProperty("visibility"),i.style.width=i.style.maxWidth=i.style.minWidth=a;let l=i.offsetWidth;i.style.width=i.style.maxWidth=i.style.minWidth=`${s}px`;const d=Math.max(1,Math.floor((s-l)/e));let p=s;const y=async()=>{t&&(p-=d,p<l?r():(i.style.width=i.style.maxWidth=i.style.minWidth=`${p}px`,setTimeout(y,10)))};y()}else{let a=n.props.$edgeSize??"10%";"number"==typeof a&&(a+="px"),"manual"===o&&(a="0px");const r=()=>{i.style.height=i.style.maxHeight=i.style.minHeight=a,i.style.removeProperty("hidden"),c()};i.style.removeProperty("display");const s=i.offsetHeight;i.style.overflow="hidden",i.style.removeProperty("visibility"),i.style.height=i.style.maxHeight=i.style.minHeight=a;let l=i.offsetHeight;i.style.height=i.style.maxHeight=i.style.minHeight=`${s}px`;const d=Math.max(1,Math.floor((s-l)/e));let p=s;const y=async()=>{t&&(p-=d,p<l?r():(i.style.height=i.style.maxHeight=i.style.minHeight=`${p}px`,setTimeout(y,10)))};y()}}),100):c();return r&&"manual"===o&&!0!==n.props.$preventClickClose&&window.addEventListener("click",l),()=>{t=!1,r&&"manual"===o&&!0!==n.props.$preventClickClose&&window.removeEventListener("click",l)}}),[r]),(0,react_2.useEffect)((()=>{const e=s.current;switch(o){case"visible":e.style.removeProperty("display"),e.style.removeProperty("overflow"),e.style.removeProperty("width"),e.style.removeProperty("height"),e.style.removeProperty("max-width"),e.style.removeProperty("max-height"),e.style.removeProperty("min-width"),e.style.removeProperty("min-height"),e.style.removeProperty("visibility"),r||i(!0);break;case"edge":let t=n.props.$edgeSize??("left"===a||"right"===a?"5%":"10%");"number"==typeof t&&(t+="px"),"left"===a||"right"===a?(e.style.removeProperty("height"),e.style.removeProperty("max-height"),e.style.removeProperty("min-height"),e.style.width=e.style.maxWidth=e.style.minWidth=t):(e.style.removeProperty("width"),e.style.removeProperty("max-width"),e.style.removeProperty("min-width"),e.style.height=e.style.maxHeight=e.style.maxHeight=t),e.style.overflow="hidden",e.style.removeProperty("display"),e.style.removeProperty("visibility"),r&&i(!1);break;case"manual":"left"===a||"right"===a?(e.style.width=e.style.maxWidth=e.style.minWidth="0px",e.style.removeProperty("height"),e.style.removeProperty("min-height"),e.style.removeProperty("max-height")):(e.style.height=e.style.maxHeight=e.style.maxHeight="0px",e.style.removeProperty("width"),e.style.removeProperty("max-width"),e.style.removeProperty("min-width")),e.style.removeProperty("visibility"),e.style.overflow="hidden",e.style.display="none",r&&i(!1)}}),[o,a]),react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn,(0,attributes_1.ftoCn)(e.$fto)),ref:t,"data-pos":a,"data-mode":o},react_1.default.createElement("nav",{ref:s,...(0,attributes_1.attributesWithoutChildren)(n.props,`${cn}-nav ${core_style_1.sbCn}`),"data-opened":r,"data-signal":n.props.$signal,onMouseEnter:()=>{"edge"===o&&i(!0)},onMouseLeave:()=>{"edge"===o&&i(!1)},onClick:e=>{e.stopPropagation()}},(0,react_1.cloneElement)(n,{$$opened:r})),"edge"===o?react_1.default.createElement("div",{className:`${cn}-nav_dummy`,style:{width:n.props.$edgeSize??"5%",height:n.props.$edgeSize??"10%"}}):react_1.default.createElement(react_1.default.Fragment,null),react_1.default.createElement("div",{className:`${cn}-body ${core_style_1.sbCn}`},e.children.slice(1)),Style)})),useNavigationContainer=()=>{const e=(0,react_1.useRef)({});return{openNavigation:(0,react_1.useCallback)((()=>{e.current.openNavigation?.()}),[]),closeNavigation:(0,react_1.useCallback)((()=>{e.current.closeNavigation?.()}),[]),toggleNavigation:(0,react_1.useCallback)((()=>{e.current.toggleNavigation?.()}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useNavigationContainer=useNavigationContainer;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-wrap: nowrap;\n  overflow: visible;\n}\n.${cn}[data-pos="left"] {\n  flex-direction: row;\n}\n.${cn}[data-pos="right"] {\n  flex-direction: row-reverse;\n}\n.${cn}[data-pos="top"] {\n  flex-direction: column;\n}\n.${cn}[data-pos="bottom"] {\n  flex-direction: column-reverse;\n}\n.${cn}-nav_dummy {\n  box-sizing: border-box;\n  position: relative;\n  z-index: 0;\n}\n.${cn}-nav {\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  z-index: 2;\n  background: ${css_var_1.default.bgc};\n  min-width: 0px;\n  min-height: 0px;\n  max-width: 100%;\n  max-height: 100%;\n}\n.${cn}[data-pos="left"] > .${cn}-nav,\n.${cn}[data-pos="right"] > .${cn}-nav {\n  flex-flow: column nowrap;\n  height: 100%;\n}\n.${cn}[data-pos="top"] > .${cn}-nav,\n.${cn}[data-pos="bottom"] > .${cn}-nav {\n  flex-flow: row nowrap;\n  width: 100%;\n}\n.${cn}[data-mode="visible"] > .${cn}-nav {\n  position: relative;\n}\n.${cn}[data-mode="edge"] > .${cn}-nav,\n.${cn}[data-mode="manual"] > .${cn}-nav {\n  position: absolute;\n}\n.${cn}[data-mode="edge"][data-pos="left"] > .${cn}-nav,\n.${cn}[data-mode="edge"][data-pos="top"] > .${cn}-nav,\n.${cn}[data-mode="manual"][data-pos="left"] > .${cn}-nav,\n.${cn}[data-mode="manual"][data-pos="top"] > .${cn}-nav {\n  top: 0px;\n  left: 0px;\n}\n.${cn}[data-mode="edge"][data-pos="right"] > .${cn}-nav,\n.${cn}[data-mode="manual"][data-pos="right"] > .${cn}-nav {\n  top: 0px;\n  right: 0px;\n}\n.${cn}[data-mode="edge"][data-pos="bottom"] > .${cn}-nav,\n.${cn}[data-mode="manual"][data-pos="bottom"] > .${cn}-nav {\n  bottom: 0px;\n  left: 0px;\n}\n.${cn}-body {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  z-index: 1;\n}\n.${cn}[data-pos="left"] > .${cn}-body,\n.${cn}[data-pos="right"] > .${cn}-body {\n  height: 100%;\n  flex: 1;\n  min-width: 0px;\n}\n.${cn}[data-pos="top"] > .${cn}-body,\n.${cn}[data-pos="bottom"] > .${cn}-body {\n  width: 100%;\n  flex: 1;\n  min-height: 0px;\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}-nav${n} {\n  color: ${t.nav.fc};\n  background: ${t.nav.bgc};\n}\n.${cn}-nav${n} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.nav.fc};\n  --bh-icon-bc: ${t.nav.bgc};\n}\n.${cn}-nav${n} .${label_1.labelCn}[data-type="a"],\n.${cn}-nav${n} .bh-anchor {\n  color: ${t.nav.anchor};\n}`)).join("")}`,material:`\n.${cn}[data-pos="left"] > .${cn}-nav {\n  box-shadow: 5px 0 4px -5px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-pos="right"] > .${cn}-nav {\n  box-shadow: -4px 0 4px -5px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-pos="top"] > .${cn}-nav {\n  box-shadow: 0 5px 4px -5px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-pos="bottom"] > .${cn}-nav {\n  box-shadow: 0 -4px 4px -5px ${css_var_1.default.sdw.c};\n}`,neumorphism:`\n.${cn}[data-pos="left"] > .${cn}-nav {\n  box-shadow: 4px 0 3px -2px ${css_var_1.default.sdw.d}, -2.5px 0 1px -2px ${css_var_1.default.sdw.d} inset;\n}\n.${cn}[data-pos="right"] > .${cn}-nav {\n  box-shadow: -5.5px 0 3px -3px ${css_var_1.default.sdw.b}, 2.5px 0 0.5px -1px ${css_var_1.default.sdw.b} inset;\n}\n.${cn}[data-pos="top"] > .${cn}-nav {\n  box-shadow: 0px 4px 3px -2px ${css_var_1.default.sdw.d}, 0px -2.5px 1px -2px ${css_var_1.default.sdw.d} inset;\n}\n.${cn}[data-pos="bottom"] > .${cn}-nav {\n  box-shadow: 0 -5.5px 3px -3px ${css_var_1.default.sdw.b}, 0 2.5px 0.5px -1px ${css_var_1.default.sdw.b} inset;\n}\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}-nav${n} {\n  color: ${t.nav.fc};\n  background: ${t.nav.bgc};\n}\n.${cn}-nav${n} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.nav.fc};\n  --bh-icon-bc: ${t.nav.bgc};\n}\n.${cn}-nav${n} .${label_1.labelCn}[data-type="a"],\n.${cn}-nav${n} .bh-anchor {\n  color: ${t.nav.anchor};\n}\n`)).join("")}`})}\n`)),Navigation=e=>react_1.default.createElement(react_1.default.Fragment,null,e.children);exports.Navigation=Navigation,exports.default=NavigationContainer;