Repository navigation
feat(events): before hooks and cancelable removals (#281), edit panel events (#316) - #510
Merged
Merged
Conversation
…ield The canvas remove button now calls actions.remove.component with the component and a one-shot removeAction. The default removes at once; a custom handler can skip removeAction to cancel, or call it later, e.g. after a confirm dialog. Action dispatchers fall back to the defaults before init(). Refs #281
…hrough actions.remove
Removing one item with its × button now calls actions.remove.attrs, options or conditions
(previously only 'Clear All' did), with { type, itemKey, component, isClearAll: false,
removeAction }. 'Clear All' passes isClearAll: true. The default still removes at once.
Refs #281
… action Events#before dispatches a cancelable formeoBefore* DOM event and calls the matching onBefore* callback, which can cancel with preventDefault(), by returning false, or through a Promise. With no Promise it proceeds synchronously; after destroy() it never proceeds. Refs #281
…nt or page The canvas remove button and a page's ×/Delete now run the formeoBeforeRemove DOM event and the onBeforeRemove callback before actions.remove.component or actions.remove.page. A second request for the same component is ignored while one is waiting. Refs #281
…ols or the page tab
Clicking or dropping a control, and the page + tab, now run formeoBeforeAdd and onBeforeAdd with
{ componentType, controlId, data, parent, index, addedVia }. A cancelled drop leaves nothing
behind; a held one is added once the hook resolves, unless its target was removed meanwhile.
Refs #281
The clone button and the Save button now run formeoBeforeClone/onBeforeClone and formeoBeforeSave/onBeforeSave first, which can cancel or hold them. A held save saves the formData its hook saw; a second Save while one waits is ignored. Refs #281
…s or closes
Opening or closing a row, column or field's edit panel now dispatches formeoEditOpened or
formeoEditClosed from the component and calls onEditOpen or onEditClose with { component,
componentType, componentId }, only when the panel's state actually changes.
Refs #316
Collaborator
Author
|
🎉 This PR is included in version 5.11.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Apps can now confirm, cancel or hold (async) the user actions add, remove, clone and save in the editor, and get told when an edit panel opens or closes. Nothing changes for apps that don't opt in: with no hook returning a Promise, every flow stays synchronous and fires the same events in the same order.
Cancelable removals (#281 phase 1)
actions.remove.component({ component, componentType, componentId, removeAction }). The default callsremoveAction()at once; a custom handler can skip it to cancel, or call it later (e.g. after a confirm dialog).removeAction()only works once, and does nothing if the component is already gone.actions.remove.attrs|options|conditions(before, only "Clear All" did), with{ type, itemKey, component, isClearAll: false, removeAction }. "Clear All" passesisClearAll: true. A held item removal does nothing once the panel has been rebuilt, so it can't remove the wrong option.actions.*dispatcher falls back to the defaults beforeinit()(theremove.pagepattern).Before hooks (#281 phase 2)
onBeforeAdd,onBeforeRemove,onBeforeClone,onBeforeSaveoption callbacks, plus cancelableformeoBeforeAdd|Remove|Clone|SaveDOM events dispatched inside the editor and bubbling todocument.preventDefault()), then the callback, then the action if there is one (actions.remove.component/actions.remove.page), then the change and its usual events.falseor callingevt.preventDefault(). Returning a Promise makes Formeo wait; it cancels if the Promise resolvesfalseor rejects. A throw or rejection is logged.{ componentType, controlId, data, parent, index, addedVia }); the clone button; the Save button ({ formData }, and an allowed save saves that same formData).destroy(), a waiting hook never completes its change.addChild,remove(),pages.add(),clear(),formData =), drag-moving existing components, "Clear All" (it hasconfirmClearAll), "Move to page".Edit panel events (#316)
onEditOpen/onEditCloseand theformeoEditOpened/formeoEditClosedDOM events fire when a row, column or field's edit panel actually opens or closes, with{ component, componentType, componentId }. formBuilder'sonOpenFieldEdit/onCloseFieldEditmap to these filtered tocomponentType === 'field'.Docs
docs/options/events/README.md(callbacks, DOM events, a "Before hooks" section, "Edit panel events"),docs/options/actions/README.md("Confirm before deleting", "Removing single items"),docs/editor/pages.md.Back-compat note
Existing custom
actions.remove.attrs|options|conditionshandlers now also run for single-item removals; checkevt.isClearAllif yours should only handle "Clear All".Testing
npm test: 632 pass (572 on main)npm run lint: cleantest.skips). New specs:tests/before-hooks.spec.js,tests/edit-panel-events.spec.jsFollow-ups
onBeforeAddField, …), and hooks for "Move to page" and drag-movesautoColumnWidthstwice (also on main)Fixes #281
Fixes #316