refactor(accordion): update behavior of component

Author: mrholek

docs/4.0/api/CAccordion.api.mdx

@@ -1,4 +1,6 @@
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| **activeItemKey** | The active item key. | `string | number` | undefined |
+| **alwaysOpen** | Make accordion items stay open when another item is opened | `boolean` | false |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **flush** | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | `boolean` | - |

docs/4.0/api/CAccordionButton.api.mdx

@@ -1,4 +1,3 @@
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **collapsed** | Set button state to collapsed. | `boolean` | - |

docs/4.0/api/CAccordionItem.api.mdx

@@ -1,3 +1,4 @@
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
+| **itemKey** | Item key. | `string | number` | - |

docs/4.0/components/accordion.mdx

@@ -1,8 +1,16 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The active item key. [docs]
+   */
+  activeItemKey?: number | string
+  /**
+   * Make accordion items stay open when another item is opened
+   */
+  alwaysOpen?: boolean
   /**
    * A string of all className you want applied to the base component. [docs]
    */
@@ -13,18 +21,31 @@ export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   flush?: boolean
 }
 
+export interface CAccordionContextProps {
+  _activeItemKey?: number | string
+  alwaysOpen?: boolean
+  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+}
+
+export const CAccordionContext = createContext({} as CAccordionContextProps)
+
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-  ({ children, className, flush, ...rest }, ref) => {
+  ({ children, activeItemKey = undefined, alwaysOpen = false, className, flush, ...rest }, ref) => {
+    const [_activeItemKey, setActiveKey] = useState(activeItemKey)
     const _className = classNames('accordion', { 'accordion-flush': flush }, className)
     return (
       <div className={_className} {...rest} ref={ref}>
-        {children}
+        <CAccordionContext.Provider value={{ _activeItemKey, alwaysOpen, setActiveKey }}>
+          {children}
+        </CAccordionContext.Provider>
       </div>
     )
   },
 )
 
 CAccordion.propTypes = {
+  alwaysOpen: PropTypes.bool,
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   flush: PropTypes.bool,

src/components/accordion/CAccordion.tsx

@@ -1,7 +1,10 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionItemContext } from './CAccordionItem'
+
+import { CCollapse } from './../collapse/CCollapse'
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
@@ -11,12 +14,15 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
+    const { visible } = useContext(CAccordionItemContext)
     const _className = classNames('accordion-body', className)
 
     return (
-      <div className={_className} {...rest} ref={ref}>
-        {children}
-      </div>
+      <CCollapse className="accordion-collpase" visible={visible}>
+        <div className={_className} {...rest} ref={ref}>
+          {children}
+        </div>
+      </CCollapse>
     )
   },
 )

src/components/accordion/CAccordionBody.tsx

@@ -1,24 +1,30 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionItemContext } from './CAccordionItem'
+
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
-  /**
-   * Set button state to collapsed. [docs]
-   */
-  collapsed?: boolean
 }
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
-  ({ children, className, collapsed, ...rest }, ref) => {
-    const _className = classNames('accordion-button', { collapsed: collapsed }, className)
+  ({ children, className, ...rest }, ref) => {
+    const { visible, setVisible } = useContext(CAccordionItemContext)
+
+    const _className = classNames('accordion-button', { collapsed: !visible }, className)
 
     return (
-      <button className={_className} {...rest} aria-expanded={!collapsed} ref={ref}>
+      <button
+        className={_className}
+        {...rest}
+        aria-expanded={!visible}
+        onClick={() => setVisible(!visible)}
+        ref={ref}
+      >
         {children}
       </button>
     )
@@ -28,7 +34,6 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
 CAccordionButton.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  collapsed: PropTypes.bool,
 }
 
 CAccordionButton.displayName = 'CAccordionButton'

src/components/accordion/CAccordionButton.tsx

@@ -2,6 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionButton } from './CAccordionButton'
+
 export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
@@ -15,7 +17,7 @@ export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps
 
     return (
       <div className={_className} {...rest} ref={ref}>
-        {children}
+        <CAccordionButton>{children}</CAccordionButton>
       </div>
     )
   },

src/components/accordion/CAccordionHeader.tsx

@@ -1,21 +1,57 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionContext } from './CAccordion'
+
+export interface CAccordionItemContextProps {
+  setVisible: (a: boolean) => void
+  visible?: boolean
+}
+
+export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
+
 export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
   className?: string
+  /**
+   * Item key. [docs]
+   */
+  itemKey?: number | string
 }
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, ...rest }, ref) => {
+  ({ children, className, itemKey, ...rest }, ref) => {
+    const _itemKey = useRef(itemKey ? itemKey : Math.random().toString(36).substr(2, 9))
+
+    const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
+    const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
+
+    useEffect(() => {
+      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+    }, [visible])
+
+    useEffect(() => {
+      setVisible(Boolean(_activeItemKey === _itemKey.current))
+    }, [_activeItemKey])
+
     const _className = classNames('accordion-item', className)
 
     return (
       <div className={_className} {...rest} ref={ref}>
-        {children}
+        <CAccordionItemContext.Provider value={{ setVisible, visible }}>
+          {children}
+        </CAccordionItemContext.Provider>
       </div>
     )
   },
@@ -24,6 +60,7 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
 CAccordionItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
 CAccordionItem.displayName = 'CAccordionItem'