use-tree-state - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "use-tree-state",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A super-light and customizable React hook to manage tree state like never before",
@@ -5,0 +5,0 @@ "main": "dist/use-tree-state.bundle.js",

README.md

@@ -44,3 +44,3 @@ # Use Tree State
 
-  // not reserved, can carry any extra info about this node
+  // all other keys are not reserved, can carry any extra info about this node
   nickname (optional): 'pikachu',
@@ -69,3 +69,5 @@ url (optional): 'www.pokemon.com',
 
-`f(path, ...args) => update state internally`
+`f(path: array, ...args) => update state internally`
+or 
+`fByProp(propName: string, targetValue: any, ...args) => update state internally` (WIP)
 
@@ -77,2 +79,3 @@ For more details please refer to [Built-in Reducers](#built-in-reducers) section.
   const {
+    // handlers using node's path to find target
     checkNode,
@@ -83,32 +86,33 @@ toggleOpen,
     addNode,
+
+    // handlers using any node's property to find target (WIP)
+    checkNodeByProp,
+    toggleOpenByProp,
+    renameNodeByProp,
+    deleteNodeByProp,
+    addNodeByProp,
   } = reducers;
 
-  return (<>
-    <Button onClick={ () => checkNode([0]) }>
-      check the first node
-    </Button>
+  const check_first_node = () => checkNode([0]);
+  const check_node_whos_name_is_Goku = () => checkNodeByProp('name', 'Goku');
 
-    <Button onClick={ () => toggleOpen([0], 1) }>
-      open the first parent node
-    </Button>
+  const open_first_node = () => toggleOpen([0], 1);
+  const open_node_whos_url_is_www = () => toggleOpenByProp('url', 'www', 1);
+  const close_node_whos_num_is_123 = () => toggleOpenByProp('num', 123, 0);
 
-    <Button onClick={ () => toggleOpen([1], 0) }>
-      close the second parent node
-    </Button>
+  const rename_third_node_to_pikachu = () => renameNode([2], 'pikachu');
+  const rename_snorlax_node_to_pikachu = () => renameNode('name', 'snorlax', 'pikachu');
 
-    <Button onClick={ () => renameNode([2], 'pikachu') }>
-      rename the third node to pikachu
-    </Button>
+  const remove_fourth_node = () => deleteNode([3]);
+  const remove_unnecessary_node = () => deleteNodeByProp('necessary', false);
 
-    <Button onClick={ () => deleteNode([3]) }>
-      remove the fourth node
-    </Button>
+  const add_leaf_node_in_root_node = () => addNode([], false);
+  const add_parent_node_in_Pokemon_node = () => addNodeByProp('type', 'Pokemon', true);
 
-    <Button onClick={ () => addNode([], false) }>
-      add a leaf node as root node's children
-    </Button>
+  return (<>
+    <button onClick={ check_first_node  }>
+      check first node
+    </button>
 
-    <Button onClick={ () => addNode([], true) }>
-      add a parent node as root node's children
-    </Button>
+    ...
 
@@ -138,4 +142,13 @@ <Tree state={ treeState } />
 ## Built-in Reducers
-All built in reducers will use `path` param to find the tree node to operate on. `path` is an array of indexes from root to the target node.
+There are two types of built in reducers (or call it handlers if you prefer) that differ in how they find target node to operate on.
 
+#### 1) find target node by path
+- `reducers.checkNode`
+- `reducers.toggleOpen`
+- `reducers.renameNode`
+- `reducers.deleteNode`
+- `reducers.addNode`
+
+their format is `f(path: array, ...args) => update state internally`, `path` is an array of indexes from root to the target node.
+
 An example that shows each node and corresponding path
@@ -159,3 +172,18 @@ ```ts
 
-### • `reducers.checkNode(path: array)`
+#### 2) find target node by property (can be any property in tree ndoe data)
+**These are working in progress, will be out ASAP**
+
+- `reducers.checkNodeByProp`
+- `reducers.toggleOpenByProp`
+- `reducers.renameNodeByProp`
+- `reducers.deleteNodeByProp`
+- `reducers.addNodeByProp`
+
+their format is `fByProp(propName: string, targetValue: any, ...args) => update state internally`
+
+
+### 🌀 reducers details
+
+#### • `checkNode(path: array)`
+#### • `checkNodeByProp(propName: string, targetValue: any)`
 Check the target node (internally set `checked` = 1), if target node is already checked, this will uncheck it (internally set `checked` = 0).
@@ -166,3 +194,7 @@
 - if some (but not all) of a node's children are checked, this node becomes half check (internally set `checked` = 0.5)
-### • `reducers.toggleOpen(path: array, isOpen: bool)`
+
+<br>
+
+#### • `toggleOpen(path: array, isOpen: bool)`
+#### • `toggleOpenByProp(propName: string, targetValue: any, isOpen: bool)`
 Set the open status `isOpen` for the target node. `isOpen: false` usually means in UI we shouldn't see it's children.
@@ -172,9 +204,18 @@
 
-### • `reducers.renameNode(path: array, newName: string)`
+<br>
+
+#### • `renameNode(path: array, newName: string)`
+#### • `renameNodeByProp(propName: string, targetValue: any, newName: string)`
 You know what it is.
 
-### • `reducers.deleteNode(path: array)`
+<br>
+
+#### • `deleteNode(path: array)`
+#### • `deleteNodeByProp(propName: string, targetValue: any)`
 Delete the target node. If target node is a parent, all of it's children will also be removed.
 
-### • `reducers.addNode(path: array, hasChildren: bool)`
+<br>
+
+#### • `addNode(path: array, hasChildren: bool)`
+#### • `addNodeByProp(propName: string, targetValue: any, hasChildren: bool)`
 Add a node as a children of target node. `hasChildren: true` means this new node is a parent node, otherwise it is a leaf node.
@@ -184,3 +225,5 @@
 
-### • `reducers.setTreeState(newState: tree-state-object)`
+<br>
+
+#### • `setTreeState(newState: tree-state-object)`
 Instead of 'update' the tree state, this will set whole tree state directly. Didn't test this method, but leave this api anyways, so use with cautions! And plz [open an issue](https://github.com/shunjizhan/use-tree-state/issues) if it doesn't work : )
@@ -230,5 +273,5 @@
   return (<>
-    <Button onClick={ renameFirstNodeToPikaPikaPika }>
+    <button onClick={ renameFirstNodeToPikaPikaPika }>
       pika pika
-    </Button>
+    </button>
 
@@ -264,5 +307,5 @@ <Tree state={ treeState } />
   return (<>
-    <Button onClick={ renameFirstNodeToPikaPikaPika }>
+    <button onClick={ renameFirstNodeToPikaPikaPika }>
       pika pika
-    </Button>
+    </button>
 
@@ -269,0 +312,0 @@ <Tree state={ treeState } />

No alert changes

Improved metrics

Total package byte prevSize

23622

increased by9.12%

Number of package files

4

increased by33.33%

Number of lines in readme file

340

increased by14.48%

No dependency changes