@blocklet/launcher-layout 2.1.84 → 2.1.86

package/README.md

@@ -21,7 +21,7 @@ const theme = useTheme()
 return <ThemeProvider theme={theme}> {/* The component library depends on the theme of mui, you should wrap components with ThemeProvider */}
   <LocaleProvider translations={[]}>
     <StepProvider steps={steps}>
-      <Layout blockletMeta={blockletMeta}>This is page content</Layout>
+      <Layout blockletMeta={blockletMeta} loading={false} navSubTitle="Restore">This is page content</Layout>
     </StepProvider>
   </LocaleProvider>
 <ThemeProvider>

package/lib/header.js

@@ -9,9 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
-var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
-var _defaultBlockletLogo = _interopRequireDefault(require("./assets/defaultBlockletLogo.png"));
+var _blockletDefaultLogo = _interopRequireDefault(require("./assets/blocklet-default-logo.png"));
 var _locale = require("./locale");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
@@ -22,44 +21,22 @@ function AppHeader(_ref) {
     title,
     subTitle,
     logoUrl,
-    did,
     locale,
-    navLogo
+    navLogo,
+    loading
   } = _ref;
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const blockletSize = isMobile ? 18 : 48;
   const appNameRef = (0, _react.useRef)(null);
   const [appNameSize, setAppNameSize] = (0, _react.useState)('');
-  let blockletIcon = isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-    variant: "rectangular",
-    width: 100,
-    height: 16,
-    alt: "".concat(title, " icon"),
-    style: {
-      marginTop: 4
-    }
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-    variant: "rectangular",
-    width: blockletSize,
-    height: blockletSize
+  const appIcon = loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIconSkeleton, {
+    blockletSize: blockletSize,
+    isMobile: isMobile,
+    title: title
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIcon, {
+    blockletSize: blockletSize,
+    logoUrl: logoUrl
   });
-  if (logoUrl) {
-    blockletIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
-      width: blockletSize,
-      height: blockletSize,
-      src: logoUrl,
-      alt: "blocklet icon",
-      fallback: _defaultBlockletLogo.default,
-      style: {
-        verticalAlign: 'text-bottom'
-      }
-    });
-  } else if (did) {
-    blockletIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-      did: did,
-      size: blockletSize
-    });
-  }
   (0, _react.useEffect)(() => {
     if (appNameRef.current && appNameRef.current.offsetHeight > 34) {
       if (appNameSize === '') {
@@ -76,21 +53,21 @@ function AppHeader(_ref) {
       children: navLogo
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "app-icon",
-      children: blockletIcon
+      children: appIcon
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-title",
-      children: [subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [isMobile && subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-title-sub",
         children: subTitle
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "app-name-content",
         children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "launching-context",
-          children: (0, _locale.getLaunchingText)(locale)
+          children: subTitle || (0, _locale.getLaunchingText)(locale)
         }), title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "header-title-name ".concat(appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''),
           ref: appNameRef,
-          children: [isMobile ? blockletIcon : '', " ", title]
+          children: [isMobile ? appIcon : '', " ", title]
         })]
       })]
     })]
@@ -100,18 +77,61 @@ AppHeader.propTypes = {
   title: _propTypes.default.any,
   subTitle: _propTypes.default.any,
   logoUrl: _propTypes.default.string,
-  did: _propTypes.default.string,
   locale: _propTypes.default.string,
-  navLogo: _propTypes.default.any
+  navLogo: _propTypes.default.any,
+  loading: _propTypes.default.bool
 };
 AppHeader.defaultProps = {
   title: '',
   subTitle: '',
   logoUrl: '',
-  did: '',
   locale: '',
-  navLogo: ''
+  navLogo: '',
+  loading: false
 };
+
+// eslint-disable-next-line react/prop-types
+function AppIconSkeleton(_ref2) {
+  let {
+    blockletSize,
+    isMobile,
+    title
+  } = _ref2;
+  if (isMobile) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      variant: "rectangular",
+      width: 100,
+      height: 16,
+      alt: "".concat(title, " icon"),
+      style: {
+        marginTop: 4
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+    variant: "rectangular",
+    width: blockletSize,
+    height: blockletSize
+  });
+}
+
+// eslint-disable-next-line react/prop-types
+function AppIcon(_ref3) {
+  let {
+    logoUrl,
+    blockletSize
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+    width: blockletSize,
+    height: blockletSize,
+    src: logoUrl,
+    alt: "blocklet icon",
+    fallback: _blockletDefaultLogo.default,
+    style: {
+      verticalAlign: 'text-bottom'
+    }
+  });
+}
 var _default = AppHeader;
 exports.default = _default;
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  ", " {\n    min-height: 70px;\n  }\n  ", " {\n    align-items: center;\n  }\n  .app-name-content {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n    ", " {\n      height: 22px;\n    }\n  }\n  .launching-context {\n    flex-shrink: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n    ", " {\n      margin-bottom: 4px;\n    }\n    ", " {\n      font-size: 14px;\n      line-height: 15px;\n      &:after {\n        display: inline-block;\n        margin: 0 4px;\n        content: ':';\n      }\n    }\n  }\n\n  &.center-mode {\n    align-items: flex-start;\n    .launching-context {\n      ", " {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .app-icon {\n    flex-shrink: 0;\n    > * {\n      display: block;\n      vertical-align: middle;\n    }\n  }\n\n  .header-title {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: flex-start;\n    margin-left: 24px;\n    ", " {\n      margin-left: 16px;\n    }\n    .header-title-name {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex: 1;\n      height: 100%;\n      color: ", ";\n      font-weight: 700;\n      ", " {\n        font-size: 18px;\n\n        &.middle-size {\n          font-size: 16px;\n        }\n      }\n      ", " {\n        display: block;\n        max-width: calc(100vw - 100px);\n        font-size: 16px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    .header-title-sub {\n      color: ", ";\n      font-size: 12px;\n      line-height: 16px;\n\n      ", " {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n"])), 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

@@ -19,7 +19,7 @@ var _header = _interopRequireDefault(require("./header"));
 var _locale = require("./locale");
 var _nav = _interopRequireDefault(require("./nav"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["blockletMeta", "children", "logoUrl", "locale", "header", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "contentMaxWidth"];
+const _excluded = ["blockletMeta", "loading", "children", "logoUrl", "locale", "header", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "navSubTitle", "contentMaxWidth"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -36,6 +36,7 @@ const PcContent = _styled.default.div(_templateObject2 || (_templateObject2 = _t
 function Layout(_ref) {
   let {
       blockletMeta,
+      loading,
       children,
       logoUrl,
       locale,
@@ -46,6 +47,7 @@ function Layout(_ref) {
       navLogo,
       useOfSkeleton,
       stepTip,
+      navSubTitle,
       contentMaxWidth
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -81,7 +83,7 @@ function Layout(_ref) {
             }),
             navLogo: navLogo,
             subTitle: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              children: ["".concat(stepTip || translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
+              children: ["".concat(navSubTitle || translations.defaultNavSubTitle, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
                 value: (activeStep + 1) / totalStepsCount * 100,
                 style: {
                   marginLeft: 3
@@ -89,7 +91,6 @@ function Layout(_ref) {
               })]
             }),
             logoUrl: logoUrl,
-            did: blockletMeta.did,
             locale: locale
           })
         }), navLogo && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -110,7 +111,9 @@ function Layout(_ref) {
           locale: locale,
           blockletMeta: blockletMeta,
           logoUrl: logoUrl,
-          useOfSkeleton: useOfSkeleton
+          useOfSkeleton: useOfSkeleton,
+          subTitle: navSubTitle,
+          loading: loading
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
         fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
@@ -127,7 +130,8 @@ function Layout(_ref) {
   }));
 }
 Layout.propTypes = {
-  blockletMeta: _propTypes.default.object.isRequired,
+  loading: _propTypes.default.bool,
+  blockletMeta: _propTypes.default.object,
   children: _propTypes.default.object.isRequired,
   logoUrl: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['en', 'zh']),
@@ -138,9 +142,12 @@ Layout.propTypes = {
   contentMaxWidth: _propTypes.default.string,
   navLogo: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
   useOfSkeleton: _propTypes.default.bool,
-  stepTip: _propTypes.default.string
+  stepTip: _propTypes.default.string,
+  navSubTitle: _propTypes.default.string
 };
 Layout.defaultProps = {
+  loading: false,
+  blockletMeta: {},
   logoUrl: '',
   locale: 'en',
   header: null,
@@ -150,7 +157,8 @@ Layout.defaultProps = {
   contentMaxWidth: '1245px',
   navLogo: '',
   useOfSkeleton: true,
-  stepTip: ''
+  stepTip: '',
+  navSubTitle: ''
 };
 
 // 针对 safari 下的 chrome 适配

package/lib/locale.js

@@ -3,11 +3,11 @@
 const translations = {
   en: {
     optional: 'Optional',
-    stepTip: 'Launching Step'
+    defaultNavSubTitle: 'Launching'
   },
   zh: {
     optional: '可选',
-    stepTip: '启动步骤'
+    defaultNavSubTitle: '启动'
   }
 };
 const getTranslations = locale => translations[locale] ? translations[locale] : translations.en;

package/lib/nav.js

@@ -21,7 +21,9 @@ function Nav(_ref) {
     blockletMeta,
     logoUrl,
     locale,
-    useOfSkeleton
+    useOfSkeleton,
+    subTitle,
+    loading
   } = _ref;
   const {
     steps,
@@ -32,7 +34,7 @@ function Nav(_ref) {
     canBackToStep
   } = (0, _step.useStepContext)();
   const name = (0, _util.getBlockletDisplayName)(blockletMeta);
-  const showSkeleton = useOfSkeleton ? !blockletMeta || !name : false;
+  const showSkeleton = useOfSkeleton ? loading : false;
   const getNodeClassName = (step, index) => {
     const classNameList = ['step-block'];
     const status = getStepStatus(step.key);
@@ -70,18 +72,19 @@ function Nav(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
-      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(AppLink, {
+      loading: loading,
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AppLink, {
         target: "_blank",
         href: (0, _urlJoin.default)(blockletMeta.registryUrl || '', "/blocklets/".concat(blockletMeta.did)),
         title: name,
-        children: name || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
           variant: "text",
           width: 150
-        })
+        }), !loading && name]
       }),
-      did: blockletMeta.did,
       logoUrl: logoUrl,
-      locale: locale
+      locale: locale,
+      subTitle: subTitle
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContainer, {
       className: "".concat(showSkeleton ? 'hide-child-step-desc' : ''),
       children: steps.map((step, index) => {
@@ -152,12 +155,16 @@ Nav.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,
   logoUrl: _propTypes.default.string,
   locale: _propTypes.default.string,
-  useOfSkeleton: _propTypes.default.bool
+  useOfSkeleton: _propTypes.default.bool,
+  subTitle: _propTypes.default.string,
+  loading: _propTypes.default.bool
 };
 Nav.defaultProps = {
   logoUrl: '',
   locale: '',
-  useOfSkeleton: false
+  useOfSkeleton: false,
+  subTitle: '',
+  loading: false
 };
 var _default = Nav;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "2.1.84",
+  "version": "2.1.86",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -39,8 +39,8 @@
     "@arcblock/did-connect": "^2.6.7",
     "@arcblock/icons": "^2.6.7",
     "@arcblock/ux": "^2.6.7",
-    "@blocklet/launcher-util": "2.1.84",
-    "@blocklet/launcher-ux": "2.1.84",
+    "@blocklet/launcher-util": "2.1.86",
+    "@blocklet/launcher-ux": "2.1.86",
     "@blocklet/meta": "^1.16.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -59,5 +59,5 @@
     "@storybook/react": "^6.5.16",
     "babel-plugin-inline-react-svg": "^2.0.2"
   },
-  "gitHead": "432b1b3293cc8179eac3fde5620d0159eb680a5b"
+  "gitHead": "95ee25d34d82744fcd623f3cdf9e98fa14a3022d"
 }