@arcblock/ux 2.9.91 → 2.10.0

package/es/Layout/dashboard-legacy/index.js

@@ -1,148 +0,0 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
-import Container from '@mui/material/Container';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import { useSize } from 'ahooks';
-import Sidebar from './sidebar';
-import Header from './header';
-import Footer from '../../Footer';
-import { styled } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled('div')`
-  &.dashboard {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-  .dashboard__body {
-    overflow: hidden;
-    flex: 1;
-  }
-  .dashboard__main {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex: 1;
-  }
-  .dashboard__content {
-    flex: 1;
-  }
-
-  .drawerPaper {
-    position: relative;
-    white-space: nowrap;
-    width: 120px;
-    background: ${props => props.theme.palette.background.default};
-    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${props => props.theme.mode === 'light' ? 0.05 : 0.5});
-    border: 0;
-  }
-`;
-export default function Dashboard({
-  children,
-  title,
-  brand,
-  description,
-  brandAddon,
-  headerAddon,
-  images,
-  links,
-  prefix,
-  fullWidth,
-  contentLayout,
-  className,
-  homeUrl,
-  logo,
-  ...rest
-}) {
-  const breakpoint = 960;
-  const size = useSize(document.body);
-  const width = size?.width || 0;
-  const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
-  const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
-  useEffect(() => {
-    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
-    setDrawerMode(newMode);
-    setDrawerOpen(newMode !== 'temporary');
-  }, [width]);
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-  const isFullWidth = fullWidth || contentLayout === 'row';
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    className: `dashboard ${className}`,
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Helmet, {
-      title: `${title}-${brand}`
-    }), /*#__PURE__*/_jsx(Header, {
-      className: "dashboard__header",
-      onToggleMenu: onToggleDrawer,
-      brand: brand,
-      brandAddon: brandAddon,
-      description: description,
-      addons: headerAddon,
-      homeUrl: homeUrl,
-      logo: logo
-    }), /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      className: "dashboard__body",
-      children: [/*#__PURE__*/_jsx(Drawer, {
-        variant: drawerMode,
-        className: "drawer",
-        classes: {
-          paper: 'drawerPaper'
-        },
-        open: drawerOpen,
-        onClose: onToggleDrawer,
-        ModalProps: {
-          disablePortal: true,
-          keepMounted: true
-        },
-        children: /*#__PURE__*/_jsx(Sidebar, {
-          className: "dashboard__sidebar",
-          images: images,
-          links: links,
-          prefix: prefix,
-          logo: logo
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        className: "dashboard__main",
-        children: [/*#__PURE__*/_jsx(Container, {
-          maxWidth: isFullWidth ? false : 'lg',
-          className: "dashboard__content",
-          children: children
-        }), /*#__PURE__*/_jsx(Footer, {})]
-      })]
-    })]
-  });
-}
-Dashboard.propTypes = {
-  children: PropTypes.any.isRequired,
-  title: PropTypes.string,
-  brand: PropTypes.string.isRequired,
-  links: PropTypes.array.isRequired,
-  images: PropTypes.object.isRequired,
-  brandAddon: PropTypes.object,
-  description: PropTypes.any.isRequired,
-  headerAddon: PropTypes.any,
-  prefix: PropTypes.string,
-  // 兼容旧版的设置，新版使用 fullWidth 进行设置
-  contentLayout: PropTypes.oneOf(['row', 'column']),
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string,
-  homeUrl: PropTypes.string,
-  logo: PropTypes.any
-};
-Dashboard.defaultProps = {
-  title: 'Home',
-  contentLayout: 'column',
-  headerAddon: null,
-  brandAddon: null,
-  prefix: '/images',
-  fullWidth: false,
-  className: '',
-  homeUrl: '/',
-  logo: null
-};

package/es/Layout/dashboard-legacy/sidebar.js

@@ -1,129 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
-import ImageIcon from '../../Icon/image';
-import Logo from '../../Logo';
-import { styled, useTheme } from '../../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Sidebar({
-  images,
-  links,
-  prefix,
-  addons,
-  logo,
-  ...rest
-}) {
-  const theme = useTheme();
-  const location = useLocation();
-  const isSelected = (url, name) => {
-    const pattern = new RegExp(`/${name}`);
-    return pattern.test(location.pathname);
-  };
-  return /*#__PURE__*/_jsxs(MenuItems, {
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Link, {
-      to: "/",
-      className: "sidebar-logo",
-      children: logo || /*#__PURE__*/_jsx(Logo, {
-        showText: false,
-        size: 20
-      })
-    }), links.map(({
-      url,
-      name,
-      title,
-      showBadge
-    }) => {
-      const selected = isSelected(url, name);
-      return /*#__PURE__*/_jsxs(MenuItem, {
-        component: Link,
-        selected: selected,
-        to: url,
-        children: [/*#__PURE__*/_jsx(ImageIcon, {
-          name: images[name],
-          size: 36,
-          color: selected ? '#00c2c4' : theme.typography.color.main,
-          prefix: prefix,
-          showBadge: showBadge
-        }), /*#__PURE__*/_jsx(Typography, {
-          component: "span",
-          className: "menu-title",
-          children: title
-        })]
-      }, url);
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), addons]
-  });
-}
-Sidebar.propTypes = {
-  images: PropTypes.object.isRequired,
-  links: PropTypes.array.isRequired,
-  prefix: PropTypes.string,
-  addons: PropTypes.any,
-  logo: PropTypes.any
-};
-Sidebar.defaultProps = {
-  prefix: '/images',
-  addons: null,
-  logo: null
-};
-const MenuItems = /*#__PURE__*/memo(styled('div')`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-
-  && .sidebar-logo {
-    display: none;
-    border-bottom: 1px solid #eee;
-    background: ${props => props.theme.palette.background.default};
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    padding: 10px 0;
-    text-align: center;
-    font-size: 0;
-  }
-  ${props => props.theme.breakpoints.down('md')} {
-    && .sidebar-logo {
-      display: block;
-    }
-  }
-`);
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const MenuItem = styled(Button)`
-  && {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    transition: all 200ms ease-in-out;
-    background: ${props => props.selected ? gradient : ''};
-    padding: 24px 0;
-    border-left: 2px solid ${props => props.selected ? teal.A700 : 'transparent'};
-    border-radius: 0;
-
-    &:hover {
-      background: ${gradient};
-      border-left-color: ${teal.A700};
-    }
-
-    .menu-title {
-      margin-top: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      text-align: center;
-      text-transform: capitalize;
-      letter-spacing: normal;
-      width: 80%;
-      color: ${props => props.theme.palette.text.primary};
-    }
-  }
-`;

package/es/Layout/index.js

@@ -1,335 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
-import Link from '@mui/material/Link';
-import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
-import Drawer from '@mui/material/Drawer';
-import Divider from '@mui/material/Divider';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import Footer from '../Footer';
-import OpenInWallet from '../Wallet/Open';
-import Icon from '../Icon';
-import Logo from '../Logo';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function Layout({
-  title,
-  brand,
-  description,
-  links,
-  logo,
-  showLogo,
-  addons,
-  footer,
-  baseUrl,
-  homeUrl,
-  children,
-  variant,
-  contentOnly,
-  ...rest
-}) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-  if (contentOnly) {
-    return /*#__PURE__*/_jsx(Container, {
-      children: children
-    });
-  }
-  let activeLink = '';
-  const {
-    pathname: currentPath
-  } = new URL(window.location);
-  links.forEach(link => {
-    if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
-      activeLink = link.url;
-    }
-  });
-  const drawer = /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(Toolbar, {
-      className: "toolbar toolbar--drawer",
-      children: [!!showLogo && /*#__PURE__*/_jsx("div", {
-        className: "menu-logo",
-        children: logo
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          flexGrow: 1,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        },
-        children: brand
-      })]
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
-      children: links.map(x => /*#__PURE__*/_jsx(Link, {
-        className: "nav-link",
-        href: x.url,
-        underline: "hover",
-        children: /*#__PURE__*/_jsx(ListItem, {
-          button: true,
-          className: activeLink === x.url ? 'drawer-highlight-nav' : '',
-          children: /*#__PURE__*/_jsxs(ListItemText, {
-            children: [x.icon && /*#__PURE__*/_jsx(Icon, {
-              name: x.icon,
-              size: 18 * (x.iconZoom || 1),
-              color: "inherit",
-              style: {
-                marginRight: '5px'
-              }
-            }), x.title]
-          })
-        })
-      }, x.url))
-    })]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Div, {
-      ...rest,
-      children: [/*#__PURE__*/_jsx(Helmet, {
-        title: title
-      }), /*#__PURE__*/_jsx(AppBar, {
-        position: "fixed",
-        className: `appbar appbar--${variant}`,
-        color: "default",
-        style: {
-          height: 56
-        },
-        children: /*#__PURE__*/_jsx(Container, {
-          disableGutters: true,
-          children: /*#__PURE__*/_jsxs(Toolbar, {
-            className: "toolbar",
-            children: [/*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              "aria-label": "open drawer",
-              edge: "start",
-              onClick: onToggleDrawer,
-              className: "menu-button",
-              size: "large",
-              children: /*#__PURE__*/_jsx(MenuIcon, {})
-            }), !!showLogo && /*#__PURE__*/_jsx("div", {
-              className: "menu-logo",
-              children: logo
-            }), /*#__PURE__*/_jsx(Typography, {
-              href: homeUrl,
-              component: "a",
-              variant: "h5",
-              color: "inherit",
-              noWrap: true,
-              display: "block",
-              className: "brand",
-              children: brand
-            }), description && /*#__PURE__*/_jsx(Typography, {
-              component: "small",
-              variant: "subtitle2",
-              color: "inherit",
-              noWrap: true,
-              className: "description",
-              children: description
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                flexGrow: 1
-              }
-            }), /*#__PURE__*/_jsx("div", {
-              className: "nav-links",
-              children: links.map(x => /*#__PURE__*/_jsxs(Link, {
-                href: x.url,
-                className: `nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`,
-                color: x.color,
-                underline: "hover",
-                children: [x.icon && /*#__PURE__*/_jsx(Icon, {
-                  name: x.icon,
-                  size: 20 * (x.iconZoom || 1),
-                  color: "inherit",
-                  style: {
-                    marginRight: '5px'
-                  }
-                }), x.title]
-              }, x.url))
-            }), addons]
-          })
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: "toolbar"
-      }), /*#__PURE__*/_jsx(Container, {
-        style: {
-          marginTop: 16,
-          flex: 1
-        },
-        children: children
-      }), footer, !!baseUrl && /*#__PURE__*/_jsx(OpenInWallet, {
-        locale: "zh",
-        link: baseUrl
-      })]
-    }), /*#__PURE__*/_jsx(DrawerDiv, {
-      children: /*#__PURE__*/_jsx(Drawer, {
-        variant: "temporary",
-        open: drawerOpen,
-        onClose: onToggleDrawer,
-        classes: {
-          paper: 'drawer-paper'
-        },
-        ModalProps: {
-          keepMounted: true,
-          // Better open performance on mobile.
-          disablePortal: true
-        },
-        children: drawer
-      })
-    })]
-  });
-}
-Layout.propTypes = {
-  title: PropTypes.string.isRequired,
-  brand: PropTypes.any.isRequired,
-  description: PropTypes.any,
-  addons: PropTypes.any,
-  showLogo: PropTypes.bool,
-  logo: PropTypes.any,
-  links: PropTypes.array,
-  children: PropTypes.any.isRequired,
-  baseUrl: PropTypes.string,
-  homeUrl: PropTypes.string,
-  variant: PropTypes.oneOf(['shadow', 'border']),
-  footer: PropTypes.any,
-  contentOnly: PropTypes.bool
-};
-Layout.defaultProps = {
-  contentOnly: false,
-  baseUrl: '',
-  homeUrl: '/',
-  links: [],
-  showLogo: false,
-  logo: /*#__PURE__*/_jsx(Logo, {
-    showText: false,
-    style: {
-      width: '40px',
-      height: '40px'
-    }
-  }),
-  variant: 'shadow',
-  addons: undefined,
-  description: undefined,
-  footer: /*#__PURE__*/_jsx(Container, {
-    children: /*#__PURE__*/_jsx(Footer, {})
-  })
-};
-const Div = styled('div')`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .appbar {
-    &.appbar--border {
-      box-shadow: none;
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 1px;
-        bottom: -1px;
-        display: block;
-        background-color: rgba(0, 0, 0, 0.12);
-      }
-    }
-  }
-
-  .toolbar {
-    min-height: 56px;
-    background: inherit;
-    white-space: nowrap;
-    .menu-logo {
-      font-size: 0;
-      margin-right: 8px;
-    }
-
-    .nav-links {
-      display: flex;
-      align-items: center;
-      .nav-link {
-        margin: 8px 12px;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-      }
-
-      .highlight-nav {
-        font-weight: bolder;
-      }
-    }
-    .brand {
-      cursor: pointer;
-      text-decoration: none;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-shrink: 1;
-    }
-    .description {
-      color: #999;
-      font-size: 15px;
-      margin-left: 10px;
-      font-weight: normal;
-      flex-shrink: 999999;
-    }
-  }
-
-  ${props => props.theme.breakpoints.up('md')} {
-    .toolbar {
-      .menu-button {
-        display: none;
-      }
-      .menu-logo {
-        & + .brand {
-          padding-left: 45px;
-          margin-left: -45px;
-        }
-      }
-    }
-  }
-
-  ${props => props.theme.breakpoints.down('md')} {
-    .toolbar {
-      .nav-links,
-      .menu-logo,
-      .description {
-        display: none;
-      }
-    }
-  }
-`;
-const DrawerDiv = styled('nav')`
-  width: 240px;
-  .drawer-paper {
-    width: 240px;
-  }
-  .toolbar {
-    min-height: 56px;
-  }
-
-  a:hover,
-  a:active,
-  a:visited,
-  a:focus {
-    text-decoration: none;
-  }
-
-  .drawer-highlight-nav {
-    background-color: #eee;
-  }
-
-  .toolbar--drawer {
-    font-size: 18px;
-    .menu-logo {
-      display: inline-flex;
-    }
-  }
-`;

package/es/LoadingMask/index.js

@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { temp as colors } from '../Colors';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function LoadingMask({
-  size,
-  padding,
-  borderWidth,
-  borderRadius,
-  duration,
-  children
-}) {
-  const finialSize = size;
-  const finialRadius = borderRadius ?? finialSize / 8;
-  const finialBorderWidth = borderWidth ?? finialSize / 32;
-  const finialPadding = padding ?? finialSize * 0.2 - finialBorderWidth;
-  const finialDuration = duration ?? 2.5;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: finialSize,
-      height: finialSize,
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: finialSize,
-        height: finialSize,
-        overflow: 'hidden',
-        borderRadius: `${finialRadius}px`,
-        backgroundColor: colors.strokeBorderBase,
-        '&::before,&::after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          pointerEvents: 'none'
-        },
-        '&::after': {
-          left: finialBorderWidth,
-          right: finialBorderWidth,
-          top: finialBorderWidth,
-          bottom: finialBorderWidth,
-          backgroundColor: 'white',
-          borderRadius: `${finialRadius - finialBorderWidth}px`
-        },
-        '&::before': {
-          background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
-          transform: 'scale(100)',
-          animation: `rotate ${finialDuration}s linear infinite`,
-          '@keyframes rotate': {
-            '0%': {
-              transform: 'scale(100) rotate(0deg)'
-            },
-            '100%': {
-              transform: 'scale(100) rotate(360deg)'
-            }
-          }
-        }
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: finialSize - finialPadding - finialBorderWidth,
-        height: finialSize - finialPadding - finialBorderWidth
-      },
-      children: children
-    })]
-  });
-}
-LoadingMask.propTypes = {
-  size: PropTypes.number,
-  padding: PropTypes.number,
-  borderRadius: PropTypes.number,
-  borderWidth: PropTypes.number,
-  duration: PropTypes.number,
-  children: PropTypes.node.isRequired
-};
-LoadingMask.defaultProps = {
-  size: 64,
-  padding: undefined,
-  borderWidth: undefined,
-  duration: undefined,
-  borderRadius: undefined
-};