feat: table: add table component

global.d.ts

@@ -3,6 +3,8 @@ declare module '*.scss' {
     export default styles;
 }
 
+declare module '@ngard/tiny-isequal';
+
 /**
  * userLanguage type for IE i18n
  */

package.json

@@ -49,11 +49,11 @@
         "@floating-ui/react-dom": "0.6.0",
         "@floating-ui/react-dom-interactions": "0.6.3",
         "@mdi/react": "1.5.0",
+        "@ngard/tiny-isequal": "1.1.0",
         "@types/lodash": "4.14.182",
         "@types/react-is": "17.0.3",
         "@types/shallowequal": "1.1.1",
         "bodymovin": "4.13.0",
-        "lodash": "4.17.21",
         "lottie-web": "5.8.1",
         "react-flip-toolkit": "7.0.13",
         "react-is": "18.1.0",
@@ -159,6 +159,7 @@
         "react-dev-utils": "12.0.0",
         "react-docgen-typescript": "2.2.2",
         "react-refresh": "0.11.0",
+        "react-sortable-hoc": "2.0.0",
         "react-test-renderer": "17.0.2",
         "react-window": "1.8.5",
         "regenerator-runtime": "0.13.7",

src/components/Accordion/Accordion.tsx

@@ -1,10 +1,9 @@
 import React, { FC, Ref, useCallback, useState } from 'react';
 
-import { mergeClasses, uniqueId } from '../../shared/utilities';
+import { eventKeys, mergeClasses, uniqueId } from '../../shared/utilities';
 
 import { AccordionProps, AccordionSummaryProps, AccordionBodyProps } from './';
 import { Icon, IconName } from '../Icon';
-import { eventKeys } from '../../shared/utilities/eventKeys';
 
 import styles from './accordion.module.scss';
 

src/components/Motion/CSSMotion.tsx

@@ -1,32 +1,20 @@
 import React from 'react';
 import { useRef } from 'react';
-import { findDOMNode } from '../../shared/utilities/findDOMNode';
-import { fillRef } from '../../shared/utilities/ref';
-import { mergeClasses } from '../../shared/utilities/mergeClasses';
-import { getTransitionName, supportTransition } from './util/motion';
-import type { CSSMotionConfig, CSSMotionProps } from './CSSMotion.types';
+import {
+    DomWrapper,
+    findDOMNode,
+    fillRef,
+    mergeClasses,
+} from '../../shared/utilities';
+import { getTransitionName } from './util/motion';
+import type { CSSMotionProps } from './CSSMotion.types';
 import { STATUS_NONE, STEP_PREPARE, STEP_START } from './CSSMotion.types';
 import { useStatus } from './hooks/useStatus';
-import { DomWrapper } from '../../shared/utilities/domWrapper';
 import { isActive } from './hooks/useStepQueue';
 
-/**
- * `transitionSupport` is used for none transition test case.
- * Default we use browser transition event support check.
- */
-export function genCSSMotion(
-    config: CSSMotionConfig
-): React.ForwardRefExoticComponent<CSSMotionProps & { ref?: React.Ref<any> }> {
-    let transitionSupport = config;
-
-    if (typeof config === 'object') {
-        ({ transitionSupport } = config);
-    }
-
-    function isSupportTransition(props: CSSMotionProps) {
-        return !!(props.motionName && transitionSupport);
-    }
-
+export function genCSSMotion(): React.ForwardRefExoticComponent<
+    CSSMotionProps & { ref?: React.Ref<any> }
+> {
     const CSSMotion = React.forwardRef<any, CSSMotionProps>((props, ref) => {
         const {
             // Default config
@@ -40,8 +28,6 @@ export function genCSSMotion(
             eventProps,
         } = props;
 
-        const supportMotion = isSupportTransition(props);
-
         // Ref to the react node, it may be a HTMLElement
         const nodeRef = useRef<any>();
         // Ref to the dom wrapper in case ref can not pass to HTMLElement
@@ -63,7 +49,6 @@ export function genCSSMotion(
         }
 
         const [status, statusStep, statusStyle, mergedVisible] = useStatus(
-            supportMotion,
             visible,
             getDomElement,
             props
@@ -92,7 +77,7 @@ export function genCSSMotion(
         if (!children) {
             // No children
             motionChildren = null;
-        } else if (status === STATUS_NONE || !isSupportTransition(props)) {
+        } else if (status === STATUS_NONE) {
             // Stable children
             if (mergedVisible) {
                 motionChildren = children({ ...mergedProps }, setNodeRef);
@@ -161,4 +146,4 @@ export function genCSSMotion(
     return CSSMotion;
 }
 
-export default genCSSMotion(supportTransition);
+export default genCSSMotion();

src/components/Motion/CSSMotion.types.ts

@@ -65,12 +65,6 @@ export type MotionEndEventHandler = (
     event: MotionEvent
 ) => boolean | void;
 
-export type CSSMotionConfig =
-    | boolean
-    | {
-          transitionSupport?: boolean;
-      };
-
 export type MotionName =
     | string
     | {
@@ -146,7 +140,7 @@ export interface CSSMotionProps {
     children?: (
         props: {
             visible?: boolean;
-            className?: string;
+            classNames?: string;
             style?: React.CSSProperties;
             [key: string]: any;
         },

src/components/Motion/CSSMotionList.tsx

@@ -6,7 +6,6 @@ import {
     CSSMotionListProps,
     CSSMotionListState,
 } from './CSSMotion.types';
-import { supportTransition } from './util/motion';
 import {
     STATUS_ADD,
     STATUS_KEEP,
@@ -18,11 +17,9 @@ import {
 
 /**
  * Generate a CSSMotionList component with config
- * @param transitionSupport No need since CSSMotionList no longer depends on transition support
  * @param CSSMotion CSSMotion component
  */
 export function genCSSMotionList(
-    transitionSupport?: boolean,
     CSSMotion = OriginCSSMotion
 ): React.ComponentClass<CSSMotionListProps> {
     class CSSMotionList extends React.Component<
@@ -63,7 +60,6 @@ export function genCSSMotionList(
             };
         }
 
-        // ZombieJ: Return the count of rest keys. It's safe to refactor if need more info.
         removeKey = (removeKey: React.Key) => {
             const { keyEntities } = this.state;
             const nextKeyEntities = keyEntities.map((entity) => {
@@ -90,23 +86,21 @@ export function genCSSMotionList(
                 children,
                 onVisibleChanged,
                 onAllRemoved,
-                ...restProps
+                ...rest
             } = this.props;
 
             const Component = component || React.Fragment;
-
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const _transitionSupport = transitionSupport;
-
             const motionProps: CSSMotionProps = {};
+
             MOTION_PROP_NAMES.forEach((prop) => {
-                (motionProps as any)[prop] = (restProps as any)[prop];
-                delete (restProps as any)[prop];
+                (motionProps as any)[prop] = (rest as any)[prop];
+                delete (rest as any)[prop];
             });
-            delete restProps.keys;
+
+            delete rest.keys;
 
             return (
-                <Component {...restProps}>
+                <Component {...rest}>
                     {keyEntities.map(({ status, ...eventProps }) => {
                         const visible =
                             status === STATUS_ADD || status === STATUS_KEEP;
@@ -147,4 +141,4 @@ export function genCSSMotionList(
     return CSSMotionList;
 }
 
-export default genCSSMotionList(supportTransition);
+export default genCSSMotionList();

src/components/Motion/hooks/useNextFrame.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { wrapperRaf } from '../../../shared/utilities/raf';
+import { requestAnimationFrameWrapper } from '../../../shared/utilities';
 
 export const useNextFrame = (): [
     (callback: (info: { isCanceled: () => boolean }) => void) => void,
@@ -8,7 +8,7 @@ export const useNextFrame = (): [
     const nextFrameRef = React.useRef<number>(null);
 
     function cancelNextFrame() {
-        wrapperRaf.cancel(nextFrameRef.current);
+        requestAnimationFrameWrapper.cancel(nextFrameRef.current);
     }
 
     function nextFrame(
@@ -17,7 +17,7 @@ export const useNextFrame = (): [
     ) {
         cancelNextFrame();
 
-        const nextFrameId = wrapperRaf(() => {
+        const nextFrameId = requestAnimationFrameWrapper(() => {
             if (delay <= 1) {
                 callback({
                     isCanceled: () => nextFrameId !== nextFrameRef.current,

src/components/Motion/hooks/useStatus.ts

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useLayoutEffect } from 'react';
 import { useSafeState } from '../../../hooks/useState';
 import {
     STATUS_APPEAR,
@@ -19,10 +19,8 @@ import type {
 } from '../CSSMotion.types';
 import { DoStep, SkipStep, isActive, useStepQueue } from './useStepQueue';
 import { useDomMotionEvents } from './useDomMotionEvents';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export const useStatus = (
-    supportMotion: boolean,
     visible: boolean,
     getElement: () => HTMLElement,
     {
@@ -166,16 +164,12 @@ export const useStatus = (
 
     // ============================ Status ============================
     // Update with new status
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         setAsyncVisible(visible);
 
         const isMounted = mountedRef.current;
         mountedRef.current = true;
 
-        if (!supportMotion) {
-            return;
-        }
-
         let nextStatus: MotionStatus;
 
         // Appear

src/components/Motion/hooks/useStepQueue.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useSafeState } from '../../../hooks/useState';
 import type { StepStatus, MotionStatus } from '../CSSMotion.types';
 import {
@@ -9,7 +9,6 @@ import {
     STEP_NONE,
 } from '../CSSMotion.types';
 import { useNextFrame } from './useNextFrame';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 const STEP_QUEUE: StepStatus[] = [
     STEP_PREPARE,
@@ -41,7 +40,7 @@ export const useStepQueue = (
         setStep(STEP_PREPARE, true);
     }
 
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
             const index = STEP_QUEUE.indexOf(step);
             const nextStep = STEP_QUEUE[index + 1];

src/components/Motion/tests/CSSMotion.test.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mergeClasses } from '../../../shared/utilities/mergeClasses';
+import { mergeClasses } from '../../../shared/utilities';
 import { render, fireEvent } from '@testing-library/react';
 import type { CSSMotionProps } from '../CSSMotion.types';
 import RefCSSMotion, { genCSSMotion } from '../CSSMotion';
 import ReactDOM from 'react-dom';
 
 describe('CSSMotion', () => {
-    const CSSMotion = genCSSMotion({
-        transitionSupport: true,
-    });
+    const CSSMotion = genCSSMotion();
 
     beforeEach(() => {
         jest.useFakeTimers();
@@ -115,10 +113,10 @@ describe('CSSMotion', () => {
                 motionDeadline={233}
                 motionName="bamboo"
             >
-                {({ style, className }) => (
+                {({ style, classNames }) => (
                     <Component
                         style={style}
-                        className={mergeClasses(['motion-box', className])}
+                        className={mergeClasses(['motion-box', classNames])}
                     />
                 )}
             </CSSMotion>