CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 15:56:23 +12:00
Code Issues Projects Releases Wiki Activity

Fix svelte-dnd-action throwing an error when interacting with a spectrum field inside a draggable

Browse source
This commit is contained in:
Andrew Kingston 2021-07-26 14:09:14 +01:00
parent 73643793c9
commit 7a9197975d
1 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
View file

@ -54,6 +54,7 @@
}, },
] ]
let dragDisabled = true
$: definition = store.actions.components.getDefinition( $: definition = store.actions.components.getDefinition(
$selectedComponent?._component $selectedComponent?._component
) )
@ -96,11 +97,16 @@
] ]
} }
const removeLink = id => { const removeCondition = id => {
conditions = conditions.filter(link => link.id !== id) conditions = conditions.filter(link => link.id !== id)
} }
const updateLinks = e => { const handleFinalize = e => {
updateConditions(e)
dragDisabled = true
}
const updateConditions = e => {
conditions = e.detail.items conditions = e.detail.items
} }
@ -142,9 +148,10 @@
items: conditions, items: conditions,
flipDurationMs, flipDurationMs,
dropTargetStyle: { outline: "none" }, dropTargetStyle: { outline: "none" },
dragDisabled,
}} }}
on:finalize={updateLinks} on:finalize={handleFinalize}
on:consider={updateLinks} on:consider={updateConditions}
> >
{#each conditions as condition (condition.id)} {#each conditions as condition (condition.id)}
<div <div
@ -152,9 +159,15 @@
class:update={condition.action === "update"} class:update={condition.action === "update"}
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
> >
<Icon name="DragHandle" size="XL" /> <div
class="handle"
aria-label="drag-handle"
style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
on:mousedown={() => (dragDisabled = false)}
>
<Icon name="DragHandle" size="XL" />
</div>
<Select <Select
draggable={false}
placeholder={null} placeholder={null}
options={actionOptions} options={actionOptions}
bind:value={condition.action} bind:value={condition.action}
@ -226,7 +239,7 @@
name="Close" name="Close"
hoverable hoverable
size="S" size="S"
on:click={() => removeLink(condition.id)} on:click={() => removeCondition(condition.id)}
/> />
</div> </div>
{/each} {/each}
@ -270,4 +283,8 @@
.condition:hover { .condition:hover {
background-color: var(--spectrum-global-color-gray-100); background-color: var(--spectrum-global-color-gray-100);
} }
.handle {
display: grid;
place-items: center;
}
</style> </style>