@arcblock/ux 2.13.69 → 3.0.0

package/lib/Avatar/etherscan-blockies.js

@@ -1,83 +1,50 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-bitwise */
-// copy from https://etherscan.io/jss/blockies.js
-const randseed = new Array(4);
-function seedrand(seed) {
-  for (let i = 0; i < randseed.length; i++) {
-    randseed[i] = 0;
-  }
-  for (let i = 0; i < seed.length; i++) {
-    randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
-  }
+const n = new Array(4);
+function g(t) {
+  for (let o = 0; o < n.length; o++)
+    n[o] = 0;
+  for (let o = 0; o < t.length; o++)
+    n[o % 4] = (n[o % 4] << 5) - n[o % 4] + t.charCodeAt(o);
 }
-function rand() {
-  const t = randseed[0] ^ randseed[0] << 11;
-  randseed[0] = randseed[1];
-  randseed[1] = randseed[2];
-  randseed[2] = randseed[3];
-  randseed[3] = randseed[3] ^ randseed[3] >> 19 ^ t ^ t >> 8;
-  return (randseed[3] >>> 0) / (1 << 31 >>> 0);
+function h() {
+  const t = n[0] ^ n[0] << 11;
+  return n[0] = n[1], n[1] = n[2], n[2] = n[3], n[3] = n[3] ^ n[3] >> 19 ^ t ^ t >> 8, (n[3] >>> 0) / (1 << 31 >>> 0);
 }
-function createColor() {
-  const h = Math.floor(rand() * 360);
-  const s = `${rand() * 60 + 40}%`;
-  const l = `${(rand() + rand() + rand() + rand()) * 25}%`;
-  const color = `hsl(${h},${s},${l})`;
-  return color;
+function d() {
+  const t = Math.floor(h() * 360), o = `${h() * 60 + 40}%`, e = `${(h() + h() + h() + h()) * 25}%`;
+  return `hsl(${t},${o},${e})`;
 }
-function createImageData(size) {
-  const width = size;
-  const height = size;
-  const dataWidth = Math.ceil(width / 2);
-  const mirrorWidth = width - dataWidth;
-  const data = [];
-  for (let y = 0; y < height; y++) {
-    let row = [];
-    for (let x = 0; x < dataWidth; x++) {
-      row[x] = Math.floor(rand() * 2.3);
-    }
-    const r = row.slice(0, mirrorWidth);
-    r.reverse();
-    row = row.concat(r);
-    for (let i = 0; i < row.length; i++) {
-      data.push(row[i]);
-    }
+function w(t) {
+  const o = t, e = t, a = Math.ceil(o / 2), f = o - a, r = [];
+  for (let i = 0; i < e; i++) {
+    let c = [];
+    for (let s = 0; s < a; s++)
+      c[s] = Math.floor(h() * 2.3);
+    const l = c.slice(0, f);
+    l.reverse(), c = c.concat(l);
+    for (let s = 0; s < c.length; s++)
+      r.push(c[s]);
   }
-  return data;
+  return r;
 }
-function createCanvas(imageData, color, scale, bgcolor, spotcolor) {
-  const c = document.createElement('canvas');
-  const width = Math.sqrt(imageData.length);
-  // eslint-disable-next-line no-multi-assign
-  c.width = c.height = width * scale;
-  const cc = c.getContext('2d');
-  cc.fillStyle = bgcolor;
-  cc.fillRect(0, 0, c.width, c.height);
-  cc.fillStyle = color;
-  for (let i = 0; i < imageData.length; i++) {
-    const row = Math.floor(i / width);
-    const col = i % width;
-    cc.fillStyle = imageData[i] === 1 ? color : spotcolor;
-    if (imageData[i]) {
-      cc.fillRect(col * scale, row * scale, scale, scale);
-    }
+function M(t, o, e, a, f) {
+  const r = document.createElement("canvas"), i = Math.sqrt(t.length);
+  r.width = r.height = i * e;
+  const c = r.getContext("2d");
+  c.fillStyle = a, c.fillRect(0, 0, r.width, r.height), c.fillStyle = o;
+  for (let l = 0; l < t.length; l++) {
+    const s = Math.floor(l / i), u = l % i;
+    c.fillStyle = t[l] === 1 ? o : f, t[l] && c.fillRect(u * e, s * e, e, e);
   }
-  return c;
+  return r;
 }
-function createIcon(opts) {
-  // eslint-disable-next-line no-param-reassign
-  opts = opts || {};
-  const size = opts.size || 8;
-  const scale = opts.scale || 4;
-  const seed = opts.seed || Math.floor(Math.random() * 10 ** 16).toString(16);
-  seedrand(seed);
-  const color = opts.color || createColor();
-  const bgcolor = opts.bgcolor || createColor();
-  const spotcolor = opts.spotcolor || createColor();
-  const imageData = createImageData(size);
-  const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor);
-  return canvas;
+function v(t) {
+  t = t || {};
+  const o = t.size || 8, e = t.scale || 4, a = t.seed || Math.floor(Math.random() * 10 ** 16).toString(16);
+  g(a);
+  const f = t.color || d(), r = t.bgcolor || d(), i = t.spotcolor || d(), c = w(o);
+  return M(c, f, e, r, i);
 }
-export default {
-  createIcon
-};
+const y = { createIcon: v };
+export {
+  y as default
+};

package/lib/Avatar/index.d.ts

@@ -1,3 +1,4 @@
+import { default as PropTypes } from 'prop-types';
 /**
  * @param {AvatarProps} props
  * @returns {JSX.Element}
@@ -20,7 +21,7 @@ export type AvatarProps = {
     shape?: "" | "rectangle" | "square" | "hexagon" | "circle";
     blockiesPadding?: true | false;
     responsive?: false | true;
-} & Omit<import("../Img").ImgProps, "size" | "src">;
+} & Omit<import('../Img').ImgProps, "size" | "src">;
 export { Avatar as AvatarProps };
 /**
  * Avatar component
@@ -40,7 +41,7 @@ export { Avatar as AvatarProps };
  * @param {AvatarProps} props
  * @returns {JSX.Element}
  */
-declare function Avatar(props: AvatarProps): JSX.Element;
+declare function Avatar(rawProps: any): JSX.Element;
 declare namespace Avatar {
     export namespace propTypes_1 {
         let did: PropTypes.Requireable<string>;
@@ -52,21 +53,4 @@ declare namespace Avatar {
         let responsive: PropTypes.Requireable<boolean>;
     }
     export { propTypes_1 as propTypes };
-    export namespace defaultProps {
-        let did_1: string;
-        export { did_1 as did };
-        let size_1: number;
-        export { size_1 as size };
-        let variant_1: string;
-        export { variant_1 as variant };
-        let animation_1: boolean;
-        export { animation_1 as animation };
-        let shape_1: string;
-        export { shape_1 as shape };
-        let blockiesPadding_1: boolean;
-        export { blockiesPadding_1 as blockiesPadding };
-        let responsive_1: boolean;
-        export { responsive_1 as responsive };
-    }
 }
-import PropTypes from 'prop-types';

package/lib/Avatar/index.js

@@ -1,189 +1,123 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/no-unused-prop-types */
-import { useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Shape } from '@arcblock/did-motif';
-import Box from '@mui/material/Box';
-import Img from '../Img';
-import { mergeProps, isEthereumDid } from '../Util';
-import DIDMotif from './did-motif';
-import blockies from './etherscan-blockies';
-import { DID_PREFIX } from '../Util/constant';
-
-/**
- * Avatar component
- * @typedef {{
- *  src?: string;
- *  did?: string;
- *  size?: number;
- *  variant?: 'circle' | 'rounded' | 'default';
- *  animation?: false | true;
- *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  blockiesPadding?: true | false;
- *  responsive?: false | true;
- * } & Omit<import('../Img').ImgProps, 'size' | 'src'>} AvatarProps
- */
-
-/**
- * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
- * @param {AvatarProps} props
- * @returns {JSX.Element}
- */
-function Avatar(props) {
-  const [imgError, setImgError] = useState(false);
-  /** @type {AvatarProps} */
-  const newProps = mergeProps(props, Avatar, []);
-  const {
-    did = '',
-    size,
-    src,
-    variant,
-    animation,
-    shape,
-    blockiesPadding,
-    responsive,
-    ...rest
-  } = newProps;
-
-  // ethereum blockies
-  const blockyIcon = useMemo(() => {
-    if (isEthereumDid(did)) {
-      return blockies.createIcon({
-        seed: did.replace(DID_PREFIX, '').toLowerCase(),
-        size: 8,
-        scale: 16
-      }).toDataURL();
-    }
-    return null;
-  }, [did]);
-
-  // 如果显式传入 src 则直接使用 src
-  if (src && !imgError) {
-    return /*#__PURE__*/_jsx(Img, {
-      width: size,
-      src: src,
-      alt: did,
-      onError: () => setImgError(true),
-      ...rest,
-      // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
-      className: `avatar-img--${variant} ${rest?.className || ''}`,
-      sx: {
-        '& .avatar-img--rounded': {
-          borderRadius: '4px',
-          overflow: 'hidden'
-        },
-        '& .avatar-img--circle': {
-          borderRadius: '100%',
-          overflow: 'hidden'
-        },
-        ...rest.sx
-      }
-    });
-  }
-  // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
-  if (blockyIcon) {
-    if (blockiesPadding) {
-      // blocky icon 要与灰色卡片矩形留有空间
-      const padding = size > 24 ? 4 : 2;
-      return /*#__PURE__*/_jsx(Box, {
-        ...rest,
+import { jsx as a } from "react/jsx-runtime";
+import { useState as k, useMemo as P } from "react";
+import t from "prop-types";
+import { ErrorBoundary as z } from "react-error-boundary";
+import { Shape as D } from "@arcblock/did-motif";
+import { Box as u } from "@mui/material";
+import n from "lodash/isUndefined";
+import m from "../Img/index.js";
+import { mergeProps as E, isEthereumDid as R } from "../Util/index.js";
+import M from "./did-motif.js";
+import T from "./etherscan-blockies.js";
+import { DID_PREFIX as f } from "../Util/constant.js";
+function d(s) {
+  const r = Object.assign({}, s);
+  n(r.did) && (r.did = ""), n(r.size) && (r.size = 36), n(r.variant) && (r.variant = "default"), n(r.animation) && (r.animation = !1), n(r.shape) && (r.shape = ""), n(r.blockiesPadding) && (r.blockiesPadding = !0), n(r.responsive) && (r.responsive = !1);
+  const [c, h] = k(!1), g = E(r, d, []), { did: i = "", size: e, src: p, variant: b, animation: v, shape: x, blockiesPadding: y, responsive: w, ...o } = g, l = P(() => R(i) ? T.createIcon({
+    seed: i.replace(f, "").toLowerCase(),
+    size: 8,
+    scale: 16
+  }).toDataURL() : null, [i]);
+  if (p && !c)
+    return /* @__PURE__ */ a(
+      m,
+      {
+        width: e,
+        src: p,
+        alt: i,
+        onError: () => h(!0),
+        ...o,
+        className: `avatar-img--${b} ${(o == null ? void 0 : o.className) || ""}`,
         sx: {
-          display: 'flex',
-          alignItems: 'center',
-          width: size,
-          height: size,
-          '.blocky-icon-inner': {
-            boxSizing: 'border-box',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: size,
-            height: size * 0.7,
-            borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
-            background: '#ddd'
+          "& .avatar-img--rounded": {
+            borderRadius: "4px",
+            overflow: "hidden"
           },
-          ...rest.sx
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          className: "blocky-icon-inner",
-          children: /*#__PURE__*/_jsx(Img, {
-            width: size * 0.7 - padding * 2,
-            src: blockyIcon,
-            alt: did
-          })
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(Img, {
-      ...rest,
-      width: size,
-      src: blockyIcon,
-      alt: did,
-      style: {
-        marginRight: 4
+          "& .avatar-img--circle": {
+            borderRadius: "100%",
+            overflow: "hidden"
+          },
+          ...o.sx
+        }
       }
-    });
-  }
-  if (did) {
-    // 渲染 did motif
-    return /*#__PURE__*/_jsx(DIDMotif, {
-      did: did.replace(DID_PREFIX, ''),
-      size: size,
-      animation: animation,
-      shape: Shape[(shape || '').toUpperCase()],
-      responsive: responsive,
-      ...rest
-    });
+    );
+  if (l) {
+    if (y) {
+      const I = e > 24 ? 4 : 2;
+      return /* @__PURE__ */ a(
+        u,
+        {
+          ...o,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            width: e,
+            height: e,
+            ".blocky-icon-inner": {
+              boxSizing: "border-box",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: e,
+              height: e * 0.7,
+              borderRadius: `${Math.min(10, Math.floor(0.1 * e + 2))}px`,
+              background: "#ddd"
+            },
+            ...o.sx
+          },
+          children: /* @__PURE__ */ a("div", { className: "blocky-icon-inner", children: /* @__PURE__ */ a(m, { width: e * 0.7 - I * 2, src: l, alt: i }) })
+        }
+      );
+    }
+    return /* @__PURE__ */ a(m, { ...o, width: e, src: l, alt: i, style: { marginRight: 4 } });
   }
-  throw new Error(`Invalid DID: ${did}`);
+  if (i)
+    return /* @__PURE__ */ a(
+      M,
+      {
+        did: i.replace(f, ""),
+        size: e,
+        animation: v,
+        shape: D[(x || "").toUpperCase()],
+        responsive: w,
+        ...o
+      }
+    );
+  throw new Error(`Invalid DID: ${i}`);
 }
-Avatar.propTypes = {
-  did: PropTypes.string,
-  size: PropTypes.number,
-  variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
+d.propTypes = {
+  did: t.string,
+  size: t.number,
+  variant: t.oneOf(["circle", "rounded", "default"]),
   // animation 仅对 did motif 有效
-  animation: PropTypes.bool,
+  animation: t.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
-  shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
-  blockiesPadding: PropTypes.bool,
-  responsive: PropTypes.bool
+  shape: t.oneOf(["", "rectangle", "square", "hexagon", "circle"]),
+  blockiesPadding: t.bool,
+  responsive: t.bool
 };
-Avatar.defaultProps = {
-  did: '',
-  size: 36,
-  variant: 'default',
-  animation: false,
-  shape: '',
-  blockiesPadding: true,
-  responsive: false
-};
-
-/**
- * @param {AvatarProps} props
- * @returns {JSX.Element}
- */
-export default function AvatarWithErrorBoundary(props) {
-  const size = props.size || 36;
-  const borderRadius = {
-    rounded: '4px',
-    circle: '100%'
-  }[props.variant] || 0;
-  return /*#__PURE__*/_jsx(ErrorBoundary
-  // eslint-disable-next-line react/no-unstable-nested-components
-  , {
-    fallbackRender: () => /*#__PURE__*/_jsx(Box, {
-      width: size,
-      height: size,
-      bgcolor: "grey.300",
-      borderRadius: borderRadius
-    }),
-    children: /*#__PURE__*/_jsx(Avatar, {
-      ...props
-    })
-  });
+function $(s) {
+  const r = s.size || 36, c = { rounded: "4px", circle: "100%" }[s.variant] || 0;
+  return /* @__PURE__ */ a(
+    z,
+    {
+      fallbackRender: () => /* @__PURE__ */ a(
+        u,
+        {
+          sx: {
+            width: r,
+            height: r,
+            bgcolor: "grey.300",
+            borderRadius: c
+          }
+        }
+      ),
+      children: /* @__PURE__ */ a(d, { ...s })
+    }
+  );
 }
-AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
-
-// Export Avatar for access to its props
-export { Avatar as AvatarProps };
+$.propTypes = d.propTypes;
+export {
+  d as AvatarProps,
+  $ as default
+};

package/lib/Badge/Badge.stories.d.ts

@@ -0,0 +1,13 @@
+export function WithDifferentType(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentType {
+    let storyName: string;
+}
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace readme {
+            let sidebar: string;
+        }
+    }
+}
+export default _default;

package/lib/Badge/index.d.ts

@@ -1,12 +1,12 @@
-declare const _default: (props: Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**
  * Badge component to display notification badge
  */
 export type BadgeProps = {
-    children: import("react").ReactNode;
+    children: import('react').ReactNode;
     content?: string;
     type?: "error" | "warning" | "success" | "primary" | "reverse";
     className?: string;
     style?: object | string;
-} & import("@mui/material").TypographyProps;
+} & import('@mui/material').TypographyProps;

package/lib/Badge/index.js

@@ -1,98 +1,55 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import colors from '../Colors';
-import { mergeProps } from '../Util';
-import { withDeprecated } from '../Util/deprecate';
-import { styled } from '../Theme';
-const types = {
+import { jsx as c } from "react/jsx-runtime";
+import r from "prop-types";
+import { Typography as u } from "@mui/material";
+import n from "lodash/isUndefined";
+import o from "../Colors/themes/default.js";
+import { mergeProps as b } from "../Util/index.js";
+import { withDeprecated as w } from "../Util/deprecate.js";
+import { styled as x } from "../Theme/index.js";
+const s = {
   error: {
-    color: colors.common.white,
-    backgroundColor: colors.error.main
+    color: o.common.white,
+    backgroundColor: o.error.main
   },
   warning: {
-    color: colors.common.white,
-    backgroundColor: colors.warning.main
+    color: o.common.white,
+    backgroundColor: o.warning.main
   },
   success: {
-    color: colors.common.white,
-    backgroundColor: colors.success.main
+    color: o.common.white,
+    backgroundColor: o.success.main
   },
   primary: {
-    color: colors.common.white,
-    backgroundColor: colors.primary.main
+    color: o.common.white,
+    backgroundColor: o.primary.main
   },
   reverse: {
-    color: colors.common.white,
-    backgroundColor: colors.grey[900]
+    color: o.common.white,
+    backgroundColor: o.grey[900]
   }
 };
-
-/**
- * Badge component to display notification badge
- * @typedef {{
- *   children: import('react').ReactNode;
- *   content?: string;
- *   type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse';
- *   className?: string;
- *   style?: object | string;
- * } & import('@mui/material').TypographyProps } BadgeProps
- */
-
-/**
- * Badge notification component
- * @param {BadgeProps} props
- * @returns {JSX.Element}
- */
-function Badge(props) {
-  const newProps = mergeProps(props, Badge, ['style']);
-  const {
-    type,
-    content,
-    children,
-    style,
-    className,
-    forwardedRef,
-    ...rest
-  } = newProps;
-  const styles = Object.assign(types[type] || types.primary, style);
-  return /*#__PURE__*/_jsx(Span, {
-    ref: forwardedRef,
-    component: "span",
-    className: className,
-    style: styles,
-    ...rest,
-    children: content || children
-  });
+function i(t) {
+  const e = Object.assign({}, t);
+  n(e.type) && (e.type = "primary"), n(e.content) && (e.content = ""), n(e.className) && (e.className = ""), n(e.style) && (e.style = {});
+  const a = b(e, i, ["style"]), { type: m, content: p, children: l, style: y, className: d, forwardedRef: f, ...g } = a, h = Object.assign(s[m] || s.primary, y);
+  return /* @__PURE__ */ c(k, { ref: f, component: "span", className: d, style: h, ...g, children: p || l });
 }
-Badge.propTypes = {
-  children: PropTypes.any.isRequired,
-  content: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(types)),
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+i.propTypes = {
+  children: r.any.isRequired,
+  content: r.string,
+  type: r.oneOf(Object.keys(s)),
+  className: r.string,
+  style: r.oneOfType([r.object, r.string])
 };
-Badge.defaultProps = {
-  type: 'primary',
-  content: '',
-  className: '',
-  style: '{}'
-};
-export default withDeprecated(/*#__PURE__*/forwardRef(
-/**
- * @param {BadgeProps} props - Badge组件的属性
- * @param {React.Ref<HTMLSpanElement>} ref - 转发的ref
- * @returns {JSX.Element}
- */
-(props, ref) => /*#__PURE__*/_jsx(Badge, {
-  ...props,
-  forwardedRef: ref
-})), {
-  name: 'Badge',
-  alternative: '@arcblock/ux/lib/Tag'
-});
-const Span = styled(Typography)`
+const B = w(
+  /**
+   * @param {BadgeProps} props - Badge组件的属性
+   * @param {React.Ref<HTMLSpanElement>} ref - 转发的ref
+   * @returns {JSX.Element}
+   */
+  ({ ref: t, ...e }) => /* @__PURE__ */ c(i, { ...e, forwardedRef: t }),
+  { name: "Badge", alternative: "@arcblock/ux/lib/Tag" }
+), k = x(u)`
   && {
     display: inline-flex;
     justify-content: center;
@@ -101,4 +58,7 @@ const Span = styled(Typography)`
     height: 24px;
     line-height: 24px;
   }
-`;
+`;
+export {
+  B as default
+};