@blocklet/launcher-layout 1.7.31 → 1.7.34

package/lib/compact-layout.js

@@ -57,7 +57,7 @@ function CompactLayout(_ref) {
         }
 
         inTimer = null;
-      }, 100);
+      }, 50);
     };
 
     let resizeObs;

package/lib/context/step.js

@@ -21,47 +21,134 @@ const {
   Provider
 } = StepContext;
 
+const matchPath = function matchPath(path, exact) {
+  let currentPathname = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname.replace(/\/$/, '');
+
+  if (!path) {
+    return false;
+  }
+
+  if (exact) {
+    return path === currentPathname;
+  }
+
+  return new RegExp(path).test(currentPathname);
+};
+
 function StepProvider(_ref) {
   let {
     children,
     steps,
     mode
   } = _ref;
-  const [activeStep, setActiveStepByIndex] = (0, _react.useState)(0); // can use this to set the activeStep by key
+  const [activeStepKey, setActiveStepKey] = (0, _react.useState)('');
+
+  if (!activeStepKey && steps.length) {
+    setActiveStepKey(steps[0].key);
+  }
+
+  const flatSteps = steps.map(item => {
+    if (item.children) {
+      return [{
+        key: item.key,
+        hasChild: true
+      }, item.children.map(childItem => {
+        return {
+          parentKey: item.key,
+          key: childItem.key
+        };
+      })];
+    }
+
+    return {
+      key: item.key
+    };
+  }).flat(Infinity);
+  const totalSteps = flatSteps.filter(e => !e.hasChild); // 根据 key 获取当前 step 处于的状态；before已超过该步骤；current处于当前步骤；after还未到这个步骤；
+
+  const getStepStatus = key => {
+    let activeParentStepKey;
+    const activeIndex = flatSteps.findIndex(e => {
+      if (e.key === activeStepKey) {
+        activeParentStepKey = e.parentKey;
+        return true;
+      }
+
+      return false;
+    });
+
+    if (activeParentStepKey === key) {
+      return 'current';
+    }
+
+    const targetIndex = flatSteps.findIndex(e => e.key === key);
+
+    if (targetIndex !== -1) {
+      if (targetIndex === activeIndex) {
+        return 'current';
+      }
+
+      if (targetIndex < activeIndex) {
+        return 'before';
+      }
+    }
+
+    return 'after';
+  }; // can use this to set the activeStep by key
+
 
   function setActiveStepByKey(key) {
-    const index = steps.findIndex(step => step.key === key);
+    setActiveStepKey(key);
+  } // TODO: setIndex模式很难定位到child step，尽量使用key方式去定位
+
 
-    if (index > -1) {
-      setActiveStepByIndex(index);
+  function setActiveStepByIndex(index) {
+    if (typeof index === 'function') {
+      const newIndex = index(totalSteps.findIndex(e => e.key === activeStepKey));
+      setActiveStepKey(totalSteps[newIndex].key);
+    } else {
+      setActiveStepKey(totalSteps[index].key);
     }
   }
 
+  const activeStep = totalSteps.findIndex(e => e.key === activeStepKey);
   (0, _react.useEffect)(() => {
     if (mode === 'history') {
-      let stepIndex = -1;
-      let matchedLength = 0;
-      steps.forEach((step, index) => {
-        var _step$path;
-
-        const currentPathname = window.location.pathname.replace(/\/$/, '');
+      let stepKey = '';
+      steps.some(step => {
+        if (step.children && step.children.length) {
+          return step.children.some(childStep => {
+            if (matchPath(childStep.path, childStep.exact)) {
+              stepKey = childStep.key;
+              return true;
+            }
+
+            return false;
+          });
+        }
 
-        if (new RegExp(step.path).test(currentPathname) && ((_step$path = step.path) === null || _step$path === void 0 ? void 0 : _step$path.length) > matchedLength) {
-          stepIndex = index;
-          matchedLength = step.path.length;
+        if (matchPath(step.path, step.exact)) {
+          stepKey = step.key;
+          return true;
         }
+
+        return false;
       });
-      setActiveStepByIndex(stepIndex);
+
+      if (stepKey) {
+        setActiveStepKey(stepKey);
+      }
     }
 
     return () => {};
   }, [steps, window.location.pathname]);
   const value = {
     steps,
-    activeStep,
-    totalStepsCount: steps.length,
-    setActiveStepByIndex,
+    totalStepsCount: totalSteps.length,
+    getStepStatus,
     setActiveStepByKey,
+    setActiveStepByIndex,
+    activeStep,
     // judge node can be clicked to back if the mode is 'memory'
     canBackToStep: nodeIndex => {
       return mode === 'memory' && activeStep !== 0 && nodeIndex < activeStep;

package/lib/header.js

@@ -40,8 +40,14 @@ function AppHeader(_ref) {
   const blockletSize = isMobile ? 18 : 48;
   const appNameRef = (0, _react.useRef)(null);
   const [appNameSize, setAppNameSize] = (0, _react.useState)('');
-
-  let blockletIcon = /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  let blockletIcon = isMobile ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    variant: "rectangular",
+    width: 100,
+    height: 16,
+    style: {
+      marginTop: 4
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     variant: "rectangular",
     width: blockletSize,
     height: blockletSize
@@ -112,4 +118,4 @@ AppHeader.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "header__Container",
   componentId: "sc-1twhts3-0"
-})(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:14px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:700;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:12px;line-height:16px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));
+})(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:14px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:700;", "{font-size:18px;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:12px;line-height:16px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));

package/lib/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Center = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,7 +17,11 @@ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _isObject = _interopRequireDefault(require("lodash/isObject"));
 
 var _step = require("./context/step");
 
@@ -29,6 +33,10 @@ var _nav = _interopRequireDefault(require("./nav"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const MobileContent = _styledComponents.default.div.withConfig({
   displayName: "src__MobileContent",
   componentId: "sc-11nbl7p-0"
@@ -37,7 +45,7 @@ const MobileContent = _styledComponents.default.div.withConfig({
 const PcContent = _styledComponents.default.div.withConfig({
   displayName: "src__PcContent",
   componentId: "sc-11nbl7p-1"
-})(["display:flex;max-width:1245px;min-width:930px;max-height:880px;border-radius:8px;background-color:#fff;"]);
+})(["display:flex;max-width:1245px;min-width:900px;max-height:880px;border-radius:8px;background-color:#fff;"]);
 
 function Layout(_ref) {
   let {
@@ -48,7 +56,8 @@ function Layout(_ref) {
     headerEndAddons,
     pcWidth,
     pcHeight,
-    navLogo
+    navLogo,
+    useOfSkeleton
   } = _ref;
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const {
@@ -57,19 +66,25 @@ function Layout(_ref) {
   } = (0, _step.useStepContext)();
   const Container = isMobile ? MobileContent : PcContent;
   const translations = (0, _locale.getTranslations)(locale);
+
+  if (navLogo && ! /*#__PURE__*/(0, _react.isValidElement)(navLogo) && (0, _isObject.default)(navLogo)) {
+    if (isMobile) {
+      // eslint-disable-next-line no-param-reassign
+      navLogo = navLogo.mobile;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      navLogo = /*#__PURE__*/_react.default.createElement(LogoContainer, null, navLogo.desktop);
+    }
+  }
+
   return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement("header", {
     className: "root-header"
-  }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
-    mdUp: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, isMobile && /*#__PURE__*/_react.default.createElement("div", {
     className: "left"
   }, /*#__PURE__*/_react.default.createElement(_header.default, {
-    title: blockletMeta.title ? /*#__PURE__*/_react.default.createElement("span", {
+    title: /*#__PURE__*/_react.default.createElement("span", {
       className: "ellipsis-title"
-    }, blockletMeta.title) : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-      variant: "text",
-      width: 100
-    }),
+    }, blockletMeta.title),
     navLogo: navLogo,
     subTitle: /*#__PURE__*/_react.default.createElement("span", null, "".concat(translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/_react.default.createElement("span", {
       className: "circular"
@@ -90,7 +105,7 @@ function Layout(_ref) {
     logoUrl: logoUrl,
     did: blockletMeta.did,
     locale: locale
-  }))), navLogo && !isMobile && /*#__PURE__*/_react.default.createElement("div", {
+  })), navLogo && !isMobile && /*#__PURE__*/_react.default.createElement("div", {
     className: "left"
   }, navLogo), headerEndAddons && /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
@@ -104,8 +119,13 @@ function Layout(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_nav.default, {
     locale: locale,
     blockletMeta: blockletMeta,
-    logoUrl: logoUrl
-  })), children));
+    logoUrl: logoUrl,
+    useOfSkeleton: useOfSkeleton
+  })), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(_Center.default, {
+      relative: "parent"
+    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null))
+  }, children)));
 }
 
 Layout.propTypes = {
@@ -116,7 +136,8 @@ Layout.propTypes = {
   headerEndAddons: _propTypes.default.any,
   pcWidth: _propTypes.default.any,
   pcHeight: _propTypes.default.any,
-  navLogo: _propTypes.default.any
+  navLogo: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
+  useOfSkeleton: _propTypes.default.bool
 };
 Layout.defaultProps = {
   logoUrl: '',
@@ -124,7 +145,8 @@ Layout.defaultProps = {
   headerEndAddons: null,
   pcWidth: '80%',
   pcHeight: '80%',
-  navLogo: ''
+  navLogo: '',
+  useOfSkeleton: true
 }; // 针对 safari 下的 chrome 适配
 
 const ua = navigator.userAgent.toLocaleLowerCase();
@@ -137,13 +159,12 @@ if (ua.includes('iphone os') && ua.includes('crios')) {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "src__Root",
   componentId: "sc-11nbl7p-2"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{box-sizing:border-box;position:fixed;z-index:200;top:0;display:flex;width:100%;max-width:1245px;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{height:56px;padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{box-sizing:border-box;position:absolute;z-index:200;top:0;display:flex;width:100%;max-width:1245px;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{height:56px;padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
 
-const Center = _styledComponents.default.div.withConfig({
-  displayName: "src__Center",
+const LogoContainer = _styledComponents.default.div.withConfig({
+  displayName: "src__LogoContainer",
   componentId: "sc-11nbl7p-3"
-})(["width:100%;min-height:100vh;padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;"]);
+})(["display:block;margin-top:4px;"]);
 
-exports.Center = Center;
 var _default = Layout;
 exports.default = _default;

package/lib/nav.js

@@ -27,16 +27,65 @@ function Nav(_ref) {
   let {
     blockletMeta,
     logoUrl,
-    locale
+    locale,
+    useOfSkeleton
   } = _ref;
   const {
     steps,
     activeStep,
     setActiveStepByKey,
     setActiveStepByIndex,
+    getStepStatus,
     canBackToStep
   } = (0, _step.useStepContext)();
-  const showSkeleton = !blockletMeta || !blockletMeta.title;
+  const showSkeleton = useOfSkeleton ? !blockletMeta || !blockletMeta.title : false;
+
+  const getNodeClassName = (step, index) => {
+    const classNameList = ['step-block'];
+    const status = getStepStatus(step.key);
+
+    switch (status) {
+      case 'current':
+        classNameList.push('step-active');
+        break;
+
+      case 'before':
+        classNameList.push('step-checked');
+        break;
+
+      case 'after':
+      default:
+    }
+
+    switch (step.showChild) {
+      case 'activated':
+        if (status === 'after') {
+          classNameList.push('hide-step-child');
+        }
+
+        break;
+
+      case 'activating':
+        if (status === 'after' || status === 'before') {
+          classNameList.push('hide-step-child');
+        }
+
+        break;
+
+      case 'always':
+        classNameList.push('always-step-child');
+        break;
+
+      default:
+    }
+
+    if (step.optional === true && activeStep < index) {
+      classNameList.push('step-optional'); // optional在没有匹配到路由情况下会隐藏；超越这个步骤后就会一直出现
+    }
+
+    return classNameList.join(' ');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Div, {
     className: "nav-sidebar"
   }, /*#__PURE__*/_react.default.createElement(_header.default, {
@@ -51,39 +100,12 @@ function Nav(_ref) {
     did: blockletMeta.did,
     logoUrl: logoUrl,
     locale: locale
-  }), /*#__PURE__*/_react.default.createElement(StepContainer, null, steps.map((step, index) => {
+  }), /*#__PURE__*/_react.default.createElement(StepContainer, {
+    className: "".concat(showSkeleton ? 'hide-child-step-desc' : '')
+  }, steps.map((step, index) => {
     const canBack = !showSkeleton && canBackToStep(index);
-
-    const nodeClassName = (() => {
-      const classNameList = ['step-block'];
-
-      if (activeStep === index) {
-        classNameList.push('step-active');
-      }
-
-      if (activeStep > index) {
-        classNameList.push('step-checked');
-      }
-
-      if (step.optional === true && activeStep < index) {
-        classNameList.push('step-optional');
-      }
-
-      return classNameList.join(' ');
-    })();
-
     return /*#__PURE__*/_react.default.createElement("div", {
-      onClick: () => {
-        if (canBack) {
-          if (step.key) {
-            setActiveStepByKey(step.key);
-            return;
-          }
-
-          setActiveStepByIndex(index);
-        }
-      },
-      className: nodeClassName,
+      className: getNodeClassName(step, index),
       key: step.key
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "step-icon"
@@ -94,14 +116,49 @@ function Nav(_ref) {
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "step-line"
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "step-name",
+      className: "step-content",
       title: step.name
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "step-name-content ".concat(canBack ? ' step-clickable' : '')
+      className: "step-content-name ".concat(canBack ? ' step-clickable' : ''),
+      onClick: () => {
+        if (canBack) {
+          if (step.key) {
+            setActiveStepByKey(step.key);
+            return;
+          }
+
+          setActiveStepByIndex(index);
+        }
+      }
     }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
       variant: "text",
       width: 100
-    }) : step.name)));
+    }) : step.name), step.description && /*#__PURE__*/_react.default.createElement("div", {
+      className: "step-desc"
+    }, step.description), step.children && step.children.length && /*#__PURE__*/_react.default.createElement("div", {
+      className: "step-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__*/_react.default.createElement("div", {
+        className: "step-child-block ".concat(className),
+        key: e.key
+      }, e.name);
+    }))));
   })));
 }
 
@@ -113,21 +170,23 @@ const AppLink = _styledComponents.default.a.withConfig({
 const Div = _styledComponents.default.div.withConfig({
   displayName: "nav__Div",
   componentId: "sc-1qwhj4c-1"
-})(["overflow-y:auto;", "{padding:24px;border-right:1px solid ", ";width:30%;min-width:260px;min-height:48px;.MuiStepConnector-vertical{padding:0;}}", "{padding:16px;.MuiStepConnector-lineVertical{border:none;}}.stepper{padding:0 !important;background:transparent;", "{margin-top:100px;}", "{margin-top:40px;}.step{cursor:pointer;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
+})(["overflow-y:auto;", "{padding:24px;border-right:1px solid ", ";width:30%;min-width:260px;min-height:48px;.MuiStepConnector-vertical{padding:0;}}", "{padding:16px;.MuiStepConnector-lineVertical{border:none;}}.stepper{padding:0 !important;background:transparent;", "{margin-top:100px;}", "{margin-top:40px;}.step{cursor:pointer;}}.always-step-child{.step-child-block{animation:none !important;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
 
 const StepContainer = _styledComponents.default.div.withConfig({
   displayName: "nav__StepContainer",
   componentId: "sc-1qwhj4c-2"
-})(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-clickable{cursor:pointer;&:hover{color:", ";}}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;opacity:0.5;background-color:", ";transition:all ease 0.2s;}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";white-space:nowrap;}", "{.step-name-content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}}.step-block{position:relative;display:flex;height:70px;opacity:0.5;overflow:hidden;transition:all ease 0.2s;&:last-child{height:auto;}&.step-optional{height:0;opacity:0;}&.step-checked{opacity:1;.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";opacity:1;}}&.step-active{opacity:1;.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-name{color:", ";}}&:last-child{.step-line{display:none;}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
+})(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-clickable{cursor:pointer;&:hover{color:", ";}}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;opacity:0.5;background-color:", ";transition:all ease 0.2s;}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-content{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";white-space:nowrap;}.step-desc{margin-top:24px;font-size:12px;font-weight:500;height:17px;color:", ";transition:all ease 0.3s;overflow:hidden;}", "{.step-content-name{position:absolute;left:0;top:0;width:100%;overflow:hidden;text-overflow:ellipsis;}}&.hide-child-step-desc{.step-desc{margin:0;opacity:0;height:0;}}.step-block{position:relative;display:flex;min-height:70px;opacity:0.5;overflow:hidden;transition:all ease 0.2s;&:last-child{height:auto;min-height:auto;}&.step-optional{height:0;opacity:0;min-height:0px;}&.step-checked,&.step-active{.step-desc{margin:0;opacity:0;height:0;}}&.step-checked{opacity:1;.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";opacity:1;}}&.step-active{opacity:1;.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-content{color:", ";}}&:last-child{.step-line{display:none;}.step-child-block{&:last-child{padding-bottom:0;}}}&.hide-step-child{.step-children{.step-child-block{margin-top:0;height:0;opacity:0;&:last-child{padding-bottom:0;}}}}}.step-children{padding-top:20px;.step-child-block{margin-top:4px;height:24px;line-height:24px;font-size:14px;color:#9397a1;transition:all ease 0.3s;&:first-child{margin-top:8px;}&:last-child{padding-bottom:40px;}&.step-child-block-active{color:", ";font-weight:700;}&.step-child-block-checked{color:", ";}}}.step-active{.step-child-block{animation:stepChildAnime ease 0.3s;}}@keyframes stepChildAnime{0%{height:0;}100%{height:24px;}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
 
 Nav.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,
   logoUrl: _propTypes.default.string,
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+  useOfSkeleton: _propTypes.default.bool
 };
 Nav.defaultProps = {
   logoUrl: '',
-  locale: ''
+  locale: '',
+  useOfSkeleton: false
 };
 var _default = Nav;
 exports.default = _default;

package/lib/page-header.js

@@ -11,7 +11,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-const _excluded = ["title", "subTitle"];
+var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
+
+const _excluded = ["title", "subTitle", "onClickBack"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -22,11 +24,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function PageHeader(_ref) {
   let {
     title,
-    subTitle
+    subTitle,
+    onClickBack
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(Content, rest, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(Content, rest, onClickBack && /*#__PURE__*/_react.default.createElement(_ArrowBackIos.default, {
+    className: "back-btn",
+    onClick: onClickBack
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: "sub-title"
@@ -36,15 +42,17 @@ function PageHeader(_ref) {
 const Content = _styledComponents.default.div.withConfig({
   displayName: "page-header__Content",
   componentId: "sc-1j6254k-0"
-})(["width:100%;text-align:center;.title{font-size:24px;font-weight:700;color:", ";}.sub-title{font-size:14px;color:", ";padding:0 14px;font-weight:400;}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
+})(["position:relative;width:100%;text-align:center;.title{font-size:24px;font-weight:700;color:", ";}.sub-title{font-size:14px;color:", ";padding:0 14px;font-weight:400;}.back-btn{position:absolute;left:25px;top:8px;color:#9397a1;font-size:18px;cursor:pointer;}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
 
 var _default = PageHeader;
 exports.default = _default;
 PageHeader.propTypes = {
   title: _propTypes.default.string,
-  subTitle: _propTypes.default.string
+  subTitle: _propTypes.default.string,
+  onClickBack: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
 };
 PageHeader.defaultProps = {
   title: '',
-  subTitle: ''
+  subTitle: '',
+  onClickBack: ''
 };

package/lib/wizard/wizard-desc.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _util = require("@blocklet/meta/lib/util");
 
-var _lodash = _interopRequireDefault(require("lodash.get"));
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -88,32 +88,32 @@ function WizardDesc(_ref) {
   const blockletDesc = data && data.htmlAst ? renderAst(data.htmlAst) : '';
   const isFree = isFreeBlocklet(data);
   const infos = [{
-    key: (0, _lodash.default)(localeData[locale], 'appinfo.name'),
+    key: (0, _get.default)(localeData[locale], 'appinfo.name'),
     value: (0, _util.getDisplayName)({
       meta: data
     })
   }, {
-    key: (0, _lodash.default)(localeData[locale], 'appinfo.version'),
+    key: (0, _get.default)(localeData[locale], 'appinfo.version'),
     value: data.version
   }, {
-    key: (0, _lodash.default)(localeData[locale], 'appinfo.author'),
-    value: (0, _lodash.default)(data, 'author.name')
+    key: (0, _get.default)(localeData[locale], 'appinfo.author'),
+    value: (0, _get.default)(data, 'author.name')
   }, {
     type: 'description',
-    key: (0, _lodash.default)(localeData[locale], 'appinfo.description'),
+    key: (0, _get.default)(localeData[locale], 'appinfo.description'),
     value: data.description
   }];
 
   if (data.requirements) {
     infos.push({
-      key: (0, _lodash.default)(localeData[locale], 'appinfo.requirements'),
+      key: (0, _get.default)(localeData[locale], 'appinfo.requirements'),
       value: data.requirements.server
     });
   }
 
   if (data.community) {
     infos.push({
-      key: (0, _lodash.default)(localeData[locale], 'appinfo.community'),
+      key: (0, _get.default)(localeData[locale], 'appinfo.community'),
       value: /*#__PURE__*/_react.default.createElement("a", {
         href: data.community,
         target: "_blank",
@@ -124,7 +124,7 @@ function WizardDesc(_ref) {
 
   if (data.documentation) {
     infos.push({
-      key: (0, _lodash.default)(localeData[locale], 'appinfo.documentation'),
+      key: (0, _get.default)(localeData[locale], 'appinfo.documentation'),
       value: /*#__PURE__*/_react.default.createElement("a", {
         href: data.documentation,
         target: "_blank",
@@ -135,7 +135,7 @@ function WizardDesc(_ref) {
 
   if (data.support) {
     infos.push({
-      key: (0, _lodash.default)(localeData[locale], 'appinfo.support'),
+      key: (0, _get.default)(localeData[locale], 'appinfo.support'),
       value: /*#__PURE__*/_react.default.createElement("a", {
         href: "mailto:".concat(data.support),
         target: "_blank",
@@ -146,7 +146,7 @@ function WizardDesc(_ref) {
 
   if (blockletDesc) {
     infos.push({
-      key: (0, _lodash.default)(localeData[locale], 'appinfo.overview'),
+      key: (0, _get.default)(localeData[locale], 'appinfo.overview'),
       value: ''
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.7.31",
+  "version": "1.7.34",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -37,17 +37,17 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.37",
-    "@arcblock/icons": "^2.1.37",
-    "@arcblock/ux": "^2.1.37",
-    "@blocklet/meta": "^1.7.26",
+    "@arcblock/did-connect": "^2.1.40",
+    "@arcblock/icons": "^2.1.40",
+    "@arcblock/ux": "^2.1.40",
+    "@blocklet/meta": "^1.7.27",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
     "@mui/lab": "^5.0.0-alpha.81",
     "@mui/material": "^5.6.4",
     "@mui/styles": "^5.6.2",
-    "lodash.get": "^4.4.2",
+    "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "rehype-react": "^7.0.4",
     "styled-components": "^5.3.3",
@@ -58,8 +58,9 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
+    "@storybook/react": "^6.5.4",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "64a8514742ed065d35031800099191953d12c812"
+  "gitHead": "c56c534bdbb962bc810511dfc929904882b966be"
 }