CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 04:50:44 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2120 from mslourens/delete_component_with_keyboard

Browse source 
Delete component with keyboard
This commit is contained in:
Martin McKeaveney 2021-09-15 16:48:38 +01:00 committed by GitHub
parent 6336409378 49e7e405d2
commit 9341ca0f19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View file

@ -1,5 +1,5 @@
<script>
import { onMount } from "svelte"
import { onMount, onDestroy } from "svelte"
import { store, currentAsset } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
@ -97,26 +97,47 @@
{ once: true }
)
// Add listener for events sent by cliebt library in preview
iframe.contentWindow.addEventListener("bb-event", event => {
const { type, data } = event.detail
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
idToDelete = data.id
confirmDeleteDialog.show()
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported
loading = false
} else {
console.warning(`Client sent unknown event type: ${type}`)
}
})
// Add listener for events sent by client library in preview
iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
})
// remove all iframe event listeners on component destroy
onDestroy(() => {
iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
})
const handleBudibaseEvent = event => {
const { type, data } = event.detail
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
confirmDeleteComponent(data.id)
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported
loading = false
} else {
console.warning(`Client sent unknown event type: ${type}`)
}
};
const handleKeydownEvent = event => {
if ((event.key === "Delete" || event.key === "Backspace") &&
selectedComponentId &&
['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) {
confirmDeleteComponent(selectedComponentId);
}
}
const confirmDeleteComponent = (componentId) => {
idToDelete = componentId
confirmDeleteDialog.show()
}
const deleteComponent = () => {
store.actions.components.delete({ _id: idToDelete })
idToDelete = null