@blocklet/ui-react 2.6.8 → 2.7.0

package/es/Footer/layout/standard.js

@@ -0,0 +1,81 @@
+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';
+
+/**
+ * footer standard layout
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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'
+          },
+          justifyContent: 'space-between',
+          alignItems: {
+            xs: 'center',
+            md: 'space-between'
+          },
+          gap: 2,
+          pb: 3
+        },
+        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.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element
+  }).isRequired,
+  data: PropTypes.object.isRequired
+};
+const Root = styled('div')`
+  padding: 32px 0 24px 0;
+  .footer-brand-name,
+  .footer-brand-desc {
+    display: none;
+  }
+  && .footer-brand-logo {
+    margin-right: 0;
+  }
+`;
+export default StandardLayout;

package/es/Footer/links.js

@@ -0,0 +1,238 @@
+/* eslint-disable react/no-array-index-key */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@arcblock/ux/lib/Theme';
+import clsx from 'clsx';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Icon from '../Icon';
+
+/**
+ * footer 中的 links (支持分组, 最多支持 2 级)
+ * TODO: dark/light theme
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Links({
+  links,
+  flowLayout,
+  ...rest
+}) {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  if (!links?.length) {
+    return null;
+  }
+  // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
+  const isGroupMode = links.some(item => item.items?.length);
+  const renderItem = ({
+    label,
+    link,
+    icon,
+    render,
+    props
+  }) => {
+    let result = label;
+    if (render) {
+      result = render({
+        label,
+        link,
+        props
+      });
+    } else if (link) {
+      result = /*#__PURE__*/_jsx("a", {
+        href: link,
+        ...props,
+        children: label
+      });
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [icon && /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        size: 20,
+        sx: {
+          mr: 0.5
+        }
+      }), result]
+    });
+  };
+  return /*#__PURE__*/_jsx(Root, {
+    ...rest,
+    className: clsx(rest.className, {
+      'footer-links--grouped': isGroupMode,
+      'footer-links--flow': flowLayout
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "footer-links-inner",
+      children: [flowLayout && links.map((item, i) => /*#__PURE__*/_jsx("span", {
+        className: "footer-links-item",
+        children: renderItem(item)
+      }, i)), !flowLayout && links.map((item, i) => {
+        const {
+          items
+        } = item;
+        const isActive = i === activeIndex;
+        return /*#__PURE__*/_jsxs("div", {
+          className: clsx('footer-links-group', {
+            'footer-links-group--active': isActive
+          }),
+          onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "footer-links-item",
+            children: [renderItem(item), !!items?.length && /*#__PURE__*/_jsx("span", {
+              className: "footer-links-group-expand-icon",
+              children: /*#__PURE__*/_jsx(ExpandMoreIcon, {
+                style: {
+                  transform: `rotate(${isActive ? 180 : 0}deg)`
+                }
+              })
+            })]
+          }), !!items?.length && /*#__PURE__*/_jsx("div", {
+            className: "footer-links-sub",
+            children: items.map((child, j) => /*#__PURE__*/_jsx("span", {
+              className: "footer-links-item",
+              children: renderItem(child)
+            }, j))
+          })]
+        }, i);
+      })]
+    })
+  });
+}
+Links.propTypes = {
+  links: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    link: PropTypes.string,
+    render: PropTypes.func,
+    props: PropTypes.object
+  })),
+  // 流动布局, 简单的从左到右排列
+  flowLayout: PropTypes.bool
+};
+Links.defaultProps = {
+  links: [],
+  flowLayout: false
+};
+const Root = styled('div')`
+  overflow: hidden;
+  color: ${props => props.theme.palette.grey[600]};
+  .footer-links-inner {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 -8px;
+  }
+  .footer-links-group,
+  .footer-links-sub {
+    display: flex;
+    flex-direction: column;
+  }
+  .footer-links-sub .footer-links-item {
+    color: ${props => props.theme.palette.grey[900]};
+  }
+  .footer-links-group-expand-icon {
+    display: none;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translate(0, -50%);
+    line-height: 1;
+    svg {
+      width: auto;
+      height: 0.75em;
+    }
+  }
+  .footer-links-item {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    padding: 4px 8px;
+    font-size: 14px;
+  }
+  &.footer-links--grouped {
+    .footer-links-group {
+      > .footer-links-item {
+        font-weight: bold;
+      }
+      .footer-links-sub {
+        margin-top: 8px;
+      }
+    }
+  }
+  a {
+    display: inline-block;
+    max-width: 150px;
+    color: inherit;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.footer-links--flow {
+    display: inline-flex;
+    .footer-links-inner {
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: 0 -8px;
+      .footer-links-item {
+        padding: 0 8px;
+      }
+      .footer-links-item + .footer-links-item::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate(0, -50%);
+        height: 1em;
+        border-left: 1px solid ${props => props.theme.palette.grey[400]};
+      }
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    .footer-links-inner {
+      flex-direction: column;
+      margin: 0;
+    }
+    .footer-links-sub {
+      display: none;
+    }
+    .footer-links-group {
+      position: relative;
+      padding: 12px 0;
+      .footer-links-item .footer-links-group-expand-icon {
+        display: inline-block;
+      }
+    }
+    .footer-links-group + .footer-links-group {
+      border-top: 1px solid ${props => props.theme.palette.grey[200]};
+    }
+    .footer-links-group--active {
+      .footer-links-sub {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .footer-links-item {
+          flex: 0 0 50%;
+        }
+      }
+    }
+    .footer-links-item {
+      padding-left: 0;
+      padding-right: 0;
+      font-size: 13px;
+    }
+    &.footer-links--grouped {
+      .footer-links-group {
+        > .footer-links-item {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &.footer-links--flow {
+      .footer-links-inner {
+        flex-direction: row;
+      }
+    }
+  }
+`;

package/es/Footer/social-media.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import { useTheme, styled } from '@arcblock/ux/lib/Theme';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SocialMedia({
+  items,
+  ...rest
+}) {
+  const theme = useTheme();
+  if (!items?.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Root, {
+    ...rest,
+    children: items.map((item, i) => {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        _jsx("a", {
+          href: item.link,
+          target: "_blank",
+          rel: "noreferrer",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: item.icon || item.title,
+            sx: {
+              bgcolor: theme.palette.grey[600],
+              color: '#fff'
+            },
+            size: 24,
+            component: "span"
+          })
+        }, i)
+      );
+    })
+  });
+}
+SocialMedia.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
+    icon: PropTypes.string,
+    link: PropTypes.string
+  }))
+};
+SocialMedia.defaultProps = {
+  items: null
+};
+const Root = styled('div')`
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  a {
+    color: ${props => props.theme.palette.grey[400]};
+    text-decoration: none;
+    &:hover {
+      color: ${props => props.theme.palette.primary.light};
+    }
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    gap: 12px;
+  }
+`;

package/es/Header/index.js

@@ -0,0 +1,194 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { withErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import { styled } from '@arcblock/ux/lib/Theme';
+import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
+import NavMenu from '@arcblock/ux/lib/NavMenu';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Icon from '../Icon';
+import OverridableThemeProvider from '../common/overridable-theme-provider';
+import { blockletMetaProps, sessionManagerProps } from '../types';
+import { mapRecursive, flatRecursive, matchPaths } from '../utils';
+import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
+import HeaderAddons from '../common/header-addons';
+import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
+
+// blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
+import { jsx as _jsx } from "react/jsx-runtime";
+const parseNavigation = navigation => {
+  if (!navigation?.length) {
+    return {
+      navItems: [],
+      activeId: null
+    };
+  }
+  let counter = 1;
+  const parseItem = item => {
+    const icon = item.icon ? /*#__PURE__*/_jsx(Icon, {
+      icon: item.icon
+    }) : null;
+    if (item.items) {
+      return {
+        id: `${counter++}`,
+        label: item.title,
+        icon,
+        children: item.items
+      };
+    }
+    let props = {};
+    if (item.link?.startsWith('http://') || item.link?.startsWith('https://')) {
+      props = {
+        target: '_blank',
+        rel: 'noreferrer'
+      };
+    }
+    return {
+      id: `${counter++}`,
+      label: /*#__PURE__*/_jsx("a", {
+        href: item.link,
+        ...props,
+        children: item.title
+      }),
+      icon,
+      link: item.link
+    };
+  };
+  const navItems = mapRecursive(navigation, parseItem, 'items');
+  const flattened = flatRecursive(navItems);
+  const matchedIndex = matchPaths(flattened.map(item => item.link));
+  return {
+    navItems,
+    activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null
+  };
+};
+
+/**
+ * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
+ */
+// eslint-disable-next-line no-shadow
+function Header({
+  meta,
+  addons,
+  sessionManagerProps,
+  homeLink,
+  theme: themeOverrides,
+  ...rest
+}) {
+  useWalletHiddenTopbar();
+  const {
+    locale
+  } = useLocaleContext() || {};
+  const formattedBlocklet = useMemo(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [meta]);
+  if (!formattedBlocklet.appName) {
+    return null;
+  }
+  const {
+    appLogo,
+    appLogoRect,
+    theme
+  } = formattedBlocklet;
+  const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
+  const parsedNavigation = parseNavigation(navigation);
+  const {
+    navItems,
+    activeId
+  } = parsedNavigation;
+  const _addons = typeof addons === 'function' ? builtInAddons => addons(builtInAddons, {
+    navigation: parsedNavigation
+  }) : addons;
+  const headerAddons = /*#__PURE__*/_jsx(HeaderAddons, {
+    formattedBlocklet: formattedBlocklet,
+    addons: _addons,
+    sessionManagerProps: sessionManagerProps
+  });
+  return /*#__PURE__*/_jsx(OverridableThemeProvider, {
+    theme: themeOverrides,
+    children: /*#__PURE__*/_jsx(StyledUxHeader, {
+      homeLink: homeLink,
+      logo: /*#__PURE__*/_jsx("img", {
+        src: appLogoRect || appLogo,
+        alt: "logo"
+      }),
+      addons: headerAddons,
+      ...rest,
+      $bgcolor: theme?.background?.header,
+      children: !navItems?.length ? null : ({
+        isMobile
+      }) => /*#__PURE__*/_jsx(NavMenu, {
+        mode: isMobile ? 'inline' : 'horizontal',
+        activeId: activeId,
+        items: navItems,
+        className: "header-nav",
+        bgColor: "transparent",
+        textColor: "#888"
+      })
+    })
+  });
+}
+Header.propTypes = {
+  meta: blockletMetaProps,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps,
+  homeLink: PropTypes.string,
+  // 允许覆盖 header 内置的 theme
+  theme: PropTypes.object
+};
+Header.defaultProps = {
+  meta: {},
+  addons: null,
+  sessionManagerProps: {
+    showRole: true
+  },
+  homeLink: publicPath,
+  theme: null
+};
+const StyledUxHeader = styled(ResponsiveHeader)`
+  ${({
+  $bgcolor
+}) => `background-color: ${$bgcolor || '#fff'};`}
+  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  .header-logo {
+    min-width: 44px;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-logo {
+      min-width: 32px;
+    }
+  }
+  .header-nav {
+    .navmenu-sub .navmenu-item {
+      min-width: 80px;
+    }
+  }
+  .header-nav.navmenu--horizontal {
+    .navmenu-root > .navmenu-sub,
+    .navmenu-root > .navmenu-item {
+      padding: 16px 4px;
+
+      .navmenu-sub-container {
+        padding-top: 0;
+      }
+    }
+    .navmenu-item-icon > .MuiAvatar-root,
+    .navmenu-sub-icon > .MuiAvatar-root {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+export default withErrorBoundary(Header, {
+  FallbackComponent: ErrorFallback
+});

package/es/Icon/index.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import Avatar from '@mui/material/Avatar';
+import 'iconify-icon';
+import { isUrl, isIconifyString } from '../utils';
+
+/**
+ * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Icon({
+  icon,
+  size,
+  sx,
+  ...rest
+}) {
+  const _sx = [...(Array.isArray(sx) ? sx : [sx])];
+  if (size) {
+    _sx.push({
+      width: size,
+      height: size
+    });
+  }
+  // 禁用默认的 circular variant 样式
+  if (!rest.variant) {
+    _sx.push({
+      '&.MuiAvatar-root': {
+        color: 'inherit',
+        fontWeight: 'bold',
+        backgroundColor: 'transparent',
+        borderRadius: 0
+      },
+      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
+      '&.MuiAvatar-root svg': {
+        width: '100%',
+        height: '100%'
+      }
+    });
+  }
+  if (isUrl(icon)) {
+    return /*#__PURE__*/_jsx(Avatar, {
+      as: "span",
+      ...rest,
+      src: icon,
+      sx: _sx
+    });
+  }
+  if (isIconifyString(icon)) {
+    // y = 0.6 * x + 4
+    const height = size ? 0.6 * size + 4 : 0;
+    return /*#__PURE__*/_jsx(Avatar, {
+      as: "span",
+      ...rest,
+      sx: _sx,
+      children: /*#__PURE__*/_jsx("iconify-icon", {
+        icon: icon,
+        height: height || undefined
+      })
+    });
+  }
+  // letter avatar
+  if (icon && typeof icon === 'string') {
+    _sx.push({
+      '&.MuiAvatar-root': {
+        display: 'inline-flex',
+        ...(size && {
+          fontSize: size - 2
+        })
+      }
+    });
+    return /*#__PURE__*/_jsx(Avatar, {
+      as: "span",
+      ...rest,
+      sx: _sx,
+      children: Array.from(icon)[0]
+    });
+  }
+  return null;
+}
+Icon.propTypes = {
+  // icon 支持 2 种形式:
+  // 1. iconify icon name: <prefix>:<name>
+  // 2. url
+  icon: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object])
+};
+Icon.defaultProps = {
+  size: null,
+  sx: null
+};