refactor(ui): refactor slides component

BREAKING CHANGE: remove `swiper`
DevCloudFE · Nov 18, 2022 · c71e227 · c71e227
1 parent 1cdbc77
commit c71e227
Show file tree

Hide file tree

Showing 20 changed files with 800 additions and 260 deletions.
diff --git a/package.json b/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",

diff --git a/packages/hooks/src/useAsync.ts b/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);

diff --git a/packages/hooks/src/useId.ts b/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';
diff --git a/packages/site/src/styles/_app.scss b/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);
  }
  }
 

diff --git a/packages/ui/package.json b/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",

diff --git a/packages/ui/src/components/image/ImagePreview.tsx b/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 (

diff --git a/packages/ui/src/components/index.ts b/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';

diff --git a/packages/ui/src/components/root/contex.ts b/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;

diff --git a/packages/ui/src/components/slider/Slider.tsx b/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 = (() => {