Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Slider): correct typo and improve types definition #4966

Merged
merged 1 commit into from
Nov 12, 2024
Merged

fix(Slider): correct typo and improve types definition #4966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/slider/__docs__/demo/dots-render/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# 自定义导航锚点

通过 `dotsRender` 可以自定义修改dost，通过 `dotsClass` 可覆盖dots的样式。
通过 `dotsRender` 可以自定义修改 dots，通过 `dotsClass` 可覆盖 dots 的样式。

# en-US order=6

Expand Down
76 changes: 43 additions & 33 deletions components/slider/__docs__/index.en-us.md
View file
Open in desktop

Large diffs are not rendered by default.

76 changes: 43 additions & 33 deletions components/slider/__docs__/index.md
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions components/slider/slick/inner-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@
triggerType: 'click',
};

private hasMounted: boolean = false;
private animationEndCallback: number | undefined;
private pArrow?: HTMLDivElement;
private nArrow?: HTMLDivElement;
private list?: HTMLDivElement;
private track?: HTMLDivElement;
hasMounted: boolean = false;
animationEndCallback: number | undefined;
pArrow?: HTMLDivElement;
nArrow?: HTMLDivElement;
list?: HTMLDivElement;
track?: HTMLDivElement;

constructor(props: InnerSliderProps) {
super(props);
Expand Down Expand Up @@ -386,7 +386,7 @@
onMouseEnter={this.onInnerSliderEnter}
onMouseLeave={this.onInnerSliderLeave}
>
<div

Check warning on line 389 in components/slider/slick/inner-slider.tsx

View workflow job for this annotation

GitHub Actions / changed 

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element
ref={this._instanceRefHandler.bind(this, 'list')}
className={`${prefix}slick-list`}
style={{ ...verticalHeightStyle, ...centerPaddingStyle }}
Expand Down
119 changes: 67 additions & 52 deletions components/slider/slick/mixins/event-handlers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,39 @@
import type { TouchEvent, MouseEvent } from 'react';
import { findDOMNode } from 'react-dom';
import { getTrackCSS, getTrackLeft, getTrackAnimateCSS } from './trackHelper';
import type { OptionProps } from '../../types';
import type { InnerSliderProps, InnerSliderState, OptionProps } from '../../types';
import type { MixinThisType as HelpersMixinThisType } from './helpers';

type MixinThisType = {
props: InnerSliderProps;
state: InnerSliderState;
list?: HTMLDivElement;
track?: HTMLDivElement;
changeSlide(options: OptionProps): void;
setState(state: InnerSliderState): void;
getNavigableIndexes(): number[];
getSlideCount(): number;
checkNavigable(index: number): number;
} & HelpersMixinThisType;

const EventHandlers = {
// Event handler for previous and next
changeSlide(options: OptionProps) {
changeSlide(this: MixinThisType, options: OptionProps) {
let slideOffset, targetSlide;
const unevenOffset = this.state.slideCount % this.props.slidesToScroll !== 0;
const unevenOffset = this.state.slideCount! % this.props.slidesToScroll! !== 0;
const indexOffset = unevenOffset
? 0
: (this.state.slideCount - this.state.currentSlide) % this.props.slidesToScroll;
: (this.state.slideCount! - this.state.currentSlide!) % this.props.slidesToScroll!;

if (options.message === 'previous') {
slideOffset =
indexOffset === 0
? this.props.slidesToScroll
: this.props.slidesToShow - indexOffset;
targetSlide = this.state.currentSlide - slideOffset;
: this.props.slidesToShow! - indexOffset;
targetSlide = this.state.currentSlide! - slideOffset!;
} else if (options.message === 'next') {
slideOffset = indexOffset === 0 ? this.props.slidesToScroll : indexOffset;
targetSlide = this.state.currentSlide + slideOffset;
targetSlide = this.state.currentSlide! + slideOffset!;
} else if (options.message === 'dots' || options.message === 'children') {
// Click on dots
targetSlide = options.index! * options.slidesToScroll!;
Expand All @@ -33,12 +46,12 @@
return;
}
}
this.slideHandler(targetSlide);
this.slideHandler(targetSlide!);
},

// Accessiblity handler for previous and next
keyHandler(e: KeyboardEvent) {
//Dont slide if the cursor is inside the form fields and arrow keys are pressed
// Accessibility handler for previous and next
keyHandler(this: MixinThisType, e: KeyboardEvent) {
//Don't slide if the cursor is inside the form fields and arrow keys are pressed
if (!(e.target as HTMLElement).tagName.match('TEXTAREA|INPUT|SELECT')) {
if (e.keyCode === 37 && this.props.accessibility === true) {
this.changeSlide({
Expand All @@ -53,13 +66,14 @@
},

// Focus on selecting a slide (click handler on track)
selectHandler(options: OptionProps) {
selectHandler(this: MixinThisType, options: OptionProps) {
this.changeSlide(options);
},

swipeStart(e: MouseEvent | TouchEvent) {
swipeStart(this: MixinThisType, e: MouseEvent | TouchEvent) {
if (
this.props.swipe === false ||
// @ts-expect-error 这里逻辑上存在重复
('ontouchend' in document && this.props.swipe === false)
) {
return;
Expand All @@ -83,17 +97,18 @@
});
},

swipeMove(e: MouseEvent | TouchEvent) {
swipeMove(this: MixinThisType, e: MouseEvent | TouchEvent) {
if (!this.state.dragging) {
return;
}
if (this.state.animating) {
return;
}
const touchObject = this.state.touchObject;
const touchObject = this.state.touchObject!;

const curLeft = getTrackLeft({
slideIndex: this.state.currentSlide,
slideIndex: this.state.currentSlide!,
// @ts-expect-error 这里拿 ref 的方式是不正确的，应该是 this.track
trackRef: this.refs.track,
...this.props,
...this.state,
Expand All @@ -106,30 +121,30 @@
? (e as TouchEvent).touches[0].pageY
: (e as MouseEvent).clientY;
touchObject.swipeLength = Math.round(
Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2))
Math.sqrt(Math.pow(touchObject.curX - touchObject.startX!, 2))
);

let positionOffset =
(this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
(this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX! ? 1 : -1);

if (this.props.verticalSwiping === true) {
touchObject.swipeLength = Math.round(
Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2))
Math.sqrt(Math.pow(touchObject.curY - touchObject.startY!, 2))
);
positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;
positionOffset = touchObject.curY > touchObject.startY! ? 1 : -1;
}

const currentSlide = this.state.currentSlide;
const dotCount = Math.ceil(this.state.slideCount / this.props.slidesToScroll);
const swipeDirection = this.swipeDirection(this.state.touchObject);
const dotCount = Math.ceil(this.state.slideCount! / this.props.slidesToScroll!);
const swipeDirection = this.swipeDirection(this.state.touchObject!);
let touchSwipeLength = touchObject.swipeLength;

if (this.props.infinite === false) {
if (
(currentSlide === 0 && swipeDirection === 'right') ||
(currentSlide + 1 >= dotCount && swipeDirection === 'left')
(currentSlide! + 1 >= dotCount && swipeDirection === 'left')
) {
touchSwipeLength = touchObject.swipeLength * this.props.edgeFriction;
touchSwipeLength = touchObject.swipeLength * this.props.edgeFriction!;

if (this.state.edgeDragged === false && this.props.edgeEvent) {
this.props.edgeEvent(swipeDirection);
Expand All @@ -155,8 +170,8 @@
});

if (
Math.abs(touchObject.curX - touchObject.startX) <
Math.abs(touchObject.curY - touchObject.startY) * 0.8
Math.abs(touchObject.curX - touchObject.startX!) <
Math.abs(touchObject.curY - touchObject.startY!) * 0.8
) {
return;
}
Expand All @@ -165,7 +180,7 @@
}
},

getNavigableIndexes() {
getNavigableIndexes(this: MixinThisType) {
let max;
let breakPoint = 0;
let counter = 0;
Expand All @@ -174,32 +189,32 @@
if (!this.props.infinite) {
max = this.state.slideCount;
} else {
breakPoint = this.props.slidesToShow * -1;
counter = this.props.slidesToShow * -1;
max = this.state.slideCount * 2;
breakPoint = this.props.slidesToShow! * -1;
counter = this.props.slidesToShow! * -1;
max = this.state.slideCount! * 2;
}

while (breakPoint < max) {
while (breakPoint < max!) {
indexes.push(breakPoint);
breakPoint = counter + this.props.slidesToScroll;
breakPoint = counter + this.props.slidesToScroll!;

counter +=
this.props.slidesToScroll <= this.props.slidesToShow
? this.props.slidesToScroll
: this.props.slidesToShow;
this.props.slidesToScroll! <= this.props.slidesToShow!
? this.props.slidesToScroll!
: this.props.slidesToShow!;
}

return indexes;
},

checkNavigable(index: number) {
checkNavigable(this: MixinThisType, index: number) {
const navigables = this.getNavigableIndexes();
let prevNavigable = 0;

if (index > navigables[navigables.length - 1]) {
index = navigables[navigables.length - 1];
} else {
for (const n in navigables) {

Check warning on line 217 in components/slider/slick/mixins/event-handlers.ts

View workflow job for this annotation

GitHub Actions / changed 

The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype
if (index < navigables[n]) {
index = prevNavigable;
break;
Expand All @@ -211,9 +226,9 @@
return index;
},

getSlideCount() {
getSlideCount(this: MixinThisType) {
const centerOffset = this.props.centerMode
? this.state.slideWidth * Math.floor(this.props.slidesToShow / 2)
? this.state.slideWidth! * Math.floor(this.props.slidesToShow! / 2)
: 0;
if (this.props.swipeToSlide) {
let swipedSlide: HTMLElement | undefined;
Expand All @@ -227,14 +242,14 @@
if (!this.props.vertical) {
if (
slide.offsetLeft - centerOffset + (this.getWidth(slide) || 0) / 2 >
this.state.swipeLeft * -1
this.state.swipeLeft! * -1
) {
swipedSlide = slide;
return false;
}
} else if (
slide.offsetTop + (this.getHeight(slide) || 0) / 2 >
this.state.swipeLeft * -1
this.state.swipeLeft! * -1
) {
swipedSlide = slide;
return false;
Expand All @@ -247,23 +262,23 @@
Math.abs(swipedSlide!.dataset!.index! - this.state.currentSlide) || 1;
return slidesTraversed;
} else {
return this.props.slidesToScroll;
return this.props.slidesToScroll!;
}
},

swipeEnd(e: MouseEvent | TouchEvent) {
swipeEnd(this: MixinThisType, e: MouseEvent | TouchEvent) {
if (!this.state.dragging) {
if (this.props.swipe) {
e.preventDefault();
}
return;
}
const touchObject = this.state.touchObject;
let minSwipe = this.state.listWidth / this.props.touchThreshold;
const touchObject = this.state.touchObject!;
let minSwipe = this.state.listWidth! / this.props.touchThreshold!;
const swipeDirection = this.swipeDirection(touchObject);

if (this.props.verticalSwiping) {
minSwipe = this.state.listHeight / this.props.touchThreshold;
minSwipe = this.state.listHeight! / this.props.touchThreshold!;
}

// reset the state of touch related state variables.
Expand All @@ -288,25 +303,25 @@
switch (swipeDirection) {
case 'left':
case 'down':
newSlide = this.state.currentSlide + this.getSlideCount();
newSlide = this.state.currentSlide! + this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.setState({ currentDirection: 0 });
break;
case 'right':
case 'up':
newSlide = this.state.currentSlide - this.getSlideCount();
newSlide = this.state.currentSlide! - this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.setState({ currentDirection: 1 });
break;
default:
slideCount = this.state.currentSlide;
}
this.slideHandler(slideCount);
this.slideHandler(slideCount!);
} else {
// Adjust the track back to it's original position.
const currentLeft = getTrackLeft({
slideIndex: this.state.currentSlide,
trackRef: this.track,
slideIndex: this.state.currentSlide!,
trackRef: this.track!,
...this.props,
...this.state,
});
Expand All @@ -321,13 +336,13 @@
}
},

onInnerSliderEnter() {
onInnerSliderEnter(this: MixinThisType) {
if (this.props.autoplay && this.props.pauseOnHover) {
this.pause();
}
},

onInnerSliderLeave() {
onInnerSliderLeave(this: MixinThisType) {
if (this.props.autoplay && this.props.pauseOnHover) {
this.autoPlay();
}
Expand Down
Loading
Loading