@blocklet/launcher-layout 2.13.69 → 3.0.0

package/lib/nav.js

@@ -1,178 +1,132 @@
-import styled from '@emotion/styled';
-import Check from '@mui/icons-material/Check';
-import { Button, Skeleton, Tooltip, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-import { useStepContext } from './context/step';
-import AppHeader from './header';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Nav({
-  blockletMeta,
-  logoUrl,
-  locale,
-  useOfSkeleton,
-  subTitle,
-  loading,
-  extraNav
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import k from "@emotion/styled";
+import { Check as B } from "@mui/icons-material";
+import { Box as x, Skeleton as A, Tooltip as P, Button as g, Typography as I } from "@mui/material";
+import s from "prop-types";
+import { useStepContext as M } from "./context/step.js";
+import N from "./header.js";
+function _({
+  blockletMeta: e,
+  logoUrl: f = "",
+  locale: u = "",
+  useOfSkeleton: y = !1,
+  subTitle: w = "",
+  loading: d = !1,
+  extraNav: t = null,
+  sx: v
 }) {
-  const {
-    steps,
-    activeStep,
-    setActiveStepByKey,
-    setActiveStepByIndex,
-    getStepStatus,
-    canBackToStep
-  } = useStepContext();
-  const showSkeleton = useOfSkeleton ? loading : false;
-  const getNodeClassName = (step, index) => {
-    const classNameList = ['step-block'];
-    const status = getStepStatus(step.key);
-    switch (status) {
-      case 'current':
-        classNameList.push('step-active');
+  var m, b;
+  const { steps: $, activeStep: S, setActiveStepByKey: C, setActiveStepByIndex: z, getStepStatus: h, canBackToStep: T } = M(), c = y ? d : !1, j = (i, p) => {
+    const n = ["step-block"], a = h(i.key);
+    switch (a) {
+      case "current":
+        n.push("step-active");
         break;
-      case 'before':
-        classNameList.push('step-checked');
+      case "before":
+        n.push("step-checked");
         break;
-      case 'after':
-      default:
     }
-    switch (step.showChild) {
-      case 'activated':
-        if (status === 'after') {
-          classNameList.push('hide-step-child');
-        }
+    switch (i.showChild) {
+      case "activated":
+        a === "after" && n.push("hide-step-child");
         break;
-      case 'activating':
-        if (status === 'after' || status === 'before') {
-          classNameList.push('hide-step-child');
-        }
+      case "activating":
+        (a === "after" || a === "before") && n.push("hide-step-child");
         break;
-      case 'always':
-        classNameList.push('always-step-child');
+      case "always":
+        n.push("always-step-child");
         break;
-      default:
     }
-    if (step.optional === true && activeStep < index) {
-      classNameList.push('step-optional'); // optional在没有匹配到路由情况下会隐藏；超越这个步骤后就会一直出现
-    }
-    return classNameList.join(' ');
+    return i.optional === !0 && S < p && n.push("step-optional"), n.join(" ");
   };
-  return /*#__PURE__*/_jsxs(Div, {
-    children: [/*#__PURE__*/_jsx(AppHeader, {
-      blockletMeta: blockletMeta,
-      loading: loading,
-      logoUrl: logoUrl,
-      locale: locale,
-      subTitle: subTitle
-    }), /*#__PURE__*/_jsx(StepContainer, {
-      className: `${showSkeleton ? 'hide-child-step-desc' : ''}`,
-      children: steps.map((step, index) => {
-        const canBack = !showSkeleton && canBackToStep(index);
-        return /*#__PURE__*/_jsxs("div", {
-          className: getNodeClassName(step, index),
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "step-icon",
-            children: /*#__PURE__*/_jsx(Check, {
-              style: {
-                fontSize: 16
-              }
-            })
-          }), /*#__PURE__*/_jsx("div", {
-            className: "step-line"
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "step-content",
-            title: step.name,
-            children: [/*#__PURE__*/_jsx("span", {
-              className: `step-content-name ${canBack ? ' step-clickable' : ''}`,
+  return /* @__PURE__ */ l(q, { sx: v, children: [
+    /* @__PURE__ */ o(N, { blockletMeta: e, loading: d, logoUrl: f, locale: u, subTitle: w }),
+    /* @__PURE__ */ o(D, { className: `${c ? "hide-child-step-desc" : ""}`, children: $.map((i, p) => {
+      const n = !c && T(p);
+      return /* @__PURE__ */ l("div", { className: j(i, p), children: [
+        /* @__PURE__ */ o("div", { className: "step-icon", children: /* @__PURE__ */ o(B, { style: { fontSize: 16 } }) }),
+        /* @__PURE__ */ o("div", { className: "step-line" }),
+        /* @__PURE__ */ l("div", { className: "step-content", title: i.name, children: [
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: `step-content-name ${n ? " step-clickable" : ""}`,
               onClick: () => {
-                if (canBack) {
-                  if (step.key) {
-                    setActiveStepByKey(step.key);
+                if (n) {
+                  if (i.key) {
+                    C(i.key);
                     return;
                   }
-                  setActiveStepByIndex(index);
+                  z(p);
                 }
               },
-              children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
-                variant: "text",
-                width: 100
-              }) : step.name
-            }), step.description && /*#__PURE__*/_jsx("div", {
-              className: "step-desc",
-              children: step.description
-            }), step.children && step.children.length && /*#__PURE__*/_jsx("div", {
-              className: "step-children",
-              children: step.children.map(e => {
-                let className = '';
-                const childStepStatus = getStepStatus(e.key);
-                switch (childStepStatus) {
-                  case 'before':
-                    className = 'step-child-block-checked';
-                    break;
-                  case 'current':
-                    className = 'step-child-block-active';
-                    break;
-                  case 'after':
-                  default:
-                }
-                return /*#__PURE__*/_jsx("div", {
-                  className: `step-child-block ${className}`,
-                  children: e.name
-                }, e.key);
-              })
-            })]
-          })]
-        }, step.key);
-      })
-    }), extraNav && /*#__PURE__*/_jsxs("div", {
-      className: "extra-nav",
-      children: [extraNav.tooltipText ? /*#__PURE__*/_jsx(Tooltip, {
-        title: extraNav.tooltipText,
-        children: /*#__PURE__*/_jsx(Button, {
-          variant: extraNav.buttonProps?.variant || 'text',
-          onClick: () => {
-            if (extraNav.link) {
-              window.open(extraNav.link, '_blank');
+              children: c ? /* @__PURE__ */ o(A, { variant: "text", width: 100 }) : i.name
+            }
+          ),
+          i.description && /* @__PURE__ */ o("div", { className: "step-desc", children: i.description }),
+          i.children && i.children.length && /* @__PURE__ */ o("div", { className: "step-children", children: i.children.map((a) => {
+            let r = "";
+            switch (h(a.key)) {
+              case "before":
+                r = "step-child-block-checked";
+                break;
+              case "current":
+                r = "step-child-block-active";
+                break;
             }
+            return /* @__PURE__ */ o("div", { className: `step-child-block ${r}`, children: a.name }, a.key);
+          }) })
+        ] })
+      ] }, i.key);
+    }) }),
+    t && /* @__PURE__ */ l("div", { className: "extra-nav", children: [
+      t.tooltipText ? /* @__PURE__ */ o(P, { title: t.tooltipText, children: /* @__PURE__ */ o(
+        g,
+        {
+          variant: ((m = t.buttonProps) == null ? void 0 : m.variant) || "text",
+          onClick: () => {
+            t.link && window.open(t.link, "_blank");
           },
-          startIcon: extraNav.icon,
+          startIcon: t.icon,
           className: "extra-nav-button",
           size: "small",
-          ...extraNav.buttonProps,
-          children: extraNav.text
-        })
-      }) : /*#__PURE__*/_jsx(Button, {
-        variant: extraNav.buttonProps?.variant || 'text',
-        onClick: () => {
-          if (extraNav.link) {
-            window.open(extraNav.link, '_blank');
-          }
-        },
-        startIcon: extraNav.icon,
-        size: "small",
-        className: "extra-nav-button",
-        ...extraNav.buttonProps,
-        children: extraNav.text
-      }), extraNav.description && /*#__PURE__*/_jsx(Typography, {
-        variant: "caption",
-        sx: {
-          color: 'text.secondary',
-          mt: 0.5
-        },
-        component: "p",
-        className: "extra-nav-description",
-        children: extraNav.description
-      })]
-    })]
-  });
+          ...t.buttonProps,
+          children: t.text
+        }
+      ) }) : /* @__PURE__ */ o(
+        g,
+        {
+          variant: ((b = t.buttonProps) == null ? void 0 : b.variant) || "text",
+          onClick: () => {
+            t.link && window.open(t.link, "_blank");
+          },
+          startIcon: t.icon,
+          size: "small",
+          className: "extra-nav-button",
+          ...t.buttonProps,
+          children: t.text
+        }
+      ),
+      t.description && /* @__PURE__ */ o(
+        I,
+        {
+          variant: "caption",
+          sx: { color: "text.secondary", mt: 0.5 },
+          component: "p",
+          className: "extra-nav-description",
+          children: t.description
+        }
+      )
+    ] })
+  ] });
 }
-const Div = styled.div`
+const q = k(x)`
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(e) => e.theme.breakpoints.up("md")} {
     padding: 24px;
-    border-right: 1px solid ${props => props.theme.palette.divider};
+    border-right: 1px solid ${(e) => e.theme.palette.divider};
     flex: 0 0 280px;
     min-height: 48px;
 
@@ -181,7 +135,7 @@ const Div = styled.div`
     }
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     padding: 16px;
 
     .MuiStepConnector-lineVertical {
@@ -193,11 +147,11 @@ const Div = styled.div`
     padding: 0 !important;
     background: transparent;
 
-    ${props => props.theme.breakpoints.up('sm')} {
+    ${(e) => e.theme.breakpoints.up("sm")} {
       margin-top: 100px;
     }
 
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       margin-top: 40px;
     }
 
@@ -214,8 +168,7 @@ const Div = styled.div`
   .extra-nav-button {
     cursor: pointer;
   }
-`;
-const StepContainer = styled.div`
+`, D = k(x)`
   display: flex;
   flex-direction: column;
   margin-top: 60px;
@@ -225,13 +178,13 @@ const StepContainer = styled.div`
     margin-top: 32px;
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     margin-top: 30px;
   }
   .step-clickable {
     cursor: pointer;
     &:hover {
-      color: ${props => props.theme.palette.primary.main};
+      color: ${(e) => e.theme.palette.primary.main};
     }
   }
   .step-line {
@@ -243,7 +196,7 @@ const StepContainer = styled.div`
     width: 2px;
     height: 100%;
     opacity: 0.5;
-    background-color: ${props => props.theme.palette.grey[400]};
+    background-color: ${(e) => e.theme.palette.grey[400]};
     transition: all ease 0.2s;
   }
   .step-icon {
@@ -256,9 +209,9 @@ const StepContainer = styled.div`
     box-sizing: border-box;
     width: 24px;
     height: 24px;
-    border: 4px solid ${props => props.theme.palette.grey[400]};
+    border: 4px solid ${(e) => e.theme.palette.grey[400]};
     border-radius: 13px;
-    color: ${props => props.theme.palette.common.white};
+    color: ${(e) => e.theme.palette.common.white};
     transition: all ease 0.3s;
 
     & > * {
@@ -272,7 +225,7 @@ const StepContainer = styled.div`
     padding-top: 1px;
     margin-left: 22px;
     font-size: 16px;
-    color: ${props => props.theme.palette.grey[700]};
+    color: ${(e) => e.theme.palette.grey[700]};
     white-space: nowrap;
   }
   .step-desc {
@@ -280,11 +233,11 @@ const StepContainer = styled.div`
     font-size: 12px;
     font-weight: 500;
     height: 17px;
-    color: ${props => props.theme.palette.grey[700]};
+    color: ${(e) => e.theme.palette.grey[700]};
     transition: all ease 0.3s;
     overflow: hidden;
   }
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(e) => e.theme.breakpoints.up("md")} {
     .step-content-name {
       position: absolute;
       left: 0;
@@ -330,16 +283,16 @@ const StepContainer = styled.div`
     &.step-checked {
       opacity: 1;
       .step-icon {
-        color: ${props => props.theme.palette.primary.white};
-        border-color: ${props => props.theme.palette.primary.main};
-        background-color: ${props => props.theme.palette.primary.main};
+        color: ${(e) => e.theme.palette.primary.white};
+        border-color: ${(e) => e.theme.palette.primary.main};
+        background-color: ${(e) => e.theme.palette.primary.main};
         & > * {
           transform: scale(1);
         }
       }
 
       .step-line {
-        background-color: ${props => props.theme.palette.primary.main};
+        background-color: ${(e) => e.theme.palette.primary.main};
         opacity: 1;
       }
     }
@@ -347,10 +300,10 @@ const StepContainer = styled.div`
     &.step-active {
       opacity: 1;
       .step-icon {
-        border-color: ${props => props.theme.palette.primary.main};
+        border-color: ${(e) => e.theme.palette.primary.main};
       }
       .step-content {
-        color: ${props => props.theme.palette.primary.main};
+        color: ${(e) => e.theme.palette.primary.main};
       }
     }
 
@@ -386,7 +339,7 @@ const StepContainer = styled.div`
       height: 24px;
       line-height: 24px;
       font-size: 14px;
-      color: ${props => props.theme.palette.grey[500]};
+      color: ${(e) => e.theme.palette.grey[500]};
       transition: all ease 0.3s;
       &:first-of-type {
         margin-top: 8px;
@@ -395,11 +348,11 @@ const StepContainer = styled.div`
         padding-bottom: 40px;
       }
       &.step-child-block-active {
-        color: ${props => props.theme.palette.text.primary};
+        color: ${(e) => e.theme.palette.text.primary};
         font-weight: 700;
       }
       &.step-child-block-checked {
-        color: ${props => props.theme.palette.text.primary};
+        color: ${(e) => e.theme.palette.text.primary};
       }
     }
   }
@@ -419,21 +372,16 @@ const StepContainer = styled.div`
     }
   }
 `;
-Nav.propTypes = {
-  blockletMeta: PropTypes.object.isRequired,
-  logoUrl: PropTypes.string,
-  locale: PropTypes.string,
-  useOfSkeleton: PropTypes.bool,
-  subTitle: PropTypes.string,
-  loading: PropTypes.bool,
-  extraNav: PropTypes.object
+_.propTypes = {
+  blockletMeta: s.object.isRequired,
+  logoUrl: s.string,
+  locale: s.string,
+  useOfSkeleton: s.bool,
+  subTitle: s.string,
+  loading: s.bool,
+  extraNav: s.object,
+  sx: s.any
 };
-Nav.defaultProps = {
-  logoUrl: '',
-  locale: '',
-  useOfSkeleton: false,
-  subTitle: '',
-  loading: false,
-  extraNav: null
+export {
+  _ as default
 };
-export default Nav;

package/lib/page-header.js

@@ -1,28 +1,15 @@
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PageHeader({
-  title,
-  subTitle,
-  onClickBack,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Content, {
-    ...rest,
-    children: [onClickBack && /*#__PURE__*/_jsx(ArrowBackIosIcon, {
-      className: "back-btn",
-      onClick: onClickBack
-    }), /*#__PURE__*/_jsx("div", {
-      className: "title",
-      children: title
-    }), /*#__PURE__*/_jsx("div", {
-      className: "sub-title",
-      children: subTitle
-    })]
-  });
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import p from "@emotion/styled";
+import e from "prop-types";
+import { ArrowBackIos as l } from "@mui/icons-material";
+function a({ title: t = "", subTitle: r = "", onClickBack: i = "", ...n }) {
+  return /* @__PURE__ */ s(c, { ...n, children: [
+    i && /* @__PURE__ */ o(l, { className: "back-btn", onClick: i }),
+    /* @__PURE__ */ o("div", { className: "title", children: t }),
+    /* @__PURE__ */ o("div", { className: "sub-title", children: r })
+  ] });
 }
-const Content = styled.div`
+const c = p.div`
   position: relative;
   width: 100%;
   text-align: center;
@@ -30,16 +17,16 @@ const Content = styled.div`
   .title {
     font-size: 24px;
     font-weight: 700;
-    color: ${props => props.theme.palette.text.primary};
+    color: ${(t) => t.theme.palette.text.primary};
 
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(t) => t.theme.breakpoints.down("md")} {
       font-size: 20px;
     }
   }
 
   .sub-title {
     font-size: 14px;
-    color: ${props => props.theme.palette.text.secondary};
+    color: ${(t) => t.theme.palette.text.secondary};
     padding: 0 14px;
     font-weight: 400;
   }
@@ -48,19 +35,16 @@ const Content = styled.div`
     position: absolute;
     left: 0;
     top: 8px;
-    color: ${props => props.theme.palette.grey[500]};
+    color: ${(t) => t.theme.palette.grey[500]};
     font-size: 18px;
     cursor: pointer;
   }
 `;
-export default PageHeader;
-PageHeader.propTypes = {
-  title: PropTypes.string,
-  subTitle: PropTypes.string,
-  onClickBack: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+a.propTypes = {
+  title: e.string,
+  subTitle: e.string,
+  onClickBack: e.oneOfType([e.func, e.string])
+};
+export {
+  a as default
 };
-PageHeader.defaultProps = {
-  title: '',
-  subTitle: '',
-  onClickBack: ''
-};

package/lib/small-circle-progress.js

@@ -1,50 +1,40 @@
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import CircularProgress from '@mui/material/CircularProgress';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SmallCircleProgress({
-  value,
-  size,
-  style,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Content, {
-    style: {
-      width: size,
-      height: size,
-      ...style
-    },
-    ...rest,
-    children: [/*#__PURE__*/_jsx(CircularProgress, {
-      variant: "determinate",
-      role: "progressbar",
-      value: 100,
-      size: size,
-      "aria-label": "decorative progress bar",
-      thickness: 10,
-      sx: {
-        color: 'grey.300'
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import e from "prop-types";
+import n from "@emotion/styled";
+import { CircularProgress as o } from "@mui/material";
+function p({ value: s, size: r = 10, style: i = {}, ...a }) {
+  return /* @__PURE__ */ l(m, { style: { width: r, height: r, ...i }, ...a, children: [
+    /* @__PURE__ */ t(
+      o,
+      {
+        variant: "determinate",
+        role: "progressbar",
+        value: 100,
+        size: r,
+        "aria-label": "decorative progress bar",
+        thickness: 10,
+        sx: { color: "grey.300" }
       }
-    }), /*#__PURE__*/_jsx(CircularProgress, {
-      variant: "determinate",
-      value: value,
-      role: "progressbar",
-      size: size,
-      thickness: 10,
-      "aria-label": "main progress bar"
-    })]
-  });
+    ),
+    /* @__PURE__ */ t(
+      o,
+      {
+        variant: "determinate",
+        value: s,
+        role: "progressbar",
+        size: r,
+        thickness: 10,
+        "aria-label": "main progress bar"
+      }
+    )
+  ] });
 }
-SmallCircleProgress.propTypes = {
-  value: PropTypes.number.isRequired,
-  size: PropTypes.number,
-  style: PropTypes.object
-};
-SmallCircleProgress.defaultProps = {
-  size: 10,
-  style: {}
+p.propTypes = {
+  value: e.number.isRequired,
+  size: e.number,
+  style: e.object
 };
-const Content = styled.span`
+const m = n.span`
   display: inline-block;
   position: relative;
   > * {
@@ -54,4 +44,7 @@ const Content = styled.span`
     width: 100%;
     height: 100%;
   }
-`;
+`;
+export {
+  p as default
+};