@bizhermit/react-sdk/elements/tab-container.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.useTabContainer=exports.TabContentWrapper=void 0;const react_1=__importStar(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"),mask_1=__importStar(require("../popups/mask")),cn="bh-tab",TabContentWrapper=({children:e})=>react_1.default.createElement(react_1.default.Fragment,null,e);exports.TabContentWrapper=TabContentWrapper;const TabContainer=react_1.default.forwardRef(((e,t)=>{const n=(0,mask_1.useMask)(),[a,r]=(0,react_1.useState)((()=>null!=e.$defaultKey?e.$defaultKey:Array.isArray(e.children)?e.children[0].key:e.children.key));(0,react_1.useEffect)((()=>{e.$hook?._set({selectTab:e=>r(e),showMask:e=>n.show(e),closeMask:()=>n.close()})}),[e.$hook?._set]);const c=(0,react_1.useMemo)((()=>{const t=(t=>Array.isArray(e.children)?e.children.find((e=>String(e.key)===String(t)))??e.children[0]:e.children)(a);return"string"==typeof t.type?(0,react_1.cloneElement)(t,{...t.props}):(0,react_1.cloneElement)(t,{...t.props,$$mask:n})}),[a,e.children]);return(0,react_1.useEffect)((()=>{c.props.$selected?.(),e.$selected?.(a)}),[a]),react_1.default.createElement(mask_1.default,{...(0,attributes_1.attributesWithoutChildren)(e),ref:t,$hook:n,$fto:e.$fto,$className:cn,$scroll:!1},react_1.default.createElement("div",{className:`${cn}-list`,"data-calc":e.$calcTabWidth,"data-nav":e.$navigationBackgroundColor,"data-signal":e.$signal},(0,react_1.useMemo)((()=>(Array.isArray(e.children)?e.children:[e.children]).map((e=>react_1.default.createElement("div",{key:e.key,className:`${cn}-tab`,"data-selected":String(a)===String(e.key),"data-signal":e.props.$signal,onClick:()=>r(e.key)},e.props.title??"")))),[a,e.children])),react_1.default.createElement("div",{className:`${cn}-cont ${core_style_1.sbCn}`},c),Style)})),useTabContainer=()=>{const e=(0,react_1.useRef)({});return{selectTab:(0,react_1.useCallback)((t=>{e.current.selectTab?.(t)}),[]),showMask:(0,react_1.useCallback)((t=>{e.current.showMask?.(t)}),[]),closeMask:(0,react_1.useCallback)((()=>{e.current.closeMask?.()}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useTabContainer=useTabContainer;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn}-list {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n  z-index: 1;\n  overflow-y: visible;\n  overflow-x: auto;\n  overflow-x: overlay;\n${(0,css_var_1.switchDesign)(e,{flat:`\n  box-shadow: 0 2px 1px -2px ${css_var_1.default.sdw.c};\n  margin-bottom: 1px;\n`,material:`\n  box-shadow: 0 4px 5px -5px ${css_var_1.default.sdw.c};\n  margin-bottom: 3px;\n`,neumorphism:`\n  padding-top: ${css_var_1.default.pdy};\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}\n.${cn}-list::-webkit-scrollbar {\n  height: 3px !important;\n  width: 0px;\n  background: transparent !important;\n}\n.${cn}-list::-webkit-scrollbar-thumb {\n  background: ${css_var_1.default.sb.thumb.bgc};\n  border-radius: 2px;\n}\n.${cn}-tab {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row wrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  user-select: none;\n  padding: 2px 10px 0px 10px;\n  white-space: nowrap;\n  flex: 1;\n  overflow: visible;\n${(0,css_var_1.switchDesign)(e,{_:`min-height: ${css_var_1.default.size};`,c:`border-radius: ${css_var_1.default.bdr} ${css_var_1.default.bdr} 0 0;`,fm:"transition: box-shadow 0.2s, background 0.2s, color 0.2s;",flat:`min-height: ${css_var_1.default.size};`,material:`min-height: calc(${css_var_1.default.size} + 1px);`,neumorphism:`\n  min-height: calc(${css_var_1.default.size} + 2px);\n  transition: box-shadow 0.2s;\n`})}\n}\n.${cn}-tab:not([data-selected="true"]) {\n  cursor: pointer;\n}\n.${cn}-list[data-calc="true"] > .${cn}-tab {\n  flex: 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  z-index: 0;\n}\n${(0,css_var_1.switchDesign)(e,{fm:`\n.${cn}-tab[data-selected="true"] {\n  box-shadow: 0 -4.5px 0px -2px ${css_var_1.default.bdc} inset;\n}\n${(0,css_var_1.signalIterator)(((t,n,a)=>`\n.${cn}-tab${a} {\n  color: ${n.fc};\n}\n.${cn}-tab${a} .${icon_1.iconCn} {\n  --bh-icon-fc: ${n.fc};\n}\n.${cn}-tab${a}:not([data-selected="true"]):hover {\n  background: ${n.btn.base.bgc};\n  color: ${n.btn.base.fc};\n}\n.${cn}-tab${a}:not([data-selected="true"]):hover .${icon_1.iconCn} {\n  --bh-icon-fc: ${n.btn.base.fc};\n  --bh-icon-bc: ${n.btn.base.bgc};\n}\n.${cn}-list[data-nav="true"]${a} {\n  background: ${n.nav.bgc};\n  color: ${n.nav.fc};\n}\n.${cn}-list[data-nav="true"]${a} > .${cn}-tab {\n  color: ${n.nav.fc};\n}\n.${cn}-list[data-nav="true"]${a} > .${cn}-tab .${icon_1.iconCn} {\n  --bh-icon-fc: ${n.nav.fc};\n  --bh-icon-bc: ${n.nav.bgc};\n}\n.${cn}-list[data-nav="true"]${a} .${label_1.labelCn}[data-type="a"],\n.${cn}-list[data-nav="true"]${a} .bh-anchor {\n  color: ${n.nav.anchor};\n}\n${(0,css_var_1.switchDesign)(e,{flat:`\n.${cn}-tab${a}:not([data-selected="true"]):hover:active {\n  background: ${n.btn.act.bgc};\n  color: ${n.btn.act.fc};\n}\n.${cn}-tab${a}:not([data-selected="true"]):hover:active .${icon_1.iconCn} {\n  --bh-icon-fc: ${n.btn.act.fc};\n  --bh-icon-bc: ${n.btn.act.bgc};\n}`})}\n.${cn}-tab${a}[data-selected="true"] {\n  box-shadow: 0 -4.5px 0px -2px ${n.bdc} inset;\n}`)).join("")}`,flat:`\n.${cn}-tab:not([data-selected="true"]):hover {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}-tab:not([data-selected="true"]):hover:active {\n  background: ${css_var_1.default.actBgc};\n}`,material:`\n.${cn}-tab:not([data-selected="true"]):hover {\n  background: ${css_var_1.default.hvrBgc};\n}\n.${cn}-tab:not([data-selected="true"]):hover:active {\n  top: 1px;\n}`,neumorphism:`\n.${cn}-tab[data-selected="true"] {\n  box-shadow: 0 -4.5px 0px -2px ${css_var_1.default.bdc} inset;\n}\n${(0,css_var_1.signalIterator)(((e,t,n)=>`\n.${cn}-tab${n} {\n  color: ${t.fc};\n}\n.${cn}-tab${n} .${icon_1.iconCn} {\n  --bh-icon-fc: ${t.fc};\n}\n.${cn}-tab${n}[data-selected="true"] {\n  box-shadow: 0 -4.5px 0px -2px ${t.bdc} inset;\n}`)).join("")}\n.${cn}-tab:not([data-selected="true"]):hover {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}-tab:not([data-selected="true"]):hover:active {\n  margin-top: 1px;\n  margin-bottom: -1px;\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n}`})}\n`));exports.default=TabContainer;