From 8928432fe0f70471ce0cfcfc9b64a975210bbe00 Mon Sep 17 00:00:00 2001 From: Hein Date: Sun, 8 Feb 2026 00:12:14 +0200 Subject: [PATCH] docs(changeset): feat(Former): add keep open functionality and update onClose behavior --- .changeset/curly-cougars-draw.md | 5 +++++ src/Former/Former.store.tsx | 29 +++++++++++++++++++++++------ src/Former/Former.types.ts | 3 ++- src/Former/FormerButtonArea.tsx | 19 +++++++++++++++++-- 4 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 .changeset/curly-cougars-draw.md diff --git a/.changeset/curly-cougars-draw.md b/.changeset/curly-cougars-draw.md new file mode 100644 index 0000000..464815f --- /dev/null +++ b/.changeset/curly-cougars-draw.md @@ -0,0 +1,5 @@ +--- +'@warkypublic/oranguru': patch +--- + +feat(Former): add keep open functionality and update onClose behavior diff --git a/src/Former/Former.store.tsx b/src/Former/Former.store.tsx index 4fcfedc..4cd28fe 100644 --- a/src/Former/Former.store.tsx +++ b/src/Former/Former.store.tsx @@ -118,21 +118,38 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore< if (get().afterSave) { await get().afterSave!(newData, get()); } + + if (keepOpen) { + const keyName = get()?.uniqueKeyField || 'id'; + const clearedData = { ...newData }; + delete clearedData[keyName]; + set({ loading: false, values: clearedData }); + get().onChange?.(clearedData, get()); + formMethods.reset(clearedData); + return newData; + } + set({ loading: false, values: newData }); get().onChange?.(newData, get()); formMethods.reset(newData); //reset with saved data to clear dirty state - if (!keepOpen) { - get().onClose?.(newData); - } + get().onClose?.(newData); return newData; } + if (keepOpen) { + const keyName = get()?.uniqueKeyField || 'id'; + const clearedData = { ...data }; + delete clearedData[keyName]; + set({ loading: false, values: clearedData }); + formMethods.reset(clearedData); + get().onChange?.(clearedData, get()); + return data; + } + set({ loading: false, values: data }); formMethods.reset(data); //reset with saved data to clear dirty state get().onChange?.(data, get()); - if (!keepOpen) { - get().onClose?.(data); - } + get().onClose?.(data); return data; } diff --git a/src/Former/Former.types.ts b/src/Former/Former.types.ts index 99729c7..50421f6 100644 --- a/src/Former/Former.types.ts +++ b/src/Former/Former.types.ts @@ -31,12 +31,13 @@ export interface FormerProps { renderTop?: FormerSectionRender; saveButtonProps?: ButtonProps; saveButtonTitle?: React.ReactNode; + showKeepOpenSwitch?: boolean; title?: string; }; onAPICall?: FormerAPICallType; onCancel?: () => void; onChange?: (value: T, state: Partial>) => void; - onClose?: (data: T | undefined) => void; + onClose?: (data?: T | undefined) => void; onConfirmDelete?: (values?: T) => Promise; onError?: (error: Error | string, state: Partial>) => void; onOpen?: (data?: T) => void; diff --git a/src/Former/FormerButtonArea.tsx b/src/Former/FormerButtonArea.tsx index 24a4e52..034e212 100644 --- a/src/Former/FormerButtonArea.tsx +++ b/src/Former/FormerButtonArea.tsx @@ -1,4 +1,4 @@ -import { Button, Group, Tooltip } from '@mantine/core'; +import { Button, Group, Switch, Tooltip } from '@mantine/core'; import { IconDeviceFloppy, IconX } from '@tabler/icons-react'; import { useFormerStore } from './Former.store'; @@ -9,21 +9,29 @@ export const FormerButtonArea = () => { closeButtonProps, closeButtonTitle, dirty, + getState, + keepOpen, onClose, request, save, saveButtonProps, saveButtonTitle, + setState, + showKeepOpenSwitch, } = useFormerStore((state) => ({ buttonAreaGroupProps: state.layout?.buttonAreaGroupProps, closeButtonProps: state.layout?.closeButtonProps, closeButtonTitle: state.layout?.closeButtonTitle, dirty: state.dirty, + getState: state.getState, + keepOpen: state.keepOpen, onClose: state.onClose, request: state.request, save: state.save, saveButtonProps: state.layout?.saveButtonProps, saveButtonTitle: state.layout?.saveButtonTitle, + setState: state.setState, + showKeepOpenSwitch: state.layout?.showKeepOpenSwitch, })); const disabledSave = @@ -47,12 +55,19 @@ export const FormerButtonArea = () => { size="sm" {...closeButtonProps} onClick={() => { - onClose(); + onClose(getState('values')); }} > {closeButtonTitle || 'Close'} )} + {showKeepOpenSwitch && ( + setState('keepOpen', event.currentTarget.checked)} + /> + )}