Skip to content

Commit

Permalink
Clean up codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@YIZHUANG
YIZHUANG committed Jun 8, 2019
1 parent f604fef commit 0291122
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 35 deletions.
50 changes: 26 additions & 24 deletions src/Carousel.tsx
View file
Expand Up @@ -102,10 +102,10 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
public componentDidMount(): void {
this.setState({ domLoaded: true });
this.setItemsToShow();
window.addEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize as React.EventHandler<any>);
this.onResize(true);
if (this.props.keyBoardControl) {
window.addEventListener("keyup", this.onKeyUp);
window.addEventListener("keyup", this.onKeyUp as React.EventHandler<any>);
}
if (this.props.autoPlay && this.props.autoPlaySpeed) {
this.autoPlay = setInterval(this.next, this.props.autoPlaySpeed);
Expand All @@ -130,7 +130,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
this.state.slidesToShow,
childrenArr
);
if(!notEnoughChildren(this.state, this.props, slidesToShow)) {
if (!notEnoughChildren(this.state, this.props, slidesToShow)) {
this.setState(
{
clones,
Expand All @@ -144,7 +144,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
}
}
public setItemsToShow(shouldCorrectItemPosition?: boolean): void {
const { responsive, infinite } = this.props;
const { responsive } = this.props;
Object.keys(responsive).forEach(item => {
const { breakpoint, items } = responsive[item];
const { max, min } = breakpoint;
Expand Down Expand Up @@ -200,7 +200,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
transform: -(itemWidth * this.state.currentSlide)
});
}
public onResize(value?: any): void {
public onResize(value?: React.KeyboardEvent | boolean): void {
// value here can be html event or a boolean.
// if its in infinite mode, we want to keep the current slide index no matter what.
// if its not infinite mode, keeping the current slide index has already been taken care of
Expand Down Expand Up @@ -232,7 +232,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
}, this.props.transitionDuration || defaultTransitionDuration);
}
if (keyBoardControl && !this.props.keyBoardControl) {
window.removeEventListener("keyup", this.onKeyUp);
window.removeEventListener("keyup", this.onKeyUp as React.EventHandler<any>);
}
if (autoPlay && !this.props.autoPlay && this.autoPlay) {
clearInterval(this.autoPlay);
Expand Down Expand Up @@ -280,7 +280,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
}
public next(slidesHavePassed = 0): void {
const { afterChange, beforeChange } = this.props;
if(notEnoughChildren(this.state, this.props)) {
if (notEnoughChildren(this.state, this.props)) {
return;
}
/*
Expand Down Expand Up @@ -320,7 +320,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
}
public previous(slidesHavePassed = 0): void {
const { afterChange, beforeChange } = this.props;
if(notEnoughChildren(this.state, this.props)) {
if (notEnoughChildren(this.state, this.props)) {
return;
}
const { nextSlides, nextPosition } = populatePreviousSlides(
Expand Down Expand Up @@ -354,9 +354,9 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
);
}
public componentWillUnmount(): void {
window.removeEventListener("resize", this.onResize);
window.removeEventListener("resize", this.onResize as React.EventHandler<any>);
if (this.props.keyBoardControl) {
window.removeEventListener("keyup", this.onKeyUp);
window.removeEventListener("keyup", this.onKeyUp as React.EventHandler<any>);
}
if (this.props.autoPlay && this.autoPlay) {
clearInterval(this.autoPlay);
Expand All @@ -370,33 +370,35 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
this.direction = "";
this.initialY = 0;
}
public handleDown(e: any): void {
public handleDown(e: React.MouseEvent | React.TouchEvent): void {
if (
(e.touches && !this.props.swipeable) ||
(e && !e.touches && !this.props.draggable) ||
((e as React.TouchEvent).touches && !this.props.swipeable) ||
(!(e as React.TouchEvent).touches && !this.props.draggable) ||
this.isInThrottle
) {
return;
}
const { clientX, clientY } = e.touches ? e.touches[0] : e;
const { clientX, clientY } = (e as React.TouchEvent).touches
? (e as React.TouchEvent).touches[0]
: (e as React.MouseEvent);
this.onMove = true;
this.initialX = clientX;
this.initialY = clientY;
this.lastX = clientX;
this.isAnimationAllowed = false;
}
public handleMove(e: any): void {
public handleMove(e: React.MouseEvent | React.TouchEvent): void {
if (
(e.touches && !this.props.swipeable) ||
(e && !e.touches && !this.props.draggable) ||
((e as React.TouchEvent).touches && !this.props.swipeable) ||
(e && !(e as React.TouchEvent).touches && !this.props.draggable) ||
notEnoughChildren(this.state, this.props)
) {
return;
}
const { clientX, clientY } = e.touches ? e.touches[0] : e;
const { clientX, clientY } = (e as React.TouchEvent).touches ? (e as React.TouchEvent).touches[0] : (e as React.MouseEvent);
const diffX = this.initialX - clientX;
const diffY = this.initialY - clientY;
if (e.touches && this.autoPlay && this.props.autoPlay) {
if ((e as React.TouchEvent).touches && this.autoPlay && this.props.autoPlay) {
clearInterval(this.autoPlay);
this.autoPlay = undefined;
}
Expand Down Expand Up @@ -426,7 +428,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
this.lastX = clientX;
}
}
public handleOut(e: any): void {
public handleOut(e: React.MouseEvent | React.TouchEvent): void {
if (this.props.autoPlay && !this.autoPlay) {
this.autoPlay = setInterval(this.next, this.props.autoPlaySpeed);
}
Expand Down Expand Up @@ -466,7 +468,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
this.resetMoveStatus();
}
}
public onKeyUp(e: any): void {
public onKeyUp(e: React.KeyboardEvent): void {
switch (e.keyCode) {
case 37:
return this.previous();
Expand Down Expand Up @@ -558,6 +560,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
);
}
public renderCarouselItems(): any {
// it can be any.
return (
<CarouselItems
goToSlide={this.goToSlide}
Expand All @@ -568,10 +571,8 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
}

public render(): React.ReactNode {
const { slidesToShow } = this.state;
const {
deviceType,
slidesToSlide,
arrows,
removeArrowOnDeviceType,
infinite,
Expand All @@ -596,7 +597,8 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
((deviceType && removeArrowOnDeviceType.indexOf(deviceType) > -1) ||
(this.state.deviceType &&
removeArrowOnDeviceType.indexOf(this.state.deviceType) > -1))
) && !notEnoughChildren(this.state, this.props);
) &&
!notEnoughChildren(this.state, this.props);
const disableLeftArrow = !infinite && isLeftEndReach;
const disableRightArrow = !infinite && isRightEndReach;
// this lib supports showing next set of items paritially as well as center mode which shows both.
Expand Down
4 changes: 2 additions & 2 deletions src/CarouselItems.tsx
View file
Expand Up @@ -13,8 +13,8 @@ const CarouselItems = ({
props,
state,
goToSlide
}: CarouselItemsProps): any => {
const { itemWidth, clones, currentSlide } = state;
}: CarouselItemsProps): any => { // it can be any.
const { itemWidth, clones } = state;
const { children, infinite, itemClass, partialVisbile } = props;
const {
flexBisis,
Expand Down
2 changes: 1 addition & 1 deletion src/utils/elementWidth.ts
View file
@@ -1,4 +1,4 @@
import { responsiveType, CarouselInternalState, CarouselProps } from "../types";
import { responsiveType, CarouselProps } from "../types";

function getParitialVisibilityGutter(
responsive: responsiveType,
Expand Down
6 changes: 5 additions & 1 deletion src/utils/throttle.ts
View file
@@ -1,4 +1,8 @@
const throttle = (func: any, limit: number, setIsInThrottle?: any): any => {
const throttle = (
func: () => void,
limit: number,
setIsInThrottle?: (value?: boolean) => void
): (() => void) => {
let inThrottle: boolean;
return function() {
const args = arguments;
Expand Down
18 changes: 11 additions & 7 deletions src/utils/throwError.ts
View file
@@ -1,21 +1,25 @@
import { CarouselInternalState, CarouselProps } from "../types";

function throwError(state:CarouselInternalState, props:CarouselProps):any {
function throwError(state: CarouselInternalState, props: CarouselProps): void {
const { partialVisbile, centerMode, ssr, responsive, infinite } = props;
if (partialVisbile && centerMode) {
throw new Error(
"center mode can not be used at the same time with partialVisbile"
);
}
if(!responsive) {
if(ssr) {
throw new Error('ssr mode need to be used in conjunction with responsive prop')
if (!responsive) {
if (ssr) {
throw new Error(
"ssr mode need to be used in conjunction with responsive prop"
);
} else {
throw new Error('Responsive prop is needed for deciding the amount of items to show on the screen')
throw new Error(
"Responsive prop is needed for deciding the amount of items to show on the screen"
);
}
}
if(responsive && typeof responsive !== 'object') {
throw new Error('responsive prop must be an object');
if (responsive && typeof responsive !== "object") {
throw new Error("responsive prop must be an object");
}
}

Expand Down

0 comments on commit 0291122

Please sign in to comment.