@arcblock/ux 2.10.67 → 2.10.68

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;

package/src/Earth/{util.js → util.ts}

@@ -1,7 +1,13 @@
 /* eslint-disable */
 // Code from: https://observablehq.com/@d3/world-tour
+export type Vec3 = [number, number, number];
+export type Vec2 = [number, number];
+export type Quaternion = [number, number, number, number];
+export type Rotation = Vec3;
+export type Angles = Vec3;
+
 export default class Util {
-  static fromAngles([l, p, g]) {
+  static fromAngles([l, p, g]: Angles) {
     l *= Math.PI / 360;
     p *= Math.PI / 360;
     g *= Math.PI / 360;
@@ -16,10 +22,10 @@ export default class Util {
       sl * cp * cg - cl * sp * sg,
       cl * sp * cg + sl * cp * sg,
       cl * cp * sg - sl * sp * cg,
-    ];
+    ] as Quaternion;
   }
 
-  static toAngles([a, b, c, d]) {
+  static toAngles([a, b, c, d]: Quaternion) {
     return [
       (Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180) / Math.PI,
       (Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180) / Math.PI,
@@ -27,27 +33,24 @@ export default class Util {
     ];
   }
 
-  static interpolateAngles(a, b) {
+  static interpolateAngles(a: [number, number, number], b: [number, number, number]) {
     const i = Util.interpolate(Util.fromAngles(a), Util.fromAngles(b));
-    return t => Util.toAngles(i(t));
+    return (t: number) => Util.toAngles(i(t));
   }
 
-  static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {
+  static interpolateLinear([a1, b1, c1, d1]: Quaternion, [a2, b2, c2, d2]: Quaternion) {
     (a2 -= a1), (b2 -= b1), (c2 -= c1), (d2 -= d1);
     const x = new Array(4);
-    return t => {
-      const l = Math.hypot(
-        (x[0] = a1 + a2 * t),
-        (x[1] = b1 + b2 * t),
-        (x[2] = c1 + c2 * t),
-        (x[3] = d1 + d2 * t)
-      );
+
+    return (t: number) => {
+      const l = Math.hypot((x[0] = a1 + a2 * t), (x[1] = b1 + b2 * t), (x[2] = c1 + c2 * t), (x[3] = d1 + d2 * t));
       (x[0] /= l), (x[1] /= l), (x[2] /= l), (x[3] /= l);
-      return x;
+
+      return x as Quaternion;
     };
   }
 
-  static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {
+  static interpolate([a1, b1, c1, d1]: Quaternion, [a2, b2, c2, d2]: Quaternion) {
     let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;
     if (dot < 0) (a2 = -a2), (b2 = -b2), (c2 = -c2), (d2 = -d2), (dot = -dot);
     if (dot > 0.9995) return Util.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);
@@ -55,7 +58,7 @@ export default class Util {
     const x = new Array(4);
     const l = Math.hypot((a2 -= a1 * dot), (b2 -= b1 * dot), (c2 -= c1 * dot), (d2 -= d1 * dot));
     (a2 /= l), (b2 /= l), (c2 /= l), (d2 /= l);
-    return t => {
+    return (t: number) => {
       const theta = theta0 * t;
       const s = Math.sin(theta);
       const c = Math.cos(theta);
@@ -63,7 +66,7 @@ export default class Util {
       x[1] = b1 * c + b2 * s;
       x[2] = c1 * c + c2 * s;
       x[3] = d1 * c + d2 * s;
-      return x;
+      return x as Quaternion;
     };
   }
 }