refactor: change form handler on ExportOptionsModal

[Sebastien-Ahkrin]

Closes: #4172

[cloudflare-workers-and-pages]

Deploying nmrium with    Cloudflare Pages

Latest commit:	005cfc6
Status:	✅  Deploy successful!
Preview URL:	https://55f72786.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.