@arcblock/ux 2.10.43 → 2.10.45

Sign up to get free protection for your applications and to get access to all the features.
@@ -11,7 +11,7 @@ declare namespace CompactText {
11
11
  namespace propTypes {
12
12
  let startChars: PropTypes.Requireable<number>;
13
13
  let endChars: PropTypes.Requireable<number>;
14
- let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
14
+ let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
15
15
  let showCopyButtonInTooltip: PropTypes.Requireable<boolean>;
16
16
  }
17
17
  namespace defaultProps {
@@ -19,6 +19,8 @@ declare namespace CompactText {
19
19
  export { startChars_1 as startChars };
20
20
  let endChars_1: number;
21
21
  export { endChars_1 as endChars };
22
+ let children_1: null;
23
+ export { children_1 as children };
22
24
  let showCopyButtonInTooltip_1: boolean;
23
25
  export { showCopyButtonInTooltip_1 as showCopyButtonInTooltip };
24
26
  }
@@ -93,12 +93,13 @@ export default function CompactText({
93
93
  CompactText.propTypes = {
94
94
  startChars: PropTypes.number,
95
95
  endChars: PropTypes.number,
96
- children: PropTypes.node.isRequired,
96
+ children: PropTypes.node,
97
97
  // 在 tooltip 中完整地址后显示复制按钮
98
98
  showCopyButtonInTooltip: PropTypes.bool
99
99
  };
100
100
  CompactText.defaultProps = {
101
101
  startChars: 6,
102
102
  endChars: 6,
103
+ children: null,
103
104
  showCopyButtonInTooltip: false
104
105
  };
@@ -1,4 +1,23 @@
1
- export default DidAddress;
1
+ import '@fontsource/ubuntu-mono/400.css';
2
+ import { BoxProps } from '@mui/material';
3
+ import React, { ReactNode } from 'react';
4
+ export interface HTMLDidAddressElement extends HTMLDivElement {
5
+ copy: () => void;
6
+ }
7
+ export interface IDidAddressProps extends BoxProps {
8
+ component?: React.ElementType;
9
+ size?: number;
10
+ copyable?: boolean;
11
+ showCopyButtonInTooltip?: boolean;
12
+ content?: string;
13
+ inline?: boolean;
14
+ prepend?: ReactNode;
15
+ append?: ReactNode;
16
+ compact?: boolean;
17
+ startChars?: number;
18
+ endChars?: number;
19
+ locale?: 'en' | 'zh';
20
+ }
2
21
  /**
3
22
  * DidAddress 组件 (新版设计)
4
23
  *
@@ -12,5 +31,5 @@ export default DidAddress;
12
31
  * - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
13
32
  * - 可配合 useMediaQuery 使用
14
33
  */
15
- declare const DidAddress: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
16
- import React from 'react';
34
+ declare const DidAddress: React.ForwardRefExoticComponent<Omit<IDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
35
+ export default DidAddress;
@@ -1,12 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React, { useRef, useState, forwardRef } from 'react';
3
- import PropTypes from 'prop-types';
4
2
  import '@fontsource/ubuntu-mono/400.css';
3
+ import { Check as CheckIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
4
+ import { Box, Tooltip } from '@mui/material';
5
5
  import { green } from '@mui/material/colors';
6
- import { Tooltip, Box } from '@mui/material';
7
6
  import copy from 'copy-to-clipboard';
8
- import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
9
7
  import noop from 'lodash/noop';
8
+ import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
10
9
  import { styled } from '../Theme';
11
10
  import { getFontSize } from '../Util';
12
11
  import CompactText from './compact-text';
@@ -20,7 +19,6 @@ const translations = {
20
19
  copied: '已复制!'
21
20
  }
22
21
  };
23
-
24
22
  /**
25
23
  * DidAddress 组件 (新版设计)
26
24
  *
@@ -34,37 +32,49 @@ const translations = {
34
32
  * - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
35
33
  * - 可配合 useMediaQuery 使用
36
34
  */
37
- const DidAddress = /*#__PURE__*/forwardRef(({
38
- component,
39
- size,
40
- copyable,
41
- content,
42
- children,
43
- prepend,
44
- append,
45
- compact,
46
- startChars,
47
- endChars,
48
- locale,
49
- showCopyButtonInTooltip,
50
- ...rest
51
- }, ref) => {
35
+ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
36
+ const {
37
+ component = 'span',
38
+ size = 0,
39
+ copyable = true,
40
+ showCopyButtonInTooltip = false,
41
+ children = null,
42
+ content = '',
43
+ prepend = null,
44
+ append = null,
45
+ compact = false,
46
+ startChars = 6,
47
+ endChars = 6,
48
+ locale: originalLocale = 'en',
49
+ ...rest
50
+ } = props;
51
+ let locale = originalLocale;
52
52
  if (!translations[locale]) {
53
- // eslint-disable-next-line no-param-reassign
54
53
  locale = 'en';
55
54
  }
56
55
  const [copied, setCopied] = useState(false);
57
- const textRef = useRef();
58
- const onCopy = e => {
59
- e.stopPropagation();
60
- e.preventDefault();
61
- copy(content || textRef.current.textContent);
56
+ const textRef = useRef(null);
57
+ const rootRef = useRef(null);
58
+ const handleCopy = () => {
59
+ copy(content || textRef.current?.textContent || '');
62
60
  setCopied(true);
63
61
  // 恢复 copied 状态
64
62
  setTimeout(() => {
65
63
  setCopied(false);
66
64
  }, 1500);
67
65
  };
66
+ const onCopy = e => {
67
+ e.stopPropagation();
68
+ e.preventDefault();
69
+ handleCopy();
70
+ };
71
+ useImperativeHandle(ref, () => new Proxy({
72
+ copy: handleCopy
73
+ }, {
74
+ get(target, key) {
75
+ return target[key] || rootRef.current?.[key];
76
+ }
77
+ }));
68
78
  let copyElement = null;
69
79
  if (copyable) {
70
80
  copyElement = /*#__PURE__*/_jsx("span", {
@@ -94,7 +104,7 @@ const DidAddress = /*#__PURE__*/forwardRef(({
94
104
  as: component,
95
105
  size: size,
96
106
  ...rest,
97
- ref: ref,
107
+ ref: rootRef,
98
108
  children: [prepend, /*#__PURE__*/_jsx(Box, {
99
109
  sx: {
100
110
  display: 'none'
@@ -133,38 +143,6 @@ const DidAddress = /*#__PURE__*/forwardRef(({
133
143
  });
134
144
  });
135
145
  export default DidAddress;
136
- DidAddress.propTypes = {
137
- component: PropTypes.string,
138
- size: PropTypes.number,
139
- copyable: PropTypes.bool,
140
- // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
141
- showCopyButtonInTooltip: PropTypes.bool,
142
- children: PropTypes.any,
143
- content: PropTypes.string,
144
- inline: PropTypes.bool,
145
- prepend: PropTypes.any,
146
- append: PropTypes.any,
147
- // 紧凑模式
148
- compact: PropTypes.bool,
149
- startChars: PropTypes.number,
150
- endChars: PropTypes.number,
151
- locale: PropTypes.oneOf(['en', 'zh'])
152
- };
153
- DidAddress.defaultProps = {
154
- component: 'span',
155
- size: 0,
156
- copyable: true,
157
- showCopyButtonInTooltip: false,
158
- children: null,
159
- content: '',
160
- inline: false,
161
- prepend: null,
162
- append: null,
163
- compact: false,
164
- startChars: 6,
165
- endChars: 6,
166
- locale: 'en'
167
- };
168
146
  const Root = styled(Box, {
169
147
  shouldForwardProp: prop => prop !== 'inline'
170
148
  })`
@@ -1,15 +1,6 @@
1
- declare function DidAddressWrapper({ responsive, ...rest }: {
2
- [x: string]: any;
3
- responsive: any;
4
- }): import("react/jsx-runtime").JSX.Element;
5
- declare namespace DidAddressWrapper {
6
- namespace propTypes {
7
- let responsive: PropTypes.Requireable<boolean>;
8
- }
9
- namespace defaultProps {
10
- let responsive_1: boolean;
11
- export { responsive_1 as responsive };
12
- }
1
+ import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
2
+ export interface IDidAddressWrapper extends IDidAddressProps {
3
+ responsive?: boolean;
13
4
  }
5
+ declare const DidAddressWrapper: import("react").ForwardRefExoticComponent<Omit<IDidAddressWrapper, "ref"> & import("react").RefAttributes<HTMLDidAddressElement>>;
14
6
  export default DidAddressWrapper;
15
- import PropTypes from 'prop-types';
@@ -1,23 +1,20 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import PropTypes from 'prop-types';
2
+ import { forwardRef } from 'react';
3
3
  import DidAddress from './did-address';
4
4
  import ResponsiveDidAddress from './responsive-did-address';
5
- export default function DidAddressWrapper({
6
- responsive,
5
+ const DidAddressWrapper = /*#__PURE__*/forwardRef(({
6
+ responsive = true,
7
7
  ...rest
8
- }) {
8
+ }, ref) => {
9
9
  if (responsive) {
10
10
  return /*#__PURE__*/_jsx(ResponsiveDidAddress, {
11
- ...rest
11
+ ...rest,
12
+ ref: ref
12
13
  });
13
14
  }
14
15
  return /*#__PURE__*/_jsx(DidAddress, {
15
- ...rest
16
+ ...rest,
17
+ ref: ref
16
18
  });
17
- }
18
- DidAddressWrapper.propTypes = {
19
- responsive: PropTypes.bool
20
- };
21
- DidAddressWrapper.defaultProps = {
22
- responsive: true
23
- };
19
+ });
20
+ export default DidAddressWrapper;
@@ -1,3 +1,5 @@
1
+ import React from 'react';
2
+ import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
1
3
  /**
2
4
  * 根据父容器宽度自动切换 compact 模式
3
5
  *
@@ -8,26 +10,10 @@
8
10
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
9
11
  * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
10
12
  */
11
- declare function ResponsiveDidAddress({ style, className, component, ...rest }: {
12
- [x: string]: any;
13
- style: any;
14
- className: any;
15
- component: any;
16
- }): import("react/jsx-runtime").JSX.Element;
17
- declare namespace ResponsiveDidAddress {
18
- namespace propTypes {
19
- let style: PropTypes.Requireable<object>;
20
- let className: PropTypes.Requireable<string>;
21
- let component: PropTypes.Requireable<string>;
22
- }
23
- namespace defaultProps {
24
- let style_1: {};
25
- export { style_1 as style };
26
- let className_1: string;
27
- export { className_1 as className };
28
- let component_1: string;
29
- export { component_1 as component };
30
- }
31
- }
13
+ declare const ResponsiveDidAddress: React.ForwardRefExoticComponent<Omit<IResponsiveDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
32
14
  export default ResponsiveDidAddress;
33
- import PropTypes from 'prop-types';
15
+ export interface IResponsiveDidAddressProps extends IDidAddressProps {
16
+ style?: React.CSSProperties;
17
+ className?: string;
18
+ component?: React.ElementType;
19
+ }
@@ -1,7 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, createRef, useEffect, useRef } from 'react';
3
- import PropTypes from 'prop-types';
4
2
  import { useSize } from 'ahooks';
3
+ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
5
4
  import { styled } from '../Theme';
6
5
  import DidAddress from './did-address';
7
6
 
@@ -15,23 +14,29 @@ import DidAddress from './did-address';
15
14
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
16
15
  * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
17
16
  */
18
- export default function ResponsiveDidAddress({
17
+ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
19
18
  style,
20
19
  className,
21
- component,
20
+ component = 'span',
22
21
  ...rest
23
- }) {
22
+ }, ref) => {
24
23
  const [compact, setCompact] = useState(false);
25
24
  // did address 完整显示时的宽度
26
25
  const [addressFullWidth, setAddressFullWidth] = useState(null);
27
26
  const containerRef = useRef(null);
27
+ const innerRef = useRef(null);
28
28
  const size = useSize(containerRef);
29
29
  const containerWidth = size?.width || 0;
30
- const ref = /*#__PURE__*/createRef();
30
+ useImperativeHandle(ref, () => new Proxy({}, {
31
+ get(target, key) {
32
+ return innerRef.current?.[key];
33
+ }
34
+ }));
35
+
31
36
  // 存储完整显示时 address 组件的宽度
32
37
  useEffect(() => {
33
38
  if (!compact && addressFullWidth === null) {
34
- setAddressFullWidth(ref.current.offsetWidth);
39
+ setAddressFullWidth(innerRef.current?.offsetWidth);
35
40
  }
36
41
  // eslint-disable-next-line react-hooks/exhaustive-deps
37
42
  }, []);
@@ -50,20 +55,11 @@ export default function ResponsiveDidAddress({
50
55
  component: component,
51
56
  inline: true,
52
57
  compact: compact,
53
- ref: ref
58
+ ref: innerRef
54
59
  })
55
60
  });
56
- }
57
- ResponsiveDidAddress.propTypes = {
58
- style: PropTypes.object,
59
- className: PropTypes.string,
60
- component: PropTypes.string
61
- };
62
- ResponsiveDidAddress.defaultProps = {
63
- style: {},
64
- className: '',
65
- component: 'span'
66
- };
61
+ });
62
+ export default ResponsiveDidAddress;
67
63
  const Root = styled('div')`
68
64
  display: block;
69
65
  overflow: hidden;
@@ -139,6 +139,7 @@ export default function BlockletStore(props) {
139
139
  size: 20,
140
140
  variant: "circle"
141
141
  }),
142
+ maxWidth: 200,
142
143
  children: author
143
144
  }), /*#__PURE__*/_jsx(IconText, {
144
145
  icon: /*#__PURE__*/_jsx(Icon, {
@@ -1,7 +1,9 @@
1
+ import { StackProps } from '@mui/material';
1
2
  import React from 'react';
2
- export default function IconText({ icon, children, maxWidth, title, }: {
3
+ export default function IconText({ icon, children, maxWidth, title, sx, }: {
3
4
  icon?: React.ReactNode;
4
5
  children?: React.ReactNode;
5
6
  maxWidth?: number;
6
7
  title?: string;
8
+ sx?: StackProps['sx'];
7
9
  }): false | "" | 0 | import("react/jsx-runtime").JSX.Element | null | undefined;
@@ -5,16 +5,17 @@ export default function IconText({
5
5
  icon,
6
6
  children,
7
7
  maxWidth = 100,
8
- title
8
+ title,
9
+ sx
9
10
  }) {
10
11
  return (children === 0 || children) && /*#__PURE__*/_jsxs(Stack, {
11
12
  direction: "row",
12
13
  alignItems: "center",
13
14
  gap: 1,
14
- sx: {
15
+ sx: [{
15
16
  maxWidth,
16
17
  overflow: 'hidden'
17
- },
18
+ }, ...(Array.isArray(sx) ? sx : [sx])],
18
19
  children: [icon, /*#__PURE__*/_jsx(Typography, {
19
20
  flex: 1,
20
21
  variant: "body2",
@@ -1,23 +1,26 @@
1
- export default DID;
2
- /**
3
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
4
- */
5
- declare const DID: React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>;
6
- declare namespace DIDPropTypes {
7
- let did: PropTypes.Validator<string>;
8
- let size: PropTypes.Requireable<number>;
9
- let component: PropTypes.Requireable<string>;
10
- let copyable: PropTypes.Requireable<boolean>;
11
- let responsive: PropTypes.Requireable<boolean>;
12
- let showCopyButtonInTooltip: PropTypes.Requireable<boolean>;
13
- let showAvatar: PropTypes.Requireable<boolean>;
14
- let showQrcode: PropTypes.Requireable<boolean>;
15
- let inline: PropTypes.Requireable<boolean>;
16
- let append: PropTypes.Requireable<any>;
17
- let compact: PropTypes.Requireable<boolean>;
18
- let startChars: PropTypes.Requireable<number>;
19
- let endChars: PropTypes.Requireable<number>;
20
- let locale: PropTypes.Requireable<string>;
21
- let chainId: PropTypes.Requireable<string>;
1
+ import React from 'react';
2
+ import { IDidAddressWrapper } from '../Address';
3
+ import { HTMLDidAddressElement } from '../Address/did-address';
4
+ interface IDIDPropTypes extends IDidAddressWrapper {
5
+ did: string;
6
+ size?: number;
7
+ component?: React.ElementType;
8
+ copyable?: boolean;
9
+ responsive?: boolean;
10
+ showCopyButtonInTooltip?: boolean;
11
+ showAvatar?: boolean;
12
+ showQrcode?: boolean;
13
+ inline?: boolean;
14
+ append?: any;
15
+ compact?: boolean;
16
+ startChars?: number;
17
+ endChars?: number;
18
+ locale?: 'en' | 'zh';
19
+ chainId?: string;
20
+ }
21
+ export interface HTMLDIDElement extends HTMLDidAddressElement {
22
+ openQRCode: () => void;
23
+ closeQRCode: () => void;
22
24
  }
23
- import PropTypes from 'prop-types';
25
+ declare const DID: React.ForwardRefExoticComponent<Omit<IDIDPropTypes, "ref"> & React.RefAttributes<HTMLDIDElement>>;
26
+ export default DID;