@blocklet/ui-react 2.1.9 → 2.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.9",
+  "version": "2.1.13",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,11 +34,12 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.9",
-    "@arcblock/ux": "^2.1.9",
+    "@arcblock/did-connect": "^2.1.13",
+    "@arcblock/ux": "^2.1.13",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
+    "react-error-boundary": "^3.1.4",
     "styled-components": "^5.0.0"
   },
   "peerDependencies": {
@@ -56,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "7a3efb456e1dbe3318ab8757feb9e58a88c08d8e"
+  "gitHead": "ab9ffbc57b99ede75ed0ddd8f090e3d8e8fb97d1"
 }

package/src/Footer/brand.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+
+export default function Brand({ name, logo, description, ...rest }) {
+  const theme = useTheme();
+  if (!name && !logo && !description) {
+    return null;
+  }
+
+  const logoElement = React.isValidElement(logo) ? logo : <img src={logo} alt={name} />;
+
+  return (
+    <Root {...rest} $theme={theme}>
+      <div>
+        {logo && <div className="footer-brand-logo">{logoElement}</div>}
+        {name && <div className="footer-brand-name">{name}</div>}
+      </div>
+      {description && <div className="footer-brand-desc">{description}</div>}
+    </Root>
+  );
+}
+
+Brand.propTypes = {
+  name: PropTypes.node,
+  logo: PropTypes.node,
+  description: PropTypes.string,
+};
+
+Brand.defaultProps = {
+  name: '',
+  logo: '',
+  description: '',
+};
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  font-size: 14px;
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  > div:first-child {
+    display: flex;
+    align-items: center;
+  }
+  .footer-brand-logo {
+    height: 32px;
+    margin-right: 8px;
+    img,
+    svg {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .footer-brand-name {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .footer-brand-desc {
+    margin-top: 16px;
+  }
+
+  ${props => props.$theme.breakpoints.down('sm')} {
+    width: auto;
+  }
+`;

package/src/Footer/copyright.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+export default function Copyright({ owner, year, ...rest }) {
+  return (
+    <Root {...rest}>
+      Copyright © {year} {owner}
+    </Root>
+  );
+}
+
+Copyright.propTypes = {
+  owner: PropTypes.string,
+  year: PropTypes.string,
+};
+
+Copyright.defaultProps = {
+  owner: 'ArcBlock, Inc.',
+  year: `${new Date().getFullYear()}`,
+};
+
+const Root = styled.p`
+  margin: 0;
+  font-size: 14px;
+`;

package/src/Footer/index.js

@@ -1,48 +1,68 @@
 import React from 'react';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
+import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import NavMenu from '@arcblock/ux/lib/NavMenu';
+import { withErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import Brand from './brand';
+import Links from './links';
+import SocialMedia from './social-media';
+import Copyright from './copyright';
+import Row from './row';
+import { mapRecursive } from '../utils';
 
 import { blockletMetaProps } from '../types';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
-export default function Footer({ meta, ...rest }) {
+function Footer({ meta, ...rest }) {
   const theme = useTheme();
   const blocklet = Object.assign({}, window.blocklet, meta);
   if (!blocklet.appName) {
     return null;
   }
 
-  const { appLogo, appName, theme: blockletTheme, navigation = [] } = blocklet;
-  // TODO: 支持分组的 links (#590)
-  // 暂时只支持扁平的 links, 没有 link 属性的 navigation item 会被忽略
-  const navMenuItems = navigation
-    .filter(item => item.link)
-    .map(item => ({
-      label: <a href={item.link}>{item.title}</a>,
-    }));
+  const {
+    appLogo,
+    appName,
+    theme: blockletTheme,
+    navigation = [],
+    copyrightOwner,
+    footerNavigation,
+    footerLinks,
+    socialMedia,
+  } = blocklet;
+  const navMenuItems = mapRecursive(
+    // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
+    footerNavigation || navigation,
+    item => ({
+      ...item,
+      label: item.title,
+      link: item.link,
+    }),
+    'items'
+  );
 
   return (
     <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
       <Container>
-        <div className="footer_line">
-          <div className="footer_brand">
-            <img src={appLogo} alt="logo" />
-            <span>{appName}</span>
-          </div>
-          <div className="footer_nav">
-            {!!navMenuItems?.length && <NavMenu items={navMenuItems} />}
-          </div>
-        </div>
-        <div className="footer_line">
-          <div className="footer_copyright">
-            <span>Powered by Blocklet Server</span>
-          </div>
-          <div className="footer_extra" />
-        </div>
+        <Row>
+          <Box>
+            <Brand
+              name={appName}
+              logo={appLogo}
+              description="Official DID Wallet webapp implementation that makes it possible to manage your digital identities and assets from the browser."
+            />
+            <SocialMedia items={socialMedia} style={{ marginTop: 24 }} />
+          </Box>
+          <Links links={navMenuItems} />
+        </Row>
+        <Row autoCenter style={{ marginTop: 72 }}>
+          {<Copyright owner={copyrightOwner || appName} />}
+          {<Links flowLayout links={footerLinks} style={{ color: '#999' }} />}
+        </Row>
       </Container>
     </Root>
   );
@@ -57,52 +77,12 @@ Footer.defaultProps = {
 };
 
 const Root = styled.div`
-  padding: 32px 40px;
+  padding: 48px 0;
   border-top: 1px solid #eee;
-  color: #9397a1;
+  color: ${props => props.$theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-  .footer_line {
-    display: flex;
-    justify-content: space-between;
-  }
-  .footer_line + .footer_line {
-    margin-top: 32px;
-  }
-  .footer_brand {
-    display: flex;
-    align-items: center;
-    color: #777;
-    img {
-      height: 36px;
-    }
-    span {
-      margin-left: 8px;
-      font-size: 20px;
-    }
-  }
-  .footer_nav {
-    .navmenu {
-      padding-left: 0;
-      padding-right: 0;
-    }
-    > * {
-      background: transparent;
-    }
-  }
-  ${props => props.$theme.breakpoints.down('md')} {
-    .footer_line {
-      flex-direction: column;
-    }
-    .footer_line + .footer_line {
-      margin-top: 0;
-    }
-    .footer_brand {
-      img {
-        height: 24px;
-      }
-      span {
-        font-size: 16px;
-      }
-    }
-  }
 `;
+
+export default withErrorBoundary(Footer, {
+  FallbackComponent: ErrorFallback,
+});

package/src/Footer/links.js

@@ -0,0 +1,202 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import clsx from 'clsx';
+
+/**
+ * footer 中的 links (支持分组, 最多支持 2 级)
+ * TODO: dark/light theme
+ */
+export default function Links({ links, flowLayout, ...rest }) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState(-1);
+  if (!links?.length) {
+    return null;
+  }
+  // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
+  const isGroupMode = links.some(item => item.items?.length);
+  const renderItem = ({ label, link, render, props }) => {
+    let result = label;
+    if (render) {
+      result = render({ label, link, props });
+    } else if (link) {
+      result = (
+        <a href={link} {...props}>
+          {label}
+        </a>
+      );
+    }
+    return result;
+  };
+
+  return (
+    <Root
+      {...rest}
+      className={clsx(rest.className, {
+        'footer-links--grouped': isGroupMode,
+        'footer-links--flow': flowLayout,
+      })}
+      $theme={theme}>
+      <div className="footer-links-inner">
+        {flowLayout &&
+          links.map((item, i) => (
+            <span key={i} className="footer-links-item">
+              {renderItem(item)}
+            </span>
+          ))}
+        {!flowLayout &&
+          links.map((item, i) => {
+            const { items } = item;
+            return (
+              <div
+                key={i}
+                className={clsx('footer-links-group', {
+                  'footer-links-group--active': i === activeIndex,
+                })}
+                onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
+                <span className="footer-links-item">{renderItem(item)}</span>
+                {!!items?.length && (
+                  <div className="footer-links-sub">
+                    {items.map((child, j) => (
+                      <span key={j} className="footer-links-item">
+                        {renderItem(child)}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </Root>
+  );
+}
+
+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-item {
+    display: inline-block;
+    padding: 0 8px;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+  .footer-links-group + .footer-links-group {
+    margin-left: 128px;
+  }
+  &.footer-links--grouped {
+    .footer-links-group {
+      > .footer-links-item {
+        font-weight: bold;
+      }
+      .footer-links-sub {
+        margin-top: 8px;
+      }
+    }
+  }
+  a {
+    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;
+      }
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('lg')} {
+    .footer-links-group + .footer-links-group {
+      margin-left: 56px;
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('lg')} {
+    .footer-links-group + .footer-links-group {
+      margin-left: 40px;
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .footer-links-inner {
+      flex-direction: column;
+      margin: 0;
+    }
+    .footer-links-sub {
+      display: none;
+    }
+    .footer-links-group {
+      padding: 12px 0;
+      border-top: 1px solid ${props => props.$theme.palette.grey[200]};
+    }
+    .footer-links-group + .footer-links-group {
+      margin-left: 0;
+    }
+    .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: 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/src/Footer/row.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import clsx from 'clsx';
+
+export default function Row({ children, autoCenter, ...rest }) {
+  const theme = useTheme();
+  if (!children) {
+    return null;
+  }
+  return (
+    <RowRoot
+      {...rest}
+      className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}
+      $theme={theme}>
+      {children}
+    </RowRoot>
+  );
+}
+
+Row.propTypes = {
+  children: PropTypes.any,
+  autoCenter: PropTypes.bool,
+};
+
+Row.defaultProps = {
+  children: null,
+  autoCenter: false,
+};
+
+const RowRoot = styled.div`
+  display: flex;
+  justify-content: space-between;
+  & + & {
+    margin-top: 24px;
+  }
+  &.footer-row-auto-center > *:only-child {
+    margin: 0 auto;
+  }
+
+  ${props => props.$theme.breakpoints.down('md')} {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 16px;
+    > * {
+      flex: 1 0 100%;
+    }
+    &.footer-row-auto-center > * {
+      margin: 0 auto;
+    }
+  }
+`;

package/src/Footer/social-media.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import Icon from '../Icon';
+
+export default function SocialMedia({ items, ...rest }) {
+  const theme = useTheme();
+  if (!items?.length) {
+    return null;
+  }
+  return (
+    <Root {...rest}>
+      {items.map((item, i) => {
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <a key={i} href={item.link} target="_blank" rel="noreferrer">
+            <Icon
+              icon={item.icon}
+              sx={{ bgcolor: theme.palette.grey[600], color: '#fff' }}
+              size={44}
+              variant="rounded"
+              component="span"
+            />
+          </a>
+        );
+      })}
+    </Root>
+  );
+}
+
+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;
+  align-items: center;
+  a + a {
+    margin-left: 12px;
+  }
+`;

package/src/Header/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ThemeProvider } from '@mui/material/styles';
+import { withErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { create } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
@@ -58,7 +60,7 @@ const parseNavigation = navigation => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
-export default function Header({ meta, addons, sessionManagerProps, ...rest }) {
+function Header({ meta, addons, sessionManagerProps, ...rest }) {
   const sessionInfo = React.useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
@@ -157,3 +159,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
     }
   }
 `;
+
+export default withErrorBoundary(Header, {
+  FallbackComponent: ErrorFallback,
+});

package/src/Icon/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@mui/material/Avatar';
+import '@iconify/iconify';
+import { isUrl } from '../utils';
+
+/**
+ * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
+ */
+export default function Icon({ icon, size, ...rest }) {
+  const sx = { ...rest.sx };
+  if (size) {
+    sx.width = size;
+    sx.height = size;
+  }
+  if (isUrl(icon)) {
+    return <Avatar {...rest} src={icon} sx={sx} />;
+  }
+  if (icon) {
+    // y = 0.6 * x + 4
+    const iconHeight = size ? 0.6 * size + 4 : 0;
+    return (
+      <Avatar {...rest} sx={sx}>
+        <span
+          className="iconify"
+          data-icon={icon}
+          {...(iconHeight && { 'data-height': iconHeight })}
+        />
+      </Avatar>
+    );
+  }
+  return null;
+}
+
+Icon.propTypes = {
+  // icon 支持 2 种形式:
+  // 1. iconify icon name: <prefix>:<name>
+  // 2. url
+  icon: PropTypes.string.isRequired,
+  size: PropTypes.number,
+};
+
+Icon.defaultProps = {
+  size: null,
+};

package/src/utils.js

@@ -0,0 +1,16 @@
+export const mapRecursive = (array, fn, childrenKey = 'children') => {
+  return array.map(item => {
+    if (Array.isArray(item[childrenKey])) {
+      return fn({
+        ...item,
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
+      });
+    }
+    return fn(item);
+  });
+};
+
+// "http://", "https://", "//" 开头的 3 种情况
+export const isUrl = str => {
+  return /^(https?:)?\/\//.test(str);
+};