From 3269f6b428e55b4751e2178ac9484c3df5e49cb5 Mon Sep 17 00:00:00 2001 From: Hasan Tezcan Date: Tue, 19 Apr 2022 15:30:04 +0300 Subject: [PATCH] feat: add hide-arrows property (#74) will be tested after the pre-release by @hasantezcan --- __tests__/helpers.spec.tsx | 23 +++++++++++++++++ package-lock.json | 14 ++++++++--- package.json | 4 +-- src/components/carousel/defaultProps.ts | 1 + src/components/carousel/index.tsx | 20 +++++++++++++-- src/helpers/index.ts | 33 ++++++++++++++++++------- src/hooks/index.ts | 2 +- website/docs/carousel.md | 1 + 8 files changed, 80 insertions(+), 18 deletions(-) diff --git a/__tests__/helpers.spec.tsx b/__tests__/helpers.spec.tsx index e1f05b5..5b332dc 100644 --- a/__tests__/helpers.spec.tsx +++ b/__tests__/helpers.spec.tsx @@ -171,4 +171,27 @@ describe('helpers', () => { expect(result).toEqual(expected); }); + + it('should return false if hideArrows property is true', async () => { + const itemCount = 10; + const itemsToShow = 3; + const infinite = true; + const current = 1; + const hideArrows = true; + + const expected = { + left: false, + right: false, + }; + + const result = helpers.getShowArrow({ + itemCount, + itemsToShow, + infinite, + current, + hideArrows, + }); + + expect(result).toEqual(expected); + }); }); diff --git a/package-lock.json b/package-lock.json index 5722ce6..636e486 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@trendyol-js/react-carousel", - "version": "2.0.1", + "version": "3.0.0-beta.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1331,9 +1331,9 @@ } }, "@types/jest": { - "version": "25.2.1", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.1.tgz", - "integrity": "sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==", + "version": "25.2.3", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz", + "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==", "dev": true, "requires": { "jest-diff": "^25.2.1", @@ -1352,6 +1352,12 @@ "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", "dev": true }, + "@types/mocha": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-9.1.0.tgz", + "integrity": "sha512-QCWHkbMv4Y5U9oW10Uxbr45qMMSzl4OzijsozynUAgx3kEHUdXB00udx2dWDQ7f2TU2a2uuiFaRZjCe3unPpeg==", + "dev": true + }, "@types/normalize-package-data": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", diff --git a/package.json b/package.json index 84af323..9d5800e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@trendyol-js/react-carousel", - "version": "3.0.0-beta.4", + "version": "3.0.0-beta.5", "description": "Lightweight carousel component for react", "main": "dist/cjs/index.js", "module": "dist/es/index.js", @@ -46,7 +46,7 @@ "@rollup/plugin-replace": "^2.3.1", "@testing-library/jest-dom": "^5.3.0", "@testing-library/react": "^10.0.2", - "@types/jest": "^25.2.1", + "@types/jest": "^25.2.3", "@types/react": "^16.9.26", "autoprefixer": "^9.7.5", "eslint": "^6.8.0", diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts index 949eb56..0abd9aa 100644 --- a/src/components/carousel/defaultProps.ts +++ b/src/components/carousel/defaultProps.ts @@ -20,4 +20,5 @@ export const defaultProps: Required = { autoSwipe: null, navigation: null, triggerClickOn: Number.MIN_SAFE_INTEGER, + hideArrows: false, }; diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx index 076c672..465e482 100644 --- a/src/components/carousel/index.tsx +++ b/src/components/carousel/index.tsx @@ -43,7 +43,13 @@ export const Carousel: FunctionComponent = (userProps: CarouselPr }); const [current, setCurrent] = useState(0); const [showArrow, setShowArrow] = useState( - getShowArrow(props.children.length, props.show, props.infinite, current), + getShowArrow({ + itemCount: props.children.length, + itemsToShow: props.show, + infinite: props.infinite, + current, + hideArrows: props.hideArrows, + }), ); const prevChildren = usePrevious(userProps.children); const [page, setPage] = useState(0); @@ -149,7 +155,16 @@ export const Carousel: FunctionComponent = (userProps: CarouselPr }); setCurrent(isNavigation && typeof target === 'number' ? target : next); - setShowArrow(getShowArrow(elements.length, props.show, props.infinite, next)); + setShowArrow( + getShowArrow({ + itemCount: elements.length, + itemsToShow: props.show, + infinite: props.infinite, + current: next, + hideArrows: props.hideArrows, + }), + ); + setTimeout(() => { if (props.infinite) { const cleanedItems = isNavigation @@ -288,6 +303,7 @@ export interface CarouselProps { infinite?: boolean; className?: string; useArrowKeys?: boolean; + hideArrows?: boolean; a11y?: { [key: string]: string }; dynamic?: boolean; paginationCallback?: ((direction: SlideDirection) => any) | null; diff --git a/src/helpers/index.ts b/src/helpers/index.ts index e0a432e..8efd6f9 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -80,23 +80,38 @@ export const getCurrent = ( return slideTo; }; +interface GetShowArrowProps { + itemCount: number; + itemsToShow: number; + infinite: boolean; + current: number; + hideArrows: boolean; +} + export const getShowArrow = ( - items: number, - show: number, - infinite: boolean, - current: number, + props: GetShowArrowProps, ): { left: boolean; right: boolean } => { - const isItemsMore = items > show; + const { itemCount, itemsToShow, infinite, current, hideArrows = false } = props; + + if (hideArrows) { + return { + left: false, + right: false, + }; + } + + const hasMoreItems = itemCount > itemsToShow; + if (infinite) { return { - left: isItemsMore, - right: isItemsMore, + left: hasMoreItems, + right: hasMoreItems, }; } return { - left: isItemsMore && current !== 0, - right: isItemsMore && current + show < items, + left: hasMoreItems && current !== 0, + right: hasMoreItems && current + itemsToShow < itemCount, }; }; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 61ed728..564e1b4 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -6,7 +6,7 @@ const getWindowWidth = () => { } return window.innerWidth; -} +}; export const useWindowWidthChange = (callBack: (changed: number) => any) => { const [windowWidth, setWindowWidth] = useState(getWindowWidth()); diff --git a/website/docs/carousel.md b/website/docs/carousel.md index 8ee09d2..75ee166 100644 --- a/website/docs/carousel.md +++ b/website/docs/carousel.md @@ -23,6 +23,7 @@ Creates carousel component. | responsive | boolean | false | false | enables the feature that adjusts items width according to screen size dynamically | | className | string | false | "" | same as react's className property | | useArrowKeys | boolean | false | false | enables sliding when press arrow keys | +| hideArrows | boolean | false | false | hide arrow keys | | a11y | Array | false | {} | accessibility attributes | | dynamic | Boolean | false | false | if items are stateful, specify this option as true. Also give unique key to each item (like id) | | rightArrow | ReactElement | false | null | custom right arrow component |