@blocklet/launcher-layout 1.7.16 → 1.7.19

package/lib/context/step.js

@@ -24,27 +24,48 @@ const {
 function StepProvider(_ref) {
   let {
     children,
-    steps
+    steps,
+    mode
   } = _ref;
-  const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const [activeStep, setActiveStepByIndex] = (0, _react.useState)(0); // can use this to set the activeStep by key
+
+  function setActiveStepByKey(key) {
+    const index = steps.findIndex(step => step.key === key);
+
+    if (index > -1) {
+      setActiveStepByIndex(index);
+    }
+  }
+
   (0, _react.useEffect)(() => {
-    let stepIndex = -1;
-    let matchedLength = 0;
-    steps.forEach((step, index) => {
-      const currentPathname = window.location.pathname.replace(/\/$/, '');
-
-      if (new RegExp(step.path).test(currentPathname) && step.path.length > matchedLength) {
-        stepIndex = index;
-        matchedLength = step.path.length;
-      }
-    });
-    setActiveStep(stepIndex);
+    if (mode === 'history') {
+      let stepIndex = -1;
+      let matchedLength = 0;
+      steps.forEach((step, index) => {
+        var _step$path;
+
+        const currentPathname = window.location.pathname.replace(/\/$/, '');
+
+        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;
+        }
+      });
+      setActiveStepByIndex(stepIndex);
+    }
+
     return () => {};
   }, [steps, window.location.pathname]);
   const value = {
     steps,
     activeStep,
-    totalStepsCount: steps.length
+    totalStepsCount: steps.length,
+    setActiveStepByIndex,
+    setActiveStepByKey,
+    // judge node can be clicked to back if the mode is 'memory'
+    canBackToStep: nodeIndex => {
+      return mode === 'memory' && activeStep !== 0 && nodeIndex < activeStep;
+    }
   };
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
@@ -57,5 +78,9 @@ function useStepContext() {
 
 StepProvider.propTypes = {
   children: _propTypes.default.any.isRequired,
-  steps: _propTypes.default.array.isRequired
+  steps: _propTypes.default.array.isRequired,
+  mode: _propTypes.default.string
+};
+StepProvider.defaultProps = {
+  mode: 'history'
 };

package/lib/nav.js

@@ -31,7 +31,10 @@ function Nav(_ref) {
   } = _ref;
   const {
     steps,
-    activeStep
+    activeStep,
+    setActiveStepByKey,
+    setActiveStepByIndex,
+    canBackToStep
   } = (0, _step.useStepContext)();
   const showSkeleton = !blockletMeta || !blockletMeta.title;
   return /*#__PURE__*/_react.default.createElement(Div, {
@@ -48,42 +51,58 @@ function Nav(_ref) {
     did: blockletMeta.did,
     logoUrl: logoUrl,
     locale: locale
-  }), /*#__PURE__*/_react.default.createElement(StepContainer, null, steps.map((step, index) => /*#__PURE__*/_react.default.createElement("div", {
-    className: (() => {
-      let classList = 'step-block';
+  }), /*#__PURE__*/_react.default.createElement(StepContainer, null, steps.map((step, index) => {
+    const canBack = !showSkeleton && canBackToStep(index);
+
+    const nodeClassName = (() => {
+      const classNameList = ['step-block'];
 
       if (activeStep === index) {
-        classList += ' step-active';
+        classNameList.push('step-active');
       }
 
       if (activeStep > index) {
-        classList += ' step-checked';
+        classNameList.push('step-checked');
       }
 
       if (step.optional === true && activeStep < index) {
-        classList += ' step-optional';
+        classNameList.push('step-optional');
       }
 
-      return classList;
-    })(),
-    key: step.key
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "step-icon"
-  }, /*#__PURE__*/_react.default.createElement(_Check.default, {
-    style: {
-      fontSize: 16
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "step-line"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "step-name",
-    title: step.name
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "step-name-content"
-  }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-    variant: "text",
-    width: 100
-  }) : step.name))))));
+      return classNameList.join(' ');
+    })();
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => {
+        if (canBack) {
+          if (step.key) {
+            setActiveStepByKey(step.key);
+            return;
+          }
+
+          setActiveStepByIndex(index);
+        }
+      },
+      className: nodeClassName,
+      key: step.key
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "step-icon"
+    }, /*#__PURE__*/_react.default.createElement(_Check.default, {
+      style: {
+        fontSize: 16
+      }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "step-line"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "step-name",
+      title: step.name
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "step-name-content ".concat(canBack ? ' step-clickable' : '')
+    }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+      variant: "text",
+      width: 100
+    }) : step.name)));
+  })));
 }
 
 const AppLink = _styledComponents.default.a.withConfig({
@@ -99,7 +118,7 @@ const Div = _styledComponents.default.div.withConfig({
 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-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;&.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.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-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;&.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);
 
 Nav.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.7.16",
+  "version": "1.7.19",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -37,9 +37,9 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.17",
-    "@arcblock/icons": "^2.1.17",
-    "@arcblock/ux": "^2.1.17",
+    "@arcblock/did-connect": "^2.1.20",
+    "@arcblock/icons": "^2.1.20",
+    "@arcblock/ux": "^2.1.20",
     "@blocklet/meta": "^1.7.23",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -61,5 +61,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "489661ba09475d37c10a75883d11c9e55c1003b2"
+  "gitHead": "335b512891157bd15d4e01b9317f37a57ddc1343"
 }