Skip to content

Commit 138e606

Browse files
dohooodohooo
committed
feat: add index argument, can jump to specific position. And remove goToIndex prop in ref
fix #196
1 parent 03216a5 commit 138e606

File tree

5 files changed

+35
-43
lines changed

5 files changed

+35
-43
lines changed

‎docs/props.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,9 @@
5757

5858
## Ref
5959

60-
| name | types | description |
61-
| ----------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
62-
| prev | ({ count = 1, animated = false, onFinished?: () => void }) => void | Scroll to previous item, it takes one optional argument (count), which allows you to specify how many items to cross |
63-
| next | ({ count = 1, animated = false, onFinished?: () => void }) => void | Scroll to next item, it takes one optional argument (count), which allows you to specify how many items to cross |
64-
| scrollTo | ({ count = 1, animated = false, onFinished?: () => void }) => void | Use count to scroll to a position where relative to the current position, scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2) |
65-
| （deprecated）goToIndex | (index: number, animated?: boolean) => void | Go to index |
66-
| getCurrentIndex | ()=>number | Get current item index |
60+
| name | types | description |
61+
| --------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
62+
| prev | ({ count: number, animated: boolean, onFinished?: () => void }) => void | Scroll to previous item, it takes one optional argument (count), which allows you to specify how many items to cross |
63+
| next | ({ count: number, animated: boolean, onFinished?: () => void }) => void | Scroll to next item, it takes one optional argument (count), which allows you to specify how many items to cross |
64+
| scrollTo | ({ index: number, count: number, animated: boolean, onFinished?: () => void }) => void | Use count to scroll to a position where relative to the current position, scrollTo({count:-2}) is equivalent to prev(2), scrollTo({count:2}) is equivalent to next(2). And also can jump to specific position, e.g. scrollTo({index:2,animated:false}) |
65+
| getCurrentIndex | ()=>number | Get current item index |

‎docs/props.zh-CN.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,9 @@
5757

5858
## Ref
5959

60-
| name | types | description |
61-
| ----------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
62-
| prev | ({ count = 1, animated = false, onFinished?: () => void }) => void | 切换至上一项，可以指定`count`决定切换的数量 |
63-
| next | ({ count = 1, animated = false, onFinished?: () => void }) => void | 切换至下一张，可以指定`count`决定切换的数量 |
64-
| scrollTo | ({ count = 1, animated = false, onFinished?: () => void }) => void | 切换到距离当前相对位置为`count`的位置，`scrollTo(-2)`等价于`prev(2)`，`scrollTo(2)`等价于`next(2)` |
65-
| （弃用）goToIndex | (index: number, animated?: boolean) => void | 切换至指定下标元素 |
66-
| getCurrentIndex | ()=>number | 获得当前轮播图下标 |
60+
| name | types | description |
61+
| --------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
62+
| prev | ({ count: number, animated: boolean, onFinished?: () => void }) => void | 切换至上一项，可以指定`count`决定切换的数量 |
63+
| next | ({ count: number, animated: boolean, onFinished?: () => void }) => void | 切换至下一张，可以指定`count`决定切换的数量 |
64+
| scrollTo | ({ index: number, count: number, animated: boolean, onFinished?: () => void }) => void | 切换到距离当前相对位置为`count`的位置，`scrollTo({count:-2})`等价于`prev(2)`，`scrollTo({count:2})`等价于`next(2)`. 同样可以跳转到指定位置 `scrollTo({index:2,animated:false})` |
65+
| getCurrentIndex | ()=>number | 获得当前轮播图下标 |

‎src/Carousel.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
8484
duration: scrollAnimationDuration,
8585
});
8686

87-
const { to, next, prev, scrollTo, getSharedIndex, getCurrentIndex } =
87+
const { next, prev, scrollTo, getSharedIndex, getCurrentIndex } =
8888
carouselController;
8989

9090
const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({
@@ -137,23 +137,15 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
137137
startAutoPlay,
138138
]);
139139

140-
const goToIndex = React.useCallback(
141-
(i: number, animated?: boolean) => {
142-
to(i, animated);
143-
},
144-
[to]
145-
);
146-
147140
React.useImperativeHandle(
148141
ref,
149142
() => ({
150143
next,
151144
prev,
152145
getCurrentIndex,
153-
goToIndex,
154146
scrollTo,
155147
}),
156-
[getCurrentIndex, goToIndex, next, prev, scrollTo]
148+
[getCurrentIndex, next, prev, scrollTo]
157149
);
158150

159151
const visibleRanges = useVisibleRanges({

‎src/hooks/useCarouselController.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export interface ICarouselController {
3333
prev: (opts?: TCarouselActionOptions) => void;
3434
next: (opts?: TCarouselActionOptions) => void;
3535
getCurrentIndex: () => number;
36-
to: (index: number, animated?: boolean) => void;
3736
scrollTo: (opts?: TCarouselActionOptions) => void;
3837
}
3938

@@ -225,21 +224,22 @@ export function useCarouselController(options: IOpts): ICarouselController {
225224
);
226225

227226
const to = React.useCallback(
228-
(idx: number, animated: boolean = false) => {
229-
if (idx === index.value) return;
227+
(opts: { i: number; animated: boolean; onFinished?: () => void }) => {
228+
const { i, animated = false, onFinished } = opts;
229+
if (i === index.value) return;
230230
if (!canSliding()) return;
231231

232232
onScrollBegin?.();
233233

234-
const offset = handlerOffsetX.value + (index.value - idx) * size;
234+
const offset = handlerOffsetX.value + (index.value - i) * size;
235235

236236
if (animated) {
237-
index.value = idx;
238-
handlerOffsetX.value = scrollWithTiming(offset);
237+
index.value = i;
238+
handlerOffsetX.value = scrollWithTiming(offset, onFinished);
239239
} else {
240240
handlerOffsetX.value = offset;
241-
index.value = idx;
242-
runOnJS(onScrollEnd)();
241+
index.value = i;
242+
onFinished?.();
243243
}
244244
},
245245
[
@@ -249,28 +249,34 @@ export function useCarouselController(options: IOpts): ICarouselController {
249249
handlerOffsetX,
250250
size,
251251
scrollWithTiming,
252-
onScrollEnd,
253252
]
254253
);
255254

256255
const scrollTo = React.useCallback(
257256
(opts: TCarouselActionOptions = {}) => {
258-
const { count, animated = false, onFinished } = opts;
257+
const { index: i, count, animated = false, onFinished } = opts;
258+
259+
if (i) {
260+
to({ i, animated, onFinished });
261+
return;
262+
}
263+
259264
if (!count) {
260265
return;
261266
}
267+
262268
const n = Math.round(count);
269+
263270
if (n < 0) {
264271
prev({ count: Math.abs(n), animated, onFinished });
265272
} else {
266273
next({ count: n, animated, onFinished });
267274
}
268275
},
269-
[prev, next]
276+
[prev, next, to]
270277
);
271278

272279
return {
273-
to,
274280
next,
275281
prev,
276282
scrollTo,

‎src/types.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -189,21 +189,16 @@ export interface ICarouselInstance {
189189
* Scroll to previous item, it takes one optional argument (count),
190190
* which allows you to specify how many items to cross
191191
*/
192-
prev: (opts?: TCarouselActionOptions) => void;
192+
prev: (opts?: Omit<TCarouselActionOptions, 'index'>) => void;
193193
/**
194194
* Scroll to next item, it takes one optional argument (count),
195195
* which allows you to specify how many items to cross
196196
*/
197-
next: (opts?: TCarouselActionOptions) => void;
197+
next: (opts?: Omit<TCarouselActionOptions, 'index'>) => void;
198198
/**
199199
* Get current item index
200200
*/
201201
getCurrentIndex: () => number;
202-
/**
203-
* Go to index
204-
* @deprecated use scrollTo instead
205-
*/
206-
goToIndex: (index: number, animated?: boolean) => void;
207202
/**
208203
* Use value to scroll to a position where relative to the current position,
209204
* scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
@@ -222,6 +217,7 @@ export type CarouselRenderItem<ItemT> = (
222217
) => React.ReactElement;
223218

224219
export interface TCarouselActionOptions {
220+
index?: number;
225221
count?: number;
226222
animated?: boolean;
227223
onFinished?: () => void;

0 commit comments

Comments
 (0)