lianahus
2 years ago
committed by
Aniket
parent
dc5f7eff86
commit
282b43f464
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 639 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 552 KiB |
|
After Width: | Height: | Size: 972 KiB |
@ -0,0 +1,21 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useEffect, useState, useRef } from 'react' |
||||||
|
|
||||||
|
interface CustomButtonGroupAsArrowsProps {} |
||||||
|
|
||||||
|
function CustomButtonGroupAsArrows ({ next, previous }) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: "center", |
||||||
|
}} |
||||||
|
> |
||||||
|
<h4>These buttons can be positioned anywhere you want on the screen</h4> |
||||||
|
<button onClick={previous}>Prev</button> |
||||||
|
<button onClick={next}>Next</button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default CustomButtonGroupAsArrows |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React from 'react' |
||||||
|
|
||||||
|
const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => { |
||||||
|
const { carouselState: { currentSlide, totalItems } } = rest |
||||||
|
return ( |
||||||
|
<div className="mt-1 d-flex justify-content-end carousel-button-group"> |
||||||
|
<button className={currentSlide === 0 ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => previous()}> |
||||||
|
<i className="fas fa-angle-left"></i> |
||||||
|
</button> |
||||||
|
<button className={currentSlide + 1 === totalItems ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => { |
||||||
|
if (currentSlide + 1 < totalItems) goToSlide(currentSlide + 1) |
||||||
|
}} > |
||||||
|
<i className="fas fa-angle-right"></i> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default CustomNavButtons |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
import * as React from "react"; |
||||||
|
export interface ResponsiveType { |
||||||
|
[key: string]: { |
||||||
|
breakpoint: { max: number; min: number }; |
||||||
|
items: number; |
||||||
|
partialVisibilityGutter?: number; // back-ward compatible, because previously there has been a typo
|
||||||
|
paritialVisibilityGutter?: number; |
||||||
|
slidesToSlide?: number; |
||||||
|
}; |
||||||
|
} |
||||||
|
export function isMouseMoveEvent( |
||||||
|
e: React.MouseEvent | React.TouchEvent |
||||||
|
): e is React.MouseEvent { |
||||||
|
return "clientX" && "clientY" in e; |
||||||
|
} |
||||||
|
export interface CarouselProps { |
||||||
|
responsive: ResponsiveType; |
||||||
|
deviceType?: string; |
||||||
|
ssr?: boolean; |
||||||
|
slidesToSlide?: number; |
||||||
|
draggable?: boolean; |
||||||
|
arrows?: boolean; // show or hide arrows.
|
||||||
|
renderArrowsWhenDisabled?: boolean; // Allow for the arrows to have a disabled attribute instead of not showing them
|
||||||
|
swipeable?: boolean; |
||||||
|
removeArrowOnDeviceType?: string | Array<string>; |
||||||
|
children: any; |
||||||
|
customLeftArrow?: React.ReactElement<any> | null; |
||||||
|
customRightArrow?: React.ReactElement<any> | null; |
||||||
|
customDot?: React.ReactElement<any> | null; |
||||||
|
customButtonGroup?: React.ReactElement<any> | null; |
||||||
|
infinite?: boolean; |
||||||
|
minimumTouchDrag?: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide.
|
||||||
|
afterChange?: (previousSlide: number, state: StateCallBack) => void; // Change callback after sliding everytime. `(previousSlide, currentState) => ...`
|
||||||
|
beforeChange?: (nextSlide: number, state: StateCallBack) => void; // Change callback before sliding everytime. `(previousSlide, currentState) => ...`
|
||||||
|
sliderClass?: string; // Use this to style your own track list.
|
||||||
|
itemClass?: string; // Use this to style your own Carousel item. For example add padding-left and padding-right
|
||||||
|
itemAriaLabel?: string; // Use this to add your own Carousel item aria-label.if it is not defined the child aria label will be applied if the child dont have one than a default empty string will be applied
|
||||||
|
containerClass?: string; // Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown.
|
||||||
|
className?: string; // Use this to style the whole container with styled-components
|
||||||
|
dotListClass?: string; // Use this to style the dot list.
|
||||||
|
keyBoardControl?: boolean; |
||||||
|
centerMode?: boolean; // show previous and next set of items partially
|
||||||
|
autoPlay?: boolean; |
||||||
|
autoPlaySpeed?: number; // default 3000ms
|
||||||
|
showDots?: boolean; |
||||||
|
renderDotsOutside?: boolean; // show dots outside of the container for custom styling.
|
||||||
|
renderButtonGroupOutside?: boolean; // show buttonGroup outside of the container for custom styling.
|
||||||
|
// Show next/previous item partially
|
||||||
|
// partialVisible has to be used in conjunction with the responsive props, details are in documentation.
|
||||||
|
// it shows the next set of items partially, different from centerMode as it shows both.
|
||||||
|
partialVisible?: boolean; |
||||||
|
partialVisbile?: boolean; // old typo - deprecated (will be remove in 3.0)
|
||||||
|
customTransition?: string; |
||||||
|
transitionDuration?: number; |
||||||
|
// if you are using customTransition, make sure to put the duration here.
|
||||||
|
// for example, customTransition="all .5" then put transitionDuration as 500.
|
||||||
|
// this is needed for the resizing to work.
|
||||||
|
focusOnSelect?: boolean; |
||||||
|
additionalTransfrom?: number; // this is only used if you want to add additional transfrom to the current transform
|
||||||
|
pauseOnHover?: boolean; |
||||||
|
shouldResetAutoplay?: boolean; |
||||||
|
rewind?: boolean; |
||||||
|
rewindWithAnimation?: boolean; |
||||||
|
rtl?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export type StateCallBack = CarouselInternalState; |
||||||
|
|
||||||
|
export type Direction = "left" | "right" | "" | undefined; |
||||||
|
export type SkipCallbackOptions = |
||||||
|
| boolean |
||||||
|
| { skipBeforeChange?: boolean; skipAfterChange?: boolean }; |
||||||
|
export interface ButtonGroupProps { |
||||||
|
previous?: () => void; |
||||||
|
next?: () => void; |
||||||
|
goToSlide?: (index: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
export interface ArrowProps { |
||||||
|
onClick?: () => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
export interface DotProps { |
||||||
|
index?: number; |
||||||
|
active?: boolean; |
||||||
|
onClick?: () => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
|
||||||
|
export interface CarouselInternalState { |
||||||
|
itemWidth: number; |
||||||
|
containerWidth: number; |
||||||
|
slidesToShow: number; |
||||||
|
currentSlide: number; |
||||||
|
totalItems: number; |
||||||
|
domLoaded: boolean; |
||||||
|
deviceType?: string; |
||||||
|
transform: number; |
||||||
|
} |
||||||
|
|
||||||
|
export default class Carousel extends React.Component<CarouselProps> { |
||||||
|
previous: (slidesHavePassed: number) => void; |
||||||
|
next: (slidesHavePassed: number) => void; |
||||||
|
goToSlide: (slide: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||||
|
state: CarouselInternalState; |
||||||
|
setClones: ( |
||||||
|
slidesToShow: number, |
||||||
|
itemWidth?: number, |
||||||
|
forResizing?: boolean |
||||||
|
) => void; // reset carousel in infinite mode.
|
||||||
|
setItemsToShow: (shouldCorrectItemPosition?: boolean) => void; // reset carousel in non-infinite mode.
|
||||||
|
correctClonesPosition: ({ domLoaded }: { domLoaded: boolean }) => void; |
||||||
|
onMove: boolean; |
||||||
|
direction: Direction; |
||||||
|
containerRef: React.RefObject<HTMLDivElement>; |
||||||
|
} |
||||||
Loading…
Reference in new issue