fix: Updated onAction to bubble up custom props (#230)

ellinge · mrchief · commit fd0de9399e2a · 2019-06-09T22:31:43.000-04:00
BREAKING CHANGE: Action Changes

- The option to pass a local `onAction` handler on a node is now removed. Use the **global** `onAction` event instead.

  ```jsx
  &lt;DropdownTreeSelect onAction={onAction} ... /&gt;
  ```

- `onAction` signature is now consistent with signature for other event handlers such `onChange` and `onNodeToggle`

  ```js
  // before
  onAction = ({ action, id }) =&gt; {
    console.log(action, id)
  }

  // after
  onAction = (node, action) =&gt; {
    console.log(action, node.id)
  }
  ```

- Any custom props passed to `node` or `action` is accessible in the event properties. This will make it easier to add generic custom logic based on your custom data/properties which can be used instead of separate handlers.

  For example:

  ```js
  // node with action and custom props
  {
    id: 'mynode',
    propA: 'hello',
    propB: true,
    actions: [
      {
        id: 'myaction',
        propX: {...},
        propY: 12
      }
    ]
  }

  onAction = (node, action) =&gt; {
    console.log(node.propA, node.propB, action.propX, action.propY)
    // prints hello true {...} 12
  }

  ```
diff --git a/.github/prlint.json b/.github/prlint.json
@@ -1,7 +1,7 @@
 {
   "title": [
     {
-      "pattern": "^(feat|fix|docs|style|refactor|perf|test|chore|BREAKING CHANGE):\\s",
+      "pattern": "^(feat|fix|docs|style|refactor|perf|test|chore):\\s",
       "flags": ["i"],
       "message": "PR title doesn't match conventional commit message specs. See https://conventionalcommits.org/"
     }
diff --git a/README.md b/README.md
@@ -158,8 +158,8 @@ const data = {
 const onChange = (currentNode, selectedNodes) => {
   console.log('onChange::', currentNode, selectedNodes)
 }
-const onAction = ({ action, id }) => {
-  console.log(`onAction:: [${action}]`, id)
+const onAction = (node, action) => {
+  console.log('onAction::', action, node)
 }
 const onNodeToggle = currentNode => {
   console.log('onNodeToggle::', currentNode)
@@ -228,8 +228,8 @@ Type: `function`
 Fires when a action is triggered. Example:
 
 ```jsx
-function onAction({ action, id }) {
-  console.log(`onAction:: [${action}]`, id)
+function onAction(node, action) {
+  console.log('onAction::', action, node)
 }
 
 return <DropdownTreeSelect data={data} onAction={onAction} />
diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
@@ -43,6 +43,13 @@ Generated by [AVA](https://ava.li).
                   ],
                   _depth: 0,
                   _id: 'rdts-0',
+                  actions: [
+                    {
+                      className: 'fa fa-ban',
+                      id: 'NOT',
+                      title: 'NOT',
+                    },
+                  ],
                   children: undefined,
                   label: 'item1',
                   value: 'value1',
@@ -193,6 +200,13 @@ Generated by [AVA](https://ava.li).
       data={
         [
           {
+            actions: [
+              {
+                className: 'fa fa-ban',
+                id: 'NOT',
+                title: 'NOT',
+              },
+            ],
             children: [
               {
                 children: [
@@ -322,6 +336,13 @@ Generated by [AVA](https://ava.li).
       data={
         [
           {
+            actions: [
+              {
+                className: 'fa fa-ban',
+                id: 'NOT',
+                title: 'NOT',
+              },
+            ],
             children: [
               {
                 children: [
@@ -479,6 +500,13 @@ Generated by [AVA](https://ava.li).
                   ],
                   _depth: 0,
                   _id: 'rdts-0',
+                  actions: [
+                    {
+                      className: 'fa fa-ban',
+                      id: 'NOT',
+                      title: 'NOT',
+                    },
+                  ],
                   children: undefined,
                   label: 'item1',
                   value: 'value1',
diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
diff --git a/__snapshots__/src/tree-node/actions.test.js.md b/__snapshots__/src/tree-node/actions.test.js.md
@@ -11,8 +11,14 @@ Generated by [AVA](https://ava.li).
     <Action
       actionData={
         {
-          action: 'action-0',
-          id: 'snapshot',
+          action: {
+            className: 'cn0-0-0',
+            id: 'action-0',
+            junk: '1',
+            text: 'hello',
+            title: 'action',
+          },
+          nodeId: 'snapshot',
         }
       }
       className="cn0-0-0"
diff --git a/__snapshots__/src/tree-node/actions.test.js.snap b/__snapshots__/src/tree-node/actions.test.js.snap
diff --git a/docs/src/stories/BigData/index.js b/docs/src/stories/BigData/index.js
@@ -8,8 +8,8 @@ import bigData from './big-data.json'
 const onChange = (curNode, selectedNodes) => {
   console.log('onChange::', curNode, selectedNodes)
 }
-const onAction = ({ action, id }) => {
-  console.log(`onAction:: [${action}]`, id)
+const onAction = (node, action) => {
+  console.log('onAction::', action, node)
 }
 const onNodeToggle = curNode => {
   console.log('onNodeToggle::', curNode)
diff --git a/docs/src/stories/DefaultValues/index.js b/docs/src/stories/DefaultValues/index.js
@@ -9,8 +9,8 @@ import data from './data.json'
 const onChange = (curNode, selectedNodes) => {
   console.log('onChange::', curNode, selectedNodes)
 }
-const onAction = ({ action, id }) => {
-  console.log(`onAction:: [${action}]`, id)
+const onAction = (node, action) => {
+  console.log('onAction::', action, node)
 }
 const onNodeToggle = curNode => {
   console.log('onNodeToggle::', curNode)
diff --git a/docs/src/stories/Options/index.js b/docs/src/stories/Options/index.js
@@ -26,8 +26,8 @@ class WithOptions extends PureComponent {
   onChange = (curNode, selectedNodes) => {
     console.log('onChange::', curNode, selectedNodes)
   }
-  onAction = ({ action, id }) => {
-    console.log(`onAction:: [${action}]`, id)
+  onAction = (node, action) => {
+    console.log('onAction::', action, node)
   }
   onNodeToggle = curNode => {
     console.log('onNodeToggle::', curNode)
diff --git a/docs/src/stories/Simple/index.js b/docs/src/stories/Simple/index.js
@@ -8,8 +8,8 @@ import data from './data.json'
 const onChange = (curNode, selectedNodes) => {
   console.log('onChange::', curNode, selectedNodes)
 }
-const onAction = ({ action, id }) => {
-  console.log(`onAction:: [${action}]`, id)
+const onAction = (node, action) => {
+  console.log('onAction::', action, node)
 }
 const onNodeToggle = curNode => {
   console.log('onNodeToggle::', curNode)
diff --git a/src/index.js b/src/index.js
@@ -198,8 +198,8 @@ class DropdownTreeSelect extends Component {
     this.props.onChange(this.treeManager.getNodeById(id), tags)
   }
 
-  onAction = (actionId, nodeId) => {
-    typeof this.props.onAction === 'function' && this.props.onAction(actionId, this.treeManager.getNodeById(nodeId))
+  onAction = (nodeId, action) => {
+    this.props.onAction(this.treeManager.getNodeById(nodeId), action)
   }
 
   onInputFocus = () => {
diff --git a/src/index.test.js b/src/index.test.js
@@ -8,13 +8,20 @@ import { clientIdGenerator } from './utils'
 
 const dropdownId = 'rdts'
 
+const action = {
+  id: 'NOT',
+  title: 'NOT',
+  className: 'fa fa-ban',
+}
+
 const node0 = {
   _id: `${dropdownId}-0`,
   _children: [`${dropdownId}-0-0`, `${dropdownId}-0-1`],
   _depth: 0,
   label: 'item1',
   value: 'value1',
   children: undefined,
+  actions: [action],
 }
 
 test.beforeEach(t => {
@@ -30,6 +37,7 @@ test.beforeEach(t => {
         },
         { label: 'item1-2', value: 'value1-2' },
       ],
+      actions: [action],
     },
     {
       label: 'item2',
@@ -88,9 +96,9 @@ test('keeps dropdown open for showDropdownAlways', t => {
 test('notifies on action', t => {
   const handler = spy()
   const { tree } = t.context
-  const wrapper = shallow(<DropdownTreeSelect id={dropdownId} data={tree} onAction={handler} />)
-  wrapper.instance().onAction('0', node0._id)
-  t.true(handler.calledWithExactly('0', node0))
+  const wrapper = mount(<DropdownTreeSelect id={dropdownId} data={tree} onAction={handler} showDropdown />)
+  wrapper.find('i.fa-ban').simulate('click')
+  t.true(handler.calledWithExactly(node0, action))
 })
 
 test('notifies on node toggle', t => {
diff --git a/src/tree-node/action.js b/src/tree-node/action.js
@@ -16,7 +16,10 @@ class Action extends PureComponent {
   }
 
   handleClick = () => {
-    this.props.onAction(this.props.actionData)
+    const { onAction, actionData } = this.props
+    if (onAction) {
+      onAction(actionData.nodeId, actionData.action)
+    }
   }
 
   render() {
diff --git a/src/tree-node/action.test.js b/src/tree-node/action.test.js
@@ -25,11 +25,11 @@ test('notifies clicks if handler is passed', t => {
     title: 'action',
     className: 'cn0-0-0',
     onAction: onClick,
-    actionData: { id: 'actionA' },
+    actionData: { action: { id: 'actionA' }, nodeId: 'nodeId' },
   }
 
   const wrapper = shallow(<Action {...props} />)
   wrapper.find('.cn0-0-0').simulate('click')
   t.true(onClick.calledOnce)
-  t.true(onClick.calledWith(match({ id: 'actionA' })))
+  t.true(onClick.calledWith(match('nodeId', { id: 'actionA' })))
 })
diff --git a/src/tree-node/actions.js b/src/tree-node/actions.js
@@ -17,7 +17,7 @@ class Actions extends PureComponent {
 
     return actions.map((a, idx) => {
       const actionId = a.id || `action-${idx}`
-      return <Action key={actionId} {...rest} {...a} actionData={{ action: actionId, id }} />
+      return <Action key={actionId} {...rest} {...a} actionData={{ action: { ...a, id: actionId }, nodeId: id }} />
     })
   }
 }
diff --git a/types/react-dropdown-tree-select.d.ts b/types/react-dropdown-tree-select.d.ts
@@ -40,7 +40,7 @@ declare module "react-dropdown-tree-select" {
          */
         onChange?: (currentNode: TreeNode, selectedNodes: TreeNode[]) => void;
         /**  Fired on click of the action */
-        onAction?: (event: ActionEvent) => void;
+        onAction?: (currentNode: TreeNode, currentAction: NodeAction) => void;
         /** Fires when a node is expanded or collapsed.
          * Calls the handler with the current node object
          */
@@ -148,11 +148,6 @@ declare module "react-dropdown-tree-select" {
         [property: string]: any;
     }
 
-    export interface ActionEvent {
-        action: string;
-        id: string;
-    }
-
     export interface NodeDataSet {
         [property: string]: any;
     }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"title": [`
`3`	`3`	`{`
`4`		`- "pattern": "^(feat\|fix\|docs\|style\|refactor\|perf\|test\|chore\|BREAKING CHANGE):\\s",`
	`4`	`+ "pattern": "^(feat\|fix\|docs\|style\|refactor\|perf\|test\|chore):\\s",`
`5`	`5`	`"flags": ["i"],`
`6`	`6`	`"message": "PR title doesn't match conventional commit message specs. See https://conventionalcommits.org/"`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -158,8 +158,8 @@ const data = {`
`158`	`158`	`const onChange = (currentNode, selectedNodes) => {`
`159`	`159`	`console.log('onChange::', currentNode, selectedNodes)`
`160`	`160`	`}`
`161`		`-const onAction = ({ action, id }) => {`
`162`		- console.log(`onAction:: [${action}]`, id)
	`161`	`+const onAction = (node, action) => {`
	`162`	`+ console.log('onAction::', action, node)`
`163`	`163`	`}`
`164`	`164`	`const onNodeToggle = currentNode => {`
`165`	`165`	`console.log('onNodeToggle::', currentNode)`
@@ -228,8 +228,8 @@ Type: `function`
`228`	`228`	`Fires when a action is triggered. Example:`
`229`	`229`
`230`	`230`	```jsx
`231`		`-function onAction({ action, id }) {`
`232`		- console.log(`onAction:: [${action}]`, id)
	`231`	`+function onAction(node, action) {`
	`232`	`+ console.log('onAction::', action, node)`
`233`	`233`	`}`
`234`	`234`
`235`	`235`	`return <DropdownTreeSelect data={data} onAction={onAction} />`
Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,14 @@ Generated by [AVA](https://ava.li).`
`11`	`11`	`<Action`
`12`	`12`	`actionData={`
`13`	`13`	`{`
`14`		`- action: 'action-0',`
`15`		`- id: 'snapshot',`
	`14`	`+ action: {`
	`15`	`+ className: 'cn0-0-0',`
	`16`	`+ id: 'action-0',`
	`17`	`+ junk: '1',`
	`18`	`+ text: 'hello',`
	`19`	`+ title: 'action',`
	`20`	`+ },`
	`21`	`+ nodeId: 'snapshot',`
`16`	`22`	`}`
`17`	`23`	`}`
`18`	`24`	`className="cn0-0-0"`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@ import bigData from './big-data.json'`
`8`	`8`	`const onChange = (curNode, selectedNodes) => {`
`9`	`9`	`console.log('onChange::', curNode, selectedNodes)`
`10`	`10`	`}`
`11`		`-const onAction = ({ action, id }) => {`
`12`		- console.log(`onAction:: [${action}]`, id)
	`11`	`+const onAction = (node, action) => {`
	`12`	`+ console.log('onAction::', action, node)`
`13`	`13`	`}`
`14`	`14`	`const onNodeToggle = curNode => {`
`15`	`15`	`console.log('onNodeToggle::', curNode)`
Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,8 @@ import data from './data.json'`
`9`	`9`	`const onChange = (curNode, selectedNodes) => {`
`10`	`10`	`console.log('onChange::', curNode, selectedNodes)`
`11`	`11`	`}`
`12`		`-const onAction = ({ action, id }) => {`
`13`		- console.log(`onAction:: [${action}]`, id)
	`12`	`+const onAction = (node, action) => {`
	`13`	`+ console.log('onAction::', action, node)`
`14`	`14`	`}`
`15`	`15`	`const onNodeToggle = curNode => {`
`16`	`16`	`console.log('onNodeToggle::', curNode)`
Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,8 @@ class WithOptions extends PureComponent {`
`26`	`26`	`onChange = (curNode, selectedNodes) => {`
`27`	`27`	`console.log('onChange::', curNode, selectedNodes)`
`28`	`28`	`}`
`29`		`- onAction = ({ action, id }) => {`
`30`		- console.log(`onAction:: [${action}]`, id)
	`29`	`+ onAction = (node, action) => {`
	`30`	`+ console.log('onAction::', action, node)`
`31`	`31`	`}`
`32`	`32`	`onNodeToggle = curNode => {`
`33`	`33`	`console.log('onNodeToggle::', curNode)`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@ import data from './data.json'`
`8`	`8`	`const onChange = (curNode, selectedNodes) => {`
`9`	`9`	`console.log('onChange::', curNode, selectedNodes)`
`10`	`10`	`}`
`11`		`-const onAction = ({ action, id }) => {`
`12`		- console.log(`onAction:: [${action}]`, id)
	`11`	`+const onAction = (node, action) => {`
	`12`	`+ console.log('onAction::', action, node)`
`13`	`13`	`}`
`14`	`14`	`const onNodeToggle = curNode => {`
`15`	`15`	`console.log('onNodeToggle::', curNode)`