@blocklet/launcher-layout 2.13.69 → 3.0.0

package/lib/header.js

@@ -1,184 +1,90 @@
-import Img from '@arcblock/ux/lib/Img';
-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";
-const getBlockletDisplayName = blocklet => blocklet?.title || blocklet?.name || '';
-function AppHeader({
-  blockletMeta,
-  subTitle,
-  logoUrl,
-  locale,
-  navLogo,
-  loading
-}) {
-  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
-  const blockletSize = isMobile ? 18 : 48;
-  const appNameRef = useRef(null);
-  const [appNameSize, setAppNameSize] = useState('');
-  useEffect(() => {
-    if (appNameRef.current && appNameRef.current.offsetHeight > 34) {
-      if (appNameSize === '') {
-        setAppNameSize('middle');
-      } else if (appNameSize === 'middle') {
-        setAppNameSize('small');
-      }
-    }
-  }, [appNameSize]);
-  return /*#__PURE__*/_jsxs(Container, {
-    className: appNameSize === 'small' ? 'center-mode' : '',
-    children: [isMobile ? /*#__PURE__*/_jsx("div", {
-      className: "app-icon",
-      children: navLogo
-    }) : /*#__PURE__*/_jsxs("div", {
-      className: "app-icon",
-      children: [loading && /*#__PURE__*/_jsx(AppIconSkeleton, {
-        blockletSize: blockletSize,
-        isMobile: isMobile
-      }), !loading && /*#__PURE__*/_jsx(AppIcon, {
-        blockletSize: blockletSize,
-        logoUrl: logoUrl
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "header-title",
-      children: [isMobile && subTitle && /*#__PURE__*/_jsx("div", {
-        className: "header-title-sub",
-        children: subTitle
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "app-name-content",
-        children: [!isMobile && /*#__PURE__*/_jsx("div", {
-          className: "launching-context",
-          children: subTitle || getLaunchingText(locale)
-        }), /*#__PURE__*/_jsx("div", {
-          className: `header-title-name ${appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''}`,
-          ref: appNameRef,
-          children: /*#__PURE__*/_jsx(AppTitle, {
-            logoUrl: logoUrl,
-            isMobile: isMobile,
-            blockletMeta: blockletMeta,
-            blockletSize: blockletSize,
-            loading: loading
-          })
-        })]
-      })]
-    })]
-  });
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import v from "@arcblock/ux/lib/Img";
+import f from "@emotion/styled";
+import { useMediaQuery as b, Skeleton as p } from "@mui/material";
+import $ from "is-empty";
+import o from "prop-types";
+import { useRef as k, useState as N, useEffect as j } from "react";
+import A from "url-join";
+import S from "./assets/blocklet-default-logo.png";
+import { getLaunchingText as z } from "./locale.js";
+const g = (e) => (e == null ? void 0 : e.title) || (e == null ? void 0 : e.name) || "";
+function T({ blockletMeta: e = {}, subTitle: n = "", logoUrl: i = "", locale: m = "", navLogo: d = "", loading: a = !1 }) {
+  const r = b((y) => y.breakpoints.down("md")), c = r ? 18 : 48, h = k(null), [s, x] = N("");
+  return j(() => {
+    h.current && h.current.offsetHeight > 34 && (s === "" ? x("middle") : s === "middle" && x("small"));
+  }, [s]), /* @__PURE__ */ l(R, { className: s === "small" ? "center-mode" : "", children: [
+    r ? /* @__PURE__ */ t("div", { className: "app-icon", children: d }) : /* @__PURE__ */ l("div", { className: "app-icon", children: [
+      a && /* @__PURE__ */ t(I, { blockletSize: c, isMobile: r }),
+      !a && /* @__PURE__ */ t(u, { blockletSize: c, logoUrl: i })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "header-title", children: [
+      r && n && /* @__PURE__ */ t("div", { className: "header-title-sub", children: n }),
+      /* @__PURE__ */ l("div", { className: "app-name-content", children: [
+        !r && /* @__PURE__ */ t("div", { className: "launching-context", children: n || z(m) }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: `header-title-name ${s === "middle" || s === "small" ? "middle-size" : ""}`,
+            ref: h,
+            children: /* @__PURE__ */ t(
+              w,
+              {
+                logoUrl: i,
+                isMobile: r,
+                blockletMeta: e,
+                blockletSize: c,
+                loading: a
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
-AppHeader.propTypes = {
-  blockletMeta: PropTypes.object,
-  subTitle: PropTypes.any,
-  logoUrl: PropTypes.string,
-  locale: PropTypes.string,
-  navLogo: PropTypes.any,
-  loading: PropTypes.bool
-};
-AppHeader.defaultProps = {
-  subTitle: '',
-  logoUrl: '',
-  locale: '',
-  navLogo: '',
-  loading: false,
-  blockletMeta: {}
+T.propTypes = {
+  blockletMeta: o.object,
+  subTitle: o.any,
+  logoUrl: o.string,
+  locale: o.string,
+  navLogo: o.any,
+  loading: o.bool
 };
-
-// eslint-disable-next-line react/prop-types
-function AppIconSkeleton({
-  blockletSize,
-  isMobile
-}) {
-  if (isMobile) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  return /*#__PURE__*/_jsx(Skeleton, {
-    variant: "rectangular",
-    width: blockletSize,
-    height: blockletSize
-  });
+function I({ blockletSize: e, isMobile: n }) {
+  return n ? /* @__PURE__ */ t(p, { variant: "rectangular", width: 100, height: 16, alt: "icon", style: { marginTop: 4 } }) : /* @__PURE__ */ t(p, { variant: "rectangular", width: e, height: e });
 }
-
-// eslint-disable-next-line react/prop-types
-function AppIcon({
-  logoUrl,
-  blockletSize
-}) {
-  return /*#__PURE__*/_jsx(Img, {
-    // force update
-    width: blockletSize,
-    height: blockletSize,
-    src: logoUrl,
-    alt: "blocklet icon",
-    fallback: defaultBlockletLogo,
-    style: {
-      verticalAlign: 'text-bottom'
-    }
-  }, `layout-app-icon-${logoUrl}`);
+function u({ logoUrl: e, blockletSize: n }) {
+  return /* @__PURE__ */ t(
+    v,
+    {
+      width: n,
+      height: n,
+      src: e,
+      alt: "blocklet icon",
+      fallback: S,
+      style: { verticalAlign: "text-bottom" }
+    },
+    `layout-app-icon-${e}`
+  );
 }
-
-// eslint-disable-next-line react/prop-types
-function AppTitle({
-  isMobile,
-  logoUrl,
-  blockletMeta,
-  blockletSize,
-  loading
-}) {
-  const name = getBlockletDisplayName(blockletMeta);
-  if (loading) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  if (isEmpty(blockletMeta)) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      animation: false,
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  if (isMobile) {
-    return /*#__PURE__*/_jsxs(MobileTitleStyle, {
-      children: [/*#__PURE__*/_jsx(AppIcon, {
-        blockletSize: blockletSize,
-        logoUrl: logoUrl
-      }), /*#__PURE__*/_jsx("span", {
-        className: "ellipsis-title",
-        children: getBlockletDisplayName(blockletMeta)
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(AppLink, {
-    className: "app-link",
-    target: "_blank",
-    href: joinUrl(blockletMeta?.registryUrl || '', `/blocklets/${blockletMeta?.did}`),
-    title: name,
-    children: name
-  });
+function w({ isMobile: e, logoUrl: n, blockletMeta: i = {}, blockletSize: m, loading: d }) {
+  const a = g(i);
+  return d ? /* @__PURE__ */ t(p, { variant: "rectangular", width: 100, height: 16, alt: "icon", style: { marginTop: 4 } }) : $(i) ? /* @__PURE__ */ t(p, { variant: "rectangular", animation: !1, width: 100, height: 16, alt: "icon", style: { marginTop: 4 } }) : e ? /* @__PURE__ */ l(L, { children: [
+    /* @__PURE__ */ t(u, { blockletSize: m, logoUrl: n }),
+    /* @__PURE__ */ t("span", { className: "ellipsis-title", children: g(i) })
+  ] }) : /* @__PURE__ */ t(
+    E,
+    {
+      className: "app-link",
+      target: "_blank",
+      href: A((i == null ? void 0 : i.registryUrl) || "", `/blocklets/${i == null ? void 0 : i.did}`),
+      title: a,
+      children: a
+    }
+  );
 }
-const MobileTitleStyle = styled.div`
+const L = f.div`
   .ellipsis-title {
     flex: 1;
     position: absolute;
@@ -190,21 +96,17 @@ const MobileTitleStyle = styled.div`
     overflow: hidden;
     text-overflow: ellipsis;
 
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       left: 26px;
       width: calc(100% - 26px);
     }
   }
 `;
-AppTitle.propTypes = {
-  blockletMeta: PropTypes.object
+w.propTypes = {
+  blockletMeta: o.object
 };
-AppTitle.defaultProps = {
-  blockletMeta: {}
-};
-export default AppHeader;
-const AppLink = styled.a`
-  color: ${props => props.theme.palette.text.primary};
+const E = f.a`
+  color: ${(e) => e.theme.palette.text.primary};
   text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -228,23 +130,22 @@ const AppLink = styled.a`
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     display: block;
     max-width: calc(100vw - 150px);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-`;
-const Container = styled.div`
+`, R = f.div`
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(e) => e.theme.breakpoints.up("md")} {
     min-height: 70px;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     align-items: center;
   }
   .app-name-content {
@@ -252,11 +153,11 @@ const Container = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    ${props => props.theme.breakpoints.up('md')} {
+    ${(e) => e.theme.breakpoints.up("md")} {
       align-items: flex-start;
       flex-direction: column;
     }
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       justify-content: flex-start;
       height: 22px;
     }
@@ -265,11 +166,11 @@ const Container = styled.div`
     flex-shrink: 0;
     font-size: 14px;
     font-weight: 600;
-    color: ${props => props.theme.palette.text.secondary};
-    ${props => props.theme.breakpoints.up('md')} {
+    color: ${(e) => e.theme.palette.text.secondary};
+    ${(e) => e.theme.breakpoints.up("md")} {
       margin-bottom: 4px;
     }
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       font-size: 14px;
       line-height: 15px;
       &:after {
@@ -283,7 +184,7 @@ const Container = styled.div`
   &.center-mode {
     align-items: flex-start;
     .launching-context {
-      ${props => props.theme.breakpoints.up('sm')} {
+      ${(e) => e.theme.breakpoints.up("sm")} {
         margin-bottom: 0;
       }
     }
@@ -304,7 +205,7 @@ const Container = styled.div`
     justify-content: space-around;
     align-items: flex-start;
     margin-left: 24px;
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(e) => e.theme.breakpoints.down("md")} {
       margin-left: 16px;
     }
     .header-title-name {
@@ -314,16 +215,16 @@ const Container = styled.div`
       align-items: center;
       flex: 1;
       height: 100%;
-      color: ${props => props.theme.palette.text.primary};
+      color: ${(e) => e.theme.palette.text.primary};
       font-weight: 700;
-      ${props => props.theme.breakpoints.up('sm')} {
+      ${(e) => e.theme.breakpoints.up("sm")} {
         font-size: 18px;
 
         &.middle-size {
           font-size: 16px;
         }
       }
-      ${props => props.theme.breakpoints.down('md')} {
+      ${(e) => e.theme.breakpoints.down("md")} {
         display: block;
         max-width: calc(100vw - 100px);
         font-size: 16px;
@@ -334,15 +235,18 @@ const Container = styled.div`
     }
 
     .header-title-sub {
-      color: ${props => props.theme.palette.grey[700]};
+      color: ${(e) => e.theme.palette.grey[700]};
       font-size: 12px;
       line-height: 16px;
 
-      ${props => props.theme.breakpoints.down('md')} {
+      ${(e) => e.theme.breakpoints.down("md")} {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   }
-`;
+`;
+export {
+  T as default
+};