Merge pull request #174 from storybooks/refactor/animations

refactor(treeNode): if not exists animations set duration in zero

src/components/TreeNode/index.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import {isArray} from 'lodash';
 
+import defaultAnimations from '../../themes/animations';
+import NodeHeader from '../header';
 import Drawer from './Drawer';
-import Header from './Header';
 import Loading from './Loading';
 
 const Li = styled('li', {
@@ -27,7 +28,9 @@ class TreeNode extends PureComponent {
     animations() {
         const {animations, node} = this.props;
         if (!animations) {
-            return false;
+            return {
+                toggle: defaultAnimations.toggle(this.props, 0)
+            };
         }
         const animation = Object.assign({}, animations, node.animations);
         return {
@@ -105,7 +108,7 @@ class TreeNode extends PureComponent {
                 this.topLevelRef = ref;
             }}
                 style={style.base}>
-                <Header {...{decorators, animations, node, style}} onClick={() => this.onClick()}/>
+                <NodeHeader {...{decorators, animations, node, style}} onClick={() => this.onClick()}/>
                 {this.renderDrawer(decorators, animations)}
             </Li>
         );

src/components/decorators.js

@@ -27,8 +27,7 @@ const Toggle = ({style}) => {
         <Div style={style.base}>
             <Div style={style.wrapper}>
                 <svg height={height} width={width}>
-                    <Polygon points={points}
-                             style={style.arrow}/>
+                    <Polygon points={points} style={style.arrow}/>
                 </svg>
             </Div>
         </Div>

src/components/treebeard.js

@@ -14,12 +14,13 @@ const Ul = styled('ul', {
 
 const TreeBeard = ({animations, decorators, data, onToggle, style}) => (
     <Ul style={{...defaultTheme.tree.base, ...style.tree.base}}>
-        {castArray(data).map((node, index) =>
+        {castArray(data).map(node => (
             <TreeNode
-                {...{animations, decorators, node, onToggle}}
-                key={node.id || index}
-                style={{...defaultTheme.tree.node, ...style.tree.node}}/>
-        )}
+                {...{decorators, node, onToggle, animations}}
+                key={node.id}
+                style={{...defaultTheme.tree.node, ...style.tree.node}}
+            />
+        ))}
     </Ul>
 );
 

src/themes/animations.js

@@ -1,9 +1,7 @@
-
-
 export default {
-    toggle: ({node: {toggled}}) => ({
+    toggle: ({node: {toggled}}, duration = 300) => ({
         animation: {rotateZ: toggled ? 90 : 0},
-        duration: 300
+        duration: duration
     }),
     drawer: (/* props */) => ({
         enter: {

src/themes/default.js

@@ -1,5 +1,3 @@
-
-
 export default {
     tree: {
         base: {