@blocklet/launcher-layout 2.3.19 → 2.3.21

package/lib/header.js

@@ -1,38 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
-var _util = require("@blocklet/launcher-util/es/util");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _isEmpty = _interopRequireDefault(require("is-empty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _urlJoin = _interopRequireDefault(require("url-join"));
-var _blockletDefaultLogo = _interopRequireDefault(require("./assets/blocklet-default-logo.png"));
-var _locale = require("./locale");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function AppHeader(_ref) {
-  let {
-    blockletMeta,
-    subTitle,
-    logoUrl,
-    locale,
-    navLogo,
-    loading
-  } = _ref;
-  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
+import Img from '@arcblock/ux/lib/Img';
+import { getBlockletDisplayName } from '@blocklet/launcher-util/es/util';
+import styled from '@emotion/styled';
+import { Skeleton, useMediaQuery } from '@mui/material';
+import isEmpty from 'is-empty';
+import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
+import joinUrl from 'url-join';
+import defaultBlockletLogo from './assets/blocklet-default-logo.png';
+import { getLaunchingText } from './locale';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AppHeader({
+  blockletMeta,
+  subTitle,
+  logoUrl,
+  locale,
+  navLogo,
+  loading
+}) {
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const blockletSize = isMobile ? 18 : 48;
-  const appNameRef = (0, _react.useRef)(null);
-  const [appNameSize, setAppNameSize] = (0, _react.useState)('');
-  (0, _react.useEffect)(() => {
+  const appNameRef = useRef(null);
+  const [appNameSize, setAppNameSize] = useState('');
+  useEffect(() => {
     if (appNameRef.current && appNameRef.current.offsetHeight > 34) {
       if (appNameSize === '') {
         setAppNameSize('middle');
@@ -41,34 +30,34 @@ function AppHeader(_ref) {
       }
     }
   }, [appNameSize]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     className: appNameSize === 'small' ? 'center-mode' : '',
-    children: [isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [isMobile ? /*#__PURE__*/_jsx("div", {
       className: "app-icon",
       children: navLogo
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }) : /*#__PURE__*/_jsxs("div", {
       className: "app-icon",
-      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIconSkeleton, {
+      children: [loading && /*#__PURE__*/_jsx(AppIconSkeleton, {
         blockletSize: blockletSize,
         isMobile: isMobile
-      }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIcon, {
+      }), !loading && /*#__PURE__*/_jsx(AppIcon, {
         blockletSize: blockletSize,
         logoUrl: logoUrl
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: "header-title",
-      children: [isMobile && subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [isMobile && subTitle && /*#__PURE__*/_jsx("div", {
         className: "header-title-sub",
         children: subTitle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: "app-name-content",
-        children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [!isMobile && /*#__PURE__*/_jsx("div", {
           className: "launching-context",
-          children: subTitle || (0, _locale.getLaunchingText)(locale)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "header-title-name ".concat(appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''),
+          children: subTitle || getLaunchingText(locale)
+        }), /*#__PURE__*/_jsx("div", {
+          className: `header-title-name ${appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''}`,
           ref: appNameRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AppTitle, {
+          children: /*#__PURE__*/_jsx(AppTitle, {
             logoUrl: logoUrl,
             isMobile: isMobile,
             blockletMeta: blockletMeta,
@@ -81,12 +70,12 @@ function AppHeader(_ref) {
   });
 }
 AppHeader.propTypes = {
-  blockletMeta: _propTypes.default.object,
-  subTitle: _propTypes.default.any,
-  logoUrl: _propTypes.default.string,
-  locale: _propTypes.default.string,
-  navLogo: _propTypes.default.any,
-  loading: _propTypes.default.bool
+  blockletMeta: PropTypes.object,
+  subTitle: PropTypes.any,
+  logoUrl: PropTypes.string,
+  locale: PropTypes.string,
+  navLogo: PropTypes.any,
+  loading: PropTypes.bool
 };
 AppHeader.defaultProps = {
   subTitle: '',
@@ -98,13 +87,12 @@ AppHeader.defaultProps = {
 };
 
 // eslint-disable-next-line react/prop-types
-function AppIconSkeleton(_ref2) {
-  let {
-    blockletSize,
-    isMobile
-  } = _ref2;
+function AppIconSkeleton({
+  blockletSize,
+  isMobile
+}) {
   if (isMobile) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+    return /*#__PURE__*/_jsx(Skeleton, {
       variant: "rectangular",
       width: 100,
       height: 16,
@@ -114,7 +102,7 @@ function AppIconSkeleton(_ref2) {
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+  return /*#__PURE__*/_jsx(Skeleton, {
     variant: "rectangular",
     width: blockletSize,
     height: blockletSize
@@ -122,36 +110,34 @@ function AppIconSkeleton(_ref2) {
 }
 
 // eslint-disable-next-line react/prop-types
-function AppIcon(_ref3) {
-  let {
-    logoUrl,
-    blockletSize
-  } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+function AppIcon({
+  logoUrl,
+  blockletSize
+}) {
+  return /*#__PURE__*/_jsx(Img, {
     // force update
     width: blockletSize,
     height: blockletSize,
     src: logoUrl,
     alt: "blocklet icon",
-    fallback: _blockletDefaultLogo.default,
+    fallback: defaultBlockletLogo,
     style: {
       verticalAlign: 'text-bottom'
     }
-  }, "layout-app-icon-".concat(logoUrl));
+  }, `layout-app-icon-${logoUrl}`);
 }
 
 // eslint-disable-next-line react/prop-types
-function AppTitle(_ref4) {
-  let {
-    isMobile,
-    logoUrl,
-    blockletMeta,
-    blockletSize,
-    loading
-  } = _ref4;
-  const name = (0, _util.getBlockletDisplayName)(blockletMeta);
+function AppTitle({
+  isMobile,
+  logoUrl,
+  blockletMeta,
+  blockletSize,
+  loading
+}) {
+  const name = getBlockletDisplayName(blockletMeta);
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+    return /*#__PURE__*/_jsx(Skeleton, {
       variant: "rectangular",
       width: 100,
       height: 16,
@@ -161,8 +147,8 @@ function AppTitle(_ref4) {
       }
     });
   }
-  if ((0, _isEmpty.default)(blockletMeta)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+  if (isEmpty(blockletMeta)) {
+    return /*#__PURE__*/_jsx(Skeleton, {
       variant: "rectangular",
       animation: false,
       width: 100,
@@ -174,30 +160,177 @@ function AppTitle(_ref4) {
     });
   }
   if (isMobile) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileTitleStyle, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AppIcon, {
+    return /*#__PURE__*/_jsxs(MobileTitleStyle, {
+      children: [/*#__PURE__*/_jsx(AppIcon, {
         blockletSize: blockletSize,
         logoUrl: logoUrl
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }), /*#__PURE__*/_jsx("span", {
         className: "ellipsis-title",
-        children: (0, _util.getBlockletDisplayName)(blockletMeta)
+        children: getBlockletDisplayName(blockletMeta)
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AppLink, {
+  return /*#__PURE__*/_jsx(AppLink, {
     target: "_blank",
-    href: (0, _urlJoin.default)((blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.registryUrl) || '', "/blocklets/".concat(blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.did)),
+    href: joinUrl(blockletMeta?.registryUrl || '', `/blocklets/${blockletMeta?.did}`),
     title: name,
     children: name
   });
 }
-const MobileTitleStyle = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ellipsis-title {\n    flex: 1;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    ", " {\n      left: 26px;\n      width: calc(100% - 26px);\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const MobileTitleStyle = styled.div`
+  .ellipsis-title {
+    flex: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${props => props.theme.breakpoints.down('md')} {
+      left: 26px;
+      width: calc(100% - 26px);
+    }
+  }
+`;
 AppTitle.propTypes = {
-  blockletMeta: _propTypes.default.object
+  blockletMeta: PropTypes.object
 };
 AppTitle.defaultProps = {
   blockletMeta: {}
 };
-var _default = exports.default = AppHeader;
-const AppLink = _styled.default.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-decoration: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  text-decoration: none;\n  font-weight: 700;\n  -webkit-font-smoothing: antialiased;\n\n  ", " {\n    display: block;\n    max-width: calc(100vw - 150px);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
-const Container = _styled.default.div(_templateObject3 || (_templateObject3 = _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      justify-content: flex-start;\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'));
+export default AppHeader;
+const AppLink = styled.a`
+  color: ${props => props.theme.palette.common.black};
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  text-decoration: none;
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+
+  ${props => props.theme.breakpoints.down('md')} {
+    display: block;
+    max-width: calc(100vw - 150px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  ${props => props.theme.breakpoints.up('md')} {
+    min-height: 70px;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    align-items: center;
+  }
+  .app-name-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${props => props.theme.breakpoints.up('md')} {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      justify-content: flex-start;
+      height: 22px;
+    }
+  }
+  .launching-context {
+    flex-shrink: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: ${props => props.theme.palette.grey[500]};
+    ${props => props.theme.breakpoints.up('md')} {
+      margin-bottom: 4px;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      font-size: 14px;
+      line-height: 15px;
+      &:after {
+        display: inline-block;
+        margin: 0 4px;
+        content: ':';
+      }
+    }
+  }
+
+  &.center-mode {
+    align-items: flex-start;
+    .launching-context {
+      ${props => props.theme.breakpoints.up('sm')} {
+        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;
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-left: 16px;
+    }
+    .header-title-name {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+      height: 100%;
+      color: ${props => props.theme.palette.common.black};
+      font-weight: 700;
+      ${props => props.theme.breakpoints.up('sm')} {
+        font-size: 18px;
+
+        &.middle-size {
+          font-size: 16px;
+        }
+      }
+      ${props => props.theme.breakpoints.down('md')} {
+        display: block;
+        max-width: calc(100vw - 100px);
+        font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .header-title-sub {
+      color: ${props => props.theme.palette.grey[700]};
+      font-size: 12px;
+      line-height: 16px;
+
+      ${props => props.theme.breakpoints.down('md')} {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+`;