@arcblock/ux 2.6.8 → 2.7.0

package/es/Img/index.js

@@ -0,0 +1,217 @@
+import { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useInView } from 'react-intersection-observer';
+import Alert from 'mdi-material-ui/Alert';
+import ImageIcon from 'mdi-material-ui/Image';
+import { styled } from '../Theme';
+
+/**
+ * @typedef {Object} ImgExProps
+ * @property {string} src - required
+ * @property {string} [alt]
+ * @property {string} [size='cover']
+ * @property {string} [position='top center']
+ * @property {object} [style]
+ * @property {number} [ratio=1]
+ * @property {string} [repeat='no-repeat']
+ * @property {number} [width]
+ * @property {number} [height]
+ * @property {boolean} [lazy=true]
+ * @property {string} [placeholder]
+ * @property {string} [fallback]
+ * @property {string} [className='']
+ * @property {function} [onError=() => {}]
+ * @property {function} [onSuccess=() => {}]
+ */
+
+/**
+ * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PREFIX = 'Img';
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
+const Root = styled('div')(() => ({
+  [`& .${classes.root}`]: {
+    position: 'relative',
+    overflow: 'hidden',
+    '& .image--state, & .image--img': {
+      minWidth: '100%',
+      minHeight: '100%',
+      position: 'absolute',
+      top: 0,
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    '& .image--state': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#999',
+      background: '#eee',
+      width: '100%',
+      height: '100%'
+    },
+    '& .image--img': {
+      opacity: 0,
+      visibility: 'hidden'
+    },
+    '& .image--icon': {
+      fontSize: 30,
+      maxWidth: '80%',
+      maxHeight: '80%'
+    }
+  }
+}));
+
+/**
+ *
+ * @param {ImgProps} props
+ * @returns {React.ReactComponentElement}
+ */
+function Img({
+  lazy,
+  width,
+  height,
+  repeat,
+  ratio,
+  alt,
+  size,
+  position,
+  src,
+  placeholder,
+  fallback,
+  style,
+  className,
+  onError,
+  onSuccess,
+  ...rest
+}) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [ref, inView] = lazy ? useInView({
+    threshold: 0,
+    triggerOnce: true
+  }) : [null, true];
+  const [imgState, setImgState] = useState('init');
+  const actualSrc = useMemo(() => {
+    switch (imgState) {
+      case 'init':
+      case 'loading':
+        return placeholder;
+      case 'error':
+        return fallback;
+      case 'loaded':
+        return src;
+      default:
+        return null;
+    }
+  }, [placeholder, fallback, src, imgState]);
+  const actualRatio = width && height ? 100 * height / width : ratio * 100;
+  const mergedStyle = useMemo(() => ({
+    backgroundImage: actualSrc ? `url(${actualSrc})` : '',
+    backgroundPosition: position,
+    backgroundSize: size,
+    backgroundRepeat: repeat,
+    paddingTop: `${actualRatio}%`
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [actualSrc, position, size, imgState]);
+
+  /**
+   * @type {CSSStyleDeclaration}
+   */
+  const outerStyle = {
+    ...style,
+    display: 'inline-block',
+    width: width ? `${width}px` : '100%'
+  };
+  function loadImg() {
+    const img = new Image();
+    img.src = src;
+    setImgState('loading');
+    img.onload = () => {
+      setImgState('loaded');
+      onSuccess();
+    };
+    img.onerror = err => {
+      setImgState('error');
+      onError(err);
+    };
+  }
+  useEffect(() => {
+    if (inView) loadImg();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inView]);
+  return (
+    /*#__PURE__*/
+    // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+    _jsx(Root, {
+      ref: ref,
+      style: outerStyle,
+      ...rest,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `image ${className} ${classes.root}`,
+        style: mergedStyle,
+        children: [!fallback && imgState === 'error' && /*#__PURE__*/_jsx("div", {
+          className: "image--state",
+          title: "loading image",
+          children: /*#__PURE__*/_jsx(SvgIcon, {
+            component: Alert,
+            className: "image--icon"
+          })
+        }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
+          className: "image--state",
+          title: "Image load error",
+          children: /*#__PURE__*/_jsx(SvgIcon, {
+            component: ImageIcon,
+            className: "image--icon"
+          })
+        }), imgState === 'loaded' && /*#__PURE__*/_jsx("img", {
+          className: "image--img",
+          src: src,
+          alt: alt
+        })]
+      })
+    })
+  );
+}
+Img.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  size: PropTypes.string,
+  position: PropTypes.string,
+  style: PropTypes.object,
+  ratio: PropTypes.number,
+  repeat: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  lazy: PropTypes.bool,
+  placeholder: PropTypes.string,
+  fallback: PropTypes.string,
+  className: PropTypes.string,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func
+};
+Img.defaultProps = {
+  alt: null,
+  size: 'cover',
+  position: 'top center',
+  repeat: 'no-repeat',
+  style: null,
+  ratio: 1,
+  width: null,
+  height: null,
+  lazy: true,
+  placeholder: null,
+  fallback: null,
+  className: '',
+  onError: () => {},
+  onSuccess: () => {}
+};
+export default Img;

package/es/InfoRow/index.js

@@ -0,0 +1,87 @@
+import PropTypes from 'prop-types';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
+import Typography from '@mui/material/Typography';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function InfoRow({
+  name,
+  nameFormatter,
+  layout,
+  children,
+  valueComponent,
+  nameWidth,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Container, {
+    layout: layout,
+    width: nameWidth,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      color: "textSecondary",
+      className: "info-row__name",
+      children: nameFormatter(name)
+    }), children && /*#__PURE__*/_jsx(Typography, {
+      color: "textPrimary",
+      component: valueComponent,
+      className: "info-row__value",
+      children: children
+    })]
+  });
+}
+InfoRow.propTypes = {
+  name: PropTypes.any.isRequired,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  children: PropTypes.any,
+  nameFormatter: PropTypes.func,
+  valueComponent: PropTypes.string,
+  nameWidth: PropTypes.number
+};
+InfoRow.defaultProps = {
+  children: null,
+  nameWidth: 90,
+  nameFormatter: name => {
+    const resetName = name.split(' ').map(x => upperFirst(camelCase(x))).join(' ');
+    return typeof name === 'string' ? resetName : name;
+  },
+  valueComponent: 'div',
+  layout: 'horizontal'
+};
+const Container = styled('div')`
+  display: flex;
+  flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+  justify-content: flex-start;
+  align-items: ${props => props.layout === 'vertical' ? 'flex-start' : 'center'};
+  margin-bottom: 16px;
+
+  .info-row__name {
+    width: ${props => props.width}px;
+    margin-right: ${props => props.layout === 'vertical' ? '0' : '8px'};
+    margin-bottom: ${props => props.layout === 'vertical' ? '8px' : '0'};
+    text-transform: capitalize;
+  }
+
+  .info-row__value {
+    flex: 1;
+    overflow: auto;
+    word-wrap: break-word;
+    font-weight: 500;
+  }
+
+  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .info-row__name {
+      font-weight: bold;
+    }
+
+    .info-row__value {
+      width: 100%;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+`;
+export default InfoRow;

package/es/Layout/dashboard/external-link.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+import { jsx as _jsx } from "react/jsx-runtime";
+function ExternalLink({
+  children,
+  routerLinkComponent: RouterLinkComponent,
+  to,
+  external,
+  ...rest
+}) {
+  if (external) {
+    return /*#__PURE__*/_jsx("a", {
+      href: to,
+      ...rest,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(RouterLinkComponent, {
+    to: to,
+    ...rest,
+    children: children
+  });
+}
+ExternalLink.propTypes = {
+  children: PropTypes.any.isRequired,
+  routerLinkComponent: PropTypes.elementType.isRequired,
+  external: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
+};
+ExternalLink.defaultProps = {
+  external: false
+};
+export function Link(props) {
+  return /*#__PURE__*/_jsx(ExternalLink, {
+    routerLinkComponent: RouterLink,
+    ...props
+  });
+}
+export function NavLink({
+  className,
+  ...rest
+}) {
+  // NavLink#className 支持 function
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
+  return /*#__PURE__*/_jsx(ExternalLink, {
+    routerLinkComponent: RouterNavLink,
+    className: classes,
+    ...rest
+  });
+}
+NavLink.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+};
+NavLink.defaultProps = {
+  className: ''
+};

package/es/Layout/dashboard/full-page.js

@@ -0,0 +1,53 @@
+import { useState, useContext, createContext, useMemo, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FullPageContext = /*#__PURE__*/createContext();
+export const useFullPage = initialState => {
+  const ctx = useContext(FullPageContext);
+  useLayoutEffect(() => {
+    if (initialState) {
+      ctx.configure(initialState);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return ctx;
+};
+export function FullPageProvider({
+  children,
+  ...rest
+}) {
+  const [state, setState] = useState({
+    inFullPage: false,
+    showToggleButton: false,
+    headerVisibleInFullPage: true,
+    footerVisibleInFullPage: false,
+    sidebarVisibleInFullPage: false
+  });
+  const toggleFullPage = () => {
+    setState(prev => ({
+      ...prev,
+      inFullPage: !prev.inFullPage
+    }));
+  };
+  const value = useMemo(() => {
+    return {
+      ...state,
+      headerVisible: !state.inFullPage || state.headerVisibleInFullPage,
+      footerVisible: !state.inFullPage || state.footerVisibleInFullPage,
+      sidebarVisible: !state.inFullPage || state.sidebarVisibleInFullPage,
+      toggleFullPage,
+      configure: params => setState(prev => ({
+        ...prev,
+        ...params
+      }))
+    };
+  }, [state]);
+  return /*#__PURE__*/_jsx(FullPageContext.Provider, {
+    value: value,
+    ...rest,
+    children: children
+  });
+}
+FullPageProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};

package/es/Layout/dashboard/index.js

@@ -0,0 +1,275 @@
+import { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useLocation, matchPath } from 'react-router-dom';
+import Helmet from 'react-helmet';
+import Container from '@mui/material/Container';
+import Hidden from '@mui/material/Hidden';
+import Box from '@mui/material/Box';
+import clsx from 'clsx';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
+import DashboardLegacy from '../dashboard-legacy';
+import { ResponsiveHeader } from '../../Header';
+import NavMenu from '../../NavMenu';
+import Footer from '../../Footer';
+import Sidebar from './sidebar';
+import { styled, useTheme } from '../../Theme';
+import { Link } from './external-link';
+import { FullPageProvider, useFullPage } from './full-page';
+
+// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
+// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
+// eslint-disable-next-line react/prop-types
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function NavMenuWrapper({
+  closeMenu,
+  ...rest
+}) {
+  const location = useLocation();
+  useEffect(() => {
+    closeMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+  return /*#__PURE__*/_jsx(NavMenu, {
+    ...rest
+  });
+}
+function formatLinks(links, location) {
+  return links.map(link => {
+    if (link.children?.length) {
+      return {
+        ...link,
+        label: link.title,
+        children: formatLinks(link.children, location)
+      };
+    }
+    return {
+      ...link,
+      label: /*#__PURE__*/_jsx(Link, {
+        to: link.url,
+        external: link.external,
+        children: link.title
+      }),
+      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+      active: link.external ? link.active : !!matchPath({
+        path: link.url,
+        end: false
+      }, location.pathname)
+    };
+  });
+}
+function Dashboard({
+  children,
+  title,
+  headerProps,
+  links = [],
+  fullWidth,
+  dense,
+  footerProps,
+  ...rest
+}) {
+  const theme = useTheme();
+  const {
+    inFullPage,
+    showToggleButton,
+    headerVisible,
+    footerVisible,
+    sidebarVisible,
+    toggleFullPage
+  } = useFullPage();
+  const location = useLocation();
+  const navItems = useMemo(() => formatLinks(links, location), [location, links]);
+  const isGroupedMode = navItems.some(item => !!item.children?.length);
+  // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
+  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
+  const classes = clsx('dashboard', {
+    'dashboard-dense': _dense
+  }, rest.className);
+  const defaultHomeLink = content => /*#__PURE__*/_jsx(Link, {
+    to: window.blocklet?.prefix || '/',
+    children: content
+  });
+  const _headerProps = {
+    homeLink: defaultHomeLink,
+    ...headerProps
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    ...rest,
+    className: classes,
+    children: [/*#__PURE__*/_jsx(Helmet, {
+      title: title
+    }, title), headerVisible && /*#__PURE__*/_jsx(StyledUxHeader, {
+      ..._headerProps,
+      className: "dashboard-header",
+      children: links?.length ? ({
+        isMobile,
+        closeMenu
+      }) => {
+        if (isMobile) {
+          return /*#__PURE__*/_jsx(NavMenuWrapper, {
+            mode: "inline",
+            items: navItems,
+            closeMenu: closeMenu,
+            bgColor: "transparent",
+            activeTextColor: theme.palette.primary.main
+          });
+        }
+        return null;
+      } : null
+    }), /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      className: "dashboard-body",
+      children: [/*#__PURE__*/_jsx(Hidden, {
+        mdDown: true,
+        children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
+          className: "dashboard-sidebar",
+          children: /*#__PURE__*/_jsx(Sidebar, {
+            links: links,
+            dense: _dense
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "dashboard-main",
+        children: [showToggleButton && /*#__PURE__*/_jsx(Box, {
+          sx: {
+            position: 'absolute',
+            top: 4,
+            right: 4,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 24,
+            height: 24,
+            color: '#fff',
+            bgcolor: 'rgba(158,158,158, 0.6);',
+            borderRadius: 1,
+            cursor: 'pointer'
+          },
+          onClick: toggleFullPage,
+          children: inFullPage ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {
+            style: {
+              fontSize: 18
+            }
+          }) : /*#__PURE__*/_jsx(OpenInFullIcon, {
+            style: {
+              fontSize: 18
+            }
+          })
+        }), /*#__PURE__*/_jsx(Container, {
+          className: "dashboard-content",
+          ...(fullWidth && {
+            maxWidth: false
+          }),
+          children: children
+        }), footerVisible && /*#__PURE__*/_jsx(Footer, {
+          ...footerProps
+        })]
+      })]
+    })]
+  });
+}
+Dashboard.propTypes = {
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string,
+  // 支持分组, links item 如果是数组, 则视为一个 group
+  links: PropTypes.array.isRequired,
+  headerProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  sidebarWidth: PropTypes.number,
+  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
+  dense: PropTypes.oneOf([true, false, 'auto'])
+};
+Dashboard.defaultProps = {
+  title: 'Home',
+  headerProps: {},
+  fullWidth: false,
+  sidebarWidth: 120,
+  dense: 'auto'
+};
+const Wrapper = styled('div', {
+  shouldForwardProp: prop => prop !== 'sidebarWidth'
+})`
+  &.dashboard {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  .dashboard-body {
+    overflow: hidden;
+    flex: 1;
+  }
+  .dashboard-sidebar {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: ${props => props.sidebarWidth}px;
+    overflow: hidden;
+    &:hover {
+      overflow-y: auto;
+    }
+  }
+  .dashboard-main {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex: 1;
+    position: relative;
+  }
+  .dashboard-content {
+    flex: 1;
+  }
+  &.dashboard-dense {
+    .dashboard-header {
+      border-bottom: 1px solid #eee;
+    }
+    .dashboard-sidebar {
+      width: 256px;
+      border-right: 1px solid #eee;
+    }
+  }
+  ${props => props.theme.breakpoints.up('md')} {
+    .header-logo {
+      display: flex;
+      justify-content: center;
+      /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
+      width: ${props => props.sidebarWidth - 24 * 2}px;
+    }
+    &.dashboard-dense {
+      .header-logo {
+        /* dense = true 时 logo 与 sidenav icons 不需要对齐 */
+        width: auto;
+      }
+    }
+  }
+`;
+const StyledUxHeader = styled(ResponsiveHeader)`
+  .header-container {
+    max-width: 100%;
+  }
+`;
+
+// 兼容旧版 dashboard
+export default function DashboardWrapper({
+  legacy,
+  ...rest
+}) {
+  if (legacy) {
+    return /*#__PURE__*/_jsx(DashboardLegacy, {
+      ...rest
+    });
+  }
+  return /*#__PURE__*/_jsx(FullPageProvider, {
+    children: /*#__PURE__*/_jsx(Dashboard, {
+      ...rest
+    })
+  });
+}
+DashboardWrapper.propTypes = {
+  ...Dashboard.propTypes,
+  legacy: PropTypes.bool,
+  footerProps: PropTypes.shape(Footer.propTypes)
+};
+DashboardWrapper.defaultProps = {
+  ...Dashboard.defaultProps,
+  legacy: true
+};