@coreui/react 4.0.0-rc.1

package/src/components/carousel/CCarouselCaption.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
+  ({ className, ...rest }, ref) => {
+    const _className = classNames('carousel-caption', className)
+
+    return <div className={_className} {...rest} ref={ref} />
+  },
+)
+
+CCarouselCaption.propTypes = {
+  className: PropTypes.string,
+}
+
+CCarouselCaption.displayName = 'CCarouselCaption'

package/src/components/carousel/CCarouselControl.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CCarouselContext } from './CCarousel'
+
+type Direction = 'prev' | 'next'
+
+export interface CCarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   *  Direction. [docs]
+   *
+   * @type 'prev' | 'next'
+   */
+  direction: Direction
+}
+
+export const CCarouselControl = forwardRef<HTMLButtonElement, CCarouselControlProps>(
+  ({ className, children, direction, ...rest }, ref) => {
+    const { state, setState, itemsNumber, animating } = useContext(CCarouselContext)
+
+    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])
+    }
+
+    const anchorClasses = classNames(`carousel-control-${direction}`, className)
+
+    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,
+}
+
+CCarouselControl.displayName = 'CCarouselControl'

package/src/components/carousel/CCarouselIndicators.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CCarouselContext } from './CCarousel'
+
+export interface CCarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * Indicators section user classes. [docs]
+   */
+  indicatorsClass?: string
+}
+
+export const CCarouselIndicators = forwardRef<HTMLOListElement, CCarouselIndicatorsProps>(
+  ({ className, indicatorsClass = 'carousel-indicators' }, ref) => {
+    const { itemsNumber, state, setState, animating } = useContext(CCarouselContext)
+
+    const listClasses = classNames(indicatorsClass, className)
+
+    const indicators = Array.from({ length: itemsNumber }, (_, i) => i).map((key) => {
+      return (
+        <li
+          key={`indicator${key}`}
+          onClick={() => {
+            !animating && key !== state[1] && setState([state[1], key])
+          }}
+          className={state[1] === key ? 'active' : ''}
+          data-coreui-target=""
+        />
+      )
+    })
+
+    return (
+      <ol className={listClasses} ref={ref}>
+        {indicators}
+      </ol>
+    )
+  },
+)
+
+CCarouselIndicators.propTypes = {
+  className: PropTypes.string,
+  indicatorsClass: PropTypes.string,
+}
+
+CCarouselIndicators.displayName = 'CCarouselIndicators'

package/src/components/carousel/CCarouselInner.tsx

@@ -0,0 +1,41 @@
+import React, { Children, forwardRef, HTMLAttributes, useContext, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CCarouselContext } from './CCarousel'
+
+export interface CCarouselInnerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+}
+
+export const CCarouselInner = forwardRef<HTMLDivElement, CCarouselInnerProps>(
+  ({ children, className, ...rest }, ref) => {
+    const { setItemsNumber } = useContext(CCarouselContext)
+    const _className = classNames('carousel-inner', className)
+
+    useEffect(() => {
+      setItemsNumber(Children.toArray(children).length)
+    })
+
+    return (
+      <div className={_className} {...rest} ref={ref}>
+        {Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, { key: index, idx: index })
+          }
+          return
+        })}
+      </div>
+    )
+  },
+)
+
+CCarouselInner.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CCarouselInner.displayName = 'CCarouselInner'

package/src/components/carousel/CCarouselItem.tsx

@@ -0,0 +1,110 @@
+import React, { forwardRef, HTMLAttributes, useContext, useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+
+import { CCarouselContext } from './CCarousel'
+export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the base component. [docs]
+   */
+  className?: string
+  /**
+   * @ignore
+   */
+  idx?: number
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const getDirection = (state: object) => {
+  if (state[2]) {
+    return state[2] === 'next' ? 'right' : 'left'
+  } else {
+    return state[1] > state[0] ? 'right' : 'left'
+  }
+}
+
+export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
+  ({ children, className, idx, ...rest }, ref) => {
+    const { animate, state, animating, setAnimating } = useContext(CCarouselContext)
+
+    const [isIn, setIsIn] = useState<boolean>(false)
+
+    const onEnter = () => {
+      setAnimating(false)
+    }
+    const onEntering = () => {
+      setAnimating(true)
+    }
+    const onExit = () => {
+      setAnimating(false)
+    }
+    const onExiting = () => {
+      setAnimating(true)
+    }
+    const onExited = () => {
+      setAnimating(false)
+    }
+
+    useEffect(() => {
+      setIsIn(state[1] === idx)
+    }, [state])
+
+    if (!animate || state[0] === null) {
+      const itemClasses = classNames('carousel-item', isIn && 'active', className)
+      return (
+        <div className={itemClasses} ref={ref} {...rest}>
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <CSSTransition
+        timeout={600}
+        in={isIn}
+        onEnter={onEnter}
+        onEntering={onEntering}
+        onExit={onExit}
+        onExiting={onExiting}
+        onExited={onExited}
+        nodeRef={ref}
+      >
+        {(status) => {
+          const direction = getDirection(state)
+          const isActive = status === 'entered' || status === 'exiting'
+          const directionClassName =
+            (status === 'entering' || status === 'exiting') &&
+            animating &&
+            (direction === 'right' ? 'carousel-item-start' : 'carousel-item-end')
+
+          const orderClassName =
+            status === 'entering' &&
+            (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev')
+
+          const itemClasses = classNames(
+            'carousel-item',
+            isActive && 'active',
+            orderClassName,
+            directionClassName,
+            className,
+          )
+
+          return (
+            <div className={itemClasses} ref={ref} {...rest}>
+              {children}
+            </div>
+          )
+        }}
+      </CSSTransition>
+    )
+  },
+)
+
+CCarouselItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  idx: PropTypes.number,
+}
+
+CCarouselItem.displayName = 'CCarouselItem'

package/src/components/carousel/__tests__/CCarousel.spec.tsx

@@ -0,0 +1,275 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { getByText } from '@testing-library/dom'
+import '@testing-library/jest-dom/extend-expect'
+import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index'
+
+test('loads and displays CCarousel component', async () => {
+  const { container } = render(
+    <CCarousel controls indicators>
+      <CCarouselItem>
+        Item-1
+        <CCarouselCaption>Caption-1</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-2
+        <CCarouselCaption>Caption-2</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-3
+        <CCarouselCaption>Caption-3</CCarouselCaption>
+      </CCarouselItem>
+    </CCarousel>,
+  )
+
+  const carousel = document.querySelector('.carousel')
+  expect(carousel).toHaveClass('slide')
+  if (carousel === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(carousel.children[0]).toHaveClass('carousel-indicators')
+    expect(carousel.children[1]).toHaveClass('carousel-inner')
+  }
+
+  let caption = getByText(container, 'Caption-1')
+  expect(caption).toHaveClass('carousel-caption')
+  caption = getByText(container, 'Caption-2')
+  expect(caption).toHaveClass('carousel-caption')
+  caption = getByText(container, 'Caption-3')
+  expect(caption).toHaveClass('carousel-caption')
+  let item = getByText(container, 'Item-1')
+  expect(item).toHaveClass('carousel-item')
+  item = getByText(container, 'Item-2')
+  expect(item).toHaveClass('carousel-item')
+  item = getByText(container, 'Item-3')
+  expect(item).toHaveClass('carousel-item')
+
+  let button = document.querySelector('.carousel-control-next')
+  if (button === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(button.firstChild).toHaveClass('carousel-control-next-icon')
+  }
+  button = document.querySelector('.carousel-control-prev')
+  if (button === null) {
+    expect(true).toBe(false)
+  } else {
+    expect(button.firstChild).toHaveClass('carousel-control-prev-icon')
+  }
+
+  expect(container).toMatchSnapshot()
+})
+
+test('CCarousel click on indicator', async () => {
+  jest.useFakeTimers()
+  const { container } = render(
+    <CCarousel controls indicators>
+      <CCarouselItem>
+        Item-1
+        <CCarouselCaption>Caption-1</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-2
+        <CCarouselCaption>Caption-2</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-3
+        <CCarouselCaption>Caption-3</CCarouselCaption>
+      </CCarouselItem>
+    </CCarousel>,
+  )
+  let item1 = getByText(container, 'Item-1')
+  expect(item1).toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).toHaveClass('carousel-item')
+  let item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).toHaveClass('carousel-item')
+  //click
+  const ci = document.querySelector('.carousel-indicators')
+  let li = null
+  if (ci !== null) {
+    li = ci.children[1]
+    if (li !== null) {
+      fireEvent.click(li)
+    }
+  }
+  //endclick
+  item1 = getByText(container, 'Item-1')
+  expect(item1).toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  //run timers
+  jest.runAllTimers()
+  item1 = getByText(container, 'Item-1')
+  expect(item1).not.toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  expect(container).toMatchSnapshot()
+  item2 = getByText(container, 'Item-2')
+  expect(item2).toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  //goback-click
+  if (ci !== null) {
+    li = ci.children[0]
+    if (li !== null) {
+      fireEvent.click(li)
+    }
+  }
+  //endclick
+  item2 = getByText(container, 'Item-2')
+  expect(item2).toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  item1 = getByText(container, 'Item-1')
+  expect(item1).not.toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  //run timers
+  jest.runAllTimers()
+  item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  expect(container).toMatchSnapshot()
+  item1 = getByText(container, 'Item-1')
+  expect(item1).toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  jest.useRealTimers()
+})
+
+test('CCarousel click on button', async () => {
+  jest.useFakeTimers()
+  const { container } = render(
+    <CCarousel controls indicators>
+      <CCarouselItem>
+        Item-1
+        <CCarouselCaption>Caption-1</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-2
+        <CCarouselCaption>Caption-2</CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        Item-3
+        <CCarouselCaption>Caption-3</CCarouselCaption>
+      </CCarouselItem>
+    </CCarousel>,
+  )
+  let item1 = getByText(container, 'Item-1')
+  expect(item1).toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).toHaveClass('carousel-item')
+  let item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).toHaveClass('carousel-item')
+  //click
+  const buttonNext = document.querySelector('.carousel-control-next')
+  if (buttonNext !== null) {
+    fireEvent.click(buttonNext)
+  }
+  //endclick
+  item1 = getByText(container, 'Item-1')
+  expect(item1).toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  //run timers
+  jest.runAllTimers()
+  item1 = getByText(container, 'Item-1')
+  expect(item1).not.toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  expect(container).toMatchSnapshot()
+  item2 = getByText(container, 'Item-2')
+  expect(item2).toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  //goback-click
+  const buttonPrev = document.querySelector('.carousel-control-prev')
+  if (buttonPrev !== null) {
+    fireEvent.click(buttonPrev)
+  }
+  //endclick
+  item2 = getByText(container, 'Item-2')
+  expect(item2).not.toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  item1 = getByText(container, 'Item-1')
+  expect(item1).not.toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  //run timers
+  jest.runAllTimers()
+  item2 = getByText(container, 'Item-2')
+  expect(item2).toHaveClass('active')
+  expect(item2).not.toHaveClass('carousel-item-next')
+  expect(item2).not.toHaveClass('carousel-item-prev')
+  expect(item2).not.toHaveClass('carousel-item-start')
+  expect(item2).not.toHaveClass('carousel-item-end')
+  expect(item2).toHaveClass('carousel-item')
+  expect(container).toMatchSnapshot()
+  item1 = getByText(container, 'Item-1')
+  expect(item1).not.toHaveClass('active')
+  expect(item1).not.toHaveClass('carousel-item-next')
+  expect(item1).not.toHaveClass('carousel-item-prev')
+  expect(item1).not.toHaveClass('carousel-item-start')
+  expect(item1).not.toHaveClass('carousel-item-end')
+  expect(item1).toHaveClass('carousel-item')
+  jest.useRealTimers()
+})