Implement folder collapse/expand animation

Author: tim-soft

README.md

@@ -261,7 +261,7 @@ Changes to the library code should hot reload in the demo app
 
 ## What's missing
 
-There are still a few features from the original implementation missing from this package. These are mainly related to saving and loading data as well as local storage. Animations for folder expanding/collapsing is also not currently implemented, but shouldn't be too hard to do.
+There are still a few features from the original implementation missing from this package. These are mainly related to saving and loading data as well as local storage.
 
 For the first, I think the fact that this is now an NPM module sort of goes against it handling this sort of stuff. Google's original concept was basically a plug and play controller that could do everything if you just slam it into the browser and pass it an object. However, in module form, it's expected that you'll most likely be integrating this with an existing application. In that case, you'll probably have pretty specific needs around how you would like to save/load data into your GUI and so it's been left out for now.
 
@@ -270,7 +270,6 @@ Local storage however is in the roadmap and will probably be done very soon.
 ## Roadmap
 
 - Loading and storing both default and preset data via `localStorage`
-- Animations for `DatFolder` expanding/collapsing
 - Time travel with undo/redo buttons
 - Better support for floating point `DatNumber`s (rounding etc.)
 

package.json

@@ -84,7 +84,8 @@
     "lodash.isundefined": "^3.0.1",
     "lodash.result": "^4.4.0",
     "lodash.set": "^4.2.0",
-    "react-color": "^2.13.8"
+    "react-color": "^2.13.8",
+    "react-spring": "^8.0.27"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",

src/components/DatFolder.js

@@ -1,6 +1,7 @@
 import React, { Component, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { Spring, animated } from 'react-spring/renderprops.cjs';
 
 export default class DatFolder extends Component {
   static propTypes = {
@@ -20,24 +21,34 @@ export default class DatFolder extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { closed: props.closed };
+    this.state = {
+      initialRender: true,
+      closed: props.closed
+    };
   }
 
+  componentDidMount = () =>
+    this.setState({
+      initialRender: false
+    });
+
   handleClick = () =>
-    this.setState(prevState => ({ closed: !prevState.closed }));
+    this.setState(prevState => ({
+      closed: !prevState.closed
+    }));
 
-  renderChildren() {
+  renderChildren = () => {
     // Disable this rule to take title out of the props so nested folders can have unique titles.
     // eslint-disable-next-line no-unused-vars
     const { children, title, ...rest } = this.props;
 
     return React.Children.map(children, child =>
       cloneElement(child, { ...rest })
     );
-  }
+  };
 
   render() {
-    const { closed } = this.state;
+    const { closed, initialRender } = this.state;
     const { title, className, style } = this.props;
 
     return (
@@ -52,7 +63,18 @@ export default class DatFolder extends Component {
           >
             {title}
           </div>
-          <ul>{this.renderChildren()}</ul>
+          <Spring
+            native
+            immediate={initialRender}
+            to={{ height: closed ? 0 : 'auto' }}
+            from={{ height: closed ? 'auto' : 0 }}
+          >
+            {animStyles => (
+              <animated.ul style={animStyles}>
+                {this.renderChildren()}
+              </animated.ul>
+            )}
+          </Spring>
         </div>
       </li>
     );

src/style/_folder.scss

@@ -20,9 +20,5 @@
     .title {
       background: $folder-closed;
     }
-
-    ul {
-      display: none;
-    }
   }
 }

yarn.lock

@@ -693,7 +693,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5":
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -6320,7 +6320,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6409,6 +6409,14 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
+react-spring@^8.0.27:
+  version "8.0.27"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
+  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    prop-types "^15.5.8"
+
 react@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"