@arcblock/ux 2.13.69 → 3.0.0

package/lib/BlockletNFT/index.d.ts

@@ -1,3 +1,4 @@
+import { default as PropTypes } from 'prop-types';
 /**
  * BlockletNFT 组件
  * @typedef {{
@@ -14,7 +15,6 @@
  *  size?: 'xs' | 'sm' | 'md' | 'auto';
  *  onButtonClick?: Function;
  *  onMainClick?: Function;
- *  onTagClick?: Function;
  *  className?: string;
  *  scaleClickZone?: number;
  * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletNFTProps
@@ -24,7 +24,7 @@
  * @param {BlockletNFTProps} props
  * @returns {JSX.Element}
  */
-declare function BlockletNFT({ title, did, description, cover, size, addons, button, buttonText, buttonDisabled, buttonLoading, isStickyButton, onButtonClick, onMainClick, onTagClick, className, scaleClickZone, ...rest }: BlockletNFTProps): JSX.Element;
+declare function BlockletNFT({ title, did, description, cover, size, addons, button, buttonText, buttonDisabled, buttonLoading, isStickyButton, onButtonClick, onMainClick, className, scaleClickZone, ...rest }: BlockletNFTProps): JSX.Element;
 declare namespace BlockletNFT {
     namespace propTypes {
         let title: PropTypes.Validator<string>;
@@ -40,42 +40,9 @@ declare namespace BlockletNFT {
         let size: PropTypes.Requireable<string>;
         let onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         let onMainClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let onTagClick: PropTypes.Requireable<(...args: any[]) => any>;
         let className: PropTypes.Requireable<string>;
         let scaleClickZone: PropTypes.Requireable<number>;
     }
-    namespace defaultProps {
-        let description_1: null;
-        export { description_1 as description };
-        let cover_1: null;
-        export { cover_1 as cover };
-        let did_1: null;
-        export { did_1 as did };
-        let isStickyButton_1: boolean;
-        export { isStickyButton_1 as isStickyButton };
-        let buttonText_1: string;
-        export { buttonText_1 as buttonText };
-        let buttonDisabled_1: boolean;
-        export { buttonDisabled_1 as buttonDisabled };
-        let buttonLoading_1: boolean;
-        export { buttonLoading_1 as buttonLoading };
-        let button_1: null;
-        export { button_1 as button };
-        let size_1: string;
-        export { size_1 as size };
-        let addons_1: never[];
-        export { addons_1 as addons };
-        let onButtonClick_1: null;
-        export { onButtonClick_1 as onButtonClick };
-        let onMainClick_1: null;
-        export { onMainClick_1 as onMainClick };
-        let onTagClick_1: null;
-        export { onTagClick_1 as onTagClick };
-        let className_1: null;
-        export { className_1 as className };
-        let scaleClickZone_1: number;
-        export { scaleClickZone_1 as scaleClickZone };
-    }
 }
 export default BlockletNFT;
 /**
@@ -95,8 +62,6 @@ export type BlockletNFTProps = {
     size?: "xs" | "sm" | "md" | "auto";
     onButtonClick?: Function;
     onMainClick?: Function;
-    onTagClick?: Function;
     className?: string;
     scaleClickZone?: number;
-} & import("react").ComponentPropsWithoutRef<"div">;
-import PropTypes from 'prop-types';
+} & import('react').ComponentPropsWithoutRef<"div">;

package/lib/BlockletNFT/index.js

@@ -1,36 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import PropTypes from 'prop-types';
-import Portal from '@mui/material/Portal';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '../Avatar';
-import Icon from '../Icon';
-import Button from '../Button';
-import Img from '../Img';
-import { useTheme, styled } from '../Theme';
-
-/**
- * 美化数字 1000-->1k
- * @param {*} _size
- * @param {*} digits
- * @returns
- */
-function prettySize(_size, digits = 1) {
-  let size = _size;
-  const list = ['', 'k', 'm', 'b'];
-  let index = 0;
-  while (size > 1000 && index < list.length - 1) {
-    size = (size / 1000).toFixed(digits);
-    index += 1;
-  }
-  return _size && `${size}${list[index]}`;
+import { jsxs as a, jsx as t, Fragment as F } from "react/jsx-runtime";
+import { useRef as I } from "react";
+import o from "prop-types";
+import { useTheme as q, useMediaQuery as m, Typography as f, Portal as A, CircularProgress as O } from "@mui/material";
+import W from "../Avatar/index.js";
+import Z from "../Icon/index.js";
+import E from "../Button/index.js";
+import H from "../Img/index.js";
+import { styled as Q } from "../Theme/index.js";
+function U(e, s = 1) {
+  let c = e;
+  const r = ["", "k", "m", "b"];
+  let i = 0;
+  for (; c > 1e3 && i < r.length - 1; )
+    c = (c / 1e3).toFixed(s), i += 1;
+  return e && `${c}${r[i]}`;
 }
-const Div = styled('div')`
+const G = Q("div")`
   &.arcblock-blocklet {
     padding: 0 16px;
-    background: ${props => props.theme.palette.common.white};
+    background: ${(e) => e.theme.palette.common.white};
     overflow: hidden;
     box-shadow: 0px 0px 8px #f0f0f0;
     &:hover {
@@ -86,7 +74,7 @@ const Div = styled('div')`
         width: 100%;
         top: 0;
         left: 0;
-        background-color: ${props => props.theme.palette.primary.main};
+        background-color: ${(e) => e.theme.palette.primary.main};
         transform: scale(0.1);
         opacity: 0;
         z-index: -1;
@@ -104,11 +92,11 @@ const Div = styled('div')`
 
     &:not(.Mui-disabled) {
       background-color: transparent !important;
-      color: ${props => props.theme.palette.primary.main};
+      color: ${(e) => e.theme.palette.primary.main};
     }
     &:not(.Mui-disabled) {
       &:hover {
-        color: ${props => props.theme.palette.common.white};
+        color: ${(e) => e.theme.palette.common.white};
       }
     }
   }
@@ -193,221 +181,111 @@ const Div = styled('div')`
     }
   }
 `;
-function BlockletIcon({
-  name
-}) {
-  return /*#__PURE__*/_jsx(Icon, {
-    name: name,
-    color: "inherit",
-    size: 15,
-    style: {
-      marginRight: 8
-    }
-  });
+function v({ name: e }) {
+  return /* @__PURE__ */ t(Z, { name: e, color: "inherit", size: 15, style: { marginRight: 8 } });
 }
-BlockletIcon.propTypes = {
-  name: PropTypes.string.isRequired
+v.propTypes = {
+  name: o.string.isRequired
 };
-
-/**
- * BlockletNFT 组件
- * @typedef {{
- *  title: string;
- *  description?: string;
- *  cover?: string;
- *  did?: string;
- *  isStickyButton?: false | true;
- *  buttonText?: string;
- *  buttonDisabled?: false | true;
- *  buttonLoading?: false | true;
- *  button?: JSX.Element;
- *  addons?: Array<any>;
- *  size?: 'xs' | 'sm' | 'md' | 'auto';
- *  onButtonClick?: Function;
- *  onMainClick?: Function;
- *  onTagClick?: Function;
- *  className?: string;
- *  scaleClickZone?: number;
- * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletNFTProps
- */
-
-/**
- * BlockletNFT 组件
- * @param {BlockletNFTProps} props
- * @returns {JSX.Element}
- */
-export default function BlockletNFT({
-  title,
-  did,
-  description,
-  cover,
-  size,
-  addons,
-  button,
-  buttonText,
-  buttonDisabled,
-  buttonLoading,
-  isStickyButton,
-  onButtonClick,
-  onMainClick,
-  onTagClick,
-  className,
-  scaleClickZone,
-  ...rest
+function J({
+  title: e,
+  did: s,
+  description: c = null,
+  cover: r = null,
+  size: i = "auto",
+  addons: w = [],
+  button: h = null,
+  buttonText: y = "Install",
+  buttonDisabled: u = !1,
+  buttonLoading: b = !1,
+  isStickyButton: z = !1,
+  onButtonClick: _ = null,
+  onMainClick: N = null,
+  className: C = null,
+  scaleClickZone: $ = 1.5,
+  ...M
 }) {
-  const wrapHandler = (handler, stopFn = () => false) => (e, ...args) => {
-    if (stopFn()) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (handler instanceof Function) {
-      e.preventDefault();
-      e.stopPropagation();
-      handler(...args);
-    }
-  };
-  const _onButtonClick = wrapHandler(onButtonClick, () => {
-    // stop click while custom button or buttonDisabled or buttondLoading
-    if (button || buttonDisabled || buttonLoading) {
-      return true;
-    }
-    return false;
-  });
-  const _onMainClick = wrapHandler(onMainClick);
-  const theme = useTheme();
-  const isDownSm = useMediaQuery(theme.breakpoints.down('md'));
-  const isDownMd = useMediaQuery(theme.breakpoints.down('lg'));
-  const isUpLg = useMediaQuery(theme.breakpoints.up('lg'));
-
-  // If size is auto, need calculate actual size according to screen size
-  // eslint-disable-next-line no-nested-ternary
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size;
-  // eslint-disable-next-line no-nested-ternary
-  const didAvatarSize = size === 'auto' ? isUpLg ? 80 : 40 : size === 'md' ? 80 : 40;
-  const container = useRef(null);
-  return /*#__PURE__*/_jsxs(Div, {
-    ...rest,
-    scaleClickZone: scaleClickZone,
-    className: `${className} arcblock-blocklet arcblock-blocklet--size-${actualSize}`,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "arcblock-blocklet__content",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "arcblock-blocklet__content--main",
-        onClick: _onMainClick,
-        ref: container,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "arcblock-blocklet__content--body",
-          children: [cover ? /*#__PURE__*/_jsx("div", {
-            className: "arcblock-blocklet__cover",
-            children: /*#__PURE__*/_jsx(Img, {
-              src: cover
-            })
-          }) : did && /*#__PURE__*/_jsx("div", {
-            className: "arcblock-blocklet__cover",
-            children: /*#__PURE__*/_jsx(Avatar, {
-              did: did,
-              size: didAvatarSize
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "arcblock-blocklet__info",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              component: "h3",
-              variant: "h3",
-              className: "arcblock-blocklet__title",
-              title: title,
-              children: title
-            }), description && /*#__PURE__*/_jsx(Typography, {
-              component: "div",
-              variant: "body2",
-              className: "arcblock-blocklet__describe",
-              title: description,
-              children: description
-            }), ['md', 'sm', 'xs'].includes(actualSize) && /*#__PURE__*/_jsx(Portal, {
-              container: container.current,
-              disablePortal: actualSize === 'md',
-              children: /*#__PURE__*/_jsx("div", {
+  const x = (l, k = () => !1) => (d, ...j) => {
+    k() ? (d.preventDefault(), d.stopPropagation()) : l instanceof Function && (d.preventDefault(), d.stopPropagation(), l(...j));
+  }, S = x(_, () => !!(h || u || b)), T = x(N), p = q(), B = m(p.breakpoints.down("md")), P = m(p.breakpoints.down("lg")), D = m(p.breakpoints.up("lg")), n = i === "auto" ? B ? "xs" : P ? "sm" : "md" : i, R = i === "auto" ? D ? 80 : 40 : i === "md" ? 80 : 40, g = I(null);
+  return /* @__PURE__ */ a(
+    G,
+    {
+      ...M,
+      scaleClickZone: $,
+      className: `${C} arcblock-blocklet arcblock-blocklet--size-${n}`,
+      children: [
+        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content", children: /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content--main", onClick: T, ref: g, children: /* @__PURE__ */ a("div", { className: "arcblock-blocklet__content--body", children: [
+          r ? /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(H, { src: r }) }) : s && /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(W, { did: s, size: R }) }),
+          /* @__PURE__ */ a("div", { className: "arcblock-blocklet__info", children: [
+            /* @__PURE__ */ t(f, { component: "h3", variant: "h3", className: "arcblock-blocklet__title", title: e, children: e }),
+            c && /* @__PURE__ */ t(f, { component: "div", variant: "body2", className: "arcblock-blocklet__describe", title: c, children: c }),
+            ["md", "sm", "xs"].includes(n) && /* @__PURE__ */ t(A, { container: g.current, disablePortal: n === "md", children: /* @__PURE__ */ t(
+              "div",
+              {
                 className: "arcblock-blocklet__button",
-                onClick: _onButtonClick,
-                style: {
-                  display: isStickyButton ? 'block' : ''
-                },
-                children: button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
-                  className: "arcblock-blocklet__button--hover",
-                  variant: "outlined",
-                  color: "primary",
-                  size: "small",
-                  disabled: buttonDisabled || buttonLoading,
-                  style: actualSize === 'md' ? {
-                    padding: '3px 20px',
-                    fontSize: '14px'
-                  } : {
-                    padding: '3px 15px',
-                    minWidth: '54px',
-                    fontSize: '13px'
-                  },
-                  children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
-                    size: actualSize === 'md' ? 15 : 13,
-                    style: {
-                      marginRight: 3,
-                      color: 'inherit'
-                    }
-                  }), buttonText]
-                })
-              })
-            })]
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "arcblock-blocklet__addons",
-      children: addons.map((item, index) => /*#__PURE__*/_jsx(Typography, {
-        component: "span",
-        variant: "caption",
-        className: "arcblock-blocklet__addons--item"
-        // eslint-disable-next-line react/no-array-index-key
-        ,
-
-        title: item.title,
-        children: item.empty ? null : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(BlockletIcon, {
-            name: item.icon
-          }), item.pretty ? prettySize(item.value) : item.value]
-        })
-      }, index))
-    })]
-  });
+                onClick: S,
+                style: { display: z ? "block" : "" },
+                children: h || _ && /* @__PURE__ */ a(
+                  E,
+                  {
+                    className: "arcblock-blocklet__button--hover",
+                    variant: "outlined",
+                    color: "primary",
+                    size: "small",
+                    disabled: u || b,
+                    style: n === "md" ? { padding: "3px 20px", fontSize: "14px" } : { padding: "3px 15px", minWidth: "54px", fontSize: "13px" },
+                    children: [
+                      b && /* @__PURE__ */ t(
+                        O,
+                        {
+                          size: n === "md" ? 15 : 13,
+                          style: { marginRight: 3, color: "inherit" }
+                        }
+                      ),
+                      y
+                    ]
+                  }
+                )
+              }
+            ) })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__addons", children: w.map((l, k) => /* @__PURE__ */ t(
+          f,
+          {
+            component: "span",
+            variant: "caption",
+            className: "arcblock-blocklet__addons--item",
+            title: l.title,
+            children: l.empty ? null : /* @__PURE__ */ a(F, { children: [
+              /* @__PURE__ */ t(v, { name: l.icon }),
+              l.pretty ? U(l.value) : l.value
+            ] })
+          },
+          k
+        )) })
+      ]
+    }
+  );
 }
-BlockletNFT.propTypes = {
-  title: PropTypes.string.isRequired,
-  did: PropTypes.string,
-  isStickyButton: PropTypes.bool,
-  description: PropTypes.string,
-  cover: PropTypes.string,
-  buttonText: PropTypes.string,
-  buttonDisabled: PropTypes.bool,
-  buttonLoading: PropTypes.bool,
-  button: PropTypes.element,
-  addons: PropTypes.arrayOf(PropTypes.object),
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'auto']),
-  onButtonClick: PropTypes.func,
-  onMainClick: PropTypes.func,
-  onTagClick: PropTypes.func,
-  className: PropTypes.string,
-  scaleClickZone: PropTypes.number
+J.propTypes = {
+  title: o.string.isRequired,
+  did: o.string,
+  isStickyButton: o.bool,
+  description: o.string,
+  cover: o.string,
+  buttonText: o.string,
+  buttonDisabled: o.bool,
+  buttonLoading: o.bool,
+  button: o.element,
+  addons: o.arrayOf(o.object),
+  size: o.oneOf(["xs", "sm", "md", "auto"]),
+  onButtonClick: o.func,
+  onMainClick: o.func,
+  className: o.string,
+  scaleClickZone: o.number
+};
+export {
+  J as default
 };
-BlockletNFT.defaultProps = {
-  description: null,
-  cover: null,
-  did: null,
-  isStickyButton: false,
-  buttonText: 'Install',
-  buttonDisabled: false,
-  buttonLoading: false,
-  button: null,
-  size: 'auto',
-  addons: [],
-  onButtonClick: null,
-  onMainClick: null,
-  onTagClick: null,
-  className: null,
-  scaleClickZone: 1.5
-};

package/lib/BlockletV2/Blocklet.stories.d.ts

@@ -0,0 +1,18 @@
+import { default as Basic } from './demo/basic';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+        namespace design {
+            let type: string;
+            let url: string;
+        }
+    }
+    let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export { Basic };

package/lib/BlockletV2/blocklet.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { CardProps } from '@mui/material';
 export interface IBlockletStore extends CardProps {
     did?: string;
@@ -31,7 +31,7 @@ export interface IBlockletStore extends CardProps {
     }[];
     icons?: {
         key: string;
-        icon: string | React.ReactElement;
+        icon: string | React.ReactElement<any>;
         title: React.ReactNode;
         color?: string;
     }[];