refactor(ui): refactor slides component

BREAKING CHANGE: remove `swiper`

Author: xiejay97

package.json

@@ -111,7 +111,6 @@
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-scss": "^4.3.0",
-    "swiper": "^8.4.4",
     "table": "^6.8.1",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.9.1",

packages/hooks/src/useAsync.ts

@@ -11,19 +11,21 @@ class AsyncInstance {
     }
   }
 
-  setTimeout(handler: TimerHandler, timeout?: number) {
+  setTimeout(handler: TimerHandler, timeout?: number, clearFn?: () => void) {
     const tid = window.setTimeout(handler, timeout);
     const clear = () => {
+      clearFn?.();
       clearTimeout(tid);
     };
     this.clearFns.add(clear);
 
     return clear;
   }
 
-  requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
-    const tid = requestAnimationFrame(...args);
+  requestAnimationFrame(cb: FrameRequestCallback, clearFn?: () => void) {
+    const tid = requestAnimationFrame(cb);
     const clear = () => {
+      clearFn?.();
       cancelAnimationFrame(tid);
     };
     this.clearFns.add(clear);

packages/hooks/src/useId.ts

@@ -2,15 +2,6 @@ import { useMemo } from 'react';
 
 const STR = 'abcdefghijklmnopqrstuvwxyz';
 
-function randomString(length: number) {
-  let result = '';
-  for (let i = length; i > 0; --i) {
-    result += STR[Math.floor(Math.random() * STR.length)];
-  }
-  return result;
-}
-const [prefix, suffix] = [randomString(2), randomString(2)];
-
 const ID = [-1];
 export function useId(): string {
   return useMemo(() => {
@@ -25,6 +16,7 @@ export function useId(): string {
     };
     reduce(0);
 
-    return `${prefix}${ID.map((charIndex) => STR[charIndex]).join('')}${suffix}`;
+    return `${useId.PREFIX}${ID.map((charIndex) => STR[charIndex]).join('')}`;
   }, []);
 }
+useId.PREFIX = 'ID';

packages/site/src/styles/_app.scss

@@ -313,9 +313,8 @@ h3 {
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 100%;
+      height: 160px;
       color: map.get($rd-colors, 'white');
-      background: rgb(54 77 121);
     }
   }
 

packages/ui/package.json

@@ -30,8 +30,7 @@
     "immer": "^9.0.16",
     "lodash": "^4.17.21",
     "rfs": "^9.0.6",
-    "rxjs": "^7.5.7",
-    "swiper": "^8.4.4"
+    "rxjs": "^7.5.7"
   },
   "peerDependencies": {
     "dayjs": "^1.11.6",

packages/ui/src/components/image/ImagePreview.tsx

@@ -158,7 +158,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
     }
   }, [visible]);
 
-  const listenWindow = visible && isDragging;
+  const listenDragEvent = visible && isDragging;
 
   useEvent<TouchEvent>(
     windowRef,
@@ -197,7 +197,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
       handleMove();
     },
     { passive: false },
-    !listenWindow
+    !listenDragEvent
   );
 
   useEvent<MouseEvent>(
@@ -219,7 +219,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
       handleMove();
     },
     {},
-    !listenWindow
+    !listenDragEvent
   );
 
   useEvent(
@@ -229,7 +229,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
       setIsDragging(false);
     },
     {},
-    !listenWindow
+    !listenDragEvent
   );
 
   return (

packages/ui/src/components/index.ts

@@ -100,7 +100,7 @@ export { DSkeleton } from './skeleton';
 export type { DSliderProps } from './slider';
 export { DSlider } from './slider';
 
-export type { DSlidesProps, DSlidesSlideProps } from './slides';
+export type { DSlidesProps } from './slides';
 export { DSlides } from './slides';
 
 export type { DSpinnerProps } from './spinner';

packages/ui/src/components/root/contex.ts

@@ -33,7 +33,7 @@ import type { DSelectProps } from '../select';
 import type { DSeparatorProps } from '../separator';
 import type { DSkeletonProps } from '../skeleton';
 import type { DSliderProps } from '../slider';
-import type { DSlidesProps, DSlidesSlideProps } from '../slides';
+import type { DSlidesProps } from '../slides';
 import type { DSpinnerProps } from '../spinner';
 import type { DStepperProps } from '../stepper';
 import type { DSwitchProps } from '../switch';
@@ -115,8 +115,7 @@ export type DComponentConfig = {
   DSeparator: DSeparatorProps;
   DSkeleton: DSkeletonProps;
   DSlider: DSliderProps;
-  DSlides: DSlidesProps;
-  'DSlides.Slide': DSlidesSlideProps;
+  DSlides: DSlidesProps<any, any>;
   DSpinner: DSpinnerProps;
   DStepper: DStepperProps<any>;
   DSwitch: DSwitchProps;

packages/ui/src/components/slider/Slider.tsx

@@ -259,7 +259,7 @@ export function DSlider(props: DSliderProps): JSX.Element | null {
     }
   }, [focusDot, _value, thumbPoint]);
 
-  const listenWindow = !isNull(draggableDot) || !isNull(thumbPoint);
+  const listenDragEvent = !isNull(draggableDot) || !isNull(thumbPoint);
 
   useEvent<TouchEvent>(
     windowRef,
@@ -277,7 +277,7 @@ export function DSlider(props: DSliderProps): JSX.Element | null {
       }
     },
     { passive: false },
-    !listenWindow
+    !listenDragEvent
   );
   useEvent<MouseEvent>(
     windowRef,
@@ -295,7 +295,7 @@ export function DSlider(props: DSliderProps): JSX.Element | null {
       }
     },
     {},
-    !listenWindow
+    !listenDragEvent
   );
   useEvent(
     windowRef,
@@ -305,7 +305,7 @@ export function DSlider(props: DSliderProps): JSX.Element | null {
       setThumbPoint(null);
     },
     {},
-    !listenWindow
+    !listenDragEvent
   );
 
   const marks = (() => {