fix: Updated onAction to bubble up custom props #230
Conversation
Pull Request Test Coverage Report for Build 1141
💛 - Coveralls |
|
Up and running under events here: |
|
Looks good! Since it's a breaking change, I guess we need to update the title to reflect that so that versions are bumped accordingly. Also, should we provide a migration guide about new action syntax? It's not much but usually is expected for a major version bump. |
|
Since it's currently not working on local and you only get passed the action/node id I guess it would be something like this:
Where should this migration step be added? |
It'd be working for those on v1.0.4 or older. Hence the dilemma.
How about |
Tried v1.04 here but can't get it working onLocal either. I can see that the onGlobal-properties is different from v1.17 as well. Perhaps it's better you write the migration step since you have the history of it's previous workings? |
Thanks for taking the effort. It could be buggy from beginning. We can check but I think it'll be a fruitless exercise.
Your description is pretty accurate but I'll let you know if I find anything. |
|
I've added a migration doc now. |
mrchief
changed the title
|
@ellinge Made some tweaks - primarily to make Also, I think there is a way to include the migration steps in the release log itself. Needs some experimentation to be sure. |
mrchief
changed the title
|
Confirmed. We don't need a separate guide. I can add the breaking change description in the release log itself. |
|
Code Climate has analyzed commit 09a624f and detected 0 issues on this pull request. View more on Code Climate. |
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
}
```
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
}
```
What does it do?
When adding typings in #223 it was found that the current implementation of onAction is not working.
Because of "deepcloning" the local onAction-events does not work anymore as intended.
The global event worked though but was somewhat limited. The only thing passed was the generated actionid (if not set as prop) and nodeid. See:
To be consistent with the other events the global action is now changed to pass the action-object and current node instead, or defined with TypeScript instead:
Where NodeAction and TreeNode is:
react-dropdown-tree-select/types/react-dropdown-tree-select.d.ts
Line 125 in 051d5ed
react-dropdown-tree-select/types/react-dropdown-tree-select.d.ts
Line 90 in 051d5ed
Type of change