fix(react): add missing attributes back

p-m-p · Feb 14, 2024 · de949f9 · de949f9
1 parent 5afbd82
commit de949f9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/packages/react/src/Carousel.tsx b/packages/react/src/Carousel.tsx
@@ -19,7 +19,7 @@ export function CarouselSlider({
   timingFunction,
   ...props
 }: CarouselSliderProps) {
-  const { attributes, extraProps } = extractSliderAttributes(props)
+  const { attributes, eventHandlers } = extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (timingFunction) {
@@ -33,7 +33,7 @@ export function CarouselSlider({
   return (
     <bs-carousel
       {...htmlAttributes}
-      ref={sliderRefCallback(extraProps, sliderRef)}
+      ref={sliderRefCallback(eventHandlers, sliderRef)}
       class={className}>
       {children}
     </bs-carousel>

diff --git a/packages/react/src/Cube.tsx b/packages/react/src/Cube.tsx
@@ -19,7 +19,7 @@ export function Cube({
   sliderRef,
   ...props
 }: CubeSliderProps) {
-  const { attributes, extraProps } = extractSliderAttributes(props)
+  const { attributes, eventHandlers } = extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (direction !== undefined) {
@@ -33,7 +33,7 @@ export function Cube({
   return (
     <bs-cube
       {...htmlAttributes}
-      ref={sliderRefCallback(extraProps, sliderRef)}
+      ref={sliderRefCallback(eventHandlers, sliderRef)}
       class={className}>
       {children}
     </bs-cube>

diff --git a/packages/react/src/Fade.tsx b/packages/react/src/Fade.tsx
@@ -17,7 +17,7 @@ export function FadeSlider({
   timingFunction,
   ...props
 }: FadeSliderProps) {
-  const { attributes, extraProps } = extractSliderAttributes(props)
+  const { attributes, eventHandlers } = extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (timingFunction) {
@@ -27,7 +27,7 @@ export function FadeSlider({
   return (
     <bs-fade
       {...htmlAttributes}
-      ref={sliderRefCallback(extraProps, sliderRef)}
+      ref={sliderRefCallback(eventHandlers, sliderRef)}
       class={className}>
       {children}
     </bs-fade>

diff --git a/packages/react/src/Tile.tsx b/packages/react/src/Tile.tsx
@@ -22,7 +22,7 @@ export function TileSlider({
   tileEffect,
   ...props
 }: TileSliderProps) {
-  const { attributes, extraProps } = extractSliderAttributes(props)
+  const { attributes, eventHandlers } = extractSliderAttributes(props)
   const htmlAttributes = { ...attributes }
 
   if (rows !== undefined) {
@@ -40,7 +40,7 @@ export function TileSlider({
   return (
     <bs-tile
       {...htmlAttributes}
-      ref={sliderRefCallback(extraProps, sliderRef)}
+      ref={sliderRefCallback(eventHandlers, sliderRef)}
       class={className}>
       {children}
     </bs-tile>

diff --git a/packages/react/src/core.ts b/packages/react/src/core.ts
@@ -59,11 +59,25 @@ export type BaseComponentProps<T extends ElementName> = BoxSliderProps &
 export function extractSliderAttributes<T extends BoxSliderProps>(props: T) {
   const {
     autoScroll,
+    onAfter,
+    onBefore,
+    onDestroy,
+    onPause,
+    onPlay,
     pauseOnHover,
     startIndex,
+    speed,
+    swipe,
     swipeTolerance,
-    ...extraProps
+    timeout,
   } = props
+  const eventHandlers = {
+    onAfter,
+    onBefore,
+    onDestroy,
+    onPause,
+    onPlay,
+  }
   const attributes: Record<string, string> = {}
 
   if (autoScroll !== undefined) {
@@ -74,23 +88,33 @@ export function extractSliderAttributes<T extends BoxSliderProps>(props: T) {
     attributes['pause-on-hover'] = `${pauseOnHover}`
   }
 
+  if (speed !== undefined) {
+    attributes.speed = `${speed}`
+  }
+
   if (startIndex !== undefined) {
     attributes['start-index'] = `${startIndex}`
   }
 
+  if (swipe !== undefined) {
+    attributes.swipe = `${swipe}`
+  }
+
   if (swipeTolerance !== undefined) {
     attributes['swipe-tolerance'] = `${swipeTolerance}`
   }
 
-  return { attributes, extraProps }
+  if (timeout !== undefined) {
+    attributes.timeout = `${timeout}`
+  }
+
+  return { attributes, eventHandlers }
 }
 
 export function sliderRefCallback<T extends BoxSliderProps>(
-  props: T,
+  { onAfter, onBefore, onDestroy, onPause, onPlay }: T,
   sliderRef?: MutableRefObject<BoxSlider | null>,
 ): RefCallback<SliderElement> {
-  const { onAfter, onBefore, onDestroy, onPause, onPlay } = props
-
   return (el: SliderElement) => {
     const slider = el?.slider