refactor: change form handler on ExportOptionsModal

[Sebastien-Ahkrin]

Closes: #4172

[cloudflare-workers-and-pages]

Deploying nmrium with    Cloudflare Pages

Latest commit:	4ee3e06
Status:	✅  Deploy successful!
Preview URL:	https://fc2cae2c.nmrium.pages.dev
Branch Preview URL:	https://4172-refactor-useform-on-exp.nmrium.pages.dev

View logs

[targos]

I suggest you take care of #4215 in a separate PR to unblock this.

[tpoisseau]

Advanced Mode looks broken

Height, Width and Unit are empty.

This forms reminds me this one:

I suggest you to refactor / re-use part of this form or copy-paste it. It is working properly even in advanced mode.

src/component/modal/setting/tanstack_general_settings/tabs/export_tab.fields.tsx

I hope the data-struct is the same so you can simply re-use the field-group.
This one also use setFieldValue, but with dontRunListeners: true option. without it, editing values was slow, editing width edit height, and height edit the width. it loop until conversion between both was stable (or tanstack have a kill-switch to stop this kind of infinite edit-loop). So I predict your current implementation have this issue.

[Sebastien-Ahkrin]

Advanced Mode looks broken

Height, Width and Unit are empty.

This forms reminds me this one:

I suggest you to refactor / re-use part of this form or copy-paste it. It is working properly even in advanced mode.

src/component/modal/setting/tanstack_general_settings/tabs/export_tab.fields.tsx

I hope the data-struct is the same so you can simply re-use the field-group. This one also use setFieldValue, but with dontRunListeners: true option. without it, editing values was slow, editing width edit height, and height edit the width. it loop until conversion between both was stable (or tanstack have a kill-switch to stop this kind of infinite edit-loop). So I predict your current implementation have this issue.

We do not have the save data-struct, so i can't re-use the fieldgroup. I think, to keep the layout as it i will not use the implementation of general settings. (keep the link between width / height etc). i will use dontRunListeners then.

[tpoisseau]

It should be the same data-struct. Or at least compatible with encode or decode of exportSettingsValidation

nmrium/src/component/modal/setting/tanstack_general_settings/validation/export_tab_validation.ts

Lines 48 to 54 in 630c7f3

	/**
	* @see {import("@zakodium/nmrium-core").ExportSettings}
	*/
	export const exportSettingsValidation = z.discriminatedUnion('mode', [
	basicExportSettings,
	advancedExportSettings,
	]);

InnerExportOptionsModal form fields should be exactly the fields from ExportFields

nmrium/src/component/modal/setting/tanstack_general_settings/tabs/export_tab.fields.tsx

Line 77 in 7750f2e

export const ExportFields = withFieldGroup({

Both should looks and behave exactly the same. Both forms edit ExportSettings from the workspace.

[tpoisseau]

⬆️

[Sebastien-Ahkrin]

[tpoisseau]

After you took into account my last comment, you are good to merge.

[tpoisseau]

I did not notice before your screens but you should use actions props of DialogFooter instead of children.

children is for extra content, left align. actions is for, well, actions, right align.

Also, actions take care of align and spacing. You just have to put a fragment with Buttons inside in it.