@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/Footer/index.js

@@ -1,81 +1,71 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import PropTypes from "prop-types";
-import { styled, useTheme, deepmerge, ThemeProvider } from "@arcblock/ux/lib/Theme";
-import { withErrorBoundary } from "react-error-boundary";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
-import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import omit from "lodash/omit";
-import InternalFooter from "./internal-footer.js";
-import { mapRecursive } from "../utils.js";
-import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
-import { BlockletMetaProps } from "../types.js";
-import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
-function Footer({ meta, theme: themeOverrides, ...rest }) {
-  const { locale } = useLocaleContext() || {};
-  const parentTheme = useTheme();
-  const formattedBlocklet = useMemo(() => {
-    const blocklet = Object.assign({}, window.blocklet, meta);
+import { jsx as f } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import T from "prop-types";
+import { styled as M, useTheme as N, deepmerge as w, ThemeProvider as L } from "@arcblock/ux/lib/Theme";
+import { withErrorBoundary as j } from "react-error-boundary";
+import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback as E } from "@arcblock/ux/lib/ErrorBoundary";
+import I from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import P from "lodash/omit";
+import z from "./internal-footer.js";
+import { mapRecursive as D } from "../utils.js";
+import { formatBlockletInfo as H, getLocalizedNavigation as l } from "../blocklets.js";
+import { BlockletMetaProps as R } from "../types.js";
+import S from "../libs/with-hide-when-embed.js";
+function u({ meta: e = {}, theme: t = null, ...i }) {
+  var m, s, d;
+  const { locale: n } = C() || {}, p = N(), o = b(() => {
+    const r = Object.assign({}, window.blocklet, e);
     try {
-      return formatBlockletInfo(blocklet);
-    } catch (e) {
-      console.error("Failed to format blocklet info", e, blocklet);
-      return blocklet;
+      return H(r);
+    } catch (x) {
+      return console.error("Failed to format blocklet info", x, r), r;
     }
-  }, [meta]);
-  const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
-  const appLogo = useBlockletLogo({
+  }, [e]), c = b(() => w(p, t), [p, t]), g = I({
     key: "xs",
     // 始终优先长 logo
-    meta,
-    theme: themeOverrides
+    meta: e,
+    theme: t
   });
-  if (!formattedBlocklet.appName) {
+  if (!o.appName)
     return null;
-  }
-  const { appName, appDescription, description, copyright } = formattedBlocklet;
-  const $bgColor = mergeTheme.palette.background.default;
-  const localized = {
-    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
-    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
-    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || []
-  };
-  const props = {
+  const { appName: h, appDescription: k, description: y, copyright: v } = o, $ = c.palette.background.default, a = {
+    footerNav: l((m = o == null ? void 0 : o.navigation) == null ? void 0 : m.footer, n) || [],
+    socialMedia: l((s = o == null ? void 0 : o.navigation) == null ? void 0 : s.social, n) || [],
+    links: l((d = o == null ? void 0 : o.navigation) == null ? void 0 : d.bottom, n) || []
+  }, F = {
     brand: {
-      name: appName,
-      description: appDescription || description,
-      logo: appLogo
+      name: h,
+      description: k || y,
+      logo: g
     },
-    navigation: mapRecursive(
-      localized.footerNav,
-      (item) => ({
-        ...item,
-        label: item.title,
-        link: item.link
+    navigation: D(
+      a.footerNav,
+      (r) => ({
+        ...r,
+        label: r.title,
+        link: r.link
       }),
       "items"
     ),
-    copyright,
-    socialMedia: localized.socialMedia,
-    links: localized.links.map((item) => ({ ...item, label: item.title }))
+    copyright: v,
+    socialMedia: a.socialMedia,
+    links: a.links.map((r) => ({ ...r, label: r.title }))
   };
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: mergeTheme, children: /* @__PURE__ */ jsx(StyledInternalFooter, { ...props, ...omit(rest, ["bordered"]), $bordered: rest?.bordered, $bgcolor: $bgColor }) });
+  return /* @__PURE__ */ f(L, { theme: c, children: /* @__PURE__ */ f(W, { ...F, ...P(i, ["bordered"]), $bordered: i == null ? void 0 : i.bordered, $bgcolor: $ }) });
 }
-Footer.propTypes = {
-  meta: BlockletMetaProps,
+u.propTypes = {
+  meta: R,
   // 允许覆盖 footer 内置的 theme
-  theme: PropTypes.object
-};
-Footer.defaultProps = {
-  meta: {},
-  theme: null
+  theme: T.object
 };
-const StyledInternalFooter = styled(InternalFooter)`
-  ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
-  color: ${({ theme }) => theme.palette.text.secondary};
-  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-`;
-export default withErrorBoundary(withHideWhenEmbed(Footer), {
-  FallbackComponent: ErrorFallback
+const W = M(z)`
+  ${({ $bordered: e, theme: t }) => `border-top: 1px solid ${e && t.palette.divider};`}
+  color: ${({ theme: e }) => e.palette.text.secondary};
+  ${({ $bgcolor: e }) => e && `background-color: ${e};`}
+`, oo = j(S(u), {
+  FallbackComponent: E
 });
+export {
+  oo as default
+};

package/lib/Footer/internal-footer.js

@@ -1,118 +1,116 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import { Box } from "@mui/material";
-import clsx from "clsx";
-import Brand from "./brand.js";
-import Links from "./links.js";
-import SocialMedia from "./social-media.js";
-import Copyright from "./copyright.js";
-import StandardLayout from "./layout/standard.js";
-import PlainLayout from "./layout/plain.js";
-const layouts = [
+import { jsxs as L, jsx as t } from "react/jsx-runtime";
+import n from "prop-types";
+import { Box as y } from "@mui/material";
+import O from "clsx";
+import B from "./brand.js";
+import g from "./links.js";
+import M from "./social-media.js";
+import N from "./copyright.js";
+import S from "./layout/standard.js";
+import C from "./layout/plain.js";
+const h = [
   {
     name: "plain",
     // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
-    support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
-    component: PlainLayout
+    support: (a, o) => {
+      var r, e;
+      return !((r = o.navigation) != null && r.length) && !((e = o.socialMedia) != null && e.length);
+    },
+    component: C
   },
   {
     name: "standard",
     // 默认标准布局
-    support: () => true,
-    component: StandardLayout
+    support: () => !0,
+    component: S
   }
-];
-const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur }), {});
-function InternalFooter(props) {
-  const { brand, navigation, socialMedia, copyright, links, layout, ...rest } = props;
-  const renderBrand = () => {
-    return brand ? /* @__PURE__ */ jsx(Brand, { ...brand }) : null;
+], T = h.reduce((a, o) => ({ ...a, [o.name]: o }), {});
+function _(a) {
+  var d, f;
+  const {
+    brand: o = null,
+    navigation: r = null,
+    socialMedia: e = null,
+    copyright: l = null,
+    links: s = null,
+    layout: m = "auto",
+    ...i
+  } = a, k = () => o ? /* @__PURE__ */ t(B, { ...o }) : null, x = () => r != null && r.length ? /* @__PURE__ */ t(g, { links: r, columns: 3 }) : null, b = () => e != null && e.length ? /* @__PURE__ */ t(M, { items: e }) : null, w = () => {
+    const p = (l == null ? void 0 : l.owner) || (o == null ? void 0 : o.name);
+    return p ? /* @__PURE__ */ t(N, { owner: p, year: (l == null ? void 0 : l.year) || void 0 }) : null;
+  }, v = () => s != null && s.length ? /* @__PURE__ */ t(g, { flowLayout: !0, links: s }) : null, c = {
+    brand: k(),
+    navigation: x(),
+    socialMedia: b(),
+    copyright: w(),
+    links: v()
   };
-  const renderNavigation = () => {
-    return navigation?.length ? /* @__PURE__ */ jsx(Links, { links: navigation, columns: 3 }) : null;
-  };
-  const renderSocialMedia = () => {
-    return socialMedia?.length ? /* @__PURE__ */ jsx(SocialMedia, { items: socialMedia }) : null;
-  };
-  const renderCopyright = () => {
-    const copyrightOwner = copyright?.owner || brand?.name;
-    if (!copyrightOwner) {
-      return null;
+  let u = null;
+  if (m === "auto" ? u = h.find((p) => p.support(c, a)).component : u = (d = T[m]) == null ? void 0 : d.component, !u)
+    throw new Error(`layout ${m} is not supported.`);
+  return /* @__PURE__ */ L(
+    y,
+    {
+      ...i,
+      className: O("blocklet__footer", i.className),
+      sx: [
+        {
+          position: "relative"
+        },
+        ...Array.isArray(i.sx) ? i.sx : [i.sx]
+      ],
+      children: [
+        /* @__PURE__ */ t(u, { elements: c, data: a }),
+        /* @__PURE__ */ t(
+          y,
+          {
+            sx: {
+              position: "absolute",
+              right: 16,
+              bottom: 0,
+              fontSize: 12,
+              color: "transparent",
+              "::selection": { background: "#000", color: "#fff" }
+            },
+            children: (f = window == null ? void 0 : window.blocklet) == null ? void 0 : f.version
+          }
+        )
+      ]
     }
-    return /* @__PURE__ */ jsx(Copyright, { owner: copyrightOwner, year: copyright?.year || void 0 });
-  };
-  const renderLinks = () => {
-    return links?.length ? /* @__PURE__ */ jsx(Links, { flowLayout: true, links }) : null;
-  };
-  const elements = {
-    brand: renderBrand(),
-    navigation: renderNavigation(),
-    socialMedia: renderSocialMedia(),
-    copyright: renderCopyright(),
-    links: renderLinks()
-  };
-  let LayoutComponent = null;
-  if (layout === "auto") {
-    LayoutComponent = layouts.find((item) => item.support(elements, props)).component;
-  } else {
-    LayoutComponent = layoutsKeyByName[layout]?.component;
-  }
-  if (!LayoutComponent) {
-    throw new Error(`layout ${layout} is not supported.`);
-  }
-  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...rest, className: clsx("blocklet__footer", rest.className), children: [
-    /* @__PURE__ */ jsx(LayoutComponent, { elements, data: props }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        position: "absolute",
-        right: 16,
-        bottom: 0,
-        fontSize: 12,
-        sx: { color: "transparent", "::selection": { background: "#000", color: "#fff" } },
-        children: window?.blocklet?.version
-      }
-    )
-  ] });
+  );
 }
-InternalFooter.propTypes = {
-  brand: PropTypes.shape({
-    name: PropTypes.node,
-    description: PropTypes.string,
-    logo: PropTypes.node
+_.propTypes = {
+  brand: n.shape({
+    name: n.node,
+    description: n.string,
+    logo: n.node
   }),
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string
+  navigation: n.arrayOf(
+    n.shape({
+      label: n.node,
+      link: n.string
     })
   ),
-  socialMedia: PropTypes.arrayOf(
-    PropTypes.shape({
-      icon: PropTypes.node,
-      link: PropTypes.string
+  socialMedia: n.arrayOf(
+    n.shape({
+      icon: n.node,
+      link: n.string
     })
   ),
-  copyright: PropTypes.shape({
-    owner: PropTypes.string,
-    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  copyright: n.shape({
+    owner: n.string,
+    year: n.oneOfType([n.string, n.number])
   }),
   // privacy/legal 等链接, 常放于 footer 右下侧或最底部
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string
+  links: n.arrayOf(
+    n.shape({
+      label: n.node,
+      link: n.string
     })
   ),
   // 可显式指定 footer layout, 默认根据内容自动决定 layout
-  layout: PropTypes.oneOf(["auto", "standard", "plain"])
+  layout: n.oneOf(["auto", "standard", "plain"])
 };
-InternalFooter.defaultProps = {
-  brand: null,
-  navigation: null,
-  copyright: null,
-  socialMedia: null,
-  links: null,
-  layout: "auto"
+export {
+  _ as default
 };
-export default InternalFooter;

package/lib/Footer/layout/plain.js

@@ -1,32 +1,32 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import PropTypes from "prop-types";
-import { Container } from "@mui/material";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Row from "./row.js";
-function PlainLayout({ elements, data, ...rest }) {
-  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsx(Container, { style: { padding: 0 }, children: /* @__PURE__ */ jsxs(Container, { className: "plain-layout-container", children: [
-    elements.links && /* @__PURE__ */ jsxs(Row, { sx: { width: 1 }, autoCenter: true, children: [
-      elements.copyright,
-      elements.links
+import { jsx as t, jsxs as n, Fragment as a } from "react/jsx-runtime";
+import { cloneElement as l } from "react";
+import e from "prop-types";
+import { Container as r } from "@mui/material";
+import { styled as p } from "@arcblock/ux/lib/Theme";
+import d from "./row.js";
+function s({ elements: i, data: m, ...o }) {
+  return /* @__PURE__ */ t(c, { ...o, children: /* @__PURE__ */ t(r, { style: { padding: 0 }, children: /* @__PURE__ */ n(r, { className: "plain-layout-container", children: [
+    i.links && /* @__PURE__ */ n(d, { sx: { width: 1 }, autoCenter: !0, children: [
+      i.copyright,
+      i.links
     ] }),
-    !elements.links && /* @__PURE__ */ jsxs(Fragment, { children: [
-      cloneElement(elements.brand, { name: null, description: null }),
-      elements.copyright
+    !i.links && /* @__PURE__ */ n(a, { children: [
+      l(i.brand, { name: null, description: null }),
+      i.copyright
     ] })
   ] }) }) });
 }
-PlainLayout.propTypes = {
-  elements: PropTypes.shape({
-    brand: PropTypes.element,
-    navigation: PropTypes.element,
-    socialMedia: PropTypes.element,
-    copyright: PropTypes.element,
-    links: PropTypes.element
+s.propTypes = {
+  elements: e.shape({
+    brand: e.element,
+    navigation: e.element,
+    socialMedia: e.element,
+    copyright: e.element,
+    links: e.element
   }).isRequired,
-  data: PropTypes.object.isRequired
+  data: e.object.isRequired
 };
-const Root = styled("div")`
+const c = p("div")`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;
@@ -36,4 +36,6 @@ const Root = styled("div")`
     gap: 8px;
   }
 `;
-export default PlainLayout;
+export {
+  s as default
+};

package/lib/Footer/layout/row.js

@@ -1,23 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
-import { styled } from "@arcblock/ux/lib/Theme";
-import clsx from "clsx";
-export default function Row({ children, autoCenter, ...rest }) {
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(RowRoot, { ...rest, className: clsx(rest.className, { "footer-row-auto-center": autoCenter }), children });
+import { jsx as n } from "react/jsx-runtime";
+import e from "prop-types";
+import { Box as a } from "@mui/material";
+import { styled as i } from "@arcblock/ux/lib/Theme";
+import l from "clsx";
+function m({ children: o = null, autoCenter: r = !1, ...t }) {
+  return o ? /* @__PURE__ */ n(p, { ...t, className: l(t.className, { "footer-row-auto-center": r }), children: o }) : null;
 }
-Row.propTypes = {
-  children: PropTypes.any,
-  autoCenter: PropTypes.bool
-};
-Row.defaultProps = {
-  children: null,
-  autoCenter: false
+m.propTypes = {
+  children: e.any,
+  autoCenter: e.bool
 };
-const RowRoot = styled(Box)`
+const p = i(a)`
   display: flex;
   justify-content: space-between;
   & + & {
@@ -27,10 +20,10 @@ const RowRoot = styled(Box)`
     margin: 0 auto;
   }
 
-  ${({ theme }) => theme.breakpoints.down("md")} {
+  ${({ theme: o }) => o.breakpoints.down("md")} {
     align-items: stretch;
     flex-direction: column;
-    gap: ${({ theme }) => theme.spacing(1)};
+    gap: ${({ theme: o }) => o.spacing(1)};
     > * {
       flex: 1 0 100%;
     }
@@ -39,3 +32,6 @@ const RowRoot = styled(Box)`
     }
   }
 `;
+export {
+  m as default
+};

package/lib/Footer/layout/standard.js

@@ -1,81 +1,93 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import clsx from "clsx";
-import { Box, Container } from "@mui/material";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Row from "./row.js";
-function StandardLayout({ elements, data, className, ...rest }) {
-  const withNavigation = !!data.navigation?.length;
-  let topSection = null;
-  if (withNavigation) {
-    topSection = /* @__PURE__ */ jsxs(Container, { sx: { display: "flex", flexDirection: { xs: "column", md: "row" }, justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          sx: {
-            flex: "1 1 auto",
-            paddingRight: { xs: 0, md: 3 },
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: 2,
-            pb: 3
-          },
-          children: [
-            /* @__PURE__ */ jsx(Box, { children: elements.brand }),
-            /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(Box, { sx: ({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } }), children: elements.navigation })
-    ] });
-  } else {
-    topSection = /* @__PURE__ */ jsxs(
-      Container,
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import o from "prop-types";
+import x from "clsx";
+import { Container as t, Box as r } from "@mui/material";
+import { styled as f } from "@arcblock/ux/lib/Theme";
+import h from "./row.js";
+function g({ elements: e, data: s, className: p, ...c }) {
+  var l;
+  const d = !!((l = s.navigation) != null && l.length);
+  let a = null;
+  return d ? a = /* @__PURE__ */ n(t, { sx: { display: "flex", flexDirection: { xs: "column", md: "row" }, justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ n(
+      r,
       {
         sx: {
+          flex: "1 1 auto",
+          paddingRight: { xs: 0, md: 3 },
           display: "flex",
-          flexDirection: { xs: "column", md: "row" },
-          justifyContent: "space-between",
-          alignItems: "space-between",
+          flexDirection: "column",
+          alignItems: "flex-start",
           gap: 2,
           pb: 3
         },
         children: [
-          /* @__PURE__ */ jsx(Box, { children: elements.brand }),
-          /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
+          /* @__PURE__ */ i(r, { children: e.brand }),
+          /* @__PURE__ */ i(
+            r,
+            {
+              sx: {
+                lineHeight: 1
+              },
+              children: e.socialMedia
+            }
+          )
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(Root, { ...rest, className: clsx({ "footer--with-navs": withNavigation }, className), children: /* @__PURE__ */ jsxs(Container, { style: { padding: 0 }, children: [
-    topSection,
-    /* @__PURE__ */ jsx(Box, { sx: { pt: 3, borderTop: 1, borderColor: "divider" } }),
-    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Row, { autoCenter: true, children: [
-      elements.copyright,
-      elements.links
+    ),
+    /* @__PURE__ */ i(r, { sx: ({ palette: m }) => ({ mb: 3, borderTop: { xs: `1px solid ${m.grey[200]}`, md: 0 } }), children: e.navigation })
+  ] }) : a = /* @__PURE__ */ n(
+    t,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        justifyContent: "space-between",
+        alignItems: "space-between",
+        gap: 2,
+        pb: 3
+      },
+      children: [
+        /* @__PURE__ */ i(r, { children: e.brand }),
+        /* @__PURE__ */ i(
+          r,
+          {
+            sx: {
+              lineHeight: 1
+            },
+            children: e.socialMedia
+          }
+        )
+      ]
+    }
+  ), /* @__PURE__ */ i(b, { ...c, className: x({ "footer--with-navs": d }, p), children: /* @__PURE__ */ n(t, { style: { padding: 0 }, children: [
+    a,
+    /* @__PURE__ */ i(r, { sx: { pt: 3, borderTop: 1, borderColor: "divider" } }),
+    /* @__PURE__ */ i(t, { children: /* @__PURE__ */ n(h, { autoCenter: !0, children: [
+      e.copyright,
+      e.links
     ] }) })
   ] }) });
 }
-StandardLayout.propTypes = {
-  elements: PropTypes.shape({
-    brand: PropTypes.element,
-    navigation: PropTypes.element,
-    socialMedia: PropTypes.element,
-    copyright: PropTypes.element,
-    links: PropTypes.element
+g.propTypes = {
+  elements: o.shape({
+    brand: o.element,
+    navigation: o.element,
+    socialMedia: o.element,
+    copyright: o.element,
+    links: o.element
   }).isRequired,
-  data: PropTypes.object.isRequired,
-  className: PropTypes.string
+  data: o.object.isRequired,
+  className: o.string
 };
-const Root = styled("div")`
+const b = f("div")`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {
     display: none;
   }
   &.footer--with-navs {
-    ${(props) => props.theme.breakpoints.up("md")} {
+    ${(e) => e.theme.breakpoints.up("md")} {
       .footer-brand-desc {
         max-width: 360px;
         display: block;
@@ -86,4 +98,6 @@ const Root = styled("div")`
     margin-right: 0;
   }
 `;
-export default StandardLayout;
+export {
+  g as default
+};