Add addAsFirstChild option to addNodeUnderParent

Author: Paul Vallis

src/utils/tree-data-utils.js

@@ -616,6 +616,7 @@ export function addNodeUnderParent({
   getNodeKey,
   ignoreCollapsed = true,
   expandParent = false,
+  addAsFirstChild = false,
 }) {
   if (parentKey === null) {
     return {
@@ -668,9 +669,13 @@ export function addNodeUnderParent({
 
       insertedTreeIndex = nextTreeIndex;
 
+      const children = addAsFirstChild
+        ? [ newNode, ...parentNode.children]
+        : [...parentNode.children, newNode];
+
       return {
         ...parentNode,
-        children: [...parentNode.children, newNode],
+        children,
       };
     },
   });

src/utils/tree-data-utils.test.js

@@ -1112,6 +1112,33 @@ describe('addNodeUnderParent', () => {
     );
     expect(result.treeIndex).toEqual(5);
   });
+
+  it('should add new node as last child by default', () => {
+    const result = addNodeUnderParent({
+      ...nestedParams,
+      parentKey: 0,
+      getNodeKey: keyFromKey,
+    });
+
+    const [existingChild0, existingChild1, expectedNewNode] = result.treeData[0].children;
+
+    expect(expectedNewNode).toEqual(nestedParams.newNode);
+    expect([existingChild0, existingChild1]).toEqual(nestedParams.treeData[0].children);
+  });
+
+  it('should add new node as first child if addAsFirstChild is true', () => {
+    const result = addNodeUnderParent({
+      ...nestedParams,
+      parentKey: 0,
+      getNodeKey: keyFromKey,
+      addAsFirstChild: true,
+    });
+
+    const [expectedNewNode, ...previousChildren] = result.treeData[0].children;
+
+    expect(expectedNewNode).toEqual(nestedParams.newNode);
+    expect(previousChildren).toEqual(nestedParams.treeData[0].children);
+  });
 });
 
 describe('insertNode', () => {

stories/add-remove.js

@@ -60,6 +60,7 @@ export default class App extends Component {
 
     this.state = {
       treeData: [{ title: 'Peter Olofsson' }, { title: 'Karl Johansson' }],
+      addAsFirstChild: false,
     };
   }
 
@@ -88,6 +89,7 @@ export default class App extends Component {
                             node.title.split(' ')[0]
                           }sson`,
                         },
+                        addAsFirstChild: state.addAsFirstChild,
                       }).treeData,
                     }))
                   }
@@ -123,6 +125,18 @@ export default class App extends Component {
         >
           Add more
         </button>
+        <br />
+        <label Htmlfor="addAsFirstChild">
+          Add new nodes at start
+          <input
+            name="addAsFirstChild"
+            type="checkbox"
+            checked={this.state.addAsFirstChild}
+            onChange={() => this.setState(state => ({
+              addAsFirstChild: !state.addAsFirstChild,
+            }))}
+          />
+        </label>
       </div>
     );
   }