chore: migrates to react 18

faceless-ui · Apr 19, 2022 · 2b2a3d3 · 2b2a3d3
1 parent 6d7afc1
commit 2b2a3d3
Show file tree

Hide file tree

Showing 24 changed files with 359 additions and 310 deletions.
diff --git a/demo/App.tsx b/demo/App.tsx
@@ -17,7 +17,7 @@ const App: React.FC = () => (
     <h1>
       Scroll Snap Slider:
     </h1>
-    <ScrollSnapSliderDemo />
+    {/* <ScrollSnapSliderDemo /> */}
     <h1>
       Thumbnail Slider Demo:
     </h1>

diff --git a/demo/index.tsx b/demo/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { render } from 'react-dom';
 import App from './App';
-
-render(<App />, document.getElementById('root'));
+import { createRoot } from 'react-dom/client';
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "smoothscroll-polyfill": "^0.4.4"
@@ -35,7 +35,9 @@
     "@trbl/eslint-config": "^2.0.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.22",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/smoothscroll-polyfill": "^0.3.1",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "enzyme": "^3.11.0",
@@ -53,8 +55,8 @@
     "husky": "^4.2.1",
     "jest": "^25.1.0",
     "lint-staged": "^10.0.6",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-hot-loader": "^4.12.19",
     "ts-loader": "^8.0.14",
     "typescript": "^4.6.3",

diff --git a/src/Slide/index.tsx b/src/Slide/index.tsx
@@ -4,9 +4,27 @@ import React, {
   useRef,
 } from 'react';
 import useSlider from '../useSlider';
-import { Props } from './types';
 import useIntersection from './useIntersection';
 
+export interface ISlide {
+  index: number
+  ref: React.MutableRefObject<HTMLElement | null>
+  isIntersecting: boolean
+}
+
+export type Props = {
+  index: number
+  id?: string
+  className?: string
+  htmlElement?: React.ElementType
+  htmlAttributes?: {
+    [key: string]: unknown
+    style?: React.CSSProperties
+  }
+  slideToSelfOnClick?: boolean
+  children?: React.ReactNode
+}
+
 const Slide: React.FC<Props> = (props) => {
   const {
     index,
@@ -18,7 +36,7 @@ const Slide: React.FC<Props> = (props) => {
   } = props;
 
   const slider = useSlider();
-  const slideRef = useRef<HTMLElement>(null);
+  const slideRef = useRef<HTMLElement | null>(null);
 
   const {
     dispatchSlide,

diff --git a/src/Slide/types.ts b/src/Slide/types.ts
diff --git a/src/Slide/useIntersection.ts b/src/Slide/useIntersection.ts
@@ -1,25 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
 type Options = {
-  root?: React.MutableRefObject<HTMLElement>,
+  root?: React.MutableRefObject<HTMLElement | null>,
   rootMargin?: string,
   threshold?: number
 }
 
 const useIntersection = (
-  ref: React.MutableRefObject<HTMLElement>,
+  ref: React.MutableRefObject<HTMLElement | null>,
   options?: Options,
 ): IntersectionObserverEntry => {
   const {
     root,
     rootMargin,
     threshold,
-  } = options;
+  } = options || {};
 
   const [intersection, setIntersection] = useState({} as IntersectionObserverEntry);
 
   useEffect(() => {
-    let observer;
+    let observer: IntersectionObserver;
     const {
       current: currentRef,
     } = ref;
@@ -30,7 +30,7 @@ const useIntersection = (
           setIntersection(entry);
         });
       }, {
-        root: root.current,
+        root: root?.current || null,
         rootMargin: rootMargin || '0px',
         threshold: threshold || 0.05,
       });
@@ -39,7 +39,7 @@ const useIntersection = (
     }
 
     return () => {
-      if (observer) {
+      if (observer && currentRef) {
         observer.unobserve(currentRef);
       }
     };

diff --git a/src/SliderButton/index.tsx b/src/SliderButton/index.tsx
@@ -1,6 +1,16 @@
 import React, { useCallback } from 'react';
 import useSlider from '../useSlider';
-import { Props } from './types';
+
+export type Props = {
+  id?: string,
+  className?: string,
+  htmlElement?: React.ElementType,
+  htmlAttributes?: {
+    [key: string]: unknown
+  },
+  children?: React.ReactNode,
+  direction?: 'prev' | 'next',
+};
 
 const SliderButton: React.FC<Props> = (props) => {
   const {

diff --git a/src/SliderButton/types.ts b/src/SliderButton/types.ts
diff --git a/src/SliderContext/index.tsx b/src/SliderContext/index.tsx
@@ -1,5 +1,25 @@
 import { createContext } from 'react';
-import { ISliderContext } from './types';
+import { MutableRefObject } from 'react';
+import { ISlide } from '../Slide';
+import { Props } from '../SliderProvider';
+
+export interface ISliderContext extends Omit<Props, 'children'> {
+  slidesToShow: number // NOTE: this is made required, the provider sets fallback if undefined in incoming props
+  scrollOffset: number // NOTE: this is made required, the provider sets fallback if undefined in incoming props
+  sliderTrackRef: MutableRefObject<HTMLElement | null>,
+  currentSlideIndex: number,
+  setCurrentSlideIndex?: (index: number) => void // eslint-disable-line no-unused-vars
+  scrollRatio: number
+  setScrollRatio: (ratio: number) => void // eslint-disable-line no-unused-vars
+  goToNextSlide: () => void
+  goToPrevSlide: () => void
+  goToSlideIndex: (index: number) => void // eslint-disable-line no-unused-vars
+  slides: ISlide[]
+  dispatchSlide: (slide: ISlide) => void // eslint-disable-line no-unused-vars
+  slideWidth?: string
+  isPaused?: boolean
+  setIsPaused: (is: boolean) => void // eslint-disable-line no-unused-vars
+}
 
 export const SliderContext = createContext<ISliderContext>({} as ISliderContext);
 

diff --git a/src/SliderContext/types.ts b/src/SliderContext/types.ts
diff --git a/src/SliderNav/index.tsx b/src/SliderNav/index.tsx
@@ -1,7 +1,27 @@
 import React, { useRef } from 'react';
 import useSlider from '../useSlider';
-import SliderButton from '../SliderButton';
-import { Props } from './types';
+import SliderButton, { Props as SliderButtonProps } from '../SliderButton';
+
+export type Props = {
+  id?: string,
+  className?: string,
+  htmlElement?: React.ElementType,
+  htmlAttributes?: {
+    [key: string]: unknown
+  },
+  prevButtonProps?: SliderButtonProps,
+  nextButtonProps?: SliderButtonProps,
+  counter?: {
+    Component?: React.ReactNode
+    id?: string,
+    className?: string,
+    htmlElement?: React.ElementType,
+    htmlAttributes?: {
+      [key: string]: unknown
+    },
+  },
+  showCounter?: boolean
+}
 
 const SliderNav: React.FC<Props> = (props) => {
   const {

diff --git a/src/SliderNav/types.ts b/src/SliderNav/types.ts
diff --git a/src/SliderProgress/index.tsx b/src/SliderProgress/index.tsx
@@ -2,9 +2,28 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Props } from './types';
 import useSlider from '../useSlider';
 
+export type Props = {
+  id?: string,
+  className?: string,
+  htmlElement?: React.ElementType,
+  htmlAttributes?: {
+    [key: string]: unknown,
+    style?: React.CSSProperties
+  }
+  indicator?: {
+    id?: string,
+    className?: string,
+    htmlElement?: React.ElementType,
+    htmlAttributes?: {
+      [key: string]: unknown,
+      style?: React.CSSProperties
+    },
+  },
+  indicatorType?: 'width' | 'position'
+}
+
 const SliderProgress: React.FC<Props> = (props) => {
   const {
     htmlElement = 'div',
@@ -45,22 +64,25 @@ const SliderProgress: React.FC<Props> = (props) => {
     };
 
     const { current: track } = sliderTrackRef;
-    const trackWidth = track.offsetWidth;
-    const scrollOffsetRatio = scrollOffset > 0 ? ((trackWidth / scrollOffset) / 100) : 0;
 
-    const segmentWidth = (1 / slides.length) / (1 / slidesToShow) - scrollOffsetRatio;
+    if (track) {
+      const trackWidth = track.offsetWidth;
+      const scrollOffsetRatio = scrollOffset > 0 ? ((trackWidth / scrollOffset) / 100) : 0;
 
-    if (indicatorType === 'position') {
-      newSegmentStyle.width = `${segmentWidth * 100}%`;
-      newSegmentStyle.left = `${(scrollRatio - (scrollRatio * segmentWidth)) * 100}%`;
-    }
+      const segmentWidth = (1 / slides.length) / (1 / slidesToShow) - scrollOffsetRatio;
 
-    if (indicatorType === 'width') {
-      newSegmentStyle.width = `${scrollRatio * 100}%`;
-      newSegmentStyle.left = '0px';
-    }
+      if (indicatorType === 'position') {
+        newSegmentStyle.width = `${segmentWidth * 100}%`;
+        newSegmentStyle.left = `${(scrollRatio - (scrollRatio * segmentWidth)) * 100}%`;
+      }
 
-    setSegmentStyle(newSegmentStyle);
+      if (indicatorType === 'width') {
+        newSegmentStyle.width = `${scrollRatio * 100}%`;
+        newSegmentStyle.left = '0px';
+      }
+
+      setSegmentStyle(newSegmentStyle);
+    }
   }, [
     slides.length,
     indicatorType,

diff --git a/src/SliderProgress/types.ts b/src/SliderProgress/types.ts