Merge 10359c1 into 3b6595e

src/components/fx.js

@@ -0,0 +1,34 @@
+'use strict'
+
+const React = require('react')
+const { on } = require('../dom')
+
+const {
+  CSSTransition,
+  Transition,
+  TransitionGroup
+} = require('react-transition-group')
+
+const onTransitionEnd = (element, done) => {
+  on(element, 'transitionend', event => {
+    if (event.target === element) done()
+  })
+}
+
+const Fade = (props) => (
+  <CSSTransition
+    addEndListener={onTransitionEnd}
+    classNames="fade"
+    mountOnEnter={false}
+    timeout={1000}
+    unmountOnExit
+    {...props}/>
+)
+
+module.exports = {
+  CSSTransition,
+  Transition,
+  TransitionGroup,
+  onTransitionEnd,
+  Fade
+}

src/components/list/node.js

@@ -6,7 +6,7 @@ const { Editable } = require('../editable')
 const { IconFolder, IconTriangle } = require('../icons')
 const { DragSource, DropTarget } = require('react-dnd')
 const { NativeTypes, getEmptyImage } = require('react-dnd-electron-backend')
-const { DND } = require('../../constants')
+const { DND, LIST } = require('../../constants')
 const { bounds } = require('../../dom')
 const { isValidImage } = require('../../image')
 const lazy = require('./tree')
@@ -54,7 +54,8 @@ class NewListNode extends React.Component {
   }
 
   static defaultProps = {
-    name: ''
+    name: '',
+    parent: LIST.ROOT
   }
 }
 
@@ -210,7 +211,7 @@ class ListNode extends React.PureComponent {
   }
 
   renderSubTree(props = this.props) {
-    return props.isExpanded && (
+    return (
       <lazy.ListTree {...props}
         depth={1 + props.depth}
         isDraggingParent={props.isDraggingParent || props.isDragging}

src/components/list/tree.js

@@ -2,6 +2,7 @@
 
 const React = require('react')
 const lazy = require('./node')
+const { Fade } = require('../fx')
 const { get } = require('../../common/util')
 const { arrayOf, bool, func, number, object, shape } = require('prop-types')
 
@@ -17,38 +18,40 @@ class ListTree extends React.Component {
   }
 
   mapChildren(fn, props = this.props) {
-    return props.parent.children.map((id, idx, all) => {
-      if (id in props.lists) {
-        let list = props.lists[id]
-        let hasNewListNode = this.hasNewListNode(id)
-        let isExpandable = hasNewListNode || list.children.length > 0
-        let isExpanded = hasNewListNode || props.expand[id]
+    return props.isExpanded &&
+      props.parent.children.map((id, idx, all) => {
+        if (id in props.lists) {
+          let list = props.lists[id]
+          let hasNewListNode = this.hasNewListNode(id)
+          let isExpandable = hasNewListNode || list.children.length > 0
+          let isExpanded = hasNewListNode || props.expand[id]
 
-        return fn(id, {
-          ...props,
-          list,
-          isSelected: props.selection === id,
-          isExpandable,
-          isExpanded: isExpandable && isExpanded,
-          isEditing: this.isEditing(id),
-          isHolding: props.hold[id],
-          isLast: idx === all.length - 1,
-          position: idx
-        })
-      }
-    })
+          return fn(id, {
+            ...props,
+            list,
+            isSelected: props.selection === id,
+            isExpandable,
+            isExpanded: isExpandable && isExpanded,
+            isEditing: this.isEditing(id),
+            isHolding: props.hold[id],
+            isLast: idx === all.length - 1,
+            position: idx
+          })
+        }
+      })
   }
 
   render() {
     return (
-      <ol className="list-tree" ref={this.setContainer}>
+      <ol className="list-tree" ref={this.setContainer} >
         {this.mapChildren((key, props) =>
-          <lazy.ListNode {...props} key={key}/>)}
-        {this.hasNewListNode() &&
+          <lazy.ListNode key={key} {...props}/>)}
+        <Fade in={this.hasNewListNode()} exit={false}>
           <lazy.NewListNode
-            parent={this.props.edit.parent}
+            parent={get(this.props.edit, ['parent'])}
             onCancel={this.props.onEditCancel}
-            onSave={this.props.onSave}/>}
+            onSave={this.props.onSave}/>
+        </Fade>
       </ol>
     )
   }
@@ -59,6 +62,7 @@ class ListTree extends React.Component {
     expand: object.isRequired,
     hold: object.isRequired,
     isDraggingParent: bool,
+    isExpanded: bool,
     lists: object.isRequired,
     parent: shape({
       id: number.isRequired,

src/components/project/sidebar.js

@@ -264,6 +264,7 @@ class ProjectSidebar extends React.PureComponent {
                     edit={this.props.edit.list}
                     expand={this.props.expand}
                     hold={this.props.hold}
+                    isExpanded
                     selection={this.props.list}
                     onContextMenu={onContextMenu}
                     onDropFiles={onItemImport}

src/stylesheets/partials/_fx.scss

@@ -0,0 +1,18 @@
+.fade-enter {
+  opacity: 0;
+
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 250ms ease-out;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 250ms ease-out;
+}

src/stylesheets/windows/_project.scss

@@ -38,7 +38,8 @@
   "../partials/tab-pane",
   "../partials/scrollbar",
   "../partials/flex",
-  "../partials/orientation";
+  "../partials/orientation",
+  "../partials/fx";
 
 
 // Components