feat(CCollapse): add horizontal collapse

Author: mrholek

packages/coreui-react/src/components/collapse/CCollapse.tsx

@@ -10,6 +10,10 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Set horizontal collapsing to transition the width instead of height.
+   */
+  horizontal?: boolean
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -25,8 +29,9 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
-  ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+  ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
     const [height, setHeight] = useState<number>()
+    const [width, setWidth] = useState<number>()
     const collapseRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, collapseRef)
 
@@ -42,27 +47,53 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
 
     const onEntering = () => {
       onShow && onShow()
+
+      if (horizontal) {
+        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+        return
+      }
       collapseRef.current && setHeight(collapseRef.current.scrollHeight)
     }
 
     const onEntered = () => {
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
     const onExit = () => {
+      if (horizontal) {
+        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+        return
+      }
       collapseRef.current && setHeight(collapseRef.current.scrollHeight)
     }
 
     const onExiting = () => {
       onHide && onHide()
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
     const onExited = () => {
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
-    const _className = classNames(className)
+    const _className = classNames(
+      {
+        'collapse-horizontal': horizontal,
+      },
+      className,
+    )
 
     return (
       <CSSTransition
@@ -77,10 +108,11 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
         {(state) => {
           const transitionClass = getTransitionClass(state)
           const currentHeight = height === 0 ? null : { height }
+          const currentWidth = width === 0 ? null : { width }
           return (
             <div
               className={classNames(_className, transitionClass)}
-              style={{ ...currentHeight }}
+              style={{ ...currentHeight, ...currentWidth }}
               {...rest}
               ref={forkedRef}
             >
@@ -96,6 +128,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
 CCollapse.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  horizontal: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -51,7 +51,7 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
-  const backdrop = document.querySelector('.modal-backdrop')
+  const backdrop = document.querySelector('.offcanvas-backdrop')
   if (backdrop !== null) {
     fireEvent.click(backdrop)
   }

packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`COffcanvas customize and event on click backdrop 1`] = `
     Test
   </div>
   <div
-    class="modal-backdrop fade show"
+    class="offcanvas-backdrop fade show"
   />
 </div>
 `;
@@ -27,7 +27,7 @@ exports[`COffcanvas customize and event on keypress 1`] = `
     Test
   </div>
   <div
-    class="modal-backdrop fade show"
+    class="offcanvas-backdrop fade show"
   />
 </div>
 `;

packages/docs/content/4.0/components/collapse.mdx

@@ -78,6 +78,50 @@ return (
 )
 ```
 
+## Horizontal
+
+The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
+
+export const HorizontalExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton className="mb-3" onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls="collapseWidthExample">Button</CButton>
+      <div style={{ minHeight: '120px'}}>
+        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
+          <CCard style={{width: '300px'}}>
+            <CCardBody>
+              This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+            </CCardBody>
+          </CCard>
+        </CCollapse>
+      </div>
+    </>
+  )
+}
+
+<Example>
+  <HorizontalExample />
+</Example>
+
+```jsx
+const [visible, setVisible] = useState(false)
+return (
+  <>
+    <CButton className="mb-3" onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls="collapseWidthExample">Button</CButton>
+    <div style={{ minHeight: '120px'}}>
+      <CCollapse id="collapseWidthExample" horizontal visible={visible}>
+        <CCard style={{width: '300px'}}>
+          <CCardBody>
+            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+          </CCardBody>
+        </CCard>
+      </CCollapse>
+    </div>
+  </>
+)
+```
+
 ## Multiple targets
 
 A `<CButton>` can show and hide multiple elements.

packages/docs/package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "api": "rimraf \"content/$npm_package_config_version_short/api/*\" & node build/api.js",
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "export NODE_OPTIONS=--openssl-legacy-provider; gatsby develop",
     "dist": "run-s api build",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "gatsby develop",
@@ -34,7 +34,7 @@
     "@coreui/react-chartjs": "^2.0.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^3.14.3",
+    "gatsby": "^3.14.6",
     "gatsby-plugin-google-gtag": "^3.14.0",
     "gatsby-plugin-image": "^1.14.1",
     "gatsby-plugin-manifest": "^3.14.0",