Merge pull request #132 from Wolox/react-list-cmpc

react-list-cmpc

Author: damfinkel

Diff for: cookbook-react/src/hooks/useCollapse/README.md

@@ -0,0 +1,37 @@
+## useCollapse
+
+Hook to handle collapsible HTML elements.
+
+**Generic Value**
+
+This hook requires a generic value `Element` which extends from `HTMLElement` in order to create a ref for any kind of element. 
+
+**Parameters**
+
+| Variable | Type | Default | Description |
+|:---|:---|:---:|:---|
+| defaultIsOpen | boolean | - | Determines if the element starts collapsed or expanded |
+| onChange (optional) | - | (isOpen: boolean) => void | Function that executes after the collapse value changes |
+| animateOnCollapseEffect (optional) | boolean | true | Determines if the onChange function executes immediatly or after the collapse animation |
+| collapseTime | number | 300 | Time to execute the collapse animation in milliseconds |
+
+**Return values**
+
+| Variable | Type | Description |
+|:---|:---|:---:|:---|
+| handleCollapse | () => void | Function to collapse/expand |
+| collapsibleRef | Ref<Element> | Ref to pass to the parent container of the collapsible area |
+| collapsed | boolean | Determines if the element is collapsed or expanded |
+
+**Usage**
+
+```tsx
+import useCollapse from './hooks/useCollapse';
+
+const { handleCollapse, collapsibleRef, collapsed } = useCollapse<HTMLDivElement>({
+  defaultIsOpen: !defaultIsClosed,
+  onChange,
+  animateOnCollapseEffect: false,
+  collapseTime: 250
+});
+```

Diff for: cookbook-react/src/hooks/useCollapse/cookbook.json

@@ -0,0 +1,6 @@
+{
+  "thumbnail": {
+    "type": "img",
+    "url": "https://cookbook.wolox-fearmy.vercel.app/logo192.png"
+  }
+}

Diff for: cookbook-react/src/hooks/useCollapse/index.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import useCollapse, { CollapsibleParameters } from '.';
+
+function WrapperComponent({
+  defaultIsOpen,
+  onChange,
+  animateOnCollapseEffect,
+  collapseTime
+}: CollapsibleParameters) {
+  const { handleCollapse, collapsibleRef, collapsed } = useCollapse<HTMLDivElement>({
+    defaultIsOpen,
+    onChange,
+    animateOnCollapseEffect,
+    collapseTime
+  });
+
+  return (
+    <div>
+      <span>is collapsed: {collapsed ? 'true' : 'false'}</span>
+      <button type="button" onClick={handleCollapse} />
+      <div ref={collapsibleRef}>
+        <span>collapsible content</span>
+      </div>
+    </div>
+  );
+}
+
+test('returns a handler that executes the collapse logic', () => {
+  const collapseHandler = jest.fn();
+  render(<WrapperComponent onChange={collapseHandler} animateOnCollapseEffect={false} />);
+  const collapseButton = screen.getByRole('button');
+  userEvent.click(collapseButton);
+
+  expect(collapseHandler).toHaveBeenCalled();
+});
+
+test('returns a handler that executes after `collapseTime` when animateOnCollapse is true', () => {
+  jest.useFakeTimers();
+  const collapseHandler = jest.fn();
+
+  render(<WrapperComponent onChange={collapseHandler} />);
+
+  const collapseButton = screen.getByRole('button');
+  userEvent.click(collapseButton);
+
+  jest.runAllTimers();
+
+  expect(collapseHandler).toHaveBeenCalled();
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+test('collapses the element when the return handler is called', () => {
+  render(<WrapperComponent animateOnCollapseEffect={false} />);
+
+  const collapseButton = screen.getByRole('button');
+  userEvent.click(collapseButton);
+
+  const collapsedText = screen.getByText('is collapsed: true');
+  expect(collapsedText).toBeVisible();
+});
+
+test('sets the correct styles when it uncollapses', () => {
+  render(<WrapperComponent animateOnCollapseEffect={false} />);
+
+  const collapseButton = screen.getByRole('button');
+  userEvent.click(collapseButton);
+  userEvent.click(collapseButton);
+
+  const collapsedText = screen.getByText('is collapsed: false');
+  expect(collapsedText).toBeVisible();
+});

Diff for: cookbook-react/src/hooks/useCollapse/index.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const DEFAULT_COLLAPSE_TIME = 300;
+
+export interface CollapsibleParameters {
+  defaultIsOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+  animateOnCollapseEffect?: boolean;
+  collapseTime?: number;
+}
+
+const useCollapse = <Element extends HTMLElement>({
+  defaultIsOpen = true,
+  onChange,
+  animateOnCollapseEffect = true,
+  collapseTime = DEFAULT_COLLAPSE_TIME
+}: CollapsibleParameters) => {
+  const [collapsed, setCollapsed] = useState(!defaultIsOpen);
+  const [originalHeight, setOriginalHeight] = useState(0);
+  const collapsibleRef = useRef<Element>(null);
+
+  const setCollapsedStyles = (height: number, isCollapsed: boolean) => {
+    const { style } = collapsibleRef.current!;
+    const heightString = isCollapsed ? '0' : `${height}px`;
+
+    style.height = heightString;
+
+    style.paddingTop = isCollapsed ? '0' : '';
+    style.paddingBottom = isCollapsed ? '0' : '';
+    style.marginTop = isCollapsed ? '0' : '';
+    style.marginBottom = isCollapsed ? '0' : '';
+  };
+
+  const calculateHeight = useCallback(() => {
+    const { scrollHeight } = collapsibleRef.current!;
+
+    const newHeight = scrollHeight ?? 0;
+    setOriginalHeight(newHeight);
+  }, []);
+
+  // Sets initial height values
+  useEffect(() => {
+    if (collapsibleRef.current) {
+      collapsibleRef.current.style.transition = `height ${collapseTime}ms ease-out, padding ${collapseTime}ms ease-out, margin ${collapseTime}ms ease-out`;
+      collapsibleRef.current.style.overflow = 'hidden';
+    }
+
+    calculateHeight();
+  }, [calculateHeight, collapseTime]);
+
+  useEffect(() => {
+    // Note: There's a small bug that causes the resize not to correctly reduce the collapsible's
+    // height when the screen is enlargened. The reason is because the scroll height does not
+    // change because the height value is already set. The screen does not break though, the only
+    // problem is that the collapsible element has more height than it should but it works.
+    window.addEventListener('resize', calculateHeight);
+    return () => {
+      window.removeEventListener('resize', calculateHeight);
+    };
+  }, [calculateHeight]);
+
+  // Changes height values when height or collapsible state changes
+  useEffect(() => {
+    setCollapsedStyles(originalHeight, collapsed);
+  }, [originalHeight, collapsed]);
+
+  const handleCollapse = () => {
+    setCollapsed(!collapsed);
+    setCollapsedStyles(originalHeight, !collapsed);
+
+    if (animateOnCollapseEffect) {
+      setTimeout(() => {
+        onChange?.(collapsed);
+      }, collapseTime);
+    } else {
+      onChange?.(collapsed);
+    }
+  };
+
+  return { handleCollapse, collapsibleRef, collapsed };
+};
+
+export default useCollapse;

Diff for: cookbook-react/src/recipes/HOCs/Spinner/components/Loading/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,8 @@
-import React, { ReactNode, useState, useRef, useEffect } from 'react';
+import React, { ReactNode } from 'react';
 import cn from 'classnames';
 
+import useCollapse from '../../../../hooks/useCollapse';
+
 import styles from './styles.module.scss';
 
 interface CollapsibleProps {
@@ -12,37 +14,6 @@ interface CollapsibleProps {
   collapsibleId: string;
 }
 
-const useCollapse = (defaultIsOpen: boolean, onCollapse?: (isOpen: boolean) => void) => {
-  const [collapsed, setCollapsed] = useState(!defaultIsOpen);
-  const collapsibleRef = useRef<HTMLDivElement>(null);
-
-  const setCollapsedValue = (height: number, isCollapsed: boolean) => {
-    const heightString = isCollapsed ? '0px' : `${height}px`;
-    collapsibleRef.current!.style.height = heightString;
-  };
-
-  useEffect(() => {
-    const calculateHeight = () => {
-      const maxHeight = collapsibleRef.current?.scrollHeight ?? 0;
-      setCollapsedValue(maxHeight, collapsed);
-    };
-
-    calculateHeight();
-    window.addEventListener('resize', calculateHeight);
-    return () => {
-      window.removeEventListener('resize', calculateHeight);
-    };
-  }, [collapsed]);
-
-  const handleCollapse = () => {
-    setCollapsed(!collapsed);
-    setCollapsedValue(collapsibleRef.current?.scrollHeight!, !collapsed);
-    onCollapse?.(collapsed);
-  };
-
-  return { handleCollapse, collapsibleRef, collapsed };
-};
-
 function Collapsible({
   collapsibleId,
   title,
@@ -51,7 +22,10 @@ function Collapsible({
   children,
   onChange
 }: CollapsibleProps) {
-  const { handleCollapse, collapsibleRef, collapsed } = useCollapse(!defaultIsClosed, onChange);
+  const { handleCollapse, collapsibleRef, collapsed } = useCollapse<HTMLDivElement>({
+    defaultIsOpen: !defaultIsClosed,
+    onChange
+  });
 
   return (
     <div className={cn(className, styles.collapsibleContainer, 'column')}>
@@ -65,7 +39,7 @@ function Collapsible({
           onClick={handleCollapse}
         />
       </div>
-      <div id={collapsibleId} ref={collapsibleRef} className={cn(styles.content)} role="region">
+      <div id={collapsibleId} ref={collapsibleRef} role="region">
         {children}
       </div>
     </div>

Diff for: cookbook-react/src/recipes/collapsibles/valparaiso/Collapsible/index.tsx

@@ -14,12 +14,6 @@ $icon-width: 18px;
   padding: 20px;
 }
 
-.content {
-  overflow: hidden;
-  transition: height 0.3s ease-out;
-  transform-origin: top;
-}
-
 .title {
   color: $title-color;
   font-size: 32px;

Diff for: cookbook-react/src/recipes/collapsibles/valparaiso/Collapsible/styles.module.scss

@@ -21,10 +21,9 @@ exports[`Should match snapshot 1`] = `
       />
     </div>
     <div
-      class="content"
       id="collapsable-example"
       role="region"
-      style="height: 0px;"
+      style="transition: height 300ms ease-out, padding 300ms ease-out, margin 300ms ease-out; overflow: hidden; height: 0px;"
     >
       <p
         class="m-bottom-3 text"

Diff for: cookbook-react/src/recipes/collapsibles/valparaiso/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
 {
   "thumbnail": {
     "type": "iframe",
-    "url": "https://cookbook-react.now.sh/?category=collapses&component=collapse-cmpc&compact=true"
+    "url": "https://cookbook-react.now.sh/?category=collapsibles&component=valparaiso&compact=true"
   },
   "detail": {
     "type": "iframe",
-    "url": "https://cookbook-react.now.sh/?category=collapses&component=collapse-cmpc&compact=true"
+    "url": "https://cookbook-react.now.sh/?category=collapsibles&component=valparaiso&compact=true"
   }
 }

Diff for: cookbook-react/src/recipes/collapsibles/valparaiso/cookbook.json

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import useCollapse from '../../../../hooks/useCollapse';
+
+import styles from './styles.module.scss';
+
+interface ItemType {
+  id: number;
+  name: string;
+}
+
+interface ItemProps {
+  item: ItemType;
+  onDelete: (id: number) => void;
+}
+
+function Item({ item, onDelete }: ItemProps) {
+  const handleDelete = () => onDelete(item.id);
+
+  const { handleCollapse, collapsibleRef } = useCollapse<HTMLLIElement>({ onChange: handleDelete });
+
+  return (
+    <li key={item.id} ref={collapsibleRef} className={`${styles.listItem} row middle space-between`}>
+      <div className="item-1">{item.name}</div>
+      <button type="button" className={styles.closeIcon} onClick={handleCollapse} />
+    </li>
+  );
+}
+
+export default Item;