@dxos/react-ui-form 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -1
- package/dist/lib/browser/index.mjs +2298 -2290
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +2298 -2290
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +8 -7
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts +9 -3
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.d.ts +81 -27
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +53 -92
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormField.d.ts +37 -0
- package/dist/types/src/components/Form/FormField.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldComponent.d.ts +77 -0
- package/dist/types/src/components/Form/FormFieldComponent.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts +9 -0
- package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldSet.d.ts +18 -0
- package/dist/types/src/components/Form/FormFieldSet.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/ArrayField.d.ts +18 -0
- package/dist/types/src/components/Form/fields/ArrayField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/BooleanField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/BooleanField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/GeoPointField.d.ts +5 -0
- package/dist/types/src/components/Form/fields/GeoPointField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/MarkdownField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/MarkdownField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/NumberField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/NumberField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/RefField.d.ts +16 -0
- package/dist/types/src/components/Form/fields/RefField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/SelectField.d.ts +10 -0
- package/dist/types/src/components/Form/fields/SelectField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.d.ts +5 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.d.ts.map +1 -0
- package/dist/types/src/components/{ControlSection/ControlSection.stories.d.ts → Form/fields/SelectOptionField.stories.d.ts} +8 -10
- package/dist/types/src/components/Form/fields/SelectOptionField.stories.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TextAreaField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/TextAreaField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TextField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/TextField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TupleField.d.ts +6 -0
- package/dist/types/src/components/Form/fields/TupleField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/index.d.ts +12 -0
- package/dist/types/src/components/Form/fields/index.d.ts.map +1 -0
- package/dist/types/src/components/Form/index.d.ts +2 -4
- package/dist/types/src/components/Form/index.d.ts.map +1 -1
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts +14 -9
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts.map +1 -1
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts +5 -2
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/Settings/Settings.d.ts +56 -0
- package/dist/types/src/components/Settings/Settings.d.ts.map +1 -0
- package/dist/types/src/components/{Form/custom/SelectOptionsInput.stories.d.ts → Settings/Settings.stories.d.ts} +6 -4
- package/dist/types/src/components/Settings/Settings.stories.d.ts.map +1 -0
- package/dist/types/src/components/Settings/index.d.ts +2 -0
- package/dist/types/src/components/Settings/index.d.ts.map +1 -0
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +9 -11
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts +7 -3
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/testing.d.ts +0 -2
- package/dist/types/src/components/testing.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +2 -3
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useFormHandler.d.ts +82 -0
- package/dist/types/src/hooks/useFormHandler.d.ts.map +1 -0
- package/dist/types/src/hooks/useKeyHandler.d.ts +6 -0
- package/dist/types/src/hooks/useKeyHandler.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +6 -3
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +1 -1
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/properties.d.ts +7 -0
- package/dist/types/src/util/properties.d.ts.map +1 -0
- package/dist/types/src/util/refs.d.ts +1 -2
- package/dist/types/src/util/refs.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +50 -47
- package/src/components/FieldEditor/FieldEditor.stories.tsx +43 -24
- package/src/components/FieldEditor/FieldEditor.tsx +73 -77
- package/src/components/Form/Form.stories.tsx +147 -246
- package/src/components/Form/Form.tsx +347 -110
- package/src/components/Form/FormField.tsx +294 -0
- package/src/components/Form/FormFieldComponent.stories.tsx +65 -0
- package/src/components/Form/FormFieldComponent.tsx +171 -0
- package/src/components/Form/FormFieldSet.tsx +127 -0
- package/src/components/Form/README.md +3 -0
- package/src/components/Form/fields/ArrayField.tsx +149 -0
- package/src/components/Form/fields/BooleanField.tsx +22 -0
- package/src/components/Form/fields/GeoPointField.tsx +120 -0
- package/src/components/Form/fields/MarkdownField.tsx +78 -0
- package/src/components/Form/fields/NumberField.tsx +39 -0
- package/src/components/Form/fields/RefField.tsx +194 -0
- package/src/components/Form/fields/SelectField.tsx +65 -0
- package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx} +19 -16
- package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx} +24 -18
- package/src/components/Form/fields/TextAreaField.tsx +38 -0
- package/src/components/Form/fields/TextField.tsx +38 -0
- package/src/components/Form/{custom/TupleInput.tsx → fields/TupleField.tsx} +15 -8
- package/src/components/Form/fields/index.ts +15 -0
- package/src/components/Form/index.ts +3 -4
- package/src/components/ObjectPicker/ObjectPicker.stories.tsx +15 -12
- package/src/components/ObjectPicker/ObjectPicker.tsx +76 -62
- package/src/components/Settings/Settings.stories.tsx +56 -0
- package/src/components/Settings/Settings.tsx +230 -0
- package/src/components/{ControlSection → Settings}/index.ts +1 -1
- package/src/components/ViewEditor/ViewEditor.stories.tsx +42 -36
- package/src/components/ViewEditor/ViewEditor.test.tsx +5 -4
- package/src/components/ViewEditor/ViewEditor.tsx +295 -197
- package/src/components/index.ts +1 -1
- package/src/components/testing.tsx +12 -7
- package/src/hooks/index.ts +2 -3
- package/src/hooks/useFormHandler.ts +380 -0
- package/src/hooks/useKeyHandler.tsx +37 -0
- package/src/translations.ts +8 -6
- package/src/util/index.ts +1 -1
- package/src/util/properties.ts +18 -0
- package/src/util/refs.ts +7 -13
- package/dist/types/src/components/ControlSection/ControlSection.d.ts +0 -23
- package/dist/types/src/components/ControlSection/ControlSection.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/index.d.ts +0 -2
- package/dist/types/src/components/ControlSection/index.d.ts.map +0 -1
- package/dist/types/src/components/Form/ArrayField.d.ts +0 -16
- package/dist/types/src/components/Form/ArrayField.d.ts.map +0 -1
- package/dist/types/src/components/Form/Defaults.d.ts +0 -14
- package/dist/types/src/components/Form/Defaults.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormActions.d.ts +0 -9
- package/dist/types/src/components/Form/FormActions.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormContent.d.ts +0 -63
- package/dist/types/src/components/Form/FormContent.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormContext.d.ts +0 -23
- package/dist/types/src/components/Form/FormContext.d.ts.map +0 -1
- package/dist/types/src/components/Form/Input.d.ts +0 -29
- package/dist/types/src/components/Form/Input.d.ts.map +0 -1
- package/dist/types/src/components/Form/RefField.d.ts +0 -22
- package/dist/types/src/components/Form/RefField.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts +0 -4
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts +0 -4
- package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/TupleInput.d.ts +0 -6
- package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/index.d.ts +0 -4
- package/dist/types/src/components/Form/custom/index.d.ts.map +0 -1
- package/dist/types/src/components/Form/factory.d.ts +0 -8
- package/dist/types/src/components/Form/factory.d.ts.map +0 -1
- package/dist/types/src/hooks/useForm.d.ts +0 -67
- package/dist/types/src/hooks/useForm.d.ts.map +0 -1
- package/dist/types/src/hooks/useQueryRefOptions.d.ts +0 -29
- package/dist/types/src/hooks/useQueryRefOptions.d.ts.map +0 -1
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts +0 -8
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts.map +0 -1
- package/dist/types/src/util/schema.d.ts +0 -3
- package/dist/types/src/util/schema.d.ts.map +0 -1
- package/src/components/ControlSection/ControlSection.stories.tsx +0 -38
- package/src/components/ControlSection/ControlSection.tsx +0 -153
- package/src/components/Form/ArrayField.tsx +0 -127
- package/src/components/Form/Defaults.tsx +0 -205
- package/src/components/Form/FormActions.tsx +0 -59
- package/src/components/Form/FormContent.tsx +0 -362
- package/src/components/Form/FormContext.tsx +0 -110
- package/src/components/Form/Input.tsx +0 -54
- package/src/components/Form/RefField.tsx +0 -283
- package/src/components/Form/custom/GeoPointInput.tsx +0 -80
- package/src/components/Form/custom/index.ts +0 -7
- package/src/components/Form/factory.tsx +0 -34
- package/src/hooks/useForm.ts +0 -296
- package/src/hooks/useQueryRefOptions.ts +0 -62
- package/src/hooks/useRefQueryLookupHandler.ts +0 -39
- package/src/util/schema.ts +0 -12
|
@@ -0,0 +1,380 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
6
|
+
import type * as Schema from 'effect/Schema';
|
|
7
|
+
import type * as SchemaAST from 'effect/SchemaAST';
|
|
8
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
9
|
+
|
|
10
|
+
import { type AnyProperties } from '@dxos/echo/internal';
|
|
11
|
+
import { type JsonPath, createJsonPath, fromEffectValidationPath, getValue as getValue$ } from '@dxos/effect';
|
|
12
|
+
import { log } from '@dxos/log';
|
|
13
|
+
import { useDefaultValue } from '@dxos/react-ui';
|
|
14
|
+
import { type ValidationError, validateSchema } from '@dxos/schema';
|
|
15
|
+
import { type MaybePromise } from '@dxos/util';
|
|
16
|
+
|
|
17
|
+
export type FormFieldStatus = {
|
|
18
|
+
status?: 'error';
|
|
19
|
+
error?: string;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Form properties.
|
|
24
|
+
*/
|
|
25
|
+
export interface FormHandlerProps<T extends AnyProperties> {
|
|
26
|
+
/**
|
|
27
|
+
* Effect schema (Type literal).
|
|
28
|
+
*/
|
|
29
|
+
schema?: Schema.Schema<T, any>;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Values for the form if controlled.
|
|
33
|
+
*/
|
|
34
|
+
values?: Partial<T>;
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Default values for the form which will be used if values is not provided.
|
|
38
|
+
*/
|
|
39
|
+
defaultValues?: Partial<T>;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Auto-save the form when the values change.
|
|
43
|
+
*/
|
|
44
|
+
autoSave?: boolean;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Callback for value changes. Note: This is called even when values are invalid.
|
|
48
|
+
* Sometimes the parent component may want to know about changes even if the form is
|
|
49
|
+
* in an invalid state.
|
|
50
|
+
*/
|
|
51
|
+
onValuesChanged?: (values: Partial<T>, meta: FormUpdateMeta<T>) => void;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Custom validation function that runs only after schema validation passes.
|
|
55
|
+
* Use this for complex validation logic that can't be expressed in the schema.
|
|
56
|
+
* @returns Array of validation errors, or undefined if validation passes
|
|
57
|
+
*/
|
|
58
|
+
onValidate?: (values: T) => ValidationError[] | undefined;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Called when the form is submitted and passes validation.
|
|
62
|
+
*/
|
|
63
|
+
onSave?: (values: T, meta: FormUpdateMeta<T>) => MaybePromise<void>;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Called when the form is canceled.
|
|
67
|
+
*/
|
|
68
|
+
onCancel?: () => void;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export type FormUpdateMeta<T extends AnyProperties> = {
|
|
72
|
+
changed: FormHandler<T>['changed'];
|
|
73
|
+
isValid: boolean;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Form handler properties and methods.
|
|
78
|
+
*/
|
|
79
|
+
export type FormHandler<T extends AnyProperties> = Pick<FormHandlerProps<T>, 'schema' | 'autoSave'> & {
|
|
80
|
+
/** Initial values (which may not pass validation). */
|
|
81
|
+
values: Partial<T>;
|
|
82
|
+
|
|
83
|
+
/** Map of changed fields. */
|
|
84
|
+
changed: Record<JsonPath, boolean>;
|
|
85
|
+
// TODO(burdon): How is this different from above?
|
|
86
|
+
touched: Record<JsonPath, boolean>;
|
|
87
|
+
|
|
88
|
+
/** Map of error strings. */
|
|
89
|
+
errors: Record<JsonPath, string>;
|
|
90
|
+
|
|
91
|
+
/** Whether the form can be saved (i.e., data is valid). */
|
|
92
|
+
isValid: boolean;
|
|
93
|
+
// TODO(burdon): Why is this needed separately from isValid?
|
|
94
|
+
canSave: boolean;
|
|
95
|
+
|
|
96
|
+
onSave: () => void;
|
|
97
|
+
onCancel: () => void;
|
|
98
|
+
|
|
99
|
+
//
|
|
100
|
+
// Form field state management
|
|
101
|
+
//
|
|
102
|
+
|
|
103
|
+
getStatus: (path: string | (string | number)[]) => FormFieldStatus;
|
|
104
|
+
getValue: <V>(path: (string | number)[]) => V | undefined;
|
|
105
|
+
onBlur: (path: (string | number)[]) => void;
|
|
106
|
+
onValueChange: <V>(path: (string | number)[], type: SchemaAST.AST, value: V) => void;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Creates a hook for managing form state, including values, validation, and submission.
|
|
111
|
+
* Deeply integrated with `@dxos/schema` for schema-based validation.
|
|
112
|
+
*/
|
|
113
|
+
export const useFormHandler = <T extends AnyProperties>({
|
|
114
|
+
schema,
|
|
115
|
+
autoSave,
|
|
116
|
+
values: valuesProp,
|
|
117
|
+
defaultValues: defaultValuesProp,
|
|
118
|
+
onValuesChanged,
|
|
119
|
+
onValidate,
|
|
120
|
+
onSave,
|
|
121
|
+
onCancel,
|
|
122
|
+
...props
|
|
123
|
+
}: FormHandlerProps<T>): FormHandler<T> => {
|
|
124
|
+
const [changed, setChanged] = useState<Record<JsonPath, boolean>>({});
|
|
125
|
+
const [touched, setTouched] = useState<Record<JsonPath, boolean>>({});
|
|
126
|
+
const [errors, setErrors] = useState<Record<JsonPath, string>>({});
|
|
127
|
+
const [saving, setSaving] = useState(false);
|
|
128
|
+
const defaultValues = useDefaultValue<Partial<T>>(defaultValuesProp, () => ({}));
|
|
129
|
+
const [values$, setValues] = useControllableState<Partial<T>>({
|
|
130
|
+
prop: valuesProp,
|
|
131
|
+
defaultProp: defaultValues,
|
|
132
|
+
onChange: () => {
|
|
133
|
+
// Only reset when controlled: parent passed new values.
|
|
134
|
+
// Uncontrolled updates come from setValues in onValueChange.
|
|
135
|
+
if (valuesProp !== undefined) {
|
|
136
|
+
setValues(valuesProp ?? defaultValues);
|
|
137
|
+
setChanged({});
|
|
138
|
+
setTouched({});
|
|
139
|
+
setErrors({});
|
|
140
|
+
setSaving(false);
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
});
|
|
144
|
+
// TODO(wittjosiah): Upgrade @radix-ui/react-use-controllable-state.
|
|
145
|
+
const values = values$ as Partial<T>;
|
|
146
|
+
|
|
147
|
+
// Validate.
|
|
148
|
+
const validate = useCallback(
|
|
149
|
+
(values: Partial<T>): values is T => {
|
|
150
|
+
if (!schema) {
|
|
151
|
+
return false;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
let errors: ValidationError[] = validateSchema(schema, values) ?? [];
|
|
155
|
+
log('validate', { values, errors });
|
|
156
|
+
if (errors.length === 0 && onValidate) {
|
|
157
|
+
const validatedValues = values as T;
|
|
158
|
+
errors = onValidate(validatedValues) ?? [];
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
setErrors(flatMap(errors));
|
|
162
|
+
const valid = errors.length === 0;
|
|
163
|
+
return valid;
|
|
164
|
+
},
|
|
165
|
+
[schema, onValidate],
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
// Validate on schema change.
|
|
169
|
+
const [schemaChanged, setSchemaChanged] = useState(false);
|
|
170
|
+
useEffect(() => setSchemaChanged(true), [schema]);
|
|
171
|
+
useEffect(() => {
|
|
172
|
+
if (schemaChanged) {
|
|
173
|
+
validate(values);
|
|
174
|
+
setSchemaChanged(false);
|
|
175
|
+
}
|
|
176
|
+
}, [validate, values, schemaChanged]);
|
|
177
|
+
|
|
178
|
+
const isValid = useMemo(() => {
|
|
179
|
+
return Object.keys(errors).length === 0;
|
|
180
|
+
}, [errors]);
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* NOTE: We can submit if there is no touched field that has an error.
|
|
184
|
+
* If there's a validation message visible in the form, submit should be disabled.
|
|
185
|
+
*/
|
|
186
|
+
const canSave = useMemo(
|
|
187
|
+
() =>
|
|
188
|
+
!saving &&
|
|
189
|
+
// Check if any error paths that are touched have errors.
|
|
190
|
+
!Object.entries(touched).some(
|
|
191
|
+
([path, isTouched]) =>
|
|
192
|
+
isTouched &&
|
|
193
|
+
Object.keys(errors).some(
|
|
194
|
+
(errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`),
|
|
195
|
+
),
|
|
196
|
+
),
|
|
197
|
+
[touched, errors, saving],
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const handleSave = useCallback(async () => {
|
|
201
|
+
if (validate(values)) {
|
|
202
|
+
setSaving(true);
|
|
203
|
+
try {
|
|
204
|
+
await onSave?.(values, { changed, isValid });
|
|
205
|
+
} finally {
|
|
206
|
+
setSaving(false);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}, [values, validate, onSave, changed, isValid]);
|
|
210
|
+
|
|
211
|
+
const handleCancel = useCallback(() => {
|
|
212
|
+
onCancel?.();
|
|
213
|
+
}, [onCancel]);
|
|
214
|
+
|
|
215
|
+
//
|
|
216
|
+
// Fields.
|
|
217
|
+
//
|
|
218
|
+
|
|
219
|
+
const getStatus = useCallback<FormHandler<T>['getStatus']>(
|
|
220
|
+
(path) => {
|
|
221
|
+
const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
|
|
222
|
+
const [_, error] =
|
|
223
|
+
Object.entries(errors).find(
|
|
224
|
+
([errorPath]) =>
|
|
225
|
+
errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
|
|
226
|
+
) ?? [];
|
|
227
|
+
|
|
228
|
+
// Only show errors for touched fields.
|
|
229
|
+
const isTouched = touched[jsonPath as JsonPath];
|
|
230
|
+
if (!isTouched) {
|
|
231
|
+
return {
|
|
232
|
+
status: undefined,
|
|
233
|
+
error: undefined,
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
return {
|
|
238
|
+
status: error ? 'error' : undefined,
|
|
239
|
+
error: error ? (error ?? undefined) : undefined,
|
|
240
|
+
};
|
|
241
|
+
},
|
|
242
|
+
[errors, touched],
|
|
243
|
+
);
|
|
244
|
+
|
|
245
|
+
const getValue = useCallback<FormHandler<T>['getValue']>(
|
|
246
|
+
(path) => {
|
|
247
|
+
return getValue$(values, createJsonPath(path));
|
|
248
|
+
},
|
|
249
|
+
[values],
|
|
250
|
+
);
|
|
251
|
+
|
|
252
|
+
const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
|
|
253
|
+
(path, type, value) => {
|
|
254
|
+
log('onValueChange', { path, value });
|
|
255
|
+
|
|
256
|
+
const jsonPath = createJsonPath(path);
|
|
257
|
+
const pathArray = path;
|
|
258
|
+
let parsedValue = value as any;
|
|
259
|
+
try {
|
|
260
|
+
if (type._tag === 'NumberKeyword') {
|
|
261
|
+
parsedValue = parseFloat(value as string) || 0;
|
|
262
|
+
}
|
|
263
|
+
} catch (err) {
|
|
264
|
+
log.catch(err);
|
|
265
|
+
parsedValue = undefined;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// Create merged values for validation and callback. Form never mutates; parent applies via onValuesChanged.
|
|
269
|
+
const newValues = mergeAtPath(values, pathArray as (string | number)[], parsedValue) as Partial<T>;
|
|
270
|
+
|
|
271
|
+
// TODO(burdon): Check value has changed from original.
|
|
272
|
+
const newChanged = { [jsonPath]: true };
|
|
273
|
+
setChanged((prev) => ({ ...prev, ...newChanged }));
|
|
274
|
+
|
|
275
|
+
// Validate.
|
|
276
|
+
const isValid = validate(newValues);
|
|
277
|
+
|
|
278
|
+
// Notify parent; parent is responsible for applying the change.
|
|
279
|
+
onValuesChanged?.(newValues, { isValid, changed: newChanged });
|
|
280
|
+
|
|
281
|
+
// For uncontrolled mode, update internal state. Controlled mode relies on parent to pass new values.
|
|
282
|
+
if (valuesProp === undefined) {
|
|
283
|
+
setValues(newValues);
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
[values, validate, onValuesChanged, valuesProp],
|
|
287
|
+
);
|
|
288
|
+
|
|
289
|
+
const onBlur = useCallback(
|
|
290
|
+
async (path: (string | number)[]) => {
|
|
291
|
+
const jsonPath = createJsonPath(path);
|
|
292
|
+
|
|
293
|
+
// TODO(burdon): Check value has changed from original.
|
|
294
|
+
setTouched((touched) => ({ ...touched, [jsonPath]: true }));
|
|
295
|
+
const isValid = validate(values);
|
|
296
|
+
|
|
297
|
+
// Auto-save when a field is blurred and is valid.
|
|
298
|
+
if (Object.keys(changed).length > 0 && isValid && autoSave) {
|
|
299
|
+
await onSave?.(values as T, { changed, isValid });
|
|
300
|
+
}
|
|
301
|
+
},
|
|
302
|
+
[validate, values, changed, autoSave, onSave],
|
|
303
|
+
);
|
|
304
|
+
|
|
305
|
+
return useMemo<FormHandler<T>>(
|
|
306
|
+
() => ({
|
|
307
|
+
// State.
|
|
308
|
+
schema,
|
|
309
|
+
values,
|
|
310
|
+
errors,
|
|
311
|
+
touched,
|
|
312
|
+
changed,
|
|
313
|
+
isValid,
|
|
314
|
+
canSave,
|
|
315
|
+
autoSave,
|
|
316
|
+
|
|
317
|
+
// Actions.
|
|
318
|
+
onSave: handleSave,
|
|
319
|
+
onCancel: handleCancel,
|
|
320
|
+
|
|
321
|
+
// Field utils.
|
|
322
|
+
getStatus,
|
|
323
|
+
getValue,
|
|
324
|
+
onBlur,
|
|
325
|
+
onValueChange,
|
|
326
|
+
|
|
327
|
+
...props,
|
|
328
|
+
}),
|
|
329
|
+
[
|
|
330
|
+
schema,
|
|
331
|
+
values,
|
|
332
|
+
errors,
|
|
333
|
+
touched,
|
|
334
|
+
changed,
|
|
335
|
+
canSave,
|
|
336
|
+
isValid,
|
|
337
|
+
getStatus,
|
|
338
|
+
getValue,
|
|
339
|
+
onBlur,
|
|
340
|
+
onValueChange,
|
|
341
|
+
onSave,
|
|
342
|
+
onCancel,
|
|
343
|
+
],
|
|
344
|
+
);
|
|
345
|
+
};
|
|
346
|
+
|
|
347
|
+
/**
|
|
348
|
+
* Creates a new object with value at path. Does not mutate source.
|
|
349
|
+
* Preserves arrays when path segments are numeric indices.
|
|
350
|
+
*/
|
|
351
|
+
const mergeAtPath = (obj: any, path: readonly (string | number)[], value: any): any => {
|
|
352
|
+
if (path.length === 0) {
|
|
353
|
+
return value;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
const [head, ...rest] = path;
|
|
357
|
+
const child = rest.length === 0 ? value : mergeAtPath(obj?.[head], rest, value);
|
|
358
|
+
|
|
359
|
+
if (Array.isArray(obj)) {
|
|
360
|
+
const copy = [...obj];
|
|
361
|
+
copy[head as number] = child;
|
|
362
|
+
return copy;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
return { ...obj, [head]: child };
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
const flatMap = (errors: ValidationError[]) => {
|
|
369
|
+
return errors.reduce(
|
|
370
|
+
(result, { path, message }) => {
|
|
371
|
+
// Convert the validation error path format to our JsonPath format.
|
|
372
|
+
const jsonPath = fromEffectValidationPath(path);
|
|
373
|
+
if (!(jsonPath in result)) {
|
|
374
|
+
result[jsonPath] = message;
|
|
375
|
+
}
|
|
376
|
+
return result;
|
|
377
|
+
},
|
|
378
|
+
{} as Record<JsonPath, string>,
|
|
379
|
+
);
|
|
380
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useCallback, useEffect } from 'react';
|
|
6
|
+
|
|
7
|
+
import { addEventListener } from '@dxos/async';
|
|
8
|
+
|
|
9
|
+
import { type FormHandler } from './useFormHandler';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Key handler.
|
|
13
|
+
*/
|
|
14
|
+
export const useKeyHandler = (formElement: HTMLDivElement | null, form: FormHandler<any>) => {
|
|
15
|
+
const handleKeyDown = useCallback(
|
|
16
|
+
(event: KeyboardEvent) => {
|
|
17
|
+
switch (event.key) {
|
|
18
|
+
case 'Enter': {
|
|
19
|
+
if (event.metaKey && form.canSave) {
|
|
20
|
+
form.onSave();
|
|
21
|
+
}
|
|
22
|
+
break;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
[form.isValid, form.canSave, form.onSave, form.autoSave],
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (!formElement) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// TODO(burdon): Move to @dxos/dom-util.
|
|
35
|
+
return addEventListener(formElement, 'keydown', handleKeyDown);
|
|
36
|
+
}, [formElement, handleKeyDown]);
|
|
37
|
+
};
|
package/src/translations.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import { type Resource } from '@dxos/react-ui';
|
|
6
6
|
|
|
7
|
-
export const translationKey = 'react-ui-form';
|
|
7
|
+
export const translationKey = '@dxos/react-ui-form';
|
|
8
8
|
|
|
9
9
|
export const translations = [
|
|
10
10
|
{
|
|
@@ -32,7 +32,10 @@ export const translations = [
|
|
|
32
32
|
'ref field placeholder_one': 'Select…',
|
|
33
33
|
'ref field placeholder_other': 'Select items…',
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
'example placeholder': 'Example',
|
|
36
|
+
'latitude placeholder': 'Latitude (e.g., 40.7128)',
|
|
37
|
+
'longitude placeholder': 'Longitude (e.g., -74.0060)',
|
|
38
|
+
|
|
36
39
|
'cancel button label': 'Cancel',
|
|
37
40
|
'save button label': 'Save',
|
|
38
41
|
|
|
@@ -66,11 +69,11 @@ export const translations = [
|
|
|
66
69
|
'format url': 'URL',
|
|
67
70
|
'format uuid': 'UUID',
|
|
68
71
|
|
|
69
|
-
//
|
|
72
|
+
// GeoPointField.
|
|
70
73
|
'latitude label': 'Latitude',
|
|
71
74
|
'longitude label': 'Longitude',
|
|
72
75
|
|
|
73
|
-
//
|
|
76
|
+
// SelectOptionsField.
|
|
74
77
|
'select option label': 'Label',
|
|
75
78
|
'select option label placeholder': 'Option label',
|
|
76
79
|
'select option color': 'Color',
|
|
@@ -79,8 +82,7 @@ export const translations = [
|
|
|
79
82
|
|
|
80
83
|
// System schema message.
|
|
81
84
|
'system schema title': 'System type',
|
|
82
|
-
'system schema description':
|
|
83
|
-
'This is a system type and cannot be modified, though the view can still be configured.',
|
|
85
|
+
'system schema description': 'System type: cannot add or remove fields.',
|
|
84
86
|
},
|
|
85
87
|
},
|
|
86
88
|
},
|
package/src/util/index.ts
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Option from 'effect/Option';
|
|
6
|
+
import type * as SchemaAST from 'effect/SchemaAST';
|
|
7
|
+
|
|
8
|
+
import { Annotation } from '@dxos/echo';
|
|
9
|
+
import { type SchemaProperty, getProperties } from '@dxos/effect';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Get the property types of an AST and filter out properties that are not form inputs.
|
|
13
|
+
*/
|
|
14
|
+
export const getFormProperties = (ast: SchemaAST.AST): SchemaProperty[] => {
|
|
15
|
+
return getProperties(ast).filter((prop) =>
|
|
16
|
+
Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)),
|
|
17
|
+
);
|
|
18
|
+
};
|
package/src/util/refs.ts
CHANGED
|
@@ -4,33 +4,27 @@
|
|
|
4
4
|
|
|
5
5
|
import type * as SchemaAST from 'effect/SchemaAST';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { type SchemaProperty } from '@dxos/schema';
|
|
10
|
-
|
|
11
|
-
import { findArrayElementType } from './schema';
|
|
7
|
+
import { Ref } from '@dxos/echo';
|
|
8
|
+
import { getArrayElementType, isArrayType } from '@dxos/effect';
|
|
12
9
|
|
|
13
10
|
type RefProps = {
|
|
14
11
|
ast: SchemaAST.AST;
|
|
15
12
|
isArray: boolean;
|
|
16
13
|
};
|
|
17
14
|
|
|
18
|
-
export const getRefProps = (
|
|
19
|
-
const { ast, format, array } = property;
|
|
20
|
-
|
|
15
|
+
export const getRefProps = (ast: SchemaAST.AST): RefProps | undefined => {
|
|
21
16
|
// Array of references.
|
|
22
|
-
if (
|
|
23
|
-
const elementType =
|
|
17
|
+
if (isArrayType(ast)) {
|
|
18
|
+
const elementType = getArrayElementType(ast);
|
|
24
19
|
if (elementType) {
|
|
25
|
-
|
|
26
|
-
if (annotation) {
|
|
20
|
+
if (Ref.isRefType(elementType)) {
|
|
27
21
|
return { ast: elementType, isArray: true };
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
24
|
}
|
|
31
25
|
|
|
32
26
|
// Direct reference.
|
|
33
|
-
if (
|
|
27
|
+
if (Ref.isRefType(ast)) {
|
|
34
28
|
return { ast, isArray: false };
|
|
35
29
|
}
|
|
36
30
|
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
|
|
2
|
-
import { type ButtonProps, type Label, type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
-
export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
4
|
-
export declare const ControlPage: ({ children, classNames, ...props }: ControlPageProps) => React.JSX.Element;
|
|
5
|
-
export type ControlSectionProps = PropsWithChildren<{
|
|
6
|
-
title: Label;
|
|
7
|
-
description?: Label;
|
|
8
|
-
}>;
|
|
9
|
-
export declare const ControlSection: ({ title, description, children }: ControlSectionProps) => React.JSX.Element;
|
|
10
|
-
export declare const ControlSectionHeading: ({ title, description }: Omit<ControlSectionProps, "children">) => React.JSX.Element;
|
|
11
|
-
export declare const ControlGroupButton: ({ classNames, ...props }: ButtonProps) => React.JSX.Element;
|
|
12
|
-
export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
|
|
13
|
-
export declare const ControlGroup: ({ children, classNames }: ControlGroupProps) => React.JSX.Element;
|
|
14
|
-
export declare const ControlFrame: ({ children }: ControlGroupProps) => React.JSX.Element;
|
|
15
|
-
export declare const controlItemClasses: string;
|
|
16
|
-
export type ControlItemProps = PropsWithChildren<{
|
|
17
|
-
title: Label;
|
|
18
|
-
description?: Label;
|
|
19
|
-
}>;
|
|
20
|
-
export declare const ControlItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
|
|
21
|
-
export declare const ControlItemInput: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
|
|
22
|
-
export declare const ControlFrameItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
|
|
23
|
-
//# sourceMappingURL=ControlSection.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ControlSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,KAAK,EACV,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEhF,eAAO,MAAM,WAAW,GAAI,oCAAoC,gBAAgB,sBAQ/E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,kCAAkC,mBAAmB,sBAOnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wBAAwB,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,sBAYlG,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0BAA0B,WAAW,sBAEvE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,0BAA0B,iBAAiB,sBAWvE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,iBAAiB,sBAU3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAKH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,kCAAkC,gBAAgB,sBAY7E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAUlF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ControlSection.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type SchemaProperty } from '@dxos/schema';
|
|
3
|
-
import { type ComponentLookup } from './Form';
|
|
4
|
-
import { type FormFieldProps } from './FormContent';
|
|
5
|
-
import { type FormInputStateProps } from './FormContext';
|
|
6
|
-
import { type InputComponent } from './Input';
|
|
7
|
-
type ArrayFieldProps = {
|
|
8
|
-
property: SchemaProperty<any>;
|
|
9
|
-
inputProps: FormInputStateProps;
|
|
10
|
-
path?: (string | number)[];
|
|
11
|
-
Custom?: Partial<Record<string, InputComponent>>;
|
|
12
|
-
lookupComponent?: ComponentLookup;
|
|
13
|
-
} & Pick<FormFieldProps, 'readonly'>;
|
|
14
|
-
export declare const ArrayField: ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => React.JSX.Element | null;
|
|
15
|
-
export {};
|
|
16
|
-
//# sourceMappingURL=ArrayField.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/ArrayField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,cAAc,CAAC;AAKxE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,KAAK,mBAAmB,EAAiB,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,SAAS,CAAC;AAE3D,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC9B,UAAU,EAAE,mBAAmB,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAErC,eAAO,MAAM,UAAU,GAAI,mEAAmE,eAAe,6BAgG5G,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type InputProps } from './Input';
|
|
3
|
-
export declare const TextInput: ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue, onValueChange, onBlur, }: InputProps) => React.JSX.Element | null;
|
|
4
|
-
export declare const NumberInput: ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue, onValueChange, onBlur, }: InputProps) => React.JSX.Element | null;
|
|
5
|
-
export declare const BooleanInput: ({ type, label, inputOnly, getStatus, getValue, onValueChange, readonly }: InputProps) => React.JSX.Element;
|
|
6
|
-
export type SelectInputOptions = InputProps & {
|
|
7
|
-
options?: Array<{
|
|
8
|
-
value: string | number;
|
|
9
|
-
label?: string;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
export declare const SelectInput: ({ type, label, inputOnly, readonly, placeholder, options, getStatus, getValue, onValueChange, }: SelectInputOptions) => React.JSX.Element | null;
|
|
13
|
-
export declare const MarkdownInput: ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue, onValueChange, onBlur, }: InputProps) => React.JSX.Element;
|
|
14
|
-
//# sourceMappingURL=Defaults.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Defaults.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Defaults.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,SAAS,GAAI,gGAUvB,UAAU,6BAsBZ,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,gGAUzB,UAAU,6BAuBZ,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,0EAA0E,UAAU,sBAgBhH,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,iGAUzB,kBAAkB,6BAiCpB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,gGAU3B,UAAU,sBA8CZ,CAAC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
|
|
3
|
-
export type FormActionsProps = {
|
|
4
|
-
readonly?: boolean;
|
|
5
|
-
onCancel?: () => void;
|
|
6
|
-
outerSpacing?: FormOuterSpacing;
|
|
7
|
-
};
|
|
8
|
-
export declare const FormActions: ({ readonly, onCancel, outerSpacing }: FormActionsProps) => React.JSX.Element;
|
|
9
|
-
//# sourceMappingURL=FormActions.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormActions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC;AAE1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,sCAA6C,gBAAgB,sBAoCxF,CAAC"}
|