From 4752780881017702959cee379a6e7632bbfb0b5d Mon Sep 17 00:00:00 2001 From: Vadym Shymko Date: Mon, 2 May 2022 13:53:36 +0300 Subject: [PATCH] Update packages && use ts --- .eslintrc.json | 18 +- .husky/.gitignore | 1 + .husky/pre-commit | 4 + .prettierrc.json | 4 + babel.config.js | 20 +- package.json | 79 +- src/{index.jsx => index.tsx} | 470 ++-- tsconfig.json | 20 + webpack.config.js | 55 +- yarn.lock | 4889 +++++++++++++++------------------- 10 files changed, 2579 insertions(+), 2981 deletions(-) create mode 100644 .husky/.gitignore create mode 100755 .husky/pre-commit create mode 100644 .prettierrc.json rename src/{index.jsx => index.tsx} (64%) create mode 100644 tsconfig.json diff --git a/.eslintrc.json b/.eslintrc.json index 7c63f39..9315367 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,23 +4,19 @@ "es2021": true, "node": true }, - "extends": [ - "plugin:react/recommended", - "airbnb", - "plugin:react-hooks/recommended", - "prettier", - "prettier/react" - ], - "parser": "babel-eslint", + "extends": ["plugin:react/recommended", "airbnb", "prettier"], + "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, - "ecmaVersion": 12, + "ecmaVersion": "latest", "sourceType": "module" }, - "plugins": ["react"], + "plugins": ["react", "@typescript-eslint"], "rules": { - "import/no-extraneous-dependencies": ["error", { "devDependencies": true }] + "react/require-default-props": "off", + "react/jsx-props-no-spreading": "off", + "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }] } } diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..36af219 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c1a6f66 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/babel.config.js b/babel.config.js index d7154ba..3a76815 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,14 +1,20 @@ module.exports = { - presets: ["@babel/preset-env", "@babel/preset-react"], - plugins: [ + presets: [ [ - "transform-react-remove-prop-types", + '@babel/preset-env', { - removeImport: true, - additionalLibraries: ["prop-types"], + useBuiltIns: 'entry', + corejs: 3, }, ], - - ["transform-remove-console", { exclude: ["error", "warn"] }], + '@babel/preset-react', + // [ + // '@babel/preset-typescript', + // { + // isTSX: true, + // allExtensions: true, + // }, + // ], ], + plugins: [['transform-remove-console', { exclude: ['error', 'warn'] }]], }; diff --git a/package.json b/package.json index 1af43e4..f52ce0c 100644 --- a/package.json +++ b/package.json @@ -11,24 +11,10 @@ "sideEffects": false, "scripts": { "build": "webpack --mode=production", + "build:ts": "tsc", "build:dev": "webpack --mode=development", "lint": "eslint --ext .js,.jsx --fix && prettier --write .", - "prepublish": "npm run lint && npm run build" - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, - "lint-staged": { - "*.jsx": [ - "eslint --fix", - "prettier --write" - ], - "*.js": [ - "eslint --fix", - "prettier --write" - ] + "prepare": "husky install" }, "keywords": [ "react", @@ -53,40 +39,43 @@ }, "homepage": "https://github.com/vadymshymko/react-simply-carousel#readme", "devDependencies": { - "@babel/cli": "^7.12.10", - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.12.11", - "@babel/preset-react": "^7.12.10", - "babel-eslint": "^10.1.0", - "babel-loader": "^8.2.2", - "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "@babel/cli": "^7.17.10", + "@babel/core": "^7.17.10", + "@babel/preset-env": "^7.17.10", + "@babel/preset-react": "^7.16.7", + "@babel/preset-typescript": "^7.16.7", + "@types/react": "^18.0.8", + "@typescript-eslint/eslint-plugin": "^5.21.0", + "@typescript-eslint/parser": "^5.21.0", + "babel-loader": "^8.2.5", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^3.0.0", - "eslint": "^7.16.0", - "eslint-config-airbnb": "^18.2.1", - "eslint-config-prettier": "^7.1.0", - "eslint-import-resolver-webpack": "^0.13.0", - "eslint-plugin-import": "^2.22.1", - "eslint-plugin-jsx-a11y": "^6.4.1", - "eslint-plugin-react": "^7.21.5", - "eslint-plugin-react-hooks": "^4.2.0", - "eslint-webpack-plugin": "^2.4.1", - "husky": "^4.3.6", - "lint-staged": "^10.5.3", - "path": "^0.12.7", - "prettier": "^2.2.1", - "react": "^17.0.1", - "react-dom": "^17.0.1", - "webpack": "^5.11.1", - "webpack-bundle-analyzer": "^4.3.0", - "webpack-cli": "^4.3.0" + "eslint": "^8.14.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-react": "^7.29.4", + "eslint-plugin-react-hooks": "^4.5.0", + "husky": ">=6", + "lint-staged": ">=10", + "prettier": "2.6.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "typescript": "^4.6.4", + "webpack": "^5.72.0", + "webpack-bundle-analyzer": "^4.5.0", + "webpack-cli": "^4.9.2" }, "dependencies": { - "core-js": "^3.8.1", - "prop-types": "^15.7.2" + "core-js": "^3.8.1" }, "peerDependencies": { - "react": "^16.8 || ^17", - "react-dom": "^16.8 || ^17" + "react": "^16.8 || ^17 || ^18", + "react-dom": "^16.8 || ^17 || ^18" + }, + "lint-staged": { + "*.{js,jsx,tsx}": "eslint --cache --fix", + ".": "prettier --write" } } diff --git a/src/index.jsx b/src/index.tsx similarity index 64% rename from src/index.jsx rename to src/index.tsx index 84777b7..6fcca10 100644 --- a/src/index.jsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ import React, { memo, useState, @@ -6,25 +7,80 @@ import React, { useCallback, useMemo, Children, -} from "react"; -import PropTypes from "prop-types"; + HTMLAttributes, + ButtonHTMLAttributes, + ReactElement, + MouseEvent, + TouchEvent, + ReactNode, +} from 'react'; + +type NavDirection = 'forward' | 'backward'; + +type NavBtnProps = ButtonHTMLAttributes & { show?: boolean }; + +type ReactSimplyCarouselStaticProps = { + activeSlideIndex: number; + activeSlideProps?: HTMLAttributes; + autoplay?: boolean; + autoplayDirection?: NavDirection; + backwardBtnProps?: NavBtnProps; + children?: ReactNode; + containerProps?: HTMLAttributes; + delay?: number; + disableNavIfAllVisible?: boolean; + easing?: string; + forwardBtnProps?: NavBtnProps; + hideNavIfAllVisible?: boolean; + innerProps?: HTMLAttributes; + itemsListProps?: HTMLAttributes; + itemsToScroll?: number; + itemsToShow?: number; + onAfterChange?: ( + activeSlideIndex: number, + deprecated_positionSlideIndex: number + ) => void; + onRequestChange: (newActiveSlideIndex: number) => void; + speed?: number; + updateOnItemClick?: boolean; + centerMode?: boolean; + infinite?: boolean; + disableNavIfEdgeVisible?: boolean; + disableNavIfEdgeActive?: boolean; + dotsNav?: { + show?: boolean; + activeClassName?: string; + } & ButtonHTMLAttributes; + dotsNavWrapperProps?: HTMLAttributes; +}; + +type ReactSimplyCarouselResponsiveProps = (Omit< + Omit, + 'onRequestChange' +> & { minWidth?: number; maxWidth?: number })[]; -function ReactSimplyCarousel({ responsiveProps, ...props }) { +type ReactSimplyCarouselProps = ReactSimplyCarouselStaticProps & { + responsiveProps?: ReactSimplyCarouselResponsiveProps; +}; + +function ReactSimplyCarousel({ + responsiveProps = [], + ...props +}: ReactSimplyCarouselProps) { const [windowWidth, setWindowWidth] = useState(0); - // eslint-disable-next-line react/destructuring-assignment const [positionIndex, setPositionIndex] = useState(props.activeSlideIndex); - const containerRef = useRef(null); - const innerRef = useRef(null); - const itemsListRef = useRef(null); + const containerRef = useRef(null); + const innerRef = useRef(null); + const itemsListRef = useRef(null); - const itemsListDragStartPosRef = useRef(null); + const itemsListDragStartPosRef = useRef(null); const isListDraggingRef = useRef(false); - const directionRef = useRef(""); + const directionRef = useRef(''); - const autoplayTimerRef = useRef(null); - const resizeTimerRef = useRef(null); + const autoplayTimerRef = useRef(null); + const resizeTimerRef = useRef(null); const renderedSlidesCountRef = useRef(0); @@ -42,58 +98,60 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { props ); - const slidesItems = Children.toArray(propsByWindowWidth.children); + const slidesItems = Children.toArray( + propsByWindowWidth.children + ) as ReactElement[]; const { containerProps: { - style: containerStyle, - onClickCapture: containerOnClickCapture, + style: containerStyle = {}, + onClickCapture: containerOnClickCapture = null, ...containerProps - }, + } = {}, - innerProps: { style: innerStyle, ...innerProps }, + innerProps: { style: innerStyle = {}, ...innerProps } = {}, itemsListProps: { - style: itemsListStyle, - onTouchStart: onItemsListTouchStart, - onMouseDown: onItemsListMouseDown, - onTransitionEnd: onItemsListTransitionEnd, + style: itemsListStyle = {}, + onTouchStart: onItemsListTouchStart = null, + onMouseDown: onItemsListMouseDown = null, + onTransitionEnd: onItemsListTransitionEnd = null, ...itemsListProps - }, + } = {}, backwardBtnProps: { children: backwardBtnChildren = null, show: showBackwardBtn = true, ...backwardBtnProps - }, + } = {}, forwardBtnProps: { children: forwardBtnChildren = null, show: showForwardBtn = true, ...forwardBtnProps - }, + } = {}, activeSlideProps: { - className: activeSlideClassName = "", + className: activeSlideClassName = '', style: activeSlideStyle = {}, ...activeSlideProps - }, - updateOnItemClick, + } = {}, + updateOnItemClick = false, activeSlideIndex, onRequestChange, - speed, - delay, - easing, - itemsToShow, - itemsToScroll, + speed = 0, + delay = 0, + easing = 'linear', + itemsToShow = 0, + itemsToScroll = 1, children, onAfterChange, - autoplay, - autoplayDirection, - disableNavIfAllVisible, - hideNavIfAllVisible, - centerMode, - infinite, - disableNavIfEdgeVisible, - disableNavIfEdgeActive, - dotsNav, - dotsNavWrapperProps, + autoplay = false, + autoplayDirection = 'forward', + disableNavIfAllVisible = true, + hideNavIfAllVisible = true, + centerMode = false, + infinite = true, + disableNavIfEdgeVisible = true, + disableNavIfEdgeActive = true, + dotsNav = {}, + dotsNavWrapperProps = {}, } = windowWidth ? { ...propsByWindowWidth, @@ -103,18 +161,18 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ), itemsToShow: Math.min( slidesItems.length, - propsByWindowWidth.itemsToShow + propsByWindowWidth.itemsToShow || 0 ), itemsToScroll: Math.min( slidesItems.length, - propsByWindowWidth.itemsToScroll + propsByWindowWidth.itemsToScroll || 1 ), } : props; const { show: showDotsNav = false, - activeClassName: activeDotClassName = "", + activeClassName: activeDotClassName = '', ...dotsBtnProps } = dotsNav || {}; @@ -124,20 +182,22 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { } if (infinite) { - return [...itemsListRef.current.children].slice( + return [...(itemsListRef.current!.children as HTMLCollection)].slice( slidesItems.length - positionIndex, slidesItems.length - positionIndex + slidesItems.length - ); + ) as HTMLElement[]; } - return [...itemsListRef.current.children]; + return [ + ...(itemsListRef.current!.children as HTMLCollection), + ] as HTMLElement[]; }, [positionIndex, slidesItems.length, windowWidth, infinite]); const itemsListMaxTranslateX = windowWidth - ? itemsListRef.current.offsetWidth - innerRef.current.offsetWidth + ? itemsListRef.current!.offsetWidth - innerRef.current!.offsetWidth : 0; - const getItemsListOffsetBySlideIndex = (slideIndex) => { + const getItemsListOffsetBySlideIndex = (slideIndex: number) => { const offsetByIndex = slides.reduce((total, item, index) => { if (index >= slideIndex) { return total; @@ -200,15 +260,15 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { windowWidth && isCenterModeEnabled ? -( Math.min( - innerMaxWidth || innerRef.current.offsetWidth, - innerRef.current.offsetWidth + innerMaxWidth || innerRef.current!.offsetWidth, + innerRef.current!.offsetWidth ) - activeSlideWidth ) / 2 : 0; const slidesWidth = useMemo(() => { if (infinite && windowWidth) { - return itemsListRef.current.offsetWidth / 3; + return itemsListRef.current!.offsetWidth / 3; } return 0; @@ -219,17 +279,17 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { positionIndex - activeSlideIndex === 0 || !itemsListRef.current ? 0 : // eslint-disable-next-line no-nested-ternary - directionRef.current.toLowerCase() === "forward" && + directionRef.current.toLowerCase() === 'forward' && activeSlideIndex < positionIndex ? slidesWidth - : directionRef.current.toLowerCase() === "backward" && + : directionRef.current.toLowerCase() === 'backward' && activeSlideIndex > positionIndex ? -slidesWidth : 0; const itemsListTransition = !isNewSlideIndex || !(speed || delay) - ? null + ? 'none' : `transform ${speed}ms ${easing} ${delay}ms`; const itemsListTranslateX = disableNav || !windowWidth @@ -241,11 +301,11 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { slidesWidth; const itemsListTransform = windowWidth ? `translateX(-${itemsListTranslateX}px)` - : null; + : 'none'; const getNextSlideIndex = useCallback( - (direction) => { - if (direction === "forward") { + (direction: NavDirection) => { + if (direction === 'forward') { const nextSlideIndex = activeSlideIndex + itemsToScroll; const isOnEnd = nextSlideIndex > lastSlideIndex; // eslint-disable-next-line no-nested-ternary @@ -258,7 +318,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { return newSlideIndex; } - if (direction === "backward") { + if (direction === 'backward') { const nextSlideIndex = activeSlideIndex - itemsToScroll; const isOnStart = nextSlideIndex < 0; // eslint-disable-next-line no-nested-ternary @@ -277,10 +337,10 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ); const updateActiveSlideIndex = useCallback( - (newActiveSlideIndex, direction) => { + (newActiveSlideIndex: number, direction: NavDirection) => { directionRef.current = direction; - itemsListRef.current.style.transition = - speed || delay ? `transform ${speed}ms ${easing} ${delay}ms` : null; + itemsListRef.current!.style.transition = + speed || delay ? `transform ${speed}ms ${easing} ${delay}ms` : 'none'; if (newActiveSlideIndex !== activeSlideIndex) { clearTimeout(autoplayTimerRef.current); @@ -289,7 +349,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { itemsListDragStartPosRef.current = null; isListDraggingRef.current = false; - itemsListRef.current.style.transform = `translateX(-${ + itemsListRef.current!.style.transform = `translateX(-${ offsetCorrectionForCenterMode + slidesWidth + (infinite ? 0 : itemsListTranslateX) @@ -329,7 +389,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ]); const handleContainerClickCapture = useCallback( - (event) => { + (event: MouseEvent) => { if (isListDraggingRef.current) { event.preventDefault(); event.stopPropagation(); @@ -343,11 +403,12 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ); const handleBackwardBtnClick = useCallback(() => { - updateActiveSlideIndex(getNextSlideIndex("backward"), "backward"); + updateActiveSlideIndex(getNextSlideIndex('backward'), 'backward'); }, [updateActiveSlideIndex, getNextSlideIndex]); const handleItemsListDrag = useCallback( - (event) => { + // todo: replace any + (event: any) => { isListDraggingRef.current = true; const dragPos = @@ -356,40 +417,41 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { : event.clientX; const dragPosDiff = - itemsListDragStartPosRef.current - + (itemsListDragStartPosRef.current as number) - dragPos + offsetCorrectionForCenterMode + slidesWidth + (infinite ? 0 : itemsListTranslateX); const minDragPos = 0; const maxDragPos = - itemsListRef.current.offsetWidth - innerRef.current.offsetWidth; + itemsListRef.current!.offsetWidth - innerRef.current!.offsetWidth; const itemsListPos = Math.max( Math.min(minDragPos, -dragPosDiff), -maxDragPos ); - itemsListRef.current.style.transition = null; - itemsListRef.current.style.transform = `translateX(${itemsListPos}px)`; + itemsListRef.current!.style.transition = 'none'; + itemsListRef.current!.style.transform = `translateX(${itemsListPos}px)`; }, [offsetCorrectionForCenterMode, slidesWidth, infinite, itemsListTranslateX] ); const handleItemsListDragEnd = useCallback( - (event) => { - itemsListRef.current.removeEventListener( - "mouseout", + // todo: replace any + (event: any) => { + itemsListRef.current!.removeEventListener( + 'mouseout', handleItemsListDragEnd ); - itemsListRef.current.removeEventListener( - "dragstart", + itemsListRef.current!.removeEventListener( + 'dragstart', handleItemsListDragEnd ); - document.removeEventListener("mousemove", handleItemsListDrag); - document.removeEventListener("mouseup", handleItemsListDragEnd); + document.removeEventListener('mousemove', handleItemsListDrag); + document.removeEventListener('mouseup', handleItemsListDragEnd); - document.removeEventListener("touchmove", handleItemsListDrag); - document.removeEventListener("touchend", handleItemsListDragEnd); + document.removeEventListener('touchmove', handleItemsListDrag); + document.removeEventListener('touchend', handleItemsListDragEnd); if (isListDraggingRef.current) { const dragPos = @@ -397,14 +459,15 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ? event.changedTouches[event.changedTouches.length - 1].clientX : event.clientX; - const mousePosDiff = itemsListDragStartPosRef.current - dragPos; + const mousePosDiff = + (itemsListDragStartPosRef.current as number) - dragPos; if (mousePosDiff > activeSlideWidth / 2) { - updateActiveSlideIndex(getNextSlideIndex("forward"), "forward"); + updateActiveSlideIndex(getNextSlideIndex('forward'), 'forward'); } else if (mousePosDiff < -activeSlideWidth / 2) { - updateActiveSlideIndex(getNextSlideIndex("backward"), "backward"); + updateActiveSlideIndex(getNextSlideIndex('backward'), 'backward'); } else { - updateActiveSlideIndex(activeSlideIndex, "forward"); + updateActiveSlideIndex(activeSlideIndex, 'forward'); } } }, @@ -418,21 +481,21 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ); const handleItemsListMouseDown = useCallback( - (event) => { + (event: MouseEvent) => { clearTimeout(autoplayTimerRef.current); if (!isListDraggingRef.current) { itemsListDragStartPosRef.current = event.clientX; - document.addEventListener("mousemove", handleItemsListDrag); - document.addEventListener("mouseup", handleItemsListDragEnd); + document.addEventListener('mousemove', handleItemsListDrag); + document.addEventListener('mouseup', handleItemsListDragEnd); - itemsListRef.current.addEventListener( - "mouseout", + itemsListRef.current!.addEventListener( + 'mouseout', handleItemsListDragEnd ); - itemsListRef.current.addEventListener( - "dragstart", + itemsListRef.current!.addEventListener( + 'dragstart', handleItemsListDragEnd ); } @@ -441,14 +504,14 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { ); const handleItemsListTouchStart = useCallback( - (event) => { + (event: TouchEvent) => { clearTimeout(autoplayTimerRef.current); if (!isListDraggingRef.current) { itemsListDragStartPosRef.current = event.touches[0].clientX; - document.addEventListener("touchmove", handleItemsListDrag); - document.addEventListener("touchend", handleItemsListDragEnd); + document.addEventListener('touchmove', handleItemsListDrag); + document.addEventListener('touchend', handleItemsListDragEnd); } }, [handleItemsListDrag, handleItemsListDragEnd] @@ -459,13 +522,21 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { }, [activeSlideIndex]); const handleForwardBtnClick = useCallback(() => { - updateActiveSlideIndex(getNextSlideIndex("forward"), "forward"); + updateActiveSlideIndex(getNextSlideIndex('forward'), 'forward'); }, [updateActiveSlideIndex, getNextSlideIndex]); - const getSlideItemOnClick = ({ direction, index, onClick }) => { - const slideItemOnClick = (event) => { - const forwardDirectionValue = activeSlideIndex < index ? "forward" : ""; - const backwardDirectionValue = activeSlideIndex > index ? "backward" : ""; + const getSlideItemOnClick = ({ + direction, + index, + onClick, + }: { + direction: NavDirection; + index: number; + onClick?: any; + }) => { + const slideItemOnClick = (event: MouseEvent) => { + const forwardDirectionValue = activeSlideIndex < index ? 'forward' : ''; + const backwardDirectionValue = activeSlideIndex > index ? 'backward' : ''; updateActiveSlideIndex( index, @@ -480,12 +551,16 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { return slideItemOnClick; }; - const renderSlidesItems = (items, startIndex, isDisableNav) => + const renderSlidesItems = ( + items: ReactElement[], + startIndex: number, + isDisableNav?: boolean + ) => items.map((item, index) => { const { props: { - className: itemClassName = "", - onClick: itemOnClick, + className: itemClassName = '', + onClick: itemOnClick = null, style: itemStyle = {}, ...itemComponentProps } = {}, @@ -495,21 +570,21 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { // eslint-disable-next-line no-nested-ternary const direction = infinite ? renderedSlidesCountRef.current >= slidesItems.length - ? "forward" - : "backward" + ? 'forward' + : 'backward' : index >= activeSlideIndex - ? "forward" - : "backward"; + ? 'forward' + : 'backward'; const isActive = index + startIndex === activeSlideIndex; const className = `${itemClassName} ${direction} ${ - isActive ? activeSlideClassName : "" + isActive ? activeSlideClassName : '' }`; const style = { ...itemStyle, ...(isActive ? activeSlideStyle : {}), - boxSizing: "border-box", + boxSizing: 'border-box', margin: 0, }; const onClick = @@ -521,7 +596,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { }) : itemOnClick; const slideProps = { - role: "tabpanel", + role: 'tabpanel', className, style, onClick, @@ -540,7 +615,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { useEffect(() => { itemsListDragStartPosRef.current = null; isListDraggingRef.current = false; - directionRef.current = ""; + directionRef.current = ''; if (activeSlideIndex !== positionIndex) { if (!speed && !delay) { @@ -553,9 +628,9 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { if ( infinite || - (autoplayDirection === "forward" && + (autoplayDirection === 'forward' && activeSlideIndex !== lastSlideIndex) || - (autoplayDirection === "backward" && activeSlideIndex !== 0) + (autoplayDirection === 'backward' && activeSlideIndex !== 0) ) { startAutoplay(); } @@ -600,23 +675,23 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { setWindowWidth(window.innerWidth); - window.addEventListener("resize", handleWindowResize); + window.addEventListener('resize', handleWindowResize); return () => { clearTimeout(resizeTimerRef.current); - window.removeEventListener("resize", handleWindowResize); + window.removeEventListener('resize', handleWindowResize); - document.removeEventListener("mousemove", handleItemsListDrag); - document.removeEventListener("mouseup", handleItemsListDragEnd); - document.removeEventListener("touchmove", handleItemsListDrag); - document.removeEventListener("touchend", handleItemsListDragEnd); + document.removeEventListener('mousemove', handleItemsListDrag); + document.removeEventListener('mouseup', handleItemsListDragEnd); + document.removeEventListener('touchmove', handleItemsListDrag); + document.removeEventListener('touchend', handleItemsListDragEnd); - itemsListRefDOMElement.removeEventListener( - "mouseout", + itemsListRefDOMElement!.removeEventListener( + 'mouseout', handleItemsListDragEnd ); - itemsListRefDOMElement.removeEventListener( - "dragstart", + itemsListRefDOMElement!.removeEventListener( + 'dragstart', handleItemsListDragEnd ); }; @@ -625,36 +700,34 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) { renderedSlidesCountRef.current = 0; if (windowWidth) { - itemsListRef.current.style.transform = itemsListTransform; + itemsListRef.current!.style.transform = itemsListTransform; } return (
{showBackwardBtn && !hideNav && (