Add optional arrow prop to ScrollingCarousel.

master
Hasan Genc 3 years ago
parent 619749c6d3
commit c4460c5431
  1. 4
      .gitignore
  2. 18634
      package-lock.json
  3. 4
      package.json
  4. 22
      src/components/scrolling-carousel/index.tsx

4
.gitignore vendored

@ -12,4 +12,6 @@ website/node_modules
website/i18n/* website/i18n/*
dist/ dist/
coverage coverage
.idea

18634
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,6 +1,6 @@
{ {
"name": "@trendyol-js/react-carousel", "name": "@trendyol-js/react-carousel",
"version": "1.0.7-beta.3", "version": "1.2.0-beta.1",
"description": "Lightweight carousel component for react", "description": "Lightweight carousel component for react",
"main": "dist/cjs/index.js", "main": "dist/cjs/index.js",
"module": "dist/es/index.js", "module": "dist/es/index.js",
@ -65,7 +65,7 @@
"tslint": "^6.1.0", "tslint": "^6.1.0",
"tslint-plugin-prettier": "^2.3.0", "tslint-plugin-prettier": "^2.3.0",
"tslint-react-hooks": "^2.2.2", "tslint-react-hooks": "^2.2.2",
"typescript": "^3.8.3" "typescript": "4.2.3"
}, },
"sideEffects": false, "sideEffects": false,
"browserslist": { "browserslist": {

@ -3,7 +3,7 @@ import React, {
MouseEvent, MouseEvent,
useState, useState,
useRef, useRef,
useCallback, useCallback, ReactElement,
} from 'react'; } from 'react';
import { Item, SlideDirection } from '../../types/carousel'; import { Item, SlideDirection } from '../../types/carousel';
import styles from '../../styles/slider/styles.module.css'; import styles from '../../styles/slider/styles.module.css';
@ -12,6 +12,8 @@ import { getOuterWidth } from '../../helpers';
export const ScrollingCarousel: FunctionComponent<SliderProps> = ({ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
children, children,
className, className,
leftIcon,
rightIcon
}: SliderProps) => { }: SliderProps) => {
const slider = useRef<HTMLDivElement>(null); const slider = useRef<HTMLDivElement>(null);
const [isDown, setIsDown] = useState(false); const [isDown, setIsDown] = useState(false);
@ -119,17 +121,21 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
slider.current!.scrollLeft = amount; slider.current!.scrollLeft = amount;
}; };
const getArrow = (direction: SlideDirection, data: string, element?: ReactElement) => {
return (
<div data-arrow={data} onClick={() => slide(direction)}>
{element ?? <button />}
</div>
)
};
return ( return (
<div className={`${styles.sliderBase} ${className}`}> <div className={`${styles.sliderBase} ${className}`}>
{showArrow.left && ( {showArrow.left && (
<div data-arrow="left"> getArrow(SlideDirection.Right, "left", leftIcon)
<button onClick={() => slide(SlideDirection.Right)} />
</div>
)} )}
{showArrow.right && ( {showArrow.right && (
<div data-arrow="right"> getArrow(SlideDirection.Left, "right", rightIcon)
<button onClick={() => slide(SlideDirection.Left)} />
</div>
)} )}
<div <div
ref={ref} ref={ref}
@ -148,6 +154,8 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
export interface SliderProps { export interface SliderProps {
children: Item[]; children: Item[];
className?: string; className?: string;
leftIcon?: ReactElement;
rightIcon?: ReactElement;
} }
export type Arrows = { export type Arrows = {

Loading…
Cancel
Save