feat: add hide-arrows property (#74)

will be tested after the pre-release by @hasantezcan

Author: hasantezcan

__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);
+	});
 });

package-lock.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",

package.json

@@ -20,4 +20,5 @@ export const defaultProps: Required<CarouselProps> = {
 	autoSwipe: null,
 	navigation: null,
 	triggerClickOn: Number.MIN_SAFE_INTEGER,
+	hideArrows: false,
 };

src/components/carousel/defaultProps.ts

@@ -43,7 +43,13 @@ export const Carousel: FunctionComponent<CarouselProps> = (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<Item[]>(userProps.children);
 	const [page, setPage] = useState<number>(0);
@@ -149,7 +155,16 @@ export const Carousel: FunctionComponent<CarouselProps> = (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;

src/components/carousel/index.tsx

@@ -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,
 	};
 };
 

src/helpers/index.ts

@@ -6,7 +6,7 @@ const getWindowWidth = () => {
 	}
 
 	return window.innerWidth;
-}
+};
 
 export const useWindowWidthChange = (callBack: (changed: number) => any) => {
 	const [windowWidth, setWindowWidth] = useState(getWindowWidth());

src/hooks/index.ts

@@ -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 |