run format

roginfarrer · Sep 28, 2019 · c43259a · c43259a
1 parent 4b9f219
commit c43259a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,9 @@
 
 Complete rewrite using React hooks!
 
-- Ends support for React versions < 16.8.x
-- Library now exports a custom hook in lieu of a render prop component
-- Adds support for unmounting the contents of the Collapse element when closed
+* Ends support for React versions < 16.8.x
+* Library now exports a custom hook in lieu of a render prop component
+* Adds support for unmounting the contents of the Collapse element when closed
 
 ```js
 import React from 'react';
@@ -26,20 +26,20 @@ function Demo() {
 
 Bumped to full release! :)
 
-- `duration`, `easing`, and `delay` now support taking an object with `in` and `out` keys to configure differing in-and-out transitions
+* `duration`, `easing`, and `delay` now support taking an object with `in` and `out` keys to configure differing in-and-out transitions
 
 # 0.2.0
 
 ### Breaking Changes
 
-- `getCollapsibleProps` => `getCollapseProps`. Renamed since it's easier to spell 😅
+* `getCollapsibleProps` => `getCollapseProps`. Renamed since it's easier to spell 😅
 
 ### Other
 
-- Slew of Flow bug fixes
-- Improved documentation
+* Slew of Flow bug fixes
+* Improved documentation
 
 # 0.1.3
 
-- ESLINT wasn't working properly - fixed this
-- Added `files` key to package.json to improve NPM load
+* ESLINT wasn't working properly - fixed this
+* Added `files` key to package.json to improve NPM load
diff --git a/README.md b/README.md
@@ -4,11 +4,11 @@ A tiny (< 2kb) custom hook for creating flexible and accessible expand/collapse
 
 ## Features
 
-- Handles the height of animations of your elements, `auto` included!
-- You control the UI - `useCollapse` provides the necessary props, you control everything else.
-- Built with accessibility in mind - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
-- Small footprint (< 2kb gzipped)
-- No animation framework required! Simply powered by CSS animations
+* Handles the height of animations of your elements, `auto` included!
+* You control the UI - `useCollapse` provides the necessary props, you control everything else.
+* Built with accessibility in mind - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
+* Small footprint (< 2kb gzipped)
+* No animation framework required! Simply powered by CSS animations
 
 ## Demo
 
@@ -81,21 +81,21 @@ const {
   defaultOpen: boolean,
   expandStyles: {},
   collapseStyles: {},
-  collapsedHeight: 0
+  collapsedHeight: 0,
 });
 ```
 
 ### `useCollapse` Config
 
 The following are optional properties passed into `useCollapse({ })`:
 
-| Prop           | Type    | Default                                                                                              | Description                                                  |
-| -------------- | ------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| isOpen         | boolean | `undefined`                                                                                          | If true, the Collapse is expanded                            |
-| defaultOpen    | boolean | `false`                                                                                              | If true, the Collapse will be expanded when mounted          |
-| expandStyles   | object  | `{transitionDuration: '500ms', transitionTimingFunction: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'}` | Style object applied to the collapse panel when it expands   |
-| collapseStyles | object  | `{transitionDuration: '500ms', transitionTimingFunction: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'}` | Style object applied to the collapse panel when it collapses |
-| collapsedHeight| number  | `0`                                                                                                 | The  height of the content when collapsed                    |
+| Prop            | Type    | Default                                                                                               | Description                                                  |
+| --------------- | ------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| isOpen          | boolean | `undefined`                                                                                           | If true, the Collapse is expanded                            |
+| defaultOpen     | boolean | `false`                                                                                               | If true, the Collapse will be expanded when mounted          |
+| expandStyles    | object  | `{transitionDuration: '500ms', transitionTimingFunction: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'}` | Style object applied to the collapse panel when it expands   |
+| collapseStyles  | object  | `{transitionDuration: '500ms', transitionTimingFunction: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'}` | Style object applied to the collapse panel when it collapses |
+| collapsedHeight | number  | `0`                                                                                                   | The height of the content when collapsed                     |
 
 ### What you get
 

diff --git a/package.json b/package.json
@@ -1,12 +1,11 @@
 {
   "name": "react-collapsed",
   "version": "2.2.1",
-  "description": "A tiny React custom-hook for creating flexible and accessible expand/collapse components.",
+  "description":
+    "A tiny React custom-hook for creating flexible and accessible expand/collapse components.",
   "main": "dist/react-collapsed.cjs.js",
   "module": "dist/react-collapsed.esm.js",
-  "files": [
-    "dist/"
-  ],
+  "files": ["dist/"],
   "scripts": {
     "build": "rm -rf dist/ && rollup -c",
     "dev": "yarn docz dev",
@@ -80,10 +79,5 @@
   "resolutions": {
     "docz-core": "^0.13.7"
   },
-  "eslintIgnore": [
-    "node_modules",
-    "dist",
-    ".docz",
-    "coverage"
-  ]
+  "eslintIgnore": ["node_modules", "dist", ".docz", "coverage"]
 }
diff --git a/prettier.config.js b/prettier.config.js
@@ -1,5 +1,5 @@
 const config = require('./node_modules/rogin-scripts/prettier.js');
 
 module.exports = Object.assign(config, {
-  trailingComma: 'es5'
-})
+  trailingComma: 'es5',
+});
diff --git a/src/react-collapsed.js b/src/react-collapsed.js
@@ -33,41 +33,44 @@ export default function useCollapse(initialConfig = {}) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const toggleOpen = useCallback(() => setOpen(oldOpen => !oldOpen), []);
 
-  useEffectAfterMount(() => {
-    if (isOpen) {
-      raf(() => {
-        setMountChildren(true);
-        setStyles(oldStyles => ({
-          ...oldStyles,
-          ...expandStyles,
-          willChange: 'height',
-          display: 'block',
-          overflow: 'hidden',
-        }));
+  useEffectAfterMount(
+    () => {
+      if (isOpen) {
         raf(() => {
-          const height = getElementHeight(el);
-          setStyles(oldStyles => ({...oldStyles, height}));
+          setMountChildren(true);
+          setStyles(oldStyles => ({
+            ...oldStyles,
+            ...expandStyles,
+            willChange: 'height',
+            display: 'block',
+            overflow: 'hidden',
+          }));
+          raf(() => {
+            const height = getElementHeight(el);
+            setStyles(oldStyles => ({...oldStyles, height}));
+          });
         });
-      });
-    } else {
-      raf(() => {
-        const height = getElementHeight(el);
-        setStyles(oldStyles => ({
-          ...oldStyles,
-          ...collapseStyles,
-          willChange: 'height',
-          height,
-        }));
+      } else {
         raf(() => {
+          const height = getElementHeight(el);
           setStyles(oldStyles => ({
             ...oldStyles,
-            height: collapsedHeight,
-            overflow: 'hidden',
+            ...collapseStyles,
+            willChange: 'height',
+            height,
           }));
+          raf(() => {
+            setStyles(oldStyles => ({
+              ...oldStyles,
+              height: collapsedHeight,
+              overflow: 'hidden',
+            }));
+          });
         });
-      });
-    }
-  }, [isOpen]);
+      }
+    },
+    [isOpen]
+  );
 
   const handleTransitionEnd = e => {
     // Sometimes onTransitionEnd is triggered by another transition,
@@ -87,8 +90,8 @@ export default function useCollapse(initialConfig = {}) {
       if (height === styles.height) {
         setStyles({});
       } else {
-      // If the heights don't match, this could be due the height of the content changing mid-transition
-      // If that's the case, re-trigger the animation to animate to the new height
+        // If the heights don't match, this could be due the height of the content changing mid-transition
+        // If that's the case, re-trigger the animation to animate to the new height
         setStyles(oldStyles => ({...oldStyles, height}));
       }
       // If the height we should be animating to matches the collapsed height,