@gsretail.com/gui-core/build/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"../../../node_modules/tslib/tslib.es6.js";import o,{useState as i,useEffect as r}from"react";import a from"@emotion/styled";import{Tabs as s,Box as l}from"@mui/material";import c from"../../LoadingProgress/LoadingProgressContainer.js";import u from"./view/PageTabView.js";import m from"./view/AllTabsButtonView.js";import"@mui/material/styles";import f 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=i([]),T=P[0],j=P[1],k=i(0),L=k[0],I=k[1];r((function(){return void 0!==typeof window&&window.addEventListener("message",N),function(){window.removeEventListener("message",N)}}),[T]),r((function(){g&&B(g)}),[g]);var B=function(n){var t=T.findIndex((function(e){return e.id===n.id}));-1!==t?(j((function(e){return e.map((function(e){return e.id===n.id?n:e}))})),I(t)):(j((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 j([]),I(0),void h(void 0);var o=n;L>=n?o=L-1:L<n?o=L:t.length>=n&&(o=t.length-1),j(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,i=n.queryString;if(t===x){var r=E(o);if(r){var a=i?"".concat(r.url,"?").concat(Object.entries(i).map((function(e){var n=e[0],t=e[1];return"".concat(n,"=").concat(t)})).join("&")):r.url,s={id:r.id,title:r.name,url:a,processing:!0};B(s)}}};return o.createElement(l,{className:"page-tabs",height:"100%"},o.createElement(l,{style:{display:"flex",height:30,width:"calc(100% + 48px)",margin:"0 -8px 0 -16px"}},o.createElement(l,{style:{flexGrow:1}},o.createElement(C,{className:"PageTabs",value:L,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===L?{backgroundColor:"white",color:f.color.black}:{color:f.color.secondary})})})))),!!T.length&&o.createElement(m,{pages:T,activePageIndex:L,onSelectListItem:M,onRemoveListItem:S})),T.map((function(e,n){var i=e.id,r=e.url,a=e.processing;return o.createElement("iframe",{key:i,className:"iframe-inner-content",title:i,src:"".concat(y).concat(r),width:"100%",style:{display:n!==L||a?"none":"block",height:"calc(100vh - 30px)"},frameBorder:0,onLoad:function(){return e=i,void j((function(n){return n.map((function(n){return n.id===e?t(t({},n),{processing:!1}):n}))}));var e}})})),o.createElement(c,{processing:T[L]&&!!T[L].processing,loadingPercentage:0,sx:{position:"inherit",width:"100%",height:"100vh"}}))};export{p as default};