@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/Footer/index.js

@@ -1,36 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _reactErrorBoundary = require("react-error-boundary");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
-var _internalFooter = _interopRequireDefault(require("./internal-footer"));
-var _utils = require("../utils");
-var _blocklets = require("../blocklets");
-var _types = require("../types");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Footer({
-  meta,
-  theme: themeOverrides,
-  ...rest
-}) {
-  const {
-    locale
-  } = (0, _context.useLocaleContext)() || {};
-  const formattedBlocklet = (0, _react.useMemo)(() => {
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import PropTypes from "prop-types";
+import { styled } 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 { temp as colors } from "@arcblock/ux/lib/Colors";
+import omit from "lodash/omit";
+import OverridableThemeProvider from "../common/overridable-theme-provider.js";
+import InternalFooter from "./internal-footer.js";
+import { mapRecursive } from "../utils.js";
+import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
+import { BlockletMetaProps } from "../types.js";
+function Footer({ meta, theme: themeOverrides, ...rest }) {
+  const { locale } = useLocaleContext() || {};
+  const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
-      return (0, _blocklets.formatBlockletInfo)(blocklet);
+      return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
@@ -39,19 +26,11 @@ function Footer({
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    appName,
-    appDescription,
-    description,
-    theme,
-    copyright
-  } = formattedBlocklet;
+  const { appLogo, appLogoRect, appName, appDescription, description, theme, copyright } = formattedBlocklet;
   const localized = {
-    footerNav: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.footer, locale) || [],
-    socialMedia: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.social, locale) || [],
-    links: (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.bottom, locale) || []
+    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
+    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
+    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || []
   };
   const props = {
     brand: {
@@ -59,48 +38,45 @@ function Footer({
       description: appDescription || description,
       logo: appLogoRect || appLogo
     },
-    navigation: (0, _utils.mapRecursive)(localized.footerNav, item => ({
-      ...item,
-      label: item.title,
-      link: item.link
-    }), "items"),
+    navigation: mapRecursive(
+      localized.footerNav,
+      (item) => ({
+        ...item,
+        label: item.title,
+        link: item.link
+      }),
+      "items"
+    ),
     copyright,
     socialMedia: localized.socialMedia,
-    links: localized.links.map(item => ({
-      ...item,
-      label: item.title
-    }))
+    links: localized.links.map((item) => ({ ...item, label: item.title }))
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
-    theme: themeOverrides,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StyledInternalFooter, {
+  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
+    StyledInternalFooter,
+    {
       ...props,
-      ...(0, _omit.default)(rest, ["bordered"]),
+      ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,
       $bgcolor: theme?.background?.footer
-    })
-  });
+    }
+  ) });
 }
 Footer.propTypes = {
-  meta: _types.BlockletMetaProps,
+  meta: BlockletMetaProps,
   // 允许覆盖 footer 内置的 theme
-  theme: _propTypes.default.object
+  theme: PropTypes.object
 };
 Footer.defaultProps = {
   meta: {},
   theme: null
 };
-const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)`
-  ${({
-  $bordered
-}) => `border-top: 1px solid ${$bordered ? _Colors.temp.strokeSep : "#eee"};`}
-  color: ${props => props.theme.palette.grey[600]};
-  ${({
-  $bgcolor
-}) => $bgcolor && `background-color: ${$bgcolor};`}
+const StyledInternalFooter = styled(InternalFooter)`
+  ${({ $bordered }) => `border-top: 1px solid ${$bordered ? colors.strokeSep : "#eee"};`}
+  color: ${(props) => props.theme.palette.grey[600]};
+  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
-module.exports = (0, _reactErrorBoundary.withErrorBoundary)(Footer, {
-  FallbackComponent: _ErrorBoundary.ErrorFallback
-});
+export default withErrorBoundary(Footer, {
+  FallbackComponent: ErrorFallback
+});

package/lib/Footer/internal-footer.js

@@ -1,74 +1,47 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _brand = _interopRequireDefault(require("./brand"));
-var _links = _interopRequireDefault(require("./links"));
-var _socialMedia = _interopRequireDefault(require("./social-media"));
-var _copyright = _interopRequireDefault(require("./copyright"));
-var _standard = _interopRequireDefault(require("./layout/standard"));
-var _plain = _interopRequireDefault(require("./layout/plain"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const layouts = [{
-  name: "plain",
-  // navigation 数据为空时, 使用简单布局
-  support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
-  component: _plain.default
-}, {
-  name: "standard",
-  // 默认标准布局
-  support: () => true,
-  component: _standard.default
-}];
-const layoutsKeyByName = layouts.reduce((acc, cur) => ({
-  ...acc,
-  [cur.name]: cur
-}), {});
+import { jsx, jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+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 = [
+  {
+    name: "plain",
+    // navigation 数据为空时, 使用简单布局
+    support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
+    component: PlainLayout
+  },
+  {
+    name: "standard",
+    // 默认标准布局
+    support: () => true,
+    component: StandardLayout
+  }
+];
+const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur }), {});
 function InternalFooter(props) {
-  const {
-    brand,
-    navigation,
-    socialMedia,
-    copyright,
-    links,
-    layout,
-    ...rest
-  } = props;
+  const { brand, navigation, socialMedia, copyright, links, layout, ...rest } = props;
   const renderBrand = () => {
-    return brand ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_brand.default, {
-      ...brand
-    }) : null;
+    return brand ? /* @__PURE__ */ jsx(Brand, { ...brand }) : null;
   };
   const renderNavigation = () => {
-    return navigation?.length ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_links.default, {
-      links: navigation
-    }) : null;
+    return navigation?.length ? /* @__PURE__ */ jsx(Links, { links: navigation }) : null;
   };
   const renderSocialMedia = () => {
-    return socialMedia?.length ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_socialMedia.default, {
-      items: socialMedia
-    }) : null;
+    return socialMedia?.length ? /* @__PURE__ */ jsx(SocialMedia, { items: socialMedia }) : null;
   };
   const renderCopyright = () => {
     const copyrightOwner = copyright?.owner || brand?.name;
     if (!copyrightOwner) {
       return null;
     }
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_copyright.default, {
-      owner: copyrightOwner,
-      year: copyright?.year || void 0
-    });
+    return /* @__PURE__ */ jsx(Copyright, { owner: copyrightOwner, year: copyright?.year || void 0 });
   };
   const renderLinks = () => {
-    return links?.length ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_links.default, {
-      flowLayout: true,
-      links
-    }) : null;
+    return links?.length ? /* @__PURE__ */ jsx(Links, { flowLayout: true, links }) : null;
   };
   const elements = {
     brand: renderBrand(),
@@ -79,60 +52,59 @@ function InternalFooter(props) {
   };
   let LayoutComponent = null;
   if (layout === "auto") {
-    LayoutComponent = layouts.find(item => item.support(elements, props)).component;
+    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__ */(0, _jsxRuntime.jsxs)(_Box.default, {
-    position: "relative",
-    ...rest,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(LayoutComponent, {
-      elements,
-      data: props
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
-      position: "absolute",
-      right: 16,
-      bottom: 0,
-      fontSize: 12,
-      sx: {
-        color: "transparent",
-        "::selection": {
-          background: "#000",
-          color: "#fff"
-        }
-      },
-      children: window?.blocklet?.version
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...rest, 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.default.shape({
-    name: _propTypes.default.node,
-    description: _propTypes.default.string,
-    logo: _propTypes.default.node
+  brand: PropTypes.shape({
+    name: PropTypes.node,
+    description: PropTypes.string,
+    logo: PropTypes.node
   }),
-  navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.node,
-    link: _propTypes.default.string
-  })),
-  socialMedia: _propTypes.default.arrayOf(_propTypes.default.shape({
-    icon: _propTypes.default.node,
-    link: _propTypes.default.string
-  })),
-  copyright: _propTypes.default.shape({
-    owner: _propTypes.default.string,
-    year: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  navigation: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      link: PropTypes.string
+    })
+  ),
+  socialMedia: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.node,
+      link: PropTypes.string
+    })
+  ),
+  copyright: PropTypes.shape({
+    owner: PropTypes.string,
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }),
   // privacy/legal 等链接, 常放于 footer 右下侧或最底部
-  links: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.node,
-    link: _propTypes.default.string
-  })),
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      link: PropTypes.string
+    })
+  ),
   // 可显式指定 footer layout, 默认根据内容自动决定 layout
-  layout: _propTypes.default.oneOf(["auto", "standard", "plain"])
+  layout: PropTypes.oneOf(["auto", "standard", "plain"])
 };
 InternalFooter.defaultProps = {
   brand: null,
@@ -142,4 +114,4 @@ InternalFooter.defaultProps = {
   links: null,
   layout: "auto"
 };
-module.exports = InternalFooter;
+export default InternalFooter;

package/lib/Footer/layout/plain.js

@@ -1,51 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _row = _interopRequireDefault(require("./row"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function PlainLayout({
-  elements,
-  data,
-  ...rest
-}) {
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
-    ...rest,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Container.default, {
-      className: "plain-layout-container",
-      children: [!!data.links && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_row.default, {
-        sx: {
-          width: 1
-        },
-        autoCenter: true,
-        children: [elements.copyright, elements.links]
-      }), !data.links && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _react.cloneElement)(elements.brand, {
-          name: null,
-          description: null
-        }), elements.copyright]
-      })]
-    })
-  });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import PropTypes from "prop-types";
+import Container from "@mui/material/Container";
+import { styled } from "@arcblock/ux/lib/Theme";
+import Row from "./row.js";
+function PlainLayout({ elements, data, ...rest }) {
+  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsxs(Container, { className: "plain-layout-container", children: [
+    !!data.links && /* @__PURE__ */ jsxs(Row, { sx: { width: 1 }, autoCenter: true, children: [
+      elements.copyright,
+      elements.links
+    ] }),
+    !data.links && /* @__PURE__ */ jsxs(Fragment, { children: [
+      cloneElement(elements.brand, { name: null, description: null }),
+      elements.copyright
+    ] })
+  ] }) });
 }
 PlainLayout.propTypes = {
-  elements: _propTypes.default.shape({
-    brand: _propTypes.default.element,
-    navigation: _propTypes.default.element,
-    socialMedia: _propTypes.default.element,
-    copyright: _propTypes.default.element,
-    links: _propTypes.default.element
+  elements: PropTypes.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element
   }).isRequired,
-  data: _propTypes.default.object.isRequired
+  data: PropTypes.object.isRequired
 };
-const Root = (0, _Theme.styled)("div")`
+const Root = styled("div")`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;
@@ -55,4 +36,4 @@ const Root = (0, _Theme.styled)("div")`
     gap: 8px;
   }
 `;
-module.exports = PlainLayout;
+export default PlainLayout;

package/lib/Footer/layout/row.js

@@ -1,40 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Row;
-var _jsxRuntime = require("react/jsx-runtime");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _clsx = _interopRequireDefault(require("clsx"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Row({
-  children,
-  autoCenter,
-  ...rest
-}) {
+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__ */(0, _jsxRuntime.jsx)(RowRoot, {
-    ...rest,
-    className: (0, _clsx.default)(rest.className, {
-      "footer-row-auto-center": autoCenter
-    }),
-    children
-  });
+  return /* @__PURE__ */ jsx(RowRoot, { ...rest, className: clsx(rest.className, { "footer-row-auto-center": autoCenter }), children });
 }
 Row.propTypes = {
-  children: _propTypes.default.any,
-  autoCenter: _propTypes.default.bool
+  children: PropTypes.any,
+  autoCenter: PropTypes.bool
 };
 Row.defaultProps = {
   children: null,
   autoCenter: false
 };
-const RowRoot = (0, _Theme.styled)(_Box.default)`
+const RowRoot = styled(Box)`
   display: flex;
   justify-content: space-between;
   & + & {
@@ -44,7 +27,7 @@ const RowRoot = (0, _Theme.styled)(_Box.default)`
     margin: 0 auto;
   }
 
-  ${props => props.theme.breakpoints.down("md")} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     align-items: stretch;
     flex-direction: column;
     gap: 16px;
@@ -55,4 +38,4 @@ const RowRoot = (0, _Theme.styled)(_Box.default)`
       margin: 0 auto;
     }
   }
-`;
+`;

package/lib/Footer/layout/standard.js

@@ -1,76 +1,46 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _row = _interopRequireDefault(require("./row"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function StandardLayout({
-  elements,
-  data,
-  ...rest
-}) {
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
-    ...rest,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Container.default, {
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import { styled } from "@arcblock/ux/lib/Theme";
+import Row from "./row.js";
+function StandardLayout({ elements, data, ...rest }) {
+  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
         sx: {
           display: "flex",
-          flexDirection: {
-            xs: "column",
-            md: "row"
-          },
+          flexDirection: { xs: "column", md: "row" },
           justifyContent: "space-between",
-          alignItems: {
-            xs: "center",
-            md: "space-between"
-          },
+          alignItems: { xs: "center", md: "space-between" },
           gap: 2,
           pb: 3
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
-          children: elements.brand
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
-          lineHeight: 1,
-          children: elements.socialMedia
-        })]
-      }), !!data.navigation?.length && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
-        sx: {
-          mb: 6,
-          pt: 3,
-          borderTop: 1,
-          borderColor: "grey.200"
-        },
-        children: elements.navigation
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_row.default, {
-        sx: {
-          pt: 3,
-          borderTop: 1,
-          borderColor: "grey.200"
-        },
-        autoCenter: true,
-        children: [elements.copyright, elements.links]
-      })]
-    })
-  });
+        children: [
+          /* @__PURE__ */ jsx(Box, { children: elements.brand }),
+          /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
+        ]
+      }
+    ),
+    !!data.navigation?.length && /* @__PURE__ */ jsx(Box, { sx: { mb: 6, pt: 3, borderTop: 1, borderColor: "grey.200" }, children: elements.navigation }),
+    /* @__PURE__ */ jsxs(Row, { sx: { pt: 3, borderTop: 1, borderColor: "grey.200" }, autoCenter: true, children: [
+      elements.copyright,
+      elements.links
+    ] })
+  ] }) });
 }
 StandardLayout.propTypes = {
-  elements: _propTypes.default.shape({
-    brand: _propTypes.default.element,
-    navigation: _propTypes.default.element,
-    socialMedia: _propTypes.default.element,
-    copyright: _propTypes.default.element,
-    links: _propTypes.default.element
+  elements: PropTypes.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element
   }).isRequired,
-  data: _propTypes.default.object.isRequired
+  data: PropTypes.object.isRequired
 };
-const Root = (0, _Theme.styled)("div")`
+const Root = styled("div")`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {
@@ -80,4 +50,4 @@ const Root = (0, _Theme.styled)("div")`
     margin-right: 0;
   }
 `;
-module.exports = StandardLayout;
+export default StandardLayout;