@arcblock/ux 2.10.65 → 2.10.67

package/src/AnimationWaiter/index.jsx

@@ -9,17 +9,18 @@ import { styled } from '../Theme';
 /**
  * 用于长时间等待的用的动画组件
  * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
- * @param {Object} animationData lottie json 动画数据
- * @param {Number} size 动画的尺寸，单位px
- * @param {String｜Array} message 动画下方的文字；数组情况下会在一定时间切换文案
- * @param {Number} messageDuration 动画下方的文字为数组时，每个文案的持续时间；默认5000ms
- * @param {Number} messageLoop 动画下方的文字为数组时，文案是否循环播放
- * @param {Array} tips 底部的提示元素
- * @param {Number} tipsDuration 底部提示的切换时间，单位毫秒，默认3000ms
- * @param {Number} speed 动画默认的播放速度
- * @param {Number} maybeDuration 整个动画大概的持续时间，单位毫秒，用于计算增量下的动画速度，默认两分钟(120000ms)
- * @param {Number} increaseSpeed 在 maybeDuration 时间下增加的速度，默认为0（不增加速度）
- * @returns element
+ * @param {object} props - 组件属性
+ * @param {object} [props.animationData] - lottie json 动画数据
+ * @param {number|string} [props.size] - 动画的尺寸，单位px
+ * @param {string|React.ReactNode[]} [props.message] - 动画下方的文字；数组情况下会在一定时间切换文案
+ * @param {number} [props.messageDuration=5000] - 动画下方的文字为数组时，每个文案的持续时间（毫秒）
+ * @param {boolean} [props.messageLoop=true] - 动画下方的文字为数组时，文案是否循环播放
+ * @param {React.ReactNode[]} [props.tips=[]] - 底部的提示元素
+ * @param {number} [props.tipsDuration=5000] - 底部提示的切换时间（毫秒）
+ * @param {number} [props.speed=1] - 动画默认的播放速度
+ * @param {number} [props.maybeDuration=120000] - 整个动画大概的持续时间（毫秒），用于计算增量下的动画速度
+ * @param {number} [props.increaseSpeed=0] - 在 maybeDuration 时间下增加的速度
+ * @returns {JSX.Element}
  */
 export default function AnimationWaiter({
   animationData,
@@ -168,12 +169,12 @@ export default function AnimationWaiter({
 }
 
 AnimationWaiter.propTypes = {
-  animationData: PropTypes.any,
+  animationData: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  message: PropTypes.any,
+  message: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
   messageDuration: PropTypes.number,
   messageLoop: PropTypes.bool,
-  tips: PropTypes.array,
+  tips: PropTypes.arrayOf(PropTypes.node),
   tipsDuration: PropTypes.number,
   speed: PropTypes.number,
   maybeDuration: PropTypes.number,

package/src/Async/{index.jsx → index.tsx}

@@ -1,10 +1,19 @@
 import * as React from 'react';
-
 import CircularProgress from '@mui/material/CircularProgress';
 
-export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
-  class AsyncComponent extends React.Component {
-    constructor(props) {
+export default function LoadAsyncComponent<T extends React.ComponentType<any>>(
+  importComponent: () => Promise<Record<string, T>>,
+  key = 'default',
+  showProgress = true
+) {
+  type Props = React.ComponentProps<T>;
+  type State = {
+    Component: React.ComponentType<any> | null;
+    error: string | null;
+  };
+
+  class AsyncComponent extends React.Component<Props, State> {
+    constructor(props: Props) {
       super(props);
 
       this.state = {

package/src/Badge/index.jsx

@@ -74,7 +74,14 @@ Badge.defaultProps = {
 };
 
 export default withDeprecated(
-  forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />),
+  forwardRef(
+    /**
+     * @param {BadgeProps} props - Badge组件的属性
+     * @param {React.Ref<HTMLSpanElement>} ref - 转发的ref
+     * @returns {JSX.Element}
+     */
+    (props, ref) => <Badge {...props} forwardedRef={ref} />
+  ),
   { name: 'Badge', alternative: '@arcblock/ux/lib/Tag' }
 );
 

package/src/BlockletContext/{index.jsx → index.tsx}

@@ -1,20 +1,24 @@
-import PropTypes from 'prop-types';
 import { useMemoizedFn, useAsyncEffect } from 'ahooks';
 import { createContext, useContext, useState } from 'react';
+import type { Blocklet } from '../type';
 
-const BlockletContext = createContext();
+const BlockletContext = createContext<Blocklet | null>(null);
 
 const { Provider, Consumer } = BlockletContext;
 
-/**
- *
- * @param {object} props
- * @param {string} props.baseUrl baseUrl 为 blocklet origin + blocklet prefix
- * @param {any} props.children
- * @returns
- */
-function BlockletProvider({ children, baseUrl, loading }) {
-  const [blockletData, setBlockletData] = useState(null);
+function BlockletProvider({
+  children,
+  baseUrl = '',
+  loading = null,
+}: {
+  children: React.ReactNode;
+  /**
+   * baseUrl 为 blocklet origin + blocklet prefix
+   */
+  baseUrl: string;
+  loading: React.ReactNode;
+}) {
+  const [blockletData, setBlockletData] = useState<Blocklet | null>(null);
   const getBlockleData = useMemoizedFn(async () => {
     if (!baseUrl || window.location.href.startsWith(baseUrl)) {
       throw new Error('no blocklet data');
@@ -24,8 +28,9 @@ function BlockletProvider({ children, baseUrl, loading }) {
     url.searchParams.set('type', 'json');
     const res = await fetch(url.href);
     const jsonData = await res.json();
-    return jsonData;
+    return jsonData as Blocklet;
   });
+
   useAsyncEffect(async () => {
     try {
       const data = await getBlockleData();
@@ -45,14 +50,4 @@ function useBlockletContext() {
   return { blocklet };
 }
 
-BlockletProvider.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.any.isRequired,
-  loading: PropTypes.any,
-};
-BlockletProvider.defaultProps = {
-  baseUrl: '',
-  loading: null,
-};
-
 export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };

package/src/Button/wrap.jsx

@@ -25,7 +25,8 @@ const extendedColors = {
  *  loading?: boolean,
  *  forwardedRef?: import('react').ForwardedRef<any>,
  *  color?: MuiButtonProps['color'] | 'reverse' | 'did'
- * } & Omit<MuiButtonProps, 'color'>} ButtonProps
+ * }} CustomButtonProps
+ * @typedef { CustomButtonProps & Omit<MuiButtonProps, 'color'> } ButtonProps
  */
 
 /**

package/src/ButtonGroup/index.js

@@ -1,6 +1,16 @@
 import ButtonGroup from '@mui/material/ButtonGroup';
 import wrap from '../Button/wrap';
 
-// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
-// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
-export default wrap(ButtonGroup);
+/**
+ * @typedef {import('@mui/material').ButtonGroupProps} MuiButtonGroupProps
+ * @typedef {import('../Button/wrap').CustomButtonProps & Omit<MuiButtonGroupProps, 'color'>} ButtonGroupProps
+ */
+
+/**
+ * @deprecated 建议直接使用 @mui/material/ButtonGroup
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonGroupProps> & React.RefAttributes<HTMLButtonElement>>}
+ */
+const ButtonGroupComponent = wrap(ButtonGroup);
+
+// 该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角
+export default ButtonGroupComponent;

package/src/CardSelector/{index.jsx → index.tsx}

@@ -1,24 +1,42 @@
+/* eslint-disable no-unused-vars */
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 
-export default function CardSelector({ list, width, height, cardSpace, onSelect, defaultIndex }) {
+export interface CardSelectorProps {
+  list?: Array<{ src: string; name: string }> | Array<(i: number) => React.ReactNode>;
+  width?: number;
+  height?: number;
+  cardSpace?: number;
+  onSelect?: (index: number) => void;
+  defaultIndex?: number;
+}
+
+export default function CardSelector({
+  list = [],
+  width = 300,
+  height = 400,
+  cardSpace = 40,
+  onSelect = noop,
+  defaultIndex = 0,
+}: CardSelectorProps) {
   const [selectedId, setSelectedId] = useState(0);
   const [translateX, setTranslateX] = useState(0);
-  const outterCon = useRef(null);
+  const outterCon = useRef<HTMLDivElement | null>(null);
 
   // 选择卡片
-  const selectedItem = (i) => {
+  const selectedItem = (i: number) => {
     if (i < 0 || i > list.length - 1) {
       return;
     }
     setSelectedId(i);
 
-    // 外部容器大小
-    const outerWidth = outterCon.current.clientWidth;
+    if (outterCon.current) {
+      // 外部容器大小
+      const outerWidth = outterCon.current.clientWidth;
 
-    setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
+      setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
+    }
 
     onSelect(i);
   };
@@ -26,19 +44,18 @@ export default function CardSelector({ list, width, height, cardSpace, onSelect,
   useEffect(() => {
     selectedItem(defaultIndex);
 
-    const func = (e) => e.preventDefault();
-    outterCon.current.addEventListener('touchmove', func, { passive: false });
+    outterCon.current?.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  let startX;
+  let startX: number;
 
-  const touchstart = (e) => {
+  const touchstart: React.TouchEventHandler<HTMLDivElement> = (e) => {
     const point = e.touches[0];
     startX = point.clientX;
   };
 
-  const touchend = (e) => {
+  const touchend: React.TouchEventHandler<HTMLDivElement> = (e) => {
     const point = e.changedTouches[0];
     const diffX = startX - point.clientX;
 
@@ -52,7 +69,7 @@ export default function CardSelector({ list, width, height, cardSpace, onSelect,
   };
 
   return (
-    <Contianer ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
+    <Container ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
       <div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
         {list.map((e, i) => {
           if (e instanceof Function) {
@@ -79,11 +96,11 @@ export default function CardSelector({ list, width, height, cardSpace, onSelect,
           );
         })}
       </div>
-    </Contianer>
+    </Container>
   );
 }
 
-const Contianer = styled.div`
+const Container = styled.div`
   overflow: hidden;
   mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
   overflow: hidden;
@@ -118,21 +135,3 @@ const Contianer = styled.div`
     }
   }
 `;
-
-CardSelector.propTypes = {
-  list: PropTypes.array,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  cardSpace: PropTypes.number,
-  onSelect: PropTypes.func,
-  defaultIndex: PropTypes.number,
-};
-
-CardSelector.defaultProps = {
-  list: '',
-  width: 300,
-  height: 400,
-  cardSpace: 40,
-  onSelect: noop,
-  defaultIndex: 0,
-};

package/src/Center/index.tsx

@@ -0,0 +1,33 @@
+import { styled } from '../Theme';
+
+export default function Center({
+  children,
+  relative = 'screen',
+}: {
+  children: React.ReactNode;
+  /**
+   * 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+   */
+  relative?: 'screen' | 'parent';
+}) {
+  let style = {};
+
+  if (relative === 'parent') {
+    style = {
+      width: '100%',
+      height: '100%',
+    };
+  }
+
+  return <Div style={style}>{children}</Div>;
+}
+
+const Div = styled('div')`
+  flex: 1;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

package/src/ClickToCopy/{copy-button.jsx → copy-button.tsx}

@@ -1,11 +1,24 @@
-import PropTypes from 'prop-types';
+/* eslint-disable no-unused-vars */
 import Tooltip from '@mui/material/Tooltip';
 import { green } from '@mui/material/colors';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import useCopy from './hook';
 
-export default function CopyButton({ content, locale, render, showTooltip, ...rest }) {
+export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
+  content?: string;
+  locale?: 'en' | 'zh';
+  render?: (props: { copyButton: React.ReactNode; containerRef: React.RefObject<HTMLElement> }) => React.ReactNode;
+  showTooltip?: boolean;
+}
+
+export default function CopyButton({
+  content = '',
+  locale = 'en',
+  render,
+  showTooltip = true,
+  ...rest
+}: CopyButtonProps) {
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
   const iconStyle = {
     fontSize: '1em',
@@ -28,17 +41,3 @@ export default function CopyButton({ content, locale, render, showTooltip, ...re
   }
   return copyButton;
 }
-
-CopyButton.propTypes = {
-  content: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'zh']),
-  render: PropTypes.func,
-  showTooltip: PropTypes.bool,
-};
-
-CopyButton.defaultProps = {
-  content: '',
-  locale: 'en',
-  render: undefined,
-  showTooltip: true,
-};

package/src/ClickToCopy/{hook.js → hook.ts}

@@ -12,20 +12,20 @@ const translations = {
   },
 };
 
-export default function useCopy({ content, locale = 'en' }) {
+export default function useCopy({ content, locale = 'en' }: { content?: string; locale?: 'en' | 'zh' }) {
   const [copied, setCopied] = useState(false);
-  const containerRef = useRef();
-  const copy = (e) => {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const copy = (e: React.MouseEvent) => {
     if (e) {
       e.stopPropagation();
     }
 
-    Copy(content || containerRef.current.textContent);
+    Copy(content || (containerRef.current?.textContent ?? ''));
     setCopied(true);
   };
 
   useEffect(() => {
-    let timer = null;
+    let timer: ReturnType<typeof setTimeout>;
     if (copied) {
       timer = setTimeout(() => setCopied(false), 2000);
     }

package/src/ClickToCopy/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { useSize } from 'ahooks';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -27,7 +26,16 @@ const UnstyledContainer = styled('span')`
   cursor: pointer;
 `;
 
-export default function ClickToCopy(props) {
+export interface ClickToCopyProps extends React.HTMLAttributes<HTMLDivElement> {
+  content?: string;
+  locale?: 'en' | 'zh';
+  tip?: string;
+  tipPlacement?: string;
+  copiedTip?: string;
+  unstyled?: boolean;
+}
+
+export default function ClickToCopy(props: ClickToCopyProps) {
   const newProps = mergeProps(props, ClickToCopy, ['style']);
   const { children, content, tip, copiedTip, tipPlacement, locale, style, unstyled, ...rest } = newProps;
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
@@ -38,7 +46,7 @@ export default function ClickToCopy(props) {
   const size = useSize(document.body);
   const width = size?.width || 0;
 
-  const onCopy = (e) => {
+  const onCopy = (e: React.MouseEvent<HTMLElement>) => {
     copy(e);
 
     if (width < 600) {
@@ -61,24 +69,11 @@ export default function ClickToCopy(props) {
   return <>{contentChild}</>;
 }
 
-ClickToCopy.propTypes = {
-  children: PropTypes.any.isRequired,
-  content: PropTypes.string,
-  tip: PropTypes.string,
-  tipPlacement: PropTypes.string,
-  copiedTip: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'zh']),
-  style: PropTypes.object,
-  // 仅提供点击复制功能, 不提供样式
-  unstyled: PropTypes.bool,
-};
-
 ClickToCopy.defaultProps = {
   content: '',
   tip: '',
   copiedTip: '',
   tipPlacement: 'right',
-  locale: 'en',
-  style: {},
+  locale: 'en' as const,
   unstyled: false,
 };

package/src/CodeBlock/{index.jsx → index.tsx}

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import Copy from 'copy-to-clipboard';
 
 import hljs from 'highlight.js/lib/core';
@@ -56,9 +55,22 @@ hljs.registerLanguage('objectivec', objectivec);
 hljs.registerLanguage('oc', objectivec);
 hljs.registerLanguage('markdown', markdown);
 
-export default function CodeBlock({ code, language, children, dark, ...rest }) {
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+  code?: string;
+  language?: string;
+  children?: React.ReactNode;
+  dark?: boolean;
+}
+
+export default function CodeBlock({
+  code = '',
+  language = 'text',
+  children = null,
+  dark = true,
+  ...rest
+}: CodeBlockProps) {
   const [copied, setCopied] = useState(false);
-  const source = code || children;
+  const source = code || (children as string);
 
   const onCopy = () => {
     if (copied) {
@@ -106,20 +118,6 @@ export default function CodeBlock({ code, language, children, dark, ...rest }) {
   return originEl;
 }
 
-CodeBlock.propTypes = {
-  code: PropTypes.string,
-  language: PropTypes.string,
-  children: PropTypes.any,
-  dark: PropTypes.bool,
-};
-
-CodeBlock.defaultProps = {
-  code: '',
-  language: 'text',
-  children: null,
-  dark: true,
-};
-
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
 const Pre = styled('pre')`
   font-family: ${fontFamily};

package/src/ContactForm/{index.jsx → index.tsx}

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/static-property-placement */
 import React from 'react';
-import PropTypes from 'prop-types';
 import axios from 'axios';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -11,7 +10,11 @@ import { warn as deprecatedWarn } from '../Util/deprecate';
 import Button from '../Button';
 import { styled } from '../Theme';
 
-export function submitContactForm({ formId, portalId }, fields, context) {
+export function submitContactForm(
+  { formId, portalId }: { formId: string; portalId: string },
+  fields: Record<string, string>,
+  context: Record<string, string>
+) {
   const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
   return axios
     .post(url, {
@@ -27,38 +30,45 @@ export function submitContactForm({ formId, portalId }, fields, context) {
     .catch((res) => (res.data ? res.data.message : 'Form Submit Failed'));
 }
 
-export default class ContactForm extends React.Component {
-  static propTypes = {
-    style: PropTypes.object,
-    className: PropTypes.string,
-    portalId: PropTypes.string,
-    formId: PropTypes.string,
-    title: PropTypes.string,
-    button: PropTypes.string,
-    successMessage: PropTypes.string,
-    layout: PropTypes.oneOf(['horizontal', 'vertical']),
-    fields: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  };
+export interface ContactFormProps extends React.HTMLAttributes<HTMLFormElement> {
+  portalId?: string;
+  formId?: string;
+  title?: string;
+  button?: string;
+  successMessage?: string;
+  layout?: 'horizontal' | 'vertical';
+  fields?: string | string[];
+}
 
+export default class ContactForm extends React.Component<
+  ContactFormProps,
+  {
+    loading: boolean;
+    errorMessage: string;
+    successMessage: string;
+    [x: string]: string | boolean;
+  }
+> {
   static defaultProps = {
-    style: {},
     className: '',
     portalId: '4796488',
     formId: '929a510f-34f4-4251-98b3-34175200aebd',
     title: undefined,
     button: '',
-    layout: 'vertical',
+    layout: 'vertical' as const,
     successMessage: 'Form Submit Success',
     fields: ['Email', 'First Name', 'Last Name'],
   };
 
-  constructor(props) {
+  fields: string[];
+
+  constructor(props: ContactFormProps) {
     super(props);
 
     if (typeof props.fields === 'string') {
       this.fields = props.fields.split(',').map((x) => x.trim());
     } else {
-      this.fields = props.fields;
+      this.fields = props.fields!;
     }
 
     this.state = {
@@ -68,6 +78,7 @@ export default class ContactForm extends React.Component {
     };
 
     this.fields.forEach((x) => {
+      // @ts-ignore
       this.state[x] = '';
     });
     deprecatedWarn('ContactForm');
@@ -108,7 +119,7 @@ export default class ContactForm extends React.Component {
               required
               key={x}
               type="text"
-              value={this.state[x]}
+              value={this.state[x] as string}
               onChange={this.getInputHandler(x)}
               className="input"
               placeholder={x}
@@ -146,20 +157,20 @@ export default class ContactForm extends React.Component {
     );
   }
 
-  onSubmit = async (e) => {
+  onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     this.setState({ loading: true });
 
     try {
       const message = await submitContactForm(
-        { formId: this.props.formId, portalId: this.props.portalId },
-        this.fields.reduce((obj, x) => {
-          obj[x] = this.state[x];
+        { formId: this.props.formId!, portalId: this.props.portalId! },
+        this.fields.reduce<Record<string, string>>((obj, x) => {
+          obj[x] = this.state[x] as string;
           return obj;
         }, {}),
         {
           pageUri: window.location.href,
-          pageName: window.location.title,
+          pageName: document.title,
         }
       );
 
@@ -170,14 +181,14 @@ export default class ContactForm extends React.Component {
     } catch (err) {
       this.setState({
         loading: false,
-        errorMessage: err ? err.message : 'Form submit failed',
+        errorMessage: err ? (err as Error).message : 'Form submit failed',
       });
     }
   };
 
   getInputHandler =
-    (name, state = {}) =>
-    (e) => {
+    (name: string, state = {}) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       this.setState(
         Object.assign(state, {
           [name]: e.target.value,
@@ -186,10 +197,17 @@ export default class ContactForm extends React.Component {
     };
 }
 
+interface FormProps {
+  layout: 'vertical' | 'horizontal';
+  fieldCount: number;
+}
+
 // prettier-ignore
-const getInputWidth = props => (props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`);
+const getInputWidth = (props: FormProps) => (props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`);
 
-const Form = styled('form')`
+const Form = styled('form', {
+  shouldForwardProp: (prop) => prop !== 'layout' && prop !== 'fieldCount',
+})<FormProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;