refactor(CCarousel): migrate to forwardRef, update props, fix animations

Author: mrholek

src/components/carousel/CCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject, HTMLAttributes, useState, useEffect, useRef } from 'react'
+import React, { forwardRef, HTMLAttributes, useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -8,132 +8,135 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
    */
   className?: string
   /**
-   * Inner ref of main element. [docs]
+   * Set 'animate' variable for created context. [docs]
    *
-   * @type RefObject<HTMLDivElement> | {():void}
+   * @type boolean
    */
-  innerRef?: RefObject<HTMLDivElement> | { (): void } // TODO: check
+  animate?: boolean
   /**
-   * index of the active item. [docs]
+   * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. [docs]
    *
-   * @type number
+   * @type boolean | number
    */
-  activeIndex?: number
+  interval: boolean | number
   /**
-   * Slide starts on beginning. [docs]
+   * index of the active item. [docs]
    *
    * @type number
    */
-  autoSlide?: number
+  index?: number
   /**
-   * Set 'animate' variable for created context. [docs]
+   * On slide change callback. [docs]
    *
-   * @type boolean
+   * @type (a:number|string|null)=>void
    */
-  animate?: boolean
+  onSlideChange?: (a: number | string | null) => void
   /**
    * On slide change callback. [docs]
    *
-   * @type (a:number|string|null)=>void
+   * @type 'slide' | 'crossfade'
+   * @default 'slide'
    */
-  onSlideChange?: (a: number | string | null) => void
+  transition?: 'slide' | 'crossfade'
 }
 
 interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
 export interface ContextType {
-  itemNumber: number
+  itemsNumber: number
   state: [number | null, number, string?]
   animating: boolean
   animate?: boolean
-  setItemNumber: (a: number) => void
+  setItemsNumber: (a: number) => void
   setAnimating: (a: boolean) => void
   setState: (a: [number | null, number, string?]) => void
 }
 
 //
 
 export const Context = React.createContext<ContextType>({
-  itemNumber: 0,
+  itemsNumber: 0,
   state: [null, 0],
   animating: false,
-  setItemNumber: (_) => {},
+  setItemsNumber: (_) => {},
   setAnimating: (_) => {},
   setState: (_) => {},
 })
 
-export const CCarousel: FC<CCarouselProps> = ({
-  className,
-  children,
-  innerRef,
-  autoSlide,
-  activeIndex = 0,
-  animate,
-  onSlideChange,
-  ...rest
-}) => {
-  const [state, setState] = useState<[number | null, number, string?]>([null, activeIndex])
-  const [itemNumber, setItemNumber] = useState<number>(0)
-  const [animating, setAnimating] = useState<boolean>(false)
+export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
+  (
+    { className, children, index = 0, animate = true, interval = 5000, onSlideChange, transition, ...rest },
+    ref,
+  ) => {
+    const [state, setState] = useState<[number | null, number, string?]>([null, index])
+    const [itemsNumber, setItemsNumber] = useState<number>(0)
+    const [animating, setAnimating] = useState<boolean>(false)
 
-  let data = useRef<DataType>({}).current
+    let data = useRef<DataType>({}).current
 
-  const setNext = () => {
-    reset()
-    if (autoSlide) {
-      data.timeout = setTimeout(() => nextItem(), autoSlide)
+    const cycle = () => {
+      pause()
+      if (typeof interval === 'number') {
+        data.timeout = setTimeout(() => nextItem(), interval)
+      }
+    }
+    const pause = () => data.timeout && clearTimeout(data.timeout)
+    const nextItem = () => {
+      if (typeof state[1] === 'number')
+        setState([state[1], itemsNumber === state[1] + 1 ? 0 : state[1] + 1, 'next'])
     }
-  }
-  const reset = () => data.timeout && clearTimeout(data.timeout)
-  const nextItem = () => {
-    if (typeof state[1] === 'number')
-      setState([state[1], itemNumber === state[1] + 1 ? 0 : state[1] + 1, 'next'])
-  }
 
-  useEffect(() => {
-    setState([state[1], activeIndex])
-  }, [activeIndex])
+    useEffect(() => {
+      setState([state[1], index])
+    }, [index])
 
-  useEffect(() => {
-    onSlideChange && onSlideChange(state[1])
-    setNext()
-    return () => {
-      reset()
-    }
-  }, [state])
+    useEffect(() => {
+      onSlideChange && onSlideChange(state[1])
+      cycle()
+      return () => {
+        pause()
+      }
+    }, [state])
 
-  // render
+    // render
 
-  const classes = classNames('carousel', className)
+    const _className = classNames(
+      'carousel slide',
+      transition === 'crossfade' && 'carousel-fade',
+      className
+    )
 
-  return (
-    <div className={classes} onMouseEnter={reset} onMouseLeave={setNext} {...rest} ref={innerRef}>
-      <Context.Provider
-        value={{
-          state,
-          setState,
-          animate,
-          itemNumber,
-          setItemNumber,
-          animating,
-          setAnimating,
-        }}
-      >
-        {children}
-      </Context.Provider>
-    </div>
-  )
-}
+    return (
+      <div className={_className} onMouseEnter={pause} onMouseLeave={cycle} {...rest} ref={ref}>
+        <Context.Provider
+          value={{
+            state,
+            setState,
+            animate,
+            itemsNumber,
+            setItemsNumber,
+            animating,
+            setAnimating,
+          }}
+        >
+          {children}
+        </Context.Provider>
+      </div>
+    )
+  },
+)
 
 CCarousel.propTypes = {
-  activeIndex: PropTypes.number,
   animate: PropTypes.bool,
-  autoSlide: PropTypes.number,
   children: PropTypes.node,
   className: PropTypes.string,
-  innerRef: PropTypes.any, // TODO: check
+  index: PropTypes.number,
+  interval: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]).isRequired,
   onSlideChange: PropTypes.func,
 }
 

src/components/carousel/CCarouselCaption.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, RefObject } from 'react'
+import React, { forwardRef, HTMLAttributes, RefObject } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
@@ -7,26 +7,18 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
-
-  /**
-   * Inner ref of main element. [docs]
-   *
-   * @type RefObject<HTMLDivElement> | {(): void}
-   */
-  innerRef?: RefObject<HTMLDivElement> | { (): void }
 }
 
-export const CCarouselCaption: FC<CCarouselCaptionProps> = ({ className, innerRef, ...rest }) => {
-  //render
+export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
+  ({ className, ...rest }, ref) => {
+    const _className = classNames('carousel-caption', className)
 
-  const classes = classNames('carousel-caption', className)
-
-  return <div className={classes} {...rest} ref={innerRef} />
-}
+    return <div className={_className} {...rest} ref={ref} />
+  },
+)
 
 CCarouselCaption.propTypes = {
   className: PropTypes.string,
-  innerRef: PropTypes.any,
 }
 
 CCarouselCaption.displayName = 'CCarouselCaption'

src/components/carousel/CCarouselControl.tsx

@@ -1,21 +1,15 @@
-import React, { FC, HTMLAttributes, RefObject, useContext } from 'react'
+import React, { forwardRef, HTMLAttributes, RefObject, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Context } from './CCarousel'
 
 type Direction = 'prev' | 'next'
 
-export interface CCarouselControlProps extends HTMLAttributes<HTMLElement> {
+export interface CCarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
-  /**
-   *  Inner ref of main element. [docs]
-   *
-   * @type RefObject<HTMLDivElement> | {(): void}
-   */
-  innerRef?: RefObject<HTMLAnchorElement> | { (): void }
   /**
    *  Direction. [docs]
    *
@@ -24,44 +18,39 @@ export interface CCarouselControlProps extends HTMLAttributes<HTMLElement> {
   direction: Direction
 }
 
-export const CCarouselControl: FC<CCarouselControlProps> = ({
-  className,
-  innerRef,
-  children,
-  direction,
-  ...rest
-}) => {
-  const { state, setState, itemNumber, animating } = useContext(Context)
-
-  const onClick = (): void => {
-    if (animating) {
-      return
+export const CCarouselControl = forwardRef<HTMLButtonElement, CCarouselControlProps>(
+  ({ className, children, direction, ...rest }, ref) => {
+    const { state, setState, itemsNumber, animating } = useContext(Context)
+
+    const onClick = (): void => {
+      if (animating) {
+        return
+      }
+      let newIdx
+      if (direction === 'next') {
+        newIdx = itemsNumber === state[1] + 1 ? 0 : state[1] + 1
+      } else {
+        newIdx = state[1] === 0 ? itemsNumber - 1 : state[1] - 1
+      }
+      setState([state[1], newIdx, direction])
     }
-    let newIdx
-    if (direction === 'next') {
-      newIdx = itemNumber === state[1] + 1 ? 0 : state[1] + 1
-    } else {
-      newIdx = state[1] === 0 ? itemNumber - 1 : state[1] - 1
-    }
-    setState([state[1], newIdx, direction])
-  }
-
-  //render
 
-  const anchorClasses = classNames(`carousel-control-${direction}`, className)
+    const anchorClasses = classNames(`carousel-control-${direction}`, className)
 
-  return (
-    <a className={anchorClasses} {...rest} onClick={onClick} ref={innerRef}>
-      {children || <span className={`carousel-control-${direction}-icon`} aria-label={direction} />}
-    </a>
-  )
-}
+    return (
+      <button className={anchorClasses} {...rest} onClick={onClick} ref={ref}>
+        {children || (
+          <span className={`carousel-control-${direction}-icon`} aria-label={direction} />
+        )}
+      </button>
+    )
+  },
+)
 
 CCarouselControl.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   direction: PropTypes.oneOf<Direction>(['prev', 'next']).isRequired, // TODO: check
-  innerRef: PropTypes.any,
 }
 
 CCarouselControl.displayName = 'CCarouselControl'