@arcblock/ux 2.6.8 → 2.7.0

package/es/Footer/index.js

@@ -0,0 +1,172 @@
+/* eslint-disable react/no-unused-prop-types */
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import MuiContainer from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import { mergeProps } from '../Util';
+import Logo from '../Logo';
+import { styled } from '../Theme';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Footer(props) {
+  const newProps = mergeProps(props, Footer, ['dark', 'style']);
+  const {
+    className,
+    copyStart,
+    style,
+    brand,
+    dark,
+    addon
+  } = newProps;
+  const endYearString = `${new Date().getFullYear()}`;
+  const copyStartString = `${copyStart}`;
+  const copyYear = endYearString === copyStartString ? endYearString : `${copyStartString}-${endYearString}`;
+  return /*#__PURE__*/_jsxs(Container, {
+    className: className,
+    style: style,
+    dark: dark,
+    children: [/*#__PURE__*/_jsx(MuiContainer, {
+      maxWidth: false,
+      children: /*#__PURE__*/_jsxs(Typography, {
+        component: "div",
+        className: "footer",
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          component: "p",
+          className: "footer-item",
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "footer-copy",
+            children: ["Copyright \xA9 ", copyYear, " "]
+          }), /*#__PURE__*/_jsx("span", {
+            className: "footer-brand",
+            children: brand
+          })]
+        }), addon && /*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          className: "footer-item",
+          sx: {
+            order: {
+              xs: '-1',
+              md: 'initial'
+            },
+            ml: {
+              xs: 0,
+              md: 'auto'
+            },
+            width: {
+              xs: '100%',
+              md: 'auto'
+            }
+          },
+          children: addon
+        }), /*#__PURE__*/_jsxs(Typography, {
+          component: "p",
+          className: "footer-item",
+          style: {
+            justifyContent: 'flex-end',
+            flexShrink: 0
+          },
+          children: ["Powered by", /*#__PURE__*/_jsx(Logo, {
+            mode: dark ? 'light' : 'dark',
+            layout: "horizontal",
+            className: "logo-container"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      position: "absolute",
+      right: 16,
+      bottom: 0,
+      fontSize: 12,
+      sx: {
+        color: 'transparent',
+        '::selection': {
+          background: '#000',
+          color: '#fff'
+        }
+      },
+      children: window?.blocklet?.version
+    })]
+  });
+}
+Footer.propTypes = {
+  dark: PropTypes.bool,
+  className: PropTypes.string,
+  copyStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  brand: PropTypes.string,
+  style: PropTypes.object,
+  addon: PropTypes.node
+};
+Footer.defaultProps = {
+  dark: false,
+  brand: 'ArcBlock, Inc.',
+  copyStart: '2017',
+  className: '',
+  style: {},
+  addon: null
+};
+const Container = styled('div', {
+  shouldForwardProp: prop => prop !== 'dark'
+})`
+  position: relative;
+  margin-top: 64px;
+  padding: 24px 0 32px;
+  border-top: 1px solid ${props => props.dark ? props.theme.palette.grey[900] : '#dee2e7'};
+  box-sizing: border-box;
+  width: 100%;
+
+  @media (max-width: 540px) {
+    padding: 8px 0;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .footer-item {
+      color: ${({
+  theme,
+  dark
+}) => dark ? theme.palette.grey[500] : theme.palette.grey[900]};
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      font-size: 0.9rem;
+    }
+
+    .footer-brand {
+      margin-left: 8px;
+      margin-right: 8px;
+    }
+
+    .logo-container {
+      margin-left: 24px;
+      width: 90px;
+      opacity: 0.5;
+    }
+
+    @media (max-width: 540px) {
+      .footer-item {
+        font-size: 0.7rem;
+      }
+
+      .logo-container {
+        margin: 0 0 0 16px;
+        width: 70px;
+        height: 40px;
+      }
+    }
+
+    @media (max-width: 380px) {
+      .footer-item {
+        font-size: 0.65rem;
+      }
+
+      .logo-container {
+        margin: 0 0 0 8px;
+        height: 24px;
+      }
+    }
+  }
+`;

package/es/Header/auto-hidden.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { styled } from '../Theme';
+
+/**
+ * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function AutoHidden({
+  height,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Root, {
+    height: height,
+    ...rest
+  });
+}
+AutoHidden.propTypes = {
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+};
+const Root = styled(Box)`
+  overflow: hidden;
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 100%;
+    float: left;
+  }
+  > * {
+    float: left;
+    white-space: nowrap;
+  }
+`;
+export default AutoHidden;

package/es/Header/header.js

@@ -0,0 +1,211 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import AutoHidden from './auto-hidden';
+import { styled } from '../Theme';
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  prepend,
+  align,
+  maxWidth,
+  homeLink,
+  ...rest
+}) {
+  const renderBrand = () => {
+    const brandContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [logo && /*#__PURE__*/_jsx("div", {
+        className: "header-logo",
+        children: logo
+      }), brand && /*#__PURE__*/_jsx(AutoHidden, {
+        height: 44,
+        sx: {
+          flexShrink: {
+            xs: 1
+          }
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "header-brand",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "header-brand-title",
+            children: /*#__PURE__*/_jsx("h2", {
+              children: brand
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "header-brand-desc",
+            children: description
+          })]
+        })
+      })]
+    });
+    if (typeof homeLink === 'function') {
+      return homeLink(brandContent);
+    }
+    return /*#__PURE__*/_jsx("a", {
+      href: homeLink,
+      children: brandContent
+    });
+  };
+  return /*#__PURE__*/_jsx(Root, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Container, {
+      maxWidth: maxWidth,
+      className: "header-container",
+      children: [prepend, /*#__PURE__*/_jsx("div", {
+        className: "header-brand-wrapper",
+        children: renderBrand()
+      }), /*#__PURE__*/_jsx("div", {
+        className: "header-brand-addon",
+        children: brandAddon
+      }), align === 'right' && /*#__PURE__*/_jsx(Box, {
+        flexGrow: 1
+      }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
+        flexGrow: 1
+      }), /*#__PURE__*/_jsx("div", {
+        className: "header-addons",
+        children: addons
+      })]
+    })
+  });
+}
+Header.propTypes = {
+  // logo img/svg, 可以包裹一个 a 标签
+  logo: PropTypes.node,
+  // 相当于 Title, 可以包裹一个 a 标签
+  brand: PropTypes.node,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: PropTypes.node,
+  // brand 下方的描述
+  description: PropTypes.node,
+  children: PropTypes.node,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: PropTypes.node,
+  // logo 左侧内容
+  prepend: PropTypes.node,
+  align: PropTypes.oneOf(['left', 'right']),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
+  homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+};
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  prepend: null,
+  align: 'left',
+  maxWidth: undefined,
+  homeLink: '/'
+};
+const Root = styled('div')`
+  position: relative;
+  z-index: ${props => props.theme.zIndex.appBar};
+  font-size: 14px;
+  background: ${props => props.theme.palette.common.white};
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 64px;
+  }
+
+  .header-brand-wrapper {
+    flex-shrink: 1;
+    min-width: 0;
+    > a {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      line-height: 1;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  .header-brand-wrapper .header-logo {
+    display: inline-flex;
+    position: relative;
+    height: 44px;
+    margin-right: 16px;
+    img,
+    svg {
+      width: auto;
+      height: 100%;
+      max-height: 100%;
+    }
+  }
+  .header-brand {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 44px;
+    margin-right: 16px;
+    line-height: 1;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    .header-brand-title {
+      display: flex;
+      align-items: center;
+      h2 {
+        margin: 0;
+        font-size: 16px;
+      }
+    }
+    .header-brand-desc {
+      margin-top: 4px;
+      color: #9397a1;
+    }
+  }
+  .header-brand-addon {
+    margin-right: 16px;
+  }
+  .header-addons {
+    display: flex;
+    align-items: center;
+  }
+  ${props => props.theme.breakpoints.down('lg')} {
+    .header-brand {
+      margin-right: 12px;
+      .header-brand-title {
+        h2 {
+          font-size: 14px;
+        }
+      }
+    }
+    .header-brand-addon {
+      display: none;
+    }
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-menu {
+      display: inline-block;
+    }
+    .header-logo {
+      height: 32px;
+    }
+    .header-brand {
+      .header-brand-title {
+        h2 {
+          font-size: 13px;
+        }
+      }
+      .header-brand-desc {
+        font-size: 12px;
+      }
+    }
+  }
+`;
+export default Header;

package/es/Header/index.js

@@ -0,0 +1,2 @@
+export { default as Header } from './header';
+export { default as ResponsiveHeader } from './responsive-header';

package/es/Header/responsive-header.js

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/IconButton';
+import Container from '@mui/material/Container';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Drawer from '@mui/material/Drawer';
+import Header from './header';
+import { styled, useTheme } from '../Theme';
+
+/**
+ * ResponsiveHeader
+ * - 窄屏下显示 burge menu
+ * - 窄屏下将 children 区域显示到 menu 中
+ *
+ * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ResponsiveHeader({
+  menu,
+  prepend,
+  children,
+  ...rest
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const _children = typeof children === 'function' ? children({
+    isMobile,
+    closeMenu: () => setDrawerOpen(false)
+  }) : children;
+  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
+  if (!children) {
+    return /*#__PURE__*/_jsx(Header, {
+      prepend: prepend,
+      ...rest
+    });
+  }
+  return /*#__PURE__*/_jsxs(Root, {
+    prepend: prepend || /*#__PURE__*/_jsx(Button, {
+      sx: {
+        color: theme.palette.grey[500]
+      },
+      edge: "start",
+      className: "header-menu",
+      "aria-label": "header menu button",
+      onClick: () => setDrawerOpen(!drawerOpen),
+      children: drawerOpen ? /*#__PURE__*/_jsx(CloseIcon, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
+    }),
+    ...rest,
+    children: [!isMobile && _children, isMobile && /*#__PURE__*/_jsx(Drawer, {
+      open: drawerOpen,
+      onClose: () => setDrawerOpen(false),
+      ModalProps: {
+        disablePortal: false,
+        keepMounted: true,
+        BackdropComponent: null
+      },
+      anchor: "top",
+      sx: {
+        top: 64,
+        zIndex: theme.zIndex.appBar - 1
+      },
+      PaperProps: {
+        style: {
+          top: 64,
+          bottom: 0,
+          boxShadow: 'none'
+        }
+      },
+      children: /*#__PURE__*/_jsx(MenuPanel, {
+        children: _children
+      })
+    })]
+  });
+}
+ResponsiveHeader.propTypes = {
+  ...Header.PropTypes,
+  // 如果是 function, 则
+  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
+  // - 会传入一个 closeMenu 参数, 可以关闭 menu
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+ResponsiveHeader.defaultProps = {
+  ...Header.defaultProps
+};
+const Root = styled(Header)`
+  .header-menu {
+    display: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-menu {
+      display: flex;
+      margin-right: 12px;
+    }
+  }
+`;
+const MenuPanel = styled(Container)`
+  padding-top: 8px;
+  padding-bottom: 16px;
+  .navmenu {
+    margin: 0 -16px;
+    .navmenu-root > .navmenu-item,
+    .navmenu-root > .navmenu-sub {
+      border: 0;
+    }
+  }
+`;
+export default ResponsiveHeader;

package/es/Icon/image.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import Img from '../Img';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ImageIcon({
+  name,
+  size,
+  alt,
+  color,
+  style,
+  prefix,
+  showBadge,
+  ...rest
+}) {
+  const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
+  return /*#__PURE__*/_jsxs(Div, {
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/_jsx(Img, {
+      width: size,
+      height: size,
+      alt: alt || name,
+      src: src,
+      style: Object.assign({
+        width: size
+      }, style),
+      ...rest
+    }), showBadge && /*#__PURE__*/_jsx("i", {
+      className: "badge-point"
+    })]
+  });
+}
+ImageIcon.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  alt: PropTypes.string,
+  style: PropTypes.object,
+  prefix: PropTypes.string,
+  showBadge: PropTypes.bool
+};
+ImageIcon.defaultProps = {
+  size: 36,
+  color: '#000000',
+  alt: '',
+  style: {},
+  prefix: '/images',
+  showBadge: false
+};
+const Div = styled('div')`
+  position: relative;
+  .badge-point {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    background-color: #fe4e44;
+    right: -2px;
+    top: 0;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+  }
+`;

package/es/Icon/index.js

@@ -0,0 +1,84 @@
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import colors from '../Colors';
+import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
+import { jsx as _jsx } from "react/jsx-runtime";
+const variants = {
+  light: 'fal',
+  regular: 'far',
+  solid: 'fas'
+};
+
+// eslint-disable-next-line react/prop-types
+function Icon({
+  name,
+  color,
+  size,
+  variant,
+  rounded,
+  style,
+  className,
+  forwardedRef,
+  ...rest
+}) {
+  const content = /*#__PURE__*/_jsx("i", {
+    ref: forwardedRef,
+    className: `${variants[variant]} fa-${name} ${rounded ? '' : className}`,
+    style: Object.assign({
+      color,
+      fontSize: `${size}px`
+    }, style || {})
+  });
+  if (rounded) {
+    return /*#__PURE__*/_jsx(Span, {
+      ref: forwardedRef,
+      size: size,
+      color: color,
+      className: className,
+      ...rest,
+      children: content
+    });
+  }
+  return content;
+}
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  rounded: PropTypes.bool,
+  variant: PropTypes.string,
+  size: PropTypes.number,
+  style: PropTypes.object
+};
+Icon.defaultProps = {
+  rounded: false,
+  variant: 'light',
+  color: colors.grey[900],
+  className: '',
+  size: 24,
+  style: {}
+};
+const Span = styled('span')`
+  width: ${props => props.size * 2}px;
+  height: ${props => props.size * 2}px;
+  border-radius: 50%;
+  border: 1px solid ${props => props.color};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .fa,
+  .fas,
+  .fal,
+  .far {
+    line-height: ${props => props.size}px;
+  }
+`;
+export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Icon, {
+  ...props,
+  forwardedRef: ref
+})), {
+  name: 'Icon',
+  alternative: 'SVG icons'
+});