Add optional arrow prop to ScrollingCarousel.

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

2
.gitignore vendored

@ -13,3 +13,5 @@ website/i18n/*
dist/
coverage
.idea

14
package-lock.json generated

@ -1,6 +1,6 @@
{
"name": "@trendyol-js/react-carousel",
"version": "1.0.7-beta.2",
"version": "1.2.0-beta.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -1467,9 +1467,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001039",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001039.tgz",
"integrity": "sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==",
"version": "1.0.30001243",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
"integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
"dev": true
},
"capture-exit": {
@ -8875,9 +8875,9 @@
}
},
"typescript": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
"integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
"dev": true
},
"unicode-canonical-property-names-ecmascript": {

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