@arcblock/ux 2.9.91 → 2.10.0

package/es/Icon/index.js

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

package/es/Img/index.js

@@ -1,218 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useInView } from 'react-intersection-observer';
-import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
-import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
-import { Icon } from '@iconify/react';
-import { Box } from '@mui/material';
-import noop from 'lodash/noop';
-
-/**
- * @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`
-};
-
-/**
- *
- * @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(Box, {
-      "data-id": "2",
-      ref: ref,
-      style: outerStyle,
-      ...rest,
-      sx: {
-        [`& .${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%'
-          }
-        },
-        ...rest.sx
-      },
-      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(Icon, {
-            icon: WarningRoundedIcon,
-            className: "image--icon"
-          })
-        }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
-          className: "image--state",
-          title: "Image load error",
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: ImageRoundedIcon,
-            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: noop,
-  onSuccess: noop
-};
-export default Img;

package/es/InfoRow/index.js

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

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

@@ -1,53 +0,0 @@
-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
-};