@gsretail.com/gui-core/build/esm/core/Section/PageTabs/PageTabsContainer.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__spreadArray as e,__makeTemplateObject as n,__assign as t}from"tslib";import o,{useState as r,useEffect as i}from"react";import a from"@emotion/styled";import{Tabs as s,Box as c}from"@mui/material";import l from"../../LoadingProgress/LoadingProgressContainer.js";import u from"./view/PageTabView.js";import f from"./view/AllTabsButtonView.js";import"@mui/material/styles";import m from"../../../assets/theme/basicStyle.js";var d,p=function(p){var g=p.selectedPage,v=p.onSelectPage,h=void 0===v?function(){}:v,b=p.baseUrl,y=void 0===b?"http://brd.dev.gsshop.local":b,w=p.routeMessageKey,x=void 0===w?"onRoutePage":w,E=p.findMenuItem,P=r([]),T=P[0],k=P[1],L=r(0),j=L[0],I=L[1];i((function(){return void 0!==typeof window&&window.addEventListener("message",N),function(){window.removeEventListener("message",N)}}),[T]),i((function(){g&&B(g)}),[g]);var B=function(n){var t=T.findIndex((function(e){return e.id===n.id}));-1!==t?(k((function(e){return e.map((function(e){return e.id===n.id?n:e}))})),I(t)):(k((function(t){return e(e([],t,!0),[n],!1)})),I((function(){return T.length})))},S=function(e,n){var t=T.filter((function(e,t){return t!==n}));if(!t.length)return k([]),I(0),void h(void 0);var o=n;j>=n?o=j-1:j<n?o=j:t.length>=n&&(o=t.length-1),k(t),h(t[o])},M=function(e,n){I(n)},C=a(s)(d||(d=n(["\n    position: relative;\n    min-height: unset;\n\n    .MuiTabs-scrollButtons:first-of-type {\n      position: absolute;\n      top: 0;\n      height: 30px;\n      z-index: 1600;\n      background-color: rgba(255,255,255,0.7);\n\n      &:first-of-type {\n        left: 0;\n      }\n      &:last-of-type {\n        right: 0;\n      }\n    }\n  "],["\n    position: relative;\n    min-height: unset;\n\n    .MuiTabs-scrollButtons:first-of-type {\n      position: absolute;\n      top: 0;\n      height: 30px;\n      z-index: 1600;\n      background-color: rgba(255,255,255,0.7);\n\n      &:first-of-type {\n        left: 0;\n      }\n      &:last-of-type {\n        right: 0;\n      }\n    }\n  "]))),N=function(e){var n=e.data,t=n.message,o=n.value,r=n.queryString;if(t===x){var i=E(o);if(i){var a=r?"".concat(i.url,"?").concat(Object.entries(r).map((function(e){var n=e[0],t=e[1];return"".concat(n,"=").concat(t)})).join("&")):i.url,s={id:i.id,title:i.name,url:a,processing:!0};B(s)}}};return o.createElement(c,{className:"page-tabs",height:"100%"},o.createElement(c,{style:{display:"flex",height:30,width:"calc(100% + 48px)",margin:"0 -8px 0 -16px"}},o.createElement(c,{style:{flexGrow:1}},o.createElement(C,{className:"PageTabs",value:j,scrollButtons:!0,variant:"scrollable",TabIndicatorProps:{style:{display:"none"}}},T.map((function(e,n){return o.createElement(u,{key:e.id,index:n,page:e,onCloseTab:S,onSelectTab:M,style:t({},n===j?{backgroundColor:"white",color:m.color.black}:{color:m.color.secondary})})})))),!!T.length&&o.createElement(f,{pages:T,activePageIndex:j,onSelectListItem:M,onRemoveListItem:S})),T.map((function(e,n){var r=e.id,i=e.url,a=e.processing;return o.createElement("iframe",{key:r,className:"iframe-inner-content",title:r,src:"".concat(y).concat(i),width:"100%",style:{display:n!==j||a?"none":"block",height:"calc(100vh - 30px)"},frameBorder:0,onLoad:function(){return e=r,void k((function(n){return n.map((function(n){return n.id===e?t(t({},n),{processing:!1}):n}))}));var e}})})),o.createElement(l,{processing:T[j]&&!!T[j].processing,loadingPercentage:0,sx:{position:"inherit",width:"100%",height:"100vh"}}))};export{p as default};