@arcblock/ux 2.9.91 → 2.10.0

package/es/Footer/index.js

@@ -1,172 +0,0 @@
-/* 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',
-  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

@@ -1,35 +0,0 @@
-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

@@ -1,223 +0,0 @@
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import { useRef, useState, useEffect } from 'react';
-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 logoRef = useRef();
-  const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
-  const style = {
-    minWidth: brandWrapperMinWidth
-  };
-  useEffect(() => {
-    if (logoRef.current) {
-      setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
-    }
-  }, []);
-  const renderBrand = () => {
-    const brandContent = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [logo && /*#__PURE__*/_jsx("div", {
-        className: "header-logo",
-        ref: logoRef,
-        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",
-        style: style,
-        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: 2;
-    > 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

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

package/es/Header/responsive-header.js

@@ -1,146 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useCreation, useReactive } from 'ahooks';
-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;
-
-  // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
-  const htmlOverflowState = useReactive({
-    changed: false,
-    value: '',
-    priority: ''
-  });
-  useCreation(() => {
-    if (document.documentElement?.style) {
-      const clean = () => {
-        if (htmlOverflowState.changed) {
-          if (htmlOverflowState.value) {
-            document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
-          } else {
-            document.documentElement.style.removeProperty('overflow');
-          }
-          htmlOverflowState.value = '';
-          htmlOverflowState.priority = '';
-          htmlOverflowState.changed = false;
-        }
-      };
-      if (drawerOpen) {
-        htmlOverflowState.changed = true;
-        htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
-        htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
-        document.documentElement.style.setProperty('overflow', 'hidden', 'important');
-      } else {
-        clean();
-      }
-      return clean;
-    }
-    return () => {};
-  }, [drawerOpen]);
-
-  // 如果 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

@@ -1,65 +0,0 @@
-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);
-  }
-`;