@overmap-ai/core 1.0.38-component-fields.0 → 1.0.38-component-fields.2
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/dist/forms/builder/FieldWithActions.d.ts +0 -1
- package/dist/forms/builder/FormBuilder.d.ts +5 -0
- package/dist/forms/builder/utils.d.ts +0 -2
- package/dist/overmap-core.js +77 -88
- package/dist/overmap-core.js.map +1 -1
- package/dist/overmap-core.umd.cjs +77 -88
- package/dist/overmap-core.umd.cjs.map +1 -1
- package/dist/store/slices/userFormSlice.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,6 @@ interface FieldWithActionsProps {
|
|
|
4
4
|
field: ISerializedField;
|
|
5
5
|
index: number;
|
|
6
6
|
sectionIndex: number;
|
|
7
|
-
takenLabels: string[];
|
|
8
7
|
remove: () => void;
|
|
9
8
|
}
|
|
10
9
|
export declare const FieldWithActions: import("react").MemoExoticComponent<(props: FieldWithActionsProps) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -6,6 +6,11 @@ interface FormBuilderProps {
|
|
|
6
6
|
onSave: FormBuilderSaveHandler;
|
|
7
7
|
/** A revision of an existing form to edit. To create a new form, pass `undefined`. */
|
|
8
8
|
revision?: UserFormRevision;
|
|
9
|
+
initialTitle?: string;
|
|
10
|
+
/** @default true */
|
|
11
|
+
showExplainerText?: boolean;
|
|
12
|
+
/** @default false */
|
|
13
|
+
showSectionsOnly?: boolean;
|
|
9
14
|
}
|
|
10
15
|
export declare const FormBuilder: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<FormBuilderProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
11
16
|
export {};
|
|
@@ -13,8 +13,6 @@ export declare function remove<T>(list: T[], index: number): T[];
|
|
|
13
13
|
export declare const makeIdentifier: (existing: unknown, label: string) => string;
|
|
14
14
|
export declare const findFieldByIdentifier: (fields: ISerializedField[], identifier?: string) => ISerializedField | null;
|
|
15
15
|
export declare const makeConditionalSourceFields: (sections: SerializedFieldSection[], index: number) => (import("../typings").SerializedTextField | import("../typings").SerializedBooleanField | import("../typings").SerializedNumberField | import("../typings").SerializedDateField | import("../typings").SerializedStringField | import("../typings").SerializedSelectField | import("../typings").SerializedMultiStringField | import("../typings").SerializedMultiSelectField | import("../typings").SerializedUploadField)[];
|
|
16
|
-
export declare const getTakenFieldLabels: (fields: SerializedFieldSection[]) => string[];
|
|
17
|
-
export declare const incrementFieldLabel: (label: string, takenLabels: string[]) => string;
|
|
18
16
|
export type NewFieldInitialValues = Omit<ISerializedField, "identifier"> & {
|
|
19
17
|
label: string;
|
|
20
18
|
};
|
package/dist/overmap-core.js
CHANGED
|
@@ -9070,21 +9070,10 @@ const findFieldByIdentifier = (fields, identifier) => {
|
|
|
9070
9070
|
const makeConditionalSourceFields = (sections, index2) => {
|
|
9071
9071
|
return sections.filter((_, i) => i < index2).flatMap((field) => field.fields);
|
|
9072
9072
|
};
|
|
9073
|
-
const
|
|
9074
|
-
|
|
9075
|
-
};
|
|
9076
|
-
const incrementFieldLabel = (label, takenLabels) => {
|
|
9077
|
-
let count = 1;
|
|
9078
|
-
let newLabel = `${label} (${count})`;
|
|
9079
|
-
while (takenLabels.includes(newLabel)) {
|
|
9080
|
-
newLabel = `${label} (${++count})`;
|
|
9081
|
-
}
|
|
9082
|
-
return newLabel;
|
|
9083
|
-
};
|
|
9084
|
-
const createNewField = (parentPath, index2, initialValues2, values, setFieldValue) => {
|
|
9085
|
-
const { label } = initialValues2;
|
|
9073
|
+
const createNewField = (parentPath, index2, initialValues, values, setFieldValue) => {
|
|
9074
|
+
const { label } = initialValues;
|
|
9086
9075
|
const newField = {
|
|
9087
|
-
...
|
|
9076
|
+
...initialValues,
|
|
9088
9077
|
identifier: makeIdentifier(null, label)
|
|
9089
9078
|
};
|
|
9090
9079
|
const parent = get(values, parentPath);
|
|
@@ -9098,11 +9087,11 @@ const createNewField = (parentPath, index2, initialValues2, values, setFieldValu
|
|
|
9098
9087
|
void setFieldValue(parentPath, updatedFields).then();
|
|
9099
9088
|
};
|
|
9100
9089
|
const createNewEmptySection = (index2, values, setFieldValue) => {
|
|
9101
|
-
const
|
|
9090
|
+
const initialValues = {
|
|
9102
9091
|
...emptySection(),
|
|
9103
9092
|
label: ""
|
|
9104
9093
|
};
|
|
9105
|
-
createNewField("fields", index2,
|
|
9094
|
+
createNewField("fields", index2, initialValues, values, setFieldValue);
|
|
9106
9095
|
};
|
|
9107
9096
|
const useFieldReordering = () => {
|
|
9108
9097
|
const { showError } = useToast();
|
|
@@ -10590,19 +10579,19 @@ PatchField.displayName = "PatchField";
|
|
|
10590
10579
|
const PatchFormProvider = memo(
|
|
10591
10580
|
forwardRef((props, ref) => {
|
|
10592
10581
|
const { children, schema, values, onPatch, onError, requiresDiff = true, onDirtyChange, ...rest } = props;
|
|
10593
|
-
const
|
|
10582
|
+
const initialValues = useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
|
|
10594
10583
|
const getDiff = useCallback(
|
|
10595
10584
|
(values2) => {
|
|
10596
10585
|
const diff = {};
|
|
10597
10586
|
for (const key in values2) {
|
|
10598
10587
|
const value = values2[key];
|
|
10599
|
-
if (value !==
|
|
10588
|
+
if (value !== initialValues[key] && value !== void 0) {
|
|
10600
10589
|
diff[key] = value;
|
|
10601
10590
|
}
|
|
10602
10591
|
}
|
|
10603
10592
|
return diff;
|
|
10604
10593
|
},
|
|
10605
|
-
[
|
|
10594
|
+
[initialValues]
|
|
10606
10595
|
);
|
|
10607
10596
|
const handlePatch = useCallback(
|
|
10608
10597
|
(values2) => {
|
|
@@ -10628,7 +10617,7 @@ const PatchFormProvider = memo(
|
|
|
10628
10617
|
[schema, onDirtyChange, onError, getDiff]
|
|
10629
10618
|
);
|
|
10630
10619
|
const formik = useFormik({
|
|
10631
|
-
initialValues
|
|
10620
|
+
initialValues,
|
|
10632
10621
|
onSubmit: handlePatch,
|
|
10633
10622
|
validate,
|
|
10634
10623
|
// only validate the entire form on submit
|
|
@@ -10646,9 +10635,9 @@ const PatchFormProvider = memo(
|
|
|
10646
10635
|
const { errors, resetForm } = formik;
|
|
10647
10636
|
useEffect(() => {
|
|
10648
10637
|
if (hasKeys(errors)) {
|
|
10649
|
-
resetForm({ values:
|
|
10638
|
+
resetForm({ values: initialValues, errors: {} });
|
|
10650
10639
|
}
|
|
10651
|
-
}, [errors,
|
|
10640
|
+
}, [errors, initialValues, resetForm]);
|
|
10652
10641
|
return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit: formik.handleSubmit, onChange: handleChange, children }) });
|
|
10653
10642
|
})
|
|
10654
10643
|
);
|
|
@@ -11097,7 +11086,7 @@ const FieldBuilder = memo((props) => {
|
|
|
11097
11086
|
});
|
|
11098
11087
|
FieldBuilder.displayName = "FieldBuilder";
|
|
11099
11088
|
const FieldWithActions = memo((props) => {
|
|
11100
|
-
const { field, index: index2, sectionIndex,
|
|
11089
|
+
const { field, index: index2, sectionIndex, remove: remove2 } = props;
|
|
11101
11090
|
const { setFieldValue, values } = useFormikContext();
|
|
11102
11091
|
const { reorderField } = useFieldReordering();
|
|
11103
11092
|
const { showError } = useToast();
|
|
@@ -11114,10 +11103,10 @@ const FieldWithActions = memo((props) => {
|
|
|
11114
11103
|
const label = field.label ?? "Unlabelled field";
|
|
11115
11104
|
const duplicatedField = {
|
|
11116
11105
|
...field,
|
|
11117
|
-
label
|
|
11106
|
+
label
|
|
11118
11107
|
};
|
|
11119
11108
|
createNewField(parentPath, index2 + 1, duplicatedField, values, setFieldValue);
|
|
11120
|
-
}, [field,
|
|
11109
|
+
}, [field, parentPath, index2, values, setFieldValue]);
|
|
11121
11110
|
const moveField = useCallback(
|
|
11122
11111
|
(direction) => {
|
|
11123
11112
|
const srcSectionIndex = sectionIndex;
|
|
@@ -11204,7 +11193,6 @@ const FieldSectionWithActions = memo((props) => {
|
|
|
11204
11193
|
const { setFieldValue, values } = useFormikContext();
|
|
11205
11194
|
const alertDialog = useAlertDialog();
|
|
11206
11195
|
const { reorderSection } = useFieldReordering();
|
|
11207
|
-
const takenFieldLabels = getTakenFieldLabels(values.fields);
|
|
11208
11196
|
const removeSectionConditions = useCallback(
|
|
11209
11197
|
(sectionsToUpdate, allSections) => {
|
|
11210
11198
|
for (const section of sectionsToUpdate) {
|
|
@@ -11308,18 +11296,15 @@ const FieldSectionWithActions = memo((props) => {
|
|
|
11308
11296
|
);
|
|
11309
11297
|
const duplicateSection = useCallback(() => {
|
|
11310
11298
|
const fieldLabel = field.label ?? "Untitled section";
|
|
11311
|
-
const
|
|
11312
|
-
const newFields = field.fields.map((f) => {
|
|
11313
|
-
const newLabel = incrementFieldLabel(f.label, takenFieldLabels);
|
|
11299
|
+
const newFields = field.fields.map((oldField) => {
|
|
11314
11300
|
return {
|
|
11315
|
-
...
|
|
11316
|
-
|
|
11317
|
-
identifier: makeIdentifier(null, newLabel)
|
|
11301
|
+
...oldField,
|
|
11302
|
+
identifier: makeIdentifier(null, oldField.label)
|
|
11318
11303
|
};
|
|
11319
11304
|
});
|
|
11320
|
-
const duplicatedField = { ...field, label:
|
|
11305
|
+
const duplicatedField = { ...field, label: fieldLabel, fields: newFields };
|
|
11321
11306
|
createNewField("fields", sectionIndex + 1, duplicatedField, values, setFieldValue);
|
|
11322
|
-
}, [field,
|
|
11307
|
+
}, [field, sectionIndex, values, setFieldValue]);
|
|
11323
11308
|
const handleCreateField = useCallback(
|
|
11324
11309
|
(type) => {
|
|
11325
11310
|
createNewField(
|
|
@@ -11366,8 +11351,7 @@ const FieldSectionWithActions = memo((props) => {
|
|
|
11366
11351
|
sectionIndex,
|
|
11367
11352
|
remove: () => {
|
|
11368
11353
|
removeField(i);
|
|
11369
|
-
}
|
|
11370
|
-
takenLabels: takenFieldLabels
|
|
11354
|
+
}
|
|
11371
11355
|
},
|
|
11372
11356
|
child.identifier
|
|
11373
11357
|
)),
|
|
@@ -11542,17 +11526,12 @@ const FieldsEditor = memo(() => {
|
|
|
11542
11526
|
) }) });
|
|
11543
11527
|
});
|
|
11544
11528
|
FieldsEditor.displayName = "FieldsEditor";
|
|
11545
|
-
const initialValues = {
|
|
11546
|
-
title: "",
|
|
11547
|
-
description: "",
|
|
11548
|
-
fields: [{ ...emptySection(makeIdentifier(null, "")), label: "" }]
|
|
11549
|
-
};
|
|
11550
11529
|
const previewSubmit = () => {
|
|
11551
11530
|
alert("This is a form preview, your data will not be saved.");
|
|
11552
11531
|
};
|
|
11553
11532
|
const FormBuilder = memo(
|
|
11554
11533
|
forwardRef((props, ref) => {
|
|
11555
|
-
const { onCancel, onSave, revision } = props;
|
|
11534
|
+
const { onCancel, onSave, revision, initialTitle, showExplainerText = true, showSectionsOnly = false } = props;
|
|
11556
11535
|
const { showError } = useToast();
|
|
11557
11536
|
const validate = useCallback(
|
|
11558
11537
|
(form) => {
|
|
@@ -11598,6 +11577,14 @@ const FormBuilder = memo(
|
|
|
11598
11577
|
},
|
|
11599
11578
|
[showError]
|
|
11600
11579
|
);
|
|
11580
|
+
const initialValues = useMemo(
|
|
11581
|
+
() => ({
|
|
11582
|
+
title: initialTitle ?? "",
|
|
11583
|
+
description: "",
|
|
11584
|
+
fields: [{ ...emptySection(makeIdentifier(null, "")), label: "" }]
|
|
11585
|
+
}),
|
|
11586
|
+
[initialTitle]
|
|
11587
|
+
);
|
|
11601
11588
|
const formik = useFormik({
|
|
11602
11589
|
initialValues: wrapRootFieldsWithFieldSection(revision) ?? initialValues,
|
|
11603
11590
|
validate,
|
|
@@ -11618,7 +11605,7 @@ const FormBuilder = memo(
|
|
|
11618
11605
|
] }) })
|
|
11619
11606
|
] }),
|
|
11620
11607
|
/* @__PURE__ */ jsxs(Tabs.Content, { value: "edit", children: [
|
|
11621
|
-
/* @__PURE__ */ jsxs(Text, { children: [
|
|
11608
|
+
showExplainerText && /* @__PURE__ */ jsxs(Text, { children: [
|
|
11622
11609
|
"Create your form using various field types. Sections can be",
|
|
11623
11610
|
" ",
|
|
11624
11611
|
/* @__PURE__ */ jsx("strong", { children: "conditionally rendered" }),
|
|
@@ -11628,55 +11615,57 @@ const FormBuilder = memo(
|
|
|
11628
11615
|
] }),
|
|
11629
11616
|
/* @__PURE__ */ jsx(Flex, { asChild: true, direction: "column", gap: "2", mt: "3", children: /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: formik.handleSubmit, children: [
|
|
11630
11617
|
/* @__PURE__ */ jsxs(FormikProvider, { value: formik, children: [
|
|
11631
|
-
/* @__PURE__ */
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
|
|
11636
|
-
|
|
11637
|
-
|
|
11638
|
-
|
|
11639
|
-
|
|
11640
|
-
|
|
11641
|
-
|
|
11642
|
-
|
|
11643
|
-
|
|
11644
|
-
|
|
11645
|
-
|
|
11646
|
-
|
|
11647
|
-
|
|
11648
|
-
|
|
11649
|
-
|
|
11650
|
-
|
|
11651
|
-
|
|
11652
|
-
|
|
11653
|
-
|
|
11654
|
-
|
|
11655
|
-
|
|
11656
|
-
|
|
11657
|
-
|
|
11658
|
-
|
|
11659
|
-
|
|
11660
|
-
|
|
11661
|
-
|
|
11662
|
-
|
|
11663
|
-
|
|
11664
|
-
|
|
11665
|
-
|
|
11666
|
-
|
|
11667
|
-
|
|
11668
|
-
|
|
11669
|
-
|
|
11670
|
-
|
|
11671
|
-
|
|
11672
|
-
|
|
11673
|
-
|
|
11674
|
-
|
|
11618
|
+
!showSectionsOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11619
|
+
/* @__PURE__ */ jsx(
|
|
11620
|
+
PatchField,
|
|
11621
|
+
{
|
|
11622
|
+
name: "title",
|
|
11623
|
+
render: ({ setValue, value, meta }) => /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsx(
|
|
11624
|
+
Input,
|
|
11625
|
+
{
|
|
11626
|
+
className: classNames$1(styles$7.title, {
|
|
11627
|
+
[styles$7.error]: meta.error
|
|
11628
|
+
}),
|
|
11629
|
+
placeholder: "Form title",
|
|
11630
|
+
value,
|
|
11631
|
+
onChange: (event) => {
|
|
11632
|
+
setValue(event.target.value);
|
|
11633
|
+
},
|
|
11634
|
+
maxLength: 100,
|
|
11635
|
+
showInputLength: false,
|
|
11636
|
+
variant: "ghost",
|
|
11637
|
+
size: "large"
|
|
11638
|
+
}
|
|
11639
|
+
) })
|
|
11640
|
+
}
|
|
11641
|
+
),
|
|
11642
|
+
/* @__PURE__ */ jsx(
|
|
11643
|
+
PatchField,
|
|
11644
|
+
{
|
|
11645
|
+
name: "description",
|
|
11646
|
+
render: ({ setValue, value }) => /* @__PURE__ */ jsx(
|
|
11647
|
+
TextArea,
|
|
11648
|
+
{
|
|
11649
|
+
className: styles$7.description,
|
|
11650
|
+
placeholder: "Explain the purpose of this form",
|
|
11651
|
+
value,
|
|
11652
|
+
onChange: (event) => {
|
|
11653
|
+
setValue(event.target.value);
|
|
11654
|
+
},
|
|
11655
|
+
resize: "vertical",
|
|
11656
|
+
maxLength: 1e3,
|
|
11657
|
+
showInputLength: false,
|
|
11658
|
+
variant: "ghost"
|
|
11659
|
+
}
|
|
11660
|
+
)
|
|
11661
|
+
}
|
|
11662
|
+
)
|
|
11663
|
+
] }),
|
|
11675
11664
|
/* @__PURE__ */ jsx(FieldsEditor, {}),
|
|
11676
11665
|
/* @__PURE__ */ jsx(Text, { severity: "danger", size: "1", children: typeof formik.errors.fields === "string" && formik.errors.fields })
|
|
11677
11666
|
] }),
|
|
11678
11667
|
/* @__PURE__ */ jsxs(Flex, { className: styles$7.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
|
|
11679
|
-
/* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
|
|
11668
|
+
onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
|
|
11680
11669
|
/* @__PURE__ */ jsx(Button, { type: "submit", children: "Save form" })
|
|
11681
11670
|
] })
|
|
11682
11671
|
] }) })
|