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

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
  <DropdownTreeSelect onAction={onAction} ... />
  ```

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

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

  // after
  onAction = (node, action) => {
    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) => {
    console.log(node.propA, node.propB, action.propX, action.propY)
    // prints hello true {...} 12
  }

  ```

Author: ellinge

.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/"
     }

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} />

__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',

__snapshots__/src/index.test.js.snap

@@ -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"

__snapshots__/src/tree-node/actions.test.js.md

@@ -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)

__snapshots__/src/tree-node/actions.test.js.snap

@@ -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)

docs/src/stories/BigData/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)

docs/src/stories/DefaultValues/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)

docs/src/stories/Options/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 = () => {

docs/src/stories/Simple/index.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 => {

src/index.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() {

src/index.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' })))
 })

src/tree-node/action.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 }} />
     })
   }
 }

src/tree-node/action.test.js

@@ -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;
     }