How to make actions available in lifecycle events? (`oncreate`, `onremove`, ...)

[christiankaindl]

This is a continuation from #6, where a solution to this problem was also discussed.

This would make slide-out animations easy with Nestable components. The reached solution is the following:

Solution

(for an explanation on how to use it, read at "Example")

Nestable does not expose the components actions anywhere to the outside world, so in order to have a nestable component's actions being available in an oncreate, onremove or onupdate, it has to be added onto the DOM element of the nestable component itself.

const Page = nestable(
{
     // Nestable state
},
{
    // Nestable actions
},
//nestable's view
(state, actions) => (
    <div oncreate={el => el.parentNode.actions = actions}> // <-- THIS is the important part. Add actions to the parent element, which is the nestable DOM element itself
       ...
    </div>
)

Thanks @zaceno for the solution!

---

Example

Now it is possible to call actions from within those events:

<Page 
    onremove={
        (elem, done) => { elem.actions.doStuff(done) }
    }
/>

In this case the nestable's actions were made available on the DOM element under the name "actions" (elem.actions). This makes it possible to make a slide-out animation or do other stuff. NOTE: Make sure to call done in the action (or somewhere else) when you are finished, so the DOM element can be removed.

[zaceno]

This works since v1.1.0, where we added onremove support to nestables. Thanks @christiankaindl !