@arcblock/ux 2.13.70 → 3.0.1

package/lib/Icon/image.js

@@ -1,37 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Img from '../Img';
-import { styled } from '../Theme';
-export default function ImageIcon({
-  name,
-  size = 36,
-  alt = '',
-  color = '#000000',
-  prefix = '/images',
-  showBadge = false,
-  style = {},
-  ...rest
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import h from "../Img/index.js";
+import { styled as n } from "../Theme/index.js";
+function f({
+  name: o,
+  size: t = 36,
+  alt: p = "",
+  color: r = "#000000",
+  prefix: e = "/images",
+  showBadge: a = !1,
+  style: s = {},
+  ...d
 }) {
-  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"
-    })]
-  });
+  const g = `${e}/${o}-${r.replace(/^#/, "")}.png`;
+  return /* @__PURE__ */ x(l, { style: { width: t, height: t }, children: [
+    /* @__PURE__ */ i(
+      h,
+      {
+        width: t,
+        height: t,
+        alt: p || o,
+        src: g,
+        style: Object.assign({ width: t }, s),
+        ...d
+      }
+    ),
+    a && /* @__PURE__ */ i("i", { className: "badge-point" })
+  ] });
 }
-const Div = styled('div')`
+const l = n("div")`
   position: relative;
   .badge-point {
     position: absolute;
@@ -45,4 +41,7 @@ const Div = styled('div')`
       0px 1px 4px rgba(0, 0, 0, 0.3),
       0px 0px 20px rgba(0, 0, 0, 0.1);
   }
-`;
+`;
+export {
+  f as default
+};

package/lib/Icon/index.d.ts

@@ -1,12 +1,12 @@
-import { type SxProps } from '@mui/material';
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     color?: string;
     size?: number;
     variant?: 'light' | 'regular' | 'solid';
     rounded?: false | true;
-    forwardedRef?: React.ForwardedRef<HTMLDivElement>;
-    sx?: SxProps;
+    forwardedRef?: React.Ref<unknown>;
 }
-declare const _default: (props: IconProps & import("react").RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: IconProps & {
+    ref?: React.Ref<unknown>;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/Icon/index.js

@@ -1,50 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import colors from '../Colors';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-const variants = {
-  light: 'fal',
-  regular: 'far',
-  solid: 'fas'
-};
-// eslint-disable-next-line react/prop-types
-function Icon({
-  name,
-  color = colors.grey[900],
-  size = 24,
-  variant = 'light',
-  rounded = false,
-  style = {},
-  className = '',
-  forwardedRef,
-  ...rest
+import { jsx as t } from "react/jsx-runtime";
+import { Icon as d } from "@iconify/react";
+import l from "../Colors/themes/default.js";
+import { styled as p } from "../Theme/index.js";
+import { withDeprecated as m } from "../Util/deprecate.js";
+function h({
+  name: r,
+  color: o = l.grey[900],
+  size: e = 24,
+  variant: a = "regular",
+  rounded: f = !1,
+  className: i = "",
+  forwardedRef: c
 }) {
-  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;
+  const s = a === "solid" ? `fa-solid:${r}` : `fa-regular:${r}`, n = /* @__PURE__ */ t(d, { icon: s, color: o, width: e, height: e, className: i });
+  return f ? /* @__PURE__ */ t(u, { ref: c, size: e, color: o, className: i, children: n }) : n;
 }
-const Span = styled('span')`
-  width: ${props => props.size * 2}px;
-  height: ${props => props.size * 2}px;
+const u = p("span")`
+  width: ${(r) => r.size * 2}px;
+  height: ${(r) => r.size * 2}px;
   border-radius: 50%;
-  border: 1px solid ${props => props.color};
+  border: 1px solid ${(r) => r.color};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -53,13 +28,15 @@ const Span = styled('span')`
   .fas,
   .fal,
   .far {
-    line-height: ${props => props.size}px;
+    line-height: ${(r) => r.size}px;
   }
-`;
-export default withDeprecated(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Icon, {
-  ...props,
-  forwardedRef: ref
-})), {
-  name: 'Icon',
-  alternative: 'SVG icons'
-});
+`, y = m(
+  ({
+    ref: r,
+    ...o
+  }) => /* @__PURE__ */ t(h, { ...o, forwardedRef: r }),
+  { name: "Icon", alternative: "SVG icons" }
+);
+export {
+  y as default
+};

package/lib/Img/Img.stories.d.ts

@@ -0,0 +1,13 @@
+import { default as Basic } from './demo/basic';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;
+export { Basic };

package/lib/Img/index.d.ts

@@ -1,5 +1,9 @@
+import { default as PropTypes } from 'prop-types';
 export default Img;
 export type ImgExProps = {
+    /**
+     * - required
+     */
     /**
      * - required
      */
@@ -19,13 +23,13 @@ export type ImgExProps = {
     onError?: Function | undefined;
     onSuccess?: Function | undefined;
 };
-export type ImgProps = ImgExProps & import("@mui/material").BoxProps;
+export type ImgProps = ImgExProps & import('@mui/material').BoxProps;
 /**
  *
  * @param {ImgProps} props
  * @returns {React.ReactComponentElement}
  */
-declare function Img({ lazy, width, height, repeat, ratio, alt, size, position, src, placeholder, fallback, style, className, onError, onSuccess, ...rest }: ImgProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
+declare function Img({ lazy, width, height, repeat, ratio, alt, size, position, src, placeholder, fallback, style, className, onError, onSuccess, ...rest }: ImgProps): import('react').ReactComponentElement<any, Pick<any, string | number | symbol>>;
 declare namespace Img {
     namespace propTypes {
         let src: PropTypes.Validator<string>;
@@ -44,34 +48,4 @@ declare namespace Img {
         let onError: PropTypes.Requireable<(...args: any[]) => any>;
         let onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
     }
-    namespace defaultProps {
-        let alt_1: null;
-        export { alt_1 as alt };
-        let size_1: string;
-        export { size_1 as size };
-        let position_1: string;
-        export { position_1 as position };
-        let repeat_1: string;
-        export { repeat_1 as repeat };
-        let style_1: null;
-        export { style_1 as style };
-        let ratio_1: number;
-        export { ratio_1 as ratio };
-        let width_1: null;
-        export { width_1 as width };
-        let height_1: null;
-        export { height_1 as height };
-        let lazy_1: boolean;
-        export { lazy_1 as lazy };
-        let placeholder_1: null;
-        export { placeholder_1 as placeholder };
-        let fallback_1: null;
-        export { fallback_1 as fallback };
-        let className_1: string;
-        export { className_1 as className };
-        export { noop as onError };
-        export { noop as onSuccess };
-    }
 }
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';

package/lib/Img/index.js

@@ -1,219 +1,141 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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';
-import { mergeSx } from '../Util/style';
-
-/**
- * @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('@mui/material').BoxProps} ImgProps
- */
-
-const PREFIX = 'Img';
-const classes = {
-  root: `${PREFIX}-root`
+import { jsx as t, jsxs as W } from "react/jsx-runtime";
+import { useState as H, useMemo as f, useEffect as V } from "react";
+import e from "prop-types";
+import { useInView as X } from "react-intersection-observer";
+import _ from "@iconify-icons/material-symbols/warning-rounded";
+import q from "@iconify-icons/material-symbols/image-rounded";
+import { Icon as h } from "@iconify/react";
+import { Box as B } from "@mui/material";
+import I from "lodash/noop";
+import { mergeSx as C } from "../Util/style.js";
+const D = "Img", b = {
+  root: `${D}-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
+function F({
+  lazy: x = !0,
+  width: i = null,
+  height: c = null,
+  repeat: y = "no-repeat",
+  ratio: S = 1,
+  alt: N = null,
+  size: g = "cover",
+  position: u = "top center",
+  src: r,
+  placeholder: n = null,
+  fallback: a = null,
+  style: v = null,
+  className: $ = "",
+  onError: k = I,
+  onSuccess: w = I,
+  ...d
 }) {
-  // 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;
+  const [R, p] = x ? X({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, s] = H("init"), m = f(() => {
+    switch (o) {
+      case "init":
+      case "loading":
+        return n;
+      case "error":
+        return a;
+      case "loaded":
+        return r;
       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%'
+  }, [n, a, r, o]), j = i && c ? 100 * c / i : S * 100, z = f(
+    () => ({
+      backgroundImage: m ? `url(${m})` : "",
+      backgroundPosition: u,
+      backgroundSize: g,
+      backgroundRepeat: y,
+      paddingTop: `${j}%`
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [m, u, g, o]
+  ), E = {
+    ...v,
+    display: "inline-block",
+    width: i ? `${i}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);
+  function P() {
+    const l = new Image();
+    l.src = r, s("loading"), l.onload = () => {
+      s("loaded"), w();
+    }, l.onerror = (T) => {
+      s("error"), k(T);
     };
   }
-  useEffect(() => {
-    if (inView) loadImg();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inView]);
-  return (
-    /*#__PURE__*/
-    // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    _jsx(Box, {
+  return V(() => {
+    p && P();
+  }, [p]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+  /* @__PURE__ */ t(
+    B,
+    {
       "data-id": "2",
-      ref: ref,
-      style: outerStyle,
+      ref: R,
+      style: E,
       className: "arcblock_ux_img-wrapper",
-      ...rest,
-      sx: mergeSx({
-        [`& .${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%'
+      ...d,
+      sx: C(
+        {
+          [`& .${b.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
-        })]
-      })
-    })
+        },
+        d.sx
+      ),
+      children: /* @__PURE__ */ W("div", { className: `image ${$} ${b.root}`, style: z, children: [
+        !a && o === "error" && /* @__PURE__ */ t("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ t(h, { icon: _, className: "image--icon" }) }),
+        !n && o === "loading" && /* @__PURE__ */ t("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ t(h, { icon: q, className: "image--icon" }) }),
+        o === "loaded" && /* @__PURE__ */ t("img", { className: "image--img", src: r, alt: N })
+      ] })
+    }
   );
 }
-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
+F.propTypes = {
+  src: e.string.isRequired,
+  alt: e.string,
+  size: e.string,
+  position: e.string,
+  style: e.object,
+  ratio: e.number,
+  repeat: e.string,
+  width: e.number,
+  height: e.number,
+  lazy: e.bool,
+  placeholder: e.string,
+  fallback: e.string,
+  className: e.string,
+  onError: e.func,
+  onSuccess: e.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 {
+  F as default
 };
-export default Img;

package/lib/InfoRow/InfoRow.stories.d.ts

@@ -0,0 +1,14 @@
+export { default as DifferentWidth } from './demo/different-width';
+export { default as CustomValueComponent } from './demo/custom-value-component';
+export { default as CustomNameComponent } from './demo/custom-name-component';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;