@blocklet/launcher-layout 2.13.69 → 3.0.0

package/lib/index.js

@@ -1,244 +1,182 @@
-import Center from '@arcblock/ux/lib/Center';
-import { deepmerge } from '@arcblock/ux/lib/Theme';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
-import { CircularProgress, Hidden, styled, StyledEngineProvider, ThemeProvider, Typography, useMediaQuery, useTheme } from '@mui/material';
-import isObject from 'lodash/isObject';
-import PropTypes from 'prop-types';
-import { Suspense, isValidElement } from 'react';
-import { HeaderAddons } from '@arcblock/ux/lib/Header';
-import { useStepContext } from './context/step';
-import AppHeader from './header';
-import { getTranslations } from './locale';
-import Nav from './nav';
-import SmallCircleProgress from './small-circle-progress';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const HEADER_HEIGHT_MD = '72px';
-const MobileContent = styled('div')`
+import { jsx as i, jsxs as r, Fragment as O } from "react/jsx-runtime";
+import z from "@arcblock/ux/lib/Center";
+import { deepmerge as A } from "@arcblock/ux/lib/Theme";
+import { ThemeProvider as W } from "@emotion/react";
+import { styled as l, useTheme as R, useMediaQuery as _, StyledEngineProvider as D, ThemeProvider as F, Typography as k, CircularProgress as q } from "@mui/material";
+import G from "lodash/isObject";
+import t from "prop-types";
+import { isValidElement as I, Suspense as Q } from "react";
+import { HeaderAddons as V } from "@arcblock/ux/lib/Header";
+import { useStepContext as B } from "./context/step.js";
+import J from "./header.js";
+import { getTranslations as K } from "./locale.js";
+import U from "./nav.js";
+import X from "./small-circle-progress.js";
+const p = "72px", Y = l("div")`
   box-sizing: border-box;
   display: flex;
   overflow: hidden;
   width: 100%;
   height: 100%;
-  padding-top: ${HEADER_HEIGHT_MD};
-`;
-const PcContent = styled('div')`
+  padding-top: ${p};
+`, Z = l("div")`
   display: flex;
   min-width: 900px;
-  max-width: ${props => props.contentMaxWidth};
+  max-width: ${(e) => e.contentMaxWidth};
   max-height: 880px;
   border-radius: 8px;
-  background-color: ${({
-  theme
-}) => theme.palette.background.paper};
-  width: ${props => props.width || '80%'};
-  height: ${props => props.height || '80%'};
+  background-color: ${({ theme: e }) => e.palette.background.paper};
+  width: ${(e) => e.width || "80%"};
+  height: ${(e) => e.height || "80%"};
 
   @media (max-height: 1200px) {
-    margin-top: ${HEADER_HEIGHT_MD};
+    margin-top: ${p};
     height: 100%;
     max-height: 100%;
   }
 `;
-function Layout({
-  blockletMeta: tmpBlockletMeta,
-  loading,
-  children,
-  logoUrl,
-  locale,
-  header,
-  headerEndAddons,
-  pcWidth,
-  pcHeight,
-  navLogo,
-  useOfSkeleton,
-  stepTip,
-  navSubTitle,
-  contentMaxWidth,
-  theme: userTheme,
-  themeOverrides,
-  extraNav,
-  ...rest
+function L({
+  blockletMeta: e = {},
+  loading: c = !1,
+  children: T,
+  logoUrl: m = "",
+  locale: d = "en",
+  header: s = null,
+  headerEndAddons: h = null,
+  pcWidth: j = "80%",
+  navLogo: n = "",
+  useOfSkeleton: v = !0,
+  navSubTitle: u = "",
+  contentMaxWidth: g = "1245px",
+  theme: C = null,
+  themeOverrides: S = null,
+  extraNav: o = null,
+  ...M
 }) {
-  const parentTheme = useTheme();
-  const isMobile = useMediaQuery(t => t.breakpoints.down('md'));
-  const {
-    activeStep,
-    totalStepsCount
-  } = useStepContext();
-  const blockletMeta = tmpBlockletMeta || {};
-  const Container = isMobile ? MobileContent : PcContent;
-  const translations = getTranslations(locale);
-  if (navLogo && ! /*#__PURE__*/isValidElement(navLogo) && isObject(navLogo)) {
-    if (isMobile) {
-      // eslint-disable-next-line no-param-reassign
-      navLogo = navLogo.mobile;
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      navLogo = /*#__PURE__*/_jsx(LogoContainer, {
-        children: navLogo.desktop
-      });
-    }
-  }
-  const mergedTheme = deepmerge(parentTheme, userTheme || {}, themeOverrides || {});
-  return /*#__PURE__*/_jsx(StyledEngineProvider, {
-    injectFirst: true,
-    children: /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: mergedTheme,
-      children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
-        theme: mergedTheme,
-        children: /*#__PURE__*/_jsxs(Root, {
-          ...rest,
-          children: [/*#__PURE__*/_jsxs(Header, {
-            maxWidth: contentMaxWidth,
-            width: pcWidth,
-            className: "ll-header",
-            children: [header && header, !header && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [isMobile && /*#__PURE__*/_jsx("div", {
-                className: "left",
-                children: /*#__PURE__*/_jsx(AppHeader, {
-                  blockletMeta: blockletMeta,
-                  navLogo: navLogo,
-                  subTitle: /*#__PURE__*/_jsxs("span", {
-                    children: [`${navSubTitle || translations.defaultNavSubTitle} ${activeStep + 1}/${totalStepsCount}`, /*#__PURE__*/_jsx(SmallCircleProgress, {
-                      value: (activeStep + 1) / totalStepsCount * 100,
-                      style: {
-                        marginLeft: 3
-                      }
-                    }), extraNav && /*#__PURE__*/_jsx(Typography, {
-                      variant: "caption",
-                      className: "extra-nav-text",
-                      onClick: () => {
-                        if (extraNav.link) {
-                          window.open(extraNav.link, '_blank');
-                        }
-                      },
-                      sx: {
-                        ml: 1,
-                        color: 'primary.main',
-                        cursor: 'pointer',
-                        '&:hover': {
-                          opacity: 0.8
-                        }
-                      },
-                      children: extraNav.appText || extraNav.text
-                    })]
-                  }),
-                  logoUrl: logoUrl,
-                  locale: locale,
-                  loading: loading
-                })
-              }), navLogo && !isMobile && /*#__PURE__*/_jsx("div", {
-                className: "left",
-                children: navLogo
-              }), headerEndAddons && /*#__PURE__*/_jsx(HeaderAddons, {
-                className: "right",
-                children: headerEndAddons
-              })]
-            })]
-          }), /*#__PURE__*/_jsxs(Container, {
-            contentMaxWidth: contentMaxWidth,
-            className: "ll-container",
-            children: [/*#__PURE__*/_jsx(Hidden, {
-              mdDown: true,
-              children: /*#__PURE__*/_jsx(Nav, {
-                locale: locale,
-                blockletMeta: blockletMeta,
-                logoUrl: logoUrl,
-                useOfSkeleton: useOfSkeleton,
-                subTitle: navSubTitle,
-                loading: loading,
-                extraNav: extraNav
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              component: "div",
-              className: "layout-content",
-              children: /*#__PURE__*/_jsx(Suspense, {
-                fallback: /*#__PURE__*/_jsx(Center, {
-                  relative: "parent",
-                  children: /*#__PURE__*/_jsx(CircularProgress, {
-                    style: {
-                      marginTop: 36
+  const P = R(), a = _((N) => N.breakpoints.down("md")), { activeStep: x, totalStepsCount: f } = B(), b = e || {}, H = a ? Y : Z, E = K(d);
+  n && !I(n) && G(n) && (a ? n = n.mobile : n = /* @__PURE__ */ i(ie, { children: n.desktop }));
+  const y = A(P, C || {}, S || {});
+  return /* @__PURE__ */ i(D, { injectFirst: !0, children: /* @__PURE__ */ i(F, { theme: y, children: /* @__PURE__ */ i(W, { theme: y, children: /* @__PURE__ */ r(te, { ...M, children: [
+    /* @__PURE__ */ r(ee, { maxWidth: g, width: j, className: "ll-header", children: [
+      s && s,
+      !s && /* @__PURE__ */ r(O, { children: [
+        a && /* @__PURE__ */ i("div", { className: "left", children: /* @__PURE__ */ i(
+          J,
+          {
+            blockletMeta: b,
+            navLogo: n,
+            subTitle: /* @__PURE__ */ r("span", { children: [
+              `${u || E.defaultNavSubTitle} ${x + 1}/${f}`,
+              /* @__PURE__ */ i(
+                X,
+                {
+                  value: (x + 1) / f * 100,
+                  style: { marginLeft: 3 }
+                }
+              ),
+              o && /* @__PURE__ */ i(
+                k,
+                {
+                  variant: "caption",
+                  className: "extra-nav-text",
+                  onClick: () => {
+                    o.link && window.open(o.link, "_blank");
+                  },
+                  sx: {
+                    ml: 1,
+                    color: "primary.main",
+                    cursor: "pointer",
+                    "&:hover": {
+                      opacity: 0.8
                     }
-                  })
-                }),
-                children: children
-              })
-            })]
-          })]
-        })
-      })
-    })
-  });
+                  },
+                  children: o.appText || o.text
+                }
+              )
+            ] }),
+            logoUrl: m,
+            locale: d,
+            loading: c
+          }
+        ) }),
+        n && !a && /* @__PURE__ */ i("div", { className: "left", children: n }),
+        h && /* @__PURE__ */ i(V, { className: "right", children: h })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(H, { contentMaxWidth: g, className: "ll-container", children: [
+      /* @__PURE__ */ i(
+        U,
+        {
+          sx: {
+            display: {
+              xs: "none",
+              md: "block"
+            }
+          },
+          locale: d,
+          blockletMeta: b,
+          logoUrl: m,
+          useOfSkeleton: v,
+          subTitle: u,
+          loading: c,
+          extraNav: o
+        }
+      ),
+      /* @__PURE__ */ i(k, { component: "div", className: "layout-content", children: /* @__PURE__ */ i(
+        Q,
+        {
+          fallback: /* @__PURE__ */ i(z, { relative: "parent", children: /* @__PURE__ */ i(q, { style: { marginTop: 36 } }) }),
+          children: T
+        }
+      ) })
+    ] })
+  ] }) }) }) });
 }
-Layout.propTypes = {
-  loading: PropTypes.bool,
-  blockletMeta: PropTypes.object,
-  children: PropTypes.object.isRequired,
-  logoUrl: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'zh']),
-  header: PropTypes.any,
-  headerEndAddons: PropTypes.any,
-  pcWidth: PropTypes.any,
-  pcHeight: PropTypes.any,
-  contentMaxWidth: PropTypes.string,
-  navLogo: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
-  useOfSkeleton: PropTypes.bool,
-  stepTip: PropTypes.string,
-  navSubTitle: PropTypes.string,
+L.propTypes = {
+  loading: t.bool,
+  blockletMeta: t.object,
+  children: t.object.isRequired,
+  logoUrl: t.string,
+  locale: t.oneOf(["en", "zh"]),
+  header: t.any,
+  headerEndAddons: t.any,
+  pcWidth: t.any,
+  pcHeight: t.any,
+  contentMaxWidth: t.string,
+  navLogo: t.oneOfType([t.node, t.object]),
+  useOfSkeleton: t.bool,
+  stepTip: t.string,
+  navSubTitle: t.string,
   /**  @deprecated Please use themeOverrides instead */
-  theme: PropTypes.object,
-  themeOverrides: PropTypes.object,
-  extraNav: PropTypes.object
+  theme: t.object,
+  themeOverrides: t.object,
+  extraNav: t.object
 };
-Layout.defaultProps = {
-  loading: false,
-  blockletMeta: {},
-  logoUrl: '',
-  locale: 'en',
-  header: null,
-  headerEndAddons: null,
-  pcWidth: '80%',
-  pcHeight: '80%',
-  contentMaxWidth: '1245px',
-  navLogo: '',
-  useOfSkeleton: true,
-  stepTip: '',
-  navSubTitle: '',
-  theme: null,
-  themeOverrides: null,
-  extraNav: null
-};
-
-// 针对 safari 下的 chrome 适配
-const ua = navigator.userAgent.toLocaleLowerCase();
-let injectStyle = '';
-if (ua.includes('iphone os') && ua.includes('crios')) {
-  injectStyle = 'height: calc(100vh - 60px);';
-}
-const Header = styled('header')`
-  width: ${props => props.width || '80%'};
+const w = navigator.userAgent.toLocaleLowerCase();
+let $ = "";
+w.includes("iphone os") && w.includes("crios") && ($ = "height: calc(100vh - 60px);");
+const ee = l("header")`
+  width: ${(e) => e.width || "80%"};
   min-width: 900px;
   box-sizing: border-box;
   position: absolute;
   z-index: 200;
   top: 0;
   display: flex;
-  max-width: ${props => props.maxWidth};
+  max-width: ${(e) => e.maxWidth};
   height: 68px;
   align-items: center;
 
-  ${props => `${props.theme.breakpoints.up('sm')} and (min-height: 900px)`} {
+  ${(e) => `${e.theme.breakpoints.up("sm")} and (min-height: 900px)`} {
     justify-content: flex-end;
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     min-width: 360px;
     width: 100%;
-    height: ${HEADER_HEIGHT_MD};
+    height: ${p};
     justify-content: space-between;
-    background-color: ${({
-  theme
-}) => theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[100]};
+    background-color: ${({ theme: e }) => e.palette.mode === "dark" ? e.palette.background.default : e.palette.grey[100]};
   }
 
   .left {
@@ -246,17 +184,14 @@ const Header = styled('header')`
     display: flex;
     align-items: center;
   }
-`;
-const Root = styled('div')`
+`, te = l("div")`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   letter-spacing: normal;
-  background: ${({
-  theme
-}) => theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[100]};
-  ${injectStyle}
+  background: ${({ theme: e }) => e.palette.mode === "dark" ? e.palette.background.default : e.palette.grey[100]};
+  ${$}
 
   header:empty {
     display: none;
@@ -287,17 +222,16 @@ const Root = styled('div')`
     flex-grow: 1;
     height: 100%;
     padding: 32px;
-    background-color: ${({
-  theme
-}) => theme.palette.background.paper};
+    background-color: ${({ theme: e }) => e.palette.background.paper};
 
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       padding: 16px;
     }
   }
-`;
-const LogoContainer = styled('div')`
+`, ie = l("div")`
   display: block;
   margin-top: 4px;
 `;
-export default Layout;
+export {
+  L as default
+};

package/lib/info-list.js

@@ -1,45 +1,58 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export default function InfoTable({
-  infoList = []
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    className: "info-table",
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: {
-        xs: '1fr',
-        md: 'max-content 1fr'
-      },
-      columnGap: 4,
-      rowGap: 1.5
-    },
-    children: infoList.map(item => /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Box, {
-        component: "span",
-        sx: {
-          fontWeight: 'bold',
-          whiteSpace: 'nowrap'
+import { jsx as n, jsxs as p, Fragment as s } from "react/jsx-runtime";
+import r from "prop-types";
+import { Box as o } from "@mui/material";
+function t({ infoList: a = [] }) {
+  return /* @__PURE__ */ n(
+    o,
+    {
+      className: "info-table",
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          md: "max-content 1fr"
         },
-        children: item.key
-      }), /*#__PURE__*/_jsx(Box, {
-        component: "span",
-        sx: {
-          marginTop: {
-            xs: -1,
-            md: 0
+        columnGap: 4,
+        rowGap: 1.5
+      },
+      children: a.map((e) => /* @__PURE__ */ p(s, { children: [
+        /* @__PURE__ */ n(
+          o,
+          {
+            component: "span",
+            sx: {
+              fontWeight: "bold",
+              whiteSpace: "nowrap"
+            },
+            children: e.key
           }
-        },
-        children: item.value
-      })]
-    }))
-  });
+        ),
+        /* @__PURE__ */ n(
+          o,
+          {
+            component: "span",
+            sx: {
+              marginTop: {
+                xs: -1,
+                md: 0
+              }
+            },
+            children: e.value
+          }
+        )
+      ] }))
+    }
+  );
 }
-InfoTable.propTypes = {
+t.propTypes = {
   // eslint-disable-next-line react/require-default-props
-  infoList: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    value: PropTypes.string
-  }))
-};
+  infoList: r.arrayOf(
+    r.shape({
+      key: r.string,
+      value: r.string
+    })
+  )
+};
+export {
+  t as default
+};