@arcblock/ux 2.10.67 → 2.10.69

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

@@ -1,12 +1,12 @@
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
 import { styled } from '../Theme';
+import type { Locale, Translations } from '../type';
 
 export { resetCookieConsentValue };
 
-const translations = {
+const translations: Translations = {
   en: {
     content:
       'We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from.',
@@ -27,16 +27,27 @@ function inIframe() {
   }
 }
 
-function AcceptButton(props) {
+function AcceptButton(props: ButtonProps) {
   return <Button variant="contained" {...props} />;
 }
 
+export interface CookieConsentProps extends React.ComponentProps<typeof CookieConsent> {
+  locale?: Locale;
+  displayInIframe?: false | true;
+}
+
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
  * - 默认配置/样式
  */
-export default function DefaultCookieConsent({ children, locale, style, displayInIframe, ...rest }) {
+export default function DefaultCookieConsent({
+  children,
+  locale = 'en',
+  style = {},
+  displayInIframe = false,
+  ...rest
+}: CookieConsentProps) {
   if (!displayInIframe && inIframe()) {
     return null;
   }
@@ -59,20 +70,6 @@ export default function DefaultCookieConsent({ children, locale, style, displayI
   );
 }
 
-DefaultCookieConsent.propTypes = {
-  children: PropTypes.any,
-  style: PropTypes.object,
-  locale: PropTypes.string,
-  displayInIframe: PropTypes.bool,
-};
-
-DefaultCookieConsent.defaultProps = {
-  children: null,
-  style: {},
-  locale: 'en',
-  displayInIframe: false,
-};
-
 const Wrapper = styled('div')`
   box-sizing: border-box;
   position: fixed;

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { type SxProps } from '@mui/material';
 
 import { getColor, mergeProps } from '../Util';
 import { styled } from '../Theme';
@@ -8,7 +8,7 @@ const SECONDS_OF_MINUTE = 60;
 const SECONDS_OF_HOUR = 60 * SECONDS_OF_MINUTE;
 const SECONDS_OF_DAY = 24 * SECONDS_OF_HOUR;
 
-function getRemaining(endTime) {
+function getRemaining(endTime: number) {
   const now = new Date().getTime();
   const diff = Math.round((endTime - now) / 1000);
   const days = Math.floor(diff / SECONDS_OF_DAY);
@@ -19,7 +19,7 @@ function getRemaining(endTime) {
 }
 
 // eslint-disable-next-line react/prop-types
-function FixWidthNumber({ number, label, length = 2 }) {
+function FixWidthNumber({ number, label, length = 2 }: { number: number; label: string; length?: number }) {
   let str = number.toString();
   while (str.length < length) {
     str = `0${str}`;
@@ -41,12 +41,32 @@ function FixWidthNumber({ number, label, length = 2 }) {
   );
 }
 
-export default class CountDown extends Component {
-  constructor(props) {
+export interface CountDownProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** endTime should be UTC */
+  endTime: number;
+  dark?: true | false;
+  sx?: SxProps;
+}
+
+export interface CountDownState {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  done: boolean;
+}
+
+export default class CountDown extends Component<CountDownProps, CountDownState> {
+  // eslint-disable-next-line react/static-property-placement
+  static defaultProps: { dark: boolean; style: {} };
+
+  timer?: NodeJS.Timeout;
+
+  constructor(props: CountDownProps) {
     super(props);
     const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
     this.state = getRemaining(newProps.endTime);
-    this.timer = null;
+    this.timer = undefined;
   }
 
   componentDidMount() {
@@ -54,7 +74,7 @@ export default class CountDown extends Component {
       const remaining = getRemaining(this.props.endTime);
       if (remaining.done) {
         clearInterval(this.timer);
-        this.timer = null;
+        this.timer = undefined;
       }
 
       this.setState(remaining);
@@ -64,7 +84,7 @@ export default class CountDown extends Component {
   componentWillUnmount() {
     if (this.timer) {
       clearInterval(this.timer);
-      this.timer = null;
+      this.timer = undefined;
     }
   }
 
@@ -72,7 +92,7 @@ export default class CountDown extends Component {
     const { dark, endTime, ...rest } = this.props;
     const { days, hours, minutes, seconds } = this.state;
     return (
-      <Container dark={dark} {...rest}>
+      <Container dark={dark!} {...rest}>
         <FixWidthNumber number={days} label="D" />
         <span className="num-sep">:</span>
         <FixWidthNumber number={hours} label="H" />
@@ -85,12 +105,6 @@ export default class CountDown extends Component {
   }
 }
 
-CountDown.propTypes = {
-  endTime: PropTypes.number.isRequired, // endTime should be UTC
-  dark: PropTypes.bool,
-  style: PropTypes.object,
-};
-
 CountDown.defaultProps = {
   dark: true,
   style: {},
@@ -99,7 +113,7 @@ CountDown.defaultProps = {
 const textBackground = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
 linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`;
 
-const Container = styled('div')`
+const Container = styled('div', { shouldForwardProp: (prop) => prop !== 'dark' })<{ dark: boolean }>`
   color: ${(props) => getColor(props)};
   font-size: 50px;
   display: flex;

package/src/DID/index.tsx

@@ -15,6 +15,7 @@ import { DID_PREFIX } from '../Util/constant';
 import { HTMLDidAddressElement } from '../Address/did-address';
 import { translate } from '../Locale/util';
 import { getDIDColor, isEthereumDid } from '../Util';
+import type { Locale } from '../type';
 
 const translations = {
   en: {
@@ -33,17 +34,17 @@ interface IDIDPropTypes extends IDidAddressWrapper {
   did: string;
   size?: number;
   component?: React.ElementType;
-  copyable?: boolean;
-  responsive?: boolean;
-  showCopyButtonInTooltip?: boolean;
-  showAvatar?: boolean;
-  showQrcode?: boolean;
-  inline?: boolean;
+  copyable?: true | false;
+  responsive?: true | false;
+  showCopyButtonInTooltip?: false | true;
+  showAvatar?: true | false;
+  showQrcode?: false | true;
+  inline?: false | true;
   append?: any;
-  compact?: boolean;
+  compact?: false | true;
   startChars?: number;
   endChars?: number;
-  locale?: 'en' | 'zh';
+  locale?: Locale;
   chainId?: string;
   roleType?: number;
 }

package/src/Datatable/index.jsx

@@ -43,16 +43,16 @@ import { styled } from '../Theme';
  * @typedef {{
  *  data: Array<object | number[] | string[]>,
  *  columns: Array<DataTableColumn>,
- *  locale?: string,
+ *  locale?: import('../type').Locale,
  *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
- *  loading?: boolean,
- *  disabled?: boolean,
- *  stripped?: boolean,
+ *  loading?: false | true,
+ *  disabled?: false | true,
+ *  stripped?: false | true,
  *  verticalKeyWidth?: number | string,
- *  hideTableHeader?: boolean,
+ *  hideTableHeader?: false | true,
  *  components?: ModifiedMUIDataTableProps['components'],
  *  emptyNode?: import('react').ReactNode,
  *  durable?: string,

package/src/Dialog/confirm.jsx

@@ -13,9 +13,9 @@ import Dialog from './dialog';
  *   onConfirm: Function,
  *   onCancel: Function,
  *   children?: React.ReactNode,
- *   showCancelButton?: boolean,
- *   showCloseButton?: boolean,
- *   fullScreen?: boolean,
+ *   showCancelButton?: true | false,
+ *   showCloseButton?: true | false,
+ *   fullScreen?: false | true,
  *   confirmButton?: {text: string, props?: ButtonProps}
  *   cancelButton?: {text: string, props?: ButtonProps}
  *   PaperProps?: PaperProps

package/src/Dialog/types.d.ts

@@ -5,7 +5,7 @@ export interface OpenConfirmProps {
   content: ReactNode;
   onConfirm?: (close: () => void) => void;
   onCancel?: () => void;
-  showCancelButton?: boolean;
+  showCancelButton?: true | false;
   confirmButtonText?: string;
   cancelButtonText?: string;
 }

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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import DidLogoIcon from '@arcblock/icons/lib/DidLogo';
 
 const defaultStyle = {
@@ -7,7 +6,13 @@ const defaultStyle = {
   fill: 'currentColor',
 };
 
-export default function DidLogo({ style, size, className }) {
+export interface DidLogoProps {
+  style?: React.CSSProperties;
+  size?: string | number;
+  className?: string;
+}
+
+export default function DidLogo({ style = defaultStyle, size = 0, className = '' }: DidLogoProps) {
   const height = Number(size) > 0 ? `${Number(size)}px` : size;
   return (
     <DidLogoIcon
@@ -16,15 +21,3 @@ export default function DidLogo({ style, size, className }) {
     />
   );
 }
-
-DidLogo.propTypes = {
-  style: PropTypes.object,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string,
-};
-
-DidLogo.defaultProps = {
-  style: defaultStyle,
-  size: 0,
-  className: '',
-};

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

@@ -1,19 +1,27 @@
 /* eslint-disable max-len */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import { mergeProps } from '../Util';
 
-export default class DriftBot extends Component {
-  constructor(props) {
-    super(mergeProps(props, DriftBot, ['attributes']));
+export interface DriftBotProps {
+  appId: string;
+  userId?: string;
+  attributes?: Record<string, any>;
+}
+
+export default class DriftBot extends Component<DriftBotProps> {
+  // eslint-disable-next-line react/static-property-placement
+  static defaultProps: { userId: string; attributes: Record<string, any> };
+
+  constructor(props: DriftBotProps) {
+    super(mergeProps(props, DriftBot, ['attributes']) as DriftBotProps);
 
     this.addMainScript = this.addMainScript.bind(this);
     this.addIdentityVariables = this.addIdentityVariables.bind(this);
     this.insertScript = this.insertScript.bind(this);
   }
 
-  insertScript(scriptText) {
+  insertScript(scriptText: string) {
     const script = document.createElement('script');
     script.innerText = scriptText;
     script.async = true;
@@ -69,12 +77,6 @@ export default class DriftBot extends Component {
   }
 }
 
-DriftBot.propTypes = {
-  appId: PropTypes.string.isRequired,
-  userId: PropTypes.string,
-  attributes: PropTypes.object,
-};
-
 DriftBot.defaultProps = {
   userId: '',
   attributes: {},

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

@@ -1,13 +1,13 @@
 /* eslint-disable consistent-return */
 import { useReducer, useRef, useEffect } from 'react';
 import useSpring from 'react-use/lib/useSpring';
-import PropTypes from 'prop-types';
 import * as d3 from 'd3-geo';
 import * as topojson from 'topojson-client';
 import versor from 'versor';
 
 import json from './countries.json';
 import util from './util';
+import type { Vec2, Vec3, Quaternion, Angles, Rotation } from './util';
 import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
 
@@ -33,7 +33,20 @@ const themes = {
   },
 };
 
-function stateReducer(state, action) {
+type State = {
+  rotation: Angles;
+  isDragging: boolean;
+  animateDuration: number;
+  mousePosition: [number, number] | null;
+  tooltipIndex: number;
+};
+
+type Action = {
+  type: string;
+  payload: Record<string, any>;
+};
+
+function stateReducer(state: State, action: Action) {
   switch (action.type) {
     case 'dragEnd':
       return { ...state, isDragging: false };
@@ -52,8 +65,47 @@ function stateReducer(state, action) {
   }
 }
 
-function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, activeMarkerId, colors }) {
-  Object.assign(colors, themes[theme]);
+export type Marker = {
+  id: string;
+  title: string;
+  description: string;
+  country: string;
+  latitude: number;
+  longitude: number;
+};
+
+export type Colors = {
+  ocean: string;
+  graticule: string;
+  land: string;
+  activeLand: string;
+  border: string;
+  marker: string;
+  activeMarker: string;
+};
+
+export interface EarthProps {
+  theme?: 'light' | 'dark';
+  width?: number;
+  height?: number;
+  enableRotation?: false | true;
+  rotationSpeed?: number;
+  activeMarkerId?: string;
+  markers?: Marker[];
+  colors?: Partial<Colors>;
+}
+
+function Earth({
+  theme = 'dark',
+  width = 1200,
+  height = 600,
+  enableRotation = false,
+  rotationSpeed = 5,
+  activeMarkerId,
+  markers = [],
+  colors: _colors = {},
+}: EarthProps) {
+  const colors: Colors = Object.assign(_colors, themes[theme]);
   const [state, dispatch] = useReducer(stateReducer, {
     rotation: [0, 0, 0],
     isDragging: false,
@@ -62,17 +114,25 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
     tooltipIndex: -1,
   });
 
-  const svgRef = useRef(null);
+  const svgRef = useRef<SVGSVGElement>(null);
 
   // variables used to track drag and rotate
-  const dragRef = useRef({
-    v0: undefined,
-    r0: undefined,
-    q0: undefined,
-  });
+  const dragRef = useRef<{
+    v0?: Vec3;
+    r0?: Rotation;
+    q0?: Quaternion;
+  }>({});
 
   // variables used to track start and end position when there is active marker
-  const rotateRef = useRef({
+  const rotateRef = useRef<{
+    p1: Vec2 | null;
+    p2: Vec2;
+    r1: Rotation | null;
+    r2: Rotation;
+    step: number;
+    markerId: string | null;
+    iv: ((t: number) => Angles) | null;
+  }>({
     p1: null,
     p2: [0, 0],
     r1: null,
@@ -99,7 +159,7 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
       geoJson
     )
     .rotate(
-      t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv(t / state.animateDuration)
+      t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv!(t / state.animateDuration)
     );
 
   const pathGenerator = d3.geoPath().projection(projection).pointRadius(2);
@@ -111,7 +171,7 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
       let { p1, p2, r1, r2, markerId } = rotateRef.current;
       // We should only start new animation if the marker has changed
       if (markerId !== activeMarkerId && !state.isDragging) {
-        const marker = markers.find((x) => x.id === activeMarkerId);
+        const marker = markers.find((x) => x.id === activeMarkerId)!;
         p1 = p2;
         p2 = [marker.longitude, marker.latitude];
         r1 = r2;
@@ -149,16 +209,16 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
     }
   });
 
-  const getMousePosition = (event) => {
-    const node = svgRef.current;
-    const rect = node.getBoundingClientRect();
+  const getMousePosition = (event: MouseEvent) => {
+    const node = svgRef.current!;
+    const rect = node?.getBoundingClientRect();
     const mousePosition = [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
 
     return mousePosition;
   };
 
-  const onDragStart = (event) => {
-    const mousePosition = getMousePosition(event);
+  const onDragStart = (event: React.MouseEvent<SVGSVGElement>) => {
+    const mousePosition = getMousePosition(event as unknown as MouseEvent);
 
     if (!mousePosition[0]) {
       return;
@@ -171,12 +231,12 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
     dispatch({ type: 'dragStart', payload: { mousePosition } });
   };
 
-  const onDrag = (event) => {
+  const onDrag = (event: React.MouseEvent<SVGSVGElement>) => {
     if (state.isDragging === false) {
       return;
     }
 
-    const mousePosition = getMousePosition(event);
+    const mousePosition = getMousePosition(event as unknown as MouseEvent);
     const { r0, v0, q0 } = dragRef.current;
 
     const v1 = versor.cartesian(projection.rotate(r0).invert(mousePosition));
@@ -192,7 +252,7 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
     }, 200);
   };
 
-  const onShowTooltip = (event, i) =>
+  const onShowTooltip = (event: MouseEvent, i: number) =>
     dispatch({
       type: 'tooltip',
       payload: { tooltipIndex: i, mousePosition: getMousePosition(event) },
@@ -213,9 +273,9 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
         <g
           key={x.id}
           className={`marker ${isActive ? 'marker--active' : ''}`}
-          onFocus={(event) => onShowTooltip(event, i)}
+          onFocus={(event) => onShowTooltip(event as unknown as MouseEvent, i)}
           onBlur={onHideTooltip}
-          onMouseOver={(event) => onShowTooltip(event, i)}
+          onMouseOver={(event) => onShowTooltip(event as unknown as MouseEvent, i)}
           onMouseOut={onHideTooltip}>
           <circle
             key="marker-inner"
@@ -260,12 +320,12 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
   if (activeMarkerId && markers.some((x) => x.id === activeMarkerId)) {
     const activeMarker = markers.find((x) => x.id === activeMarkerId);
     activeCountry = geoJson.features.findIndex(
-      (x) => x.properties && x.properties.name && x.properties.name === activeMarker.country
+      (x: any) => x.properties && x.properties.name && x.properties.name === activeMarker!.country
     );
   }
 
   return (
-    <Container width={width} height={height} theme={theme} colors={colors} onMouseLeave={onDragEnd}>
+    <Container width={width} height={height} $theme={theme} colors={colors} onMouseLeave={onDragEnd}>
       {renderTooltip()}
       <svg
         className="earth"
@@ -279,7 +339,7 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
         <circle cx={width / 2} cy={height / 2} r={projection.scale()} className="globe" filter="url(#glow)" />
         <path className="graticule" d={pathGenerator(d3.geoGraticule().step([10, 10])())} />
         <g className="features">
-          {geoJson.features.map((x, i) => (
+          {geoJson.features.map((x: any, i: number) => (
             <path
               key={x.properties.name}
               className={`country ${activeCountry === i ? 'country--active' : ''}`}
@@ -324,49 +384,17 @@ function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, a
   );
 }
 
-Earth.propTypes = {
-  theme: PropTypes.oneOf(['light', 'dark']),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  enableRotation: PropTypes.bool,
-  rotationSpeed: PropTypes.number,
-  activeMarkerId: PropTypes.string,
-  markers: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      country: PropTypes.string.isRequired,
-      latitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      longitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    })
-  ),
-  colors: PropTypes.shape({
-    ocean: PropTypes.string,
-    graticule: PropTypes.string,
-    land: PropTypes.string,
-    activeLand: PropTypes.string,
-    border: PropTypes.string,
-    marker: PropTypes.string,
-    activeMarker: PropTypes.string,
-  }),
-};
+export default withDeprecated(Earth, { name: 'Earth' });
 
-Earth.defaultProps = {
-  theme: 'dark',
-  width: 1200,
-  height: 600,
-  enableRotation: false,
-  rotationSpeed: 5,
-  markers: [],
-  activeMarkerId: undefined,
-  colors: {},
+type ContainerProps = {
+  $theme: 'light' | 'dark';
+  width: number;
+  height: number;
+  colors: Colors;
 };
 
-export default withDeprecated(Earth, { name: 'Earth' });
-
-const Container = styled('div')`
-  background-color: ${(props) => (props.theme === 'light' ? '#f7f7f7' : '#222')};
+const Container = styled('div')<ContainerProps>`
+  background-color: ${(props) => (props.$theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
   position: relative;