Add addAsFirstChild option to addNodeUnderParent (frontend-collective#375)

* Add addAsFirstChild option to addNodeUnderParent

* Update snapshot for add-remove-nodes story

* Add missing jsdoc

* Format changed files with Prettier

Author: Vallis

src/utils/tree-data-utils.js

@@ -604,6 +604,7 @@ export function getNodeAtPath({
  * @param {!function} getNodeKey - Function to get the key from the nodeData and tree index
  * @param {boolean=} ignoreCollapsed - Ignore children of nodes without `expanded` set to `true`
  * @param {boolean=} expandParent - If true, expands the parentNode specified by parentPath
+ * @param {boolean=} addAsFirstChild - If true, adds new node as first child of tree
  *
  * @return {Object} result
  * @return {Object[]} result.treeData - The updated tree data
@@ -616,6 +617,7 @@ export function addNodeUnderParent({
   getNodeKey,
   ignoreCollapsed = true,
   expandParent = false,
+  addAsFirstChild = false,
 }) {
   if (parentKey === null) {
     return {
@@ -668,9 +670,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,39 @@ 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/__snapshots__/storyshots.test.js.snap

@@ -2243,6 +2243,18 @@ exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
     >
       Add more
     </button>
+    <br />
+    <label
+      Htmlfor="addAsFirstChild"
+    >
+      Add new nodes at start
+      <input
+        checked={false}
+        name="addAsFirstChild"
+        onChange={[Function]}
+        type="checkbox"
+      />
+    </label>
   </div>
   <br />
   <form

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,20 @@ 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>
     );
   }