Merge pull request #2736 from XiaoMi/feature/carousel/2728

feat(carousel): add onIndexChange api (#2728)
XiaoMi · Feb 6, 2024 · 51233ef · 51233ef
2 parents 1462463 + 753794e
commit 51233ef
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/.changeset/curly-parents-work.md b/.changeset/curly-parents-work.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(carousel): add onIndexChange api
diff --git a/.changeset/lazy-pets-film.md b/.changeset/lazy-pets-film.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/carousel": minor
+---
+
+feat: add onIndexChange api
diff --git a/packages/ui/carousel/src/Arrows.tsx b/packages/ui/carousel/src/Arrows.tsx
@@ -5,7 +5,7 @@ import { cx } from '@hi-ui/classname'
 
 interface ArrowsProps {
   size: CarouselArrowSizeEnum
-  onClick: (next: boolean) => void
+  onClick: (next: boolean, evt: React.MouseEvent) => void
   prefixCls: string
   inAnimation: boolean
 }
@@ -22,19 +22,19 @@ export const Arrows = (props: ArrowsProps) => {
     <React.Fragment>
       <div
         className={cx(buttonCls, `${prefixCls}__arrows-button--left`)}
-        onClick={() => {
+        onClick={(evt) => {
           if (!inAnimation) {
-            onClick(false)
+            onClick(false, evt)
           }
         }}
       >
         <LeftOutlined />
       </div>
       <div
         className={cx(buttonCls, `${prefixCls}__arrows-button--right`)}
-        onClick={() => {
+        onClick={(evt) => {
           if (!inAnimation) {
-            onClick(true)
+            onClick(true, evt)
           }
         }}
       >

diff --git a/packages/ui/carousel/src/Carousel.tsx b/packages/ui/carousel/src/Carousel.tsx
@@ -21,6 +21,7 @@ export const Carousel = forwardRef<HTMLDivElement | null, CarouselProps>((props,
     dotType = 'slider',
     showDots = true,
     showPages = false,
+    onIndexChange,
     ...rest
   } = props
   const cls = cx(prefixCls, className, dotPlacement === 'outer' && `${prefixCls}--dot-outer`)
@@ -137,23 +138,25 @@ export const Carousel = forwardRef<HTMLDivElement | null, CarouselProps>((props,
   }, [activeIndex, childCount, duration, isInHoverComponent, toIndex])
 
   const arrowOnClick = useCallback(
-    (next: boolean) => {
+    (next: boolean, evt: React.MouseEvent) => {
       let targetIndex = next ? activeIndex + 1 : activeIndex - 1
       if (targetIndex === childCount) {
         targetIndex = 0
       } else if (targetIndex < 0) {
         targetIndex = childCount - 1
       }
       toIndex(targetIndex, next)
+      onIndexChange?.(targetIndex, evt)
     },
-    [activeIndex, childCount, toIndex]
+    [activeIndex, childCount, onIndexChange, toIndex]
   )
 
   const dotsOnClick = useCallback(
-    (target: number) => {
+    (target: number, evt: React.MouseEvent) => {
       toIndex(target, target > activeIndex)
+      onIndexChange?.(target, evt)
     },
-    [activeIndex, toIndex]
+    [activeIndex, onIndexChange, toIndex]
   )
 
   return (

diff --git a/packages/ui/carousel/src/Dots.tsx b/packages/ui/carousel/src/Dots.tsx
@@ -8,7 +8,7 @@ interface DotsProps {
   prefixCls: string
   activeIndex: number
   count: number
-  onClick: (index: number) => void
+  onClick: (index: number, evt: React.MouseEvent) => void
   inAnimation: boolean
 }
 
@@ -37,9 +37,9 @@ export const Dots = (props: DotsProps) => {
             `${componentPrefixCls}__item`,
             counter === activeIndex && `${componentPrefixCls}__item--active`
           )}
-          onClick={() => {
+          onClick={(evt: React.MouseEvent) => {
             if (!inAnimation && activeIndex !== counter) {
-              onClick(counter)
+              onClick(counter, evt)
             }
           }}
         />

diff --git a/packages/ui/carousel/src/types.ts b/packages/ui/carousel/src/types.ts
@@ -1,3 +1,4 @@
+import React from 'react'
 import { HiBaseHTMLProps } from '@hi-ui/core'
 
 export type CarouselArrowSizeEnum = 'lg' | 'md' | 'sm'
@@ -46,4 +47,8 @@ export interface CarouselProps extends HiBaseHTMLProps<'div'> {
    * @default 'bottom'
    */
   dotPlacement?: CarouselDotPlacementEnum
+  /**
+   * index 变化时的回调函数
+   */
+  onIndexChange?: (index: number, evt: React.MouseEvent) => void
 }