|
7 | 7 | Form, |
8 | 8 | setFormContext, |
9 | 9 | SubmitButton, |
| 10 | + validate, |
10 | 11 | } from "@sjsf/form"; |
11 | 12 | import { resolver } from "@sjsf/form/resolvers/compat"; |
12 | 13 | import "@sjsf/form/fields/extra-fields/enum-include"; |
| 14 | + import { createFormMerger } from '@sjsf/form/mergers/modern'; |
13 | 15 | import { createFormValidator } from "@sjsf/ajv8-validator"; |
14 | 16 | import { theme as daisyTheme } from "@sjsf/daisyui5-theme"; |
15 | 17 | import { translation } from "@sjsf/form/translations/en"; |
| 18 | + import { createFormIdBuilder } from '@sjsf/form/id-builders/modern'; |
16 | 19 |
|
17 | 20 | import { isValidUrl } from "./lib/url"; |
18 | 21 | import { copyTextToClipboard } from "./lib/copy-to-clipboard"; |
|
40 | 43 | initialOptions, |
41 | 44 | }: { initialData: string; initialOptions: TransformConfig } = $props(); |
42 | 45 |
|
43 | | - const validator = createFormValidator(); |
44 | | -
|
45 | 46 | let source: Source = $state({ |
46 | 47 | type: isValidUrl(initialData) ? SourceType.URL : SourceType.Text, |
47 | 48 | data: initialData, |
|
59 | 60 | } |
60 | 61 |
|
61 | 62 | async function shareTable() { |
62 | | - const options = form.value; |
63 | | - if (options === undefined) { |
| 63 | + const result = validate(form); |
| 64 | + if (result.errors) { |
64 | 65 | return; |
65 | 66 | } |
66 | 67 | const sharedUrl = createShareUrl(compressor.compress, { |
67 | 68 | data: source.data, |
68 | | - options, |
| 69 | + options: result.value, |
69 | 70 | createOnOpen: shareBehavior === ShareBehavior.CreateOnOpen, |
70 | 71 | }); |
71 | 72 | copyTextToClipboard(sharedUrl).then( |
|
82 | 83 | localStorage.theme ?? "system" |
83 | 84 | ); |
84 | 85 |
|
85 | | - const form = createForm({ |
| 86 | + const form = createForm<TransformConfig>({ |
86 | 87 | resolver, |
87 | 88 | theme: daisyTheme, |
88 | 89 | initialValue: initialOptions, |
89 | 90 | schema: TRANSFORM_SCHEMA, |
90 | 91 | uiSchema: TRANSFORM_UI_SCHEMA, |
91 | | - validator, |
| 92 | + idBuilder: createFormIdBuilder, |
| 93 | + validator: createFormValidator, |
| 94 | + merger: createFormMerger, |
92 | 95 | translation: overrideByRecord(translation, { |
93 | 96 | submit: "Create table", |
94 | 97 | }), |
95 | | - onSubmit: (cfg: TransformConfig) => { |
| 98 | + onSubmit: (cfg) => { |
96 | 99 | resolveSource(source) |
97 | 100 | .then((data) => appWorker.createTable({ data, config: cfg })) |
98 | 101 | .then((content) => { |
|
109 | 112 | }); |
110 | 113 | }, |
111 | 114 | }); |
112 | | - setFormContext(form.context); |
| 115 | + setFormContext(form); |
113 | 116 | </script> |
114 | 117 |
|
115 | 118 | <Layout> |
|
0 commit comments