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

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

Loading…
Cancel
Save