There is a similar question asked here but I do not believe the answer applies to my use case.
I'm using Svelte MaterialUI and attempting to extend the DataTable ponent with the ability to drag and drop rows. I'm using the svelte-dnd-action module to support the drag and drop behaviors.
The following works just fine. I'm able to drag and drop rows of the table.
<table>
<thead>...</thead>
<tbody use:dndzone{...opts}>
...data
<tbody>
</table>There is a similar question asked here but I do not believe the answer applies to my use case.
I'm using Svelte MaterialUI and attempting to extend the DataTable ponent with the ability to drag and drop rows. I'm using the svelte-dnd-action module to support the drag and drop behaviors.
The following works just fine. I'm able to drag and drop rows of the table.
<table>
<thead>...</thead>
<tbody use:dndzone{...opts}>
...data
<tbody>
</table>However, when attempting to plug the module into a Material UI Component, I receive an error stating "actions can only be applied to DOM elements, not ponents."
<DataTable>
<Head>...</Head>
<Body use:dndzone={...opts}>
...Data
</Body>
</DataTable>The definition of the Body ponent looks like this:
<tbody
use:useActions={use}
use:forwardEvents
class="mdc-data-table__content {className}"
{...exclude($$props, ['use', 'class'])}
><slot></slot></tbody>
<script>
import {setContext} from 'svelte';
import {get_current_ponent} from 'svelte/internal';
import {forwardEventsBuilder} from '@smui/mon/forwardEvents.js';
import {exclude} from '@smui/mon/exclude.js';
import {useActions} from '@smui/mon/useActions.js';
const forwardEvents = forwardEventsBuilder(get_current_ponent());
export let use = [];
let className = '';
export {className as class};
setContext('SMUI:data-table:row:header', false);
</script>Is there a way to forward my Action to this ponent? Or a better way to handle this use case? Thank you in advance.
2 Answers
Reset to default 9Action can only be applied to DOM element. However, it's possible to pass a function by property to a ponent, and this ponent can use this property in a "use" directive.
An example:
<script>
function myAction() {
...
}
</script>
<!-- pass myAction in a property 'action' -->
<MyComponent action={myAction}/>
<!-- MyComponent.svelte -->
<script>
export let action;
</script>
<div use:action/>
If you look at the smui library, you'll see that every ponent export an 'use' property, and apply the content of this property to a dom element. use:useActions={use} inject the action defined in the use property as actions.
In other words, in smui, you can pass actions to ponents by using the use property.
<Body use={myAction}/>
The general answer is that you cannot pass actions to a ponent. That is, unless the ponent has this exposed for you.
Luckily the library you mention has it, as is written in their documentation:
You can add actions to the ponents with use={[Action1, [Action2, action2Props], Action3]}.
So in your case the code I believe would be
<Body use={[[dndzone, opts]]}>