@firecms/collection_editor 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.4

package/src/ui/collection_editor/PropertyTree.tsx

@@ -1,124 +1,143 @@
+import React, { useCallback } from "react";
+import equal from "react-fast-compare"
+
 import {
     AdditionalFieldDelegate,
     CMSType,
     ErrorBoundary,
     isPropertyBuilder,
     PropertiesOrBuilders,
-    PropertyOrBuilder,
+    PropertyOrBuilder
 } from "@firecms/core";
 import { AutoAwesomeIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
-import { getFullId, idToPropertiesPath } from "./util";
-import { getIn } from "formik";
+import { getFullId, getFullIdPath } from "./util";
 import { editableProperty } from "../../utils/entities";
-import { useCallback } from "react";
-
-export function PropertyTree<M extends {
-    [Key: string]: CMSType
-}>({
-       namespace,
-       selectedPropertyKey,
-       onPropertyClick,
-       properties,
-       propertiesOrder: propertiesOrderProp,
-       additionalFields,
-       errors,
-       onPropertyMove,
-       onPropertyRemove,
-       className,
-       inferredPropertyKeys,
-       collectionEditable,
-   }: {
-    namespace?: string;
-    selectedPropertyKey?: string;
-    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
-    properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[];
-    additionalFields?: AdditionalFieldDelegate<M>[];
-    errors: Record<string, any>;
-    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
-    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
-    className?: string;
-    inferredPropertyKeys?: string[];
-    collectionEditable: boolean;
-}) {
 
-    const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
-
-    const onDragEnd = useCallback((result: any) => {
-        // dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-        const startIndex = result.source.index;
-        const endIndex = result.destination.index;
-
-        const newPropertiesOrder = Array.from(propertiesOrder);
-        const [removed] = newPropertiesOrder.splice(startIndex, 1);
-        newPropertiesOrder.splice(endIndex, 0, removed);
-        if (onPropertyMove)
-            onPropertyMove(newPropertiesOrder, namespace);
-    }, [namespace, onPropertyMove, propertiesOrder])
-
-    return (
-        <>
-
-            <DragDropContext onDragEnd={onDragEnd}>
-                <Droppable droppableId={`droppable_${namespace}`}>
-                    {(droppableProvided, droppableSnapshot) => (
-                        <div
-                            {...droppableProvided.droppableProps}
-                            ref={droppableProvided.innerRef}
-                            className={className}>
-                            {propertiesOrder && propertiesOrder
-                                // .filter((propertyKey) => Boolean(properties[propertyKey]))
-                                .map((propertyKey: string, index: number) => {
-                                    const property = properties[propertyKey] as PropertyOrBuilder;
-                                    const additionalField = additionalFields?.find(field => field.key === propertyKey);
-
-                                    if (!property && !additionalField) {
-                                        console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-                                        return null;
-                                    }
-                                    return (
-                                        <Draggable
-                                            key={`array_field_${namespace}_${propertyKey}}`}
-                                            draggableId={`array_field_${namespace}_${propertyKey}}`}
-                                            index={index}>
-                                            {(provided, snapshot) => {
-                                                return (
-                                                    <ErrorBoundary>
-                                                        <PropertyTreeEntry
-                                                            propertyKey={propertyKey as string}
-                                                            propertyOrBuilder={property}
-                                                            additionalField={additionalField}
-                                                            provided={provided}
-                                                            errors={errors}
-                                                            namespace={namespace}
-                                                            inferredPropertyKeys={inferredPropertyKeys}
-                                                            onPropertyMove={onPropertyMove}
-                                                            onPropertyRemove={onPropertyRemove}
-                                                            onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
-                                                            selectedPropertyKey={selectedPropertyKey}
-                                                            collectionEditable={collectionEditable}
-                                                        />
-                                                    </ErrorBoundary>
-                                                );
-                                            }}
-                                        </Draggable>);
-                                }).filter(Boolean)}
-
-                            {droppableProvided.placeholder}
-
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-
-        </>
-    );
-}
+export const PropertyTree = React.memo(
+    function PropertyTree<M extends {
+        [Key: string]: CMSType
+    }>({
+           namespace,
+           selectedPropertyKey,
+           onPropertyClick,
+           properties,
+           propertiesOrder: propertiesOrderProp,
+           additionalFields,
+           errors,
+           onPropertyMove,
+           onPropertyRemove,
+           className,
+           inferredPropertyKeys,
+           collectionEditable
+       }: {
+        namespace?: string;
+        selectedPropertyKey?: string;
+        onPropertyClick?: (propertyKey: string, namespace?: string) => void;
+        properties: PropertiesOrBuilders<M>;
+        propertiesOrder?: string[];
+        additionalFields?: AdditionalFieldDelegate<M>[];
+        errors: Record<string, any>;
+        onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
+        onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
+        className?: string;
+        inferredPropertyKeys?: string[];
+        collectionEditable: boolean;
+    }) {
+
+        const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
+
+        const onDragEnd = useCallback((result: any) => {
+            // dropped outside the list
+            if (!result.destination) {
+                return;
+            }
+            const startIndex = result.source.index;
+            const endIndex = result.destination.index;
+
+            const newPropertiesOrder = Array.from(propertiesOrder);
+            const [removed] = newPropertiesOrder.splice(startIndex, 1);
+            newPropertiesOrder.splice(endIndex, 0, removed);
+            if (onPropertyMove)
+                onPropertyMove(newPropertiesOrder, namespace);
+        }, [namespace, onPropertyMove, propertiesOrder])
+
+        return (
+            <>
+
+                <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId={`droppable_${namespace}`}>
+                        {(droppableProvided, droppableSnapshot) => (
+                            <div
+                                {...droppableProvided.droppableProps}
+                                ref={droppableProvided.innerRef}
+                                className={className}>
+                                {propertiesOrder && propertiesOrder
+                                    .map((propertyKey: string, index: number) => {
+                                        const property = properties[propertyKey] as PropertyOrBuilder;
+                                        const additionalField = additionalFields?.find(field => field.key === propertyKey);
+
+                                        if (!property && !additionalField) {
+                                            console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+                                            return null;
+                                        }
+                                        return (
+                                            <Draggable
+                                                key={`array_field_${namespace}_${propertyKey}}`}
+                                                draggableId={`array_field_${namespace}_${propertyKey}}`}
+                                                index={index}>
+                                                {(provided, snapshot) => {
+                                                    return (
+                                                        <ErrorBoundary>
+                                                            <PropertyTreeEntry
+                                                                propertyKey={propertyKey as string}
+                                                                propertyOrBuilder={property}
+                                                                additionalField={additionalField}
+                                                                provided={provided}
+                                                                errors={errors}
+                                                                namespace={namespace}
+                                                                inferredPropertyKeys={inferredPropertyKeys}
+                                                                onPropertyMove={onPropertyMove}
+                                                                onPropertyRemove={onPropertyRemove}
+                                                                onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
+                                                                selectedPropertyKey={selectedPropertyKey}
+                                                                collectionEditable={collectionEditable}
+                                                            />
+                                                        </ErrorBoundary>
+                                                    );
+                                                }}
+                                            </Draggable>);
+                                    }).filter(Boolean)}
+
+                                {droppableProvided.placeholder}
+
+                            </div>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+
+            </>
+        );
+    },
+    (prevProps, nextProps) => {
+
+        const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
+        const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
+        if (isSelected || wasSelected)
+            return false;
+
+        return equal(prevProps.properties, nextProps.properties) &&
+            prevProps.propertiesOrder === nextProps.propertiesOrder &&
+            equal(prevProps.additionalFields, nextProps.additionalFields) &&
+            equal(prevProps.errors, nextProps.errors) &&
+            equal(prevProps.onPropertyClick, nextProps.onPropertyClick) &&
+            // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
+            // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
+            prevProps.namespace === nextProps.namespace &&
+            prevProps.collectionEditable === nextProps.collectionEditable;
+    }
+);
 
 export function PropertyTreeEntry({
                                       propertyKey,
@@ -132,7 +151,7 @@ export function PropertyTreeEntry({
                                       onPropertyMove,
                                       onPropertyRemove,
                                       inferredPropertyKeys,
-                                      collectionEditable,
+                                      collectionEditable
                                   }: {
     propertyKey: string;
     namespace?: string;
@@ -149,8 +168,9 @@ export function PropertyTreeEntry({
 }) {
 
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-
     const fullId = getFullId(propertyKey, namespace);
+    const fullIdPath = getFullIdPath(propertyKey, namespace);
+    const hasError = fullIdPath in errors;
 
     let subtree;
     if (typeof propertyOrBuilder === "object") {
@@ -170,7 +190,7 @@ export function PropertyTreeEntry({
         }
     }
 
-    const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
+    // const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
     const selected = selectedPropertyKey === fullId;
     const editable = propertyOrBuilder && ((collectionEditable && !isPropertyBuilder(propertyOrBuilder)) || editableProperty(propertyOrBuilder));
 
@@ -225,7 +245,6 @@ export function PropertyTreeEntry({
                 </Tooltip>}
             </div>
 
-
             {subtree && <div className={"ml-16"}>{subtree}</div>}
         </div>
     );

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -9,11 +9,11 @@ import {
 } from "@firecms/core";
 import {
     AddIcon,
+    Alert,
     Button,
     Container,
     DeleteIcon,
     IconButton,
-    InfoLabel,
     Paper,
     Table,
     TableBody,
@@ -22,12 +22,12 @@ import {
     Tooltip,
     Typography,
 } from "@firecms/ui";
-import { useFormikContext } from "formik";
 import { CollectionEditorDialog } from "./CollectionEditorDialog";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { CollectionInference } from "../../types/collection_inference";
 import { EntityCustomViewsSelectDialog } from "./EntityCustomViewsSelectDialog";
+import { useFormex } from "@firecms/formex";
 
 export function SubcollectionsEditTab({
                                           collection,
@@ -59,7 +59,7 @@ export function SubcollectionsEditTab({
     const {
         values,
         setFieldValue,
-    } = useFormikContext<EntityCollection>();
+    } = useFormex<EntityCollection>();
 
     const subcollections = collection.subcollections ?? [];
     const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
@@ -101,7 +101,7 @@ export function SubcollectionsEditTab({
                                                                     onClick={(e) => {
                                                                         e.preventDefault();
                                                                         e.stopPropagation();
-                                                                        setSubcollectionToDelete(subcollection.path);
+                                                                        setSubcollectionToDelete(subcollection.id);
                                                                     }}
                                                                     color="inherit">
                                                             <DeleteIcon size={"small"}/>
@@ -180,9 +180,14 @@ export function SubcollectionsEditTab({
                         </>}
 
                         {totalEntityViews === 0 &&
-                            <InfoLabel>
-                                <b>COMING SOON</b> Define your own custom views by uploading it with the CLI
-                            </InfoLabel>
+                            <Alert action={<Button variant="text"
+                                                   size={"small"}
+                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   component={"a"}
+                                                   rel="noopener noreferrer"
+                                                   target="_blank">More info</Button>}>
+                                Define your own custom views by uploading it with the CLI.
+                            </Alert>
                         }
 
                         <Button
@@ -204,10 +209,12 @@ export function SubcollectionsEditTab({
             {subcollectionToDelete &&
                 <DeleteConfirmationDialog open={Boolean(subcollectionToDelete)}
                                           onAccept={() => {
-                                              configController.deleteCollection({
-                                                  path: subcollectionToDelete,
-                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.path]
-                                              });
+                                              const props = {
+                                                  id: subcollectionToDelete,
+                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
+                                              };
+                                              console.debug("Deleting subcollection", props)
+                                              configController.deleteCollection(props);
                                               setSubcollectionToDelete(undefined);
                                           }}
                                           onCancel={() => setSubcollectionToDelete(undefined)}

package/src/ui/collection_editor/SwitchControl.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { BooleanSwitchWithLabel, Tooltip } from "@firecms/ui";
+import { FormexFieldProps } from "@firecms/formex";
+
+export function SwitchControl({
+                                  field,
+                                  form,
+                                  label,
+                                  tooltip,
+                                  disabled,
+                                  size = "small",
+                                  allowIndeterminate
+                              }: FormexFieldProps & {
+    label: string,
+    tooltip?: string,
+    disabled?: boolean,
+    size?: "small" | "medium",
+    allowIndeterminate?: boolean
+}) {
+
+    const formControlLabel = <BooleanSwitchWithLabel
+        label={label}
+        size={size}
+        position={"start"}
+        value={field.value}
+        disabled={disabled}
+        allowIndeterminate={allowIndeterminate}
+        onValueChange={(checked:boolean | null) => form.setFieldValue(field.name, checked)}/>;
+
+    if (tooltip)
+        return (
+            <Tooltip
+                title={tooltip}>
+                {formControlLabel}
+            </Tooltip>
+        );
+    return formControlLabel;
+}

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -4,7 +4,7 @@ import {
     ImportConfig,
     ImportNewPropertyFieldPreview
 } from "@firecms/data_import_export";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "@firecms/formex";
 
 import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
 import { Container, Select, Tooltip, Typography } from "@firecms/ui";
@@ -28,11 +28,19 @@ export function CollectionEditorImportMapping({
                                                       collectionEditable: boolean
                                                   }) {
 
+    // const {
+    //     values,
+    //     setFieldValue,
+    //     setFieldTouched,
+    //     setValues,
+    //     submitCount
+    // } = useFormex();
+
     const {
         setFieldValue,
         setFieldTouched,
         values
-    } = useFormikContext<PersistedCollection>();
+    } = useFormex<PersistedCollection>();
     const [selectedProperty, setSelectedProperty] = useState<PropertyWithId | undefined>(undefined);
 
     const currentPropertiesOrderRef = React.useRef<{

package/src/ui/collection_editor/properties/BlockPropertyField.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "@firecms/formex";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
@@ -17,7 +17,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
     const {
         values,
         setFieldValue
-    } = useFormikContext<ArrayProperty>();
+    } = useFormex<ArrayProperty>();
 
     const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
     const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();

package/src/ui/collection_editor/properties/BooleanPropertyField.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { FastField, getIn, useFormikContext } from "formik";
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
 
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { SwitchControl } from "@firecms/core";
+import { SwitchControl } from "../SwitchControl";
 
 export function BooleanPropertyField({ disabled }: {
     disabled: boolean;
 }) {
-    const { values } = useFormikContext();
+    const { values } = useFormex();
     const defaultValue = getIn(values, "defaultValue");
 
     return (
@@ -23,12 +23,16 @@ export function BooleanPropertyField({ disabled }: {
 
             <div className={"col-span-12"}>
 
-                <FastField type="checkbox"
-                           name={"defaultValue"}
-                           label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
-                           disabled={disabled}
-                           allowIndeterminate={true}
-                           component={SwitchControl}/>
+                <Field
+                    name={"defaultValue"}>
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
+                            disabled={disabled}
+                            allowIndeterminate={true} field={field}
+                            form={form}/>
+                    }}
+                </Field>
 
             </div>
         </>

package/src/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -1,4 +1,4 @@
-import { Field, getIn, useFormikContext } from "formik";
+import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
@@ -8,7 +8,6 @@ import { toSnakeCase, unslugify } from "@firecms/core";
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
     disabledId: boolean,
-    existingPropertyKeys?: string[];
     disabled: boolean;
     isNewProperty: boolean;
     autoUpdateId: boolean;
@@ -18,7 +17,6 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
     function CommonPropertyFields({
                                       showErrors,
                                       disabledId,
-                                      existingPropertyKeys,
                                       disabled,
                                       autoUpdateId,
                                       isNewProperty
@@ -29,8 +27,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
             values,
             setFieldValue,
             setFieldTouched,
-            touched
-        } = useFormikContext<PropertyWithId>();
+            touched,
+            validate
+        } = useFormex<PropertyWithId>();
 
         const name = "name";
         const nameError = showErrors && getIn(errors, name);
@@ -46,20 +45,20 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
 
                 <div>
                     <Field
+                        name={name}
                         inputRef={ref}
                         as={DebouncedTextField}
                         value={values[name]}
                         onChange={(e: any) => {
                             const newNameValue = e.target.value;
-                            setFieldValue(name, newNameValue);
-                            setFieldTouched(name, true, true);
                             const idTouched = getIn(touched, id);
                             if (!idTouched && autoUpdateId) {
-                                setFieldValue(id, newNameValue ? toSnakeCase(newNameValue) : "")
+                                setFieldValue(id, newNameValue ? toSnakeCase(newNameValue) : "", false)
                             }
+                            setFieldValue(name, newNameValue, true);
+                            setFieldTouched(name, true);
                         }}
                         style={{ fontSize: 20 }}
-                        validate={validateName}
                         placeholder={"Field name"}
                         required
                         disabled={disabled}
@@ -72,19 +71,19 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
 
                 <div>
                     <Field
+                        name={id}
                         as={DebouncedTextField}
                         label={"ID"}
                         value={values[id]}
                         onChange={(e: any) => {
                             const newIdValue = e.target.value;
-                            setFieldValue(id, newIdValue);
-                            setFieldTouched(id, true, true);
                             const nameTouched = getIn(touched, name);
                             if (!nameTouched && autoUpdateId) {
                                 setFieldValue(name, newIdValue ? unslugify(newIdValue) : "")
                             }
+                            setFieldValue(id, newIdValue, true);
+                            setFieldTouched(id, true);
                         }}
-                        validate={() => validateId(values[id], existingPropertyKeys)}
                         disabled={disabledId || disabled}
                         required
                         size="small"
@@ -110,28 +109,3 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
 
     }
 );
-
-const idRegEx = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
-
-function validateId(value?: string, existingPropertyKeys?: string[]) {
-
-    let error;
-    if (!value) {
-        error = "You must specify an id for the field";
-    }
-    if (value && !value.match(idRegEx)) {
-        error = "The id can only contain letters, numbers and underscores (_), and not start with a number";
-    }
-    if (value && existingPropertyKeys && existingPropertyKeys.includes(value)) {
-        error = "There is another field with this ID already";
-    }
-    return error;
-}
-
-function validateName(value: string) {
-    let error;
-    if (!value) {
-        error = "You must specify a title for the field";
-    }
-    return error;
-}

package/src/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "@firecms/formex";
 import { NumberProperty, StringProperty } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
@@ -15,7 +15,7 @@ export function DateTimePropertyField({ disabled }: {
         errors,
         touched,
         setFieldValue
-    } = useFormikContext<StringProperty | NumberProperty>();
+    } = useFormex<StringProperty | NumberProperty>();
 
     const modePath = "mode";
     const modeValue: string | undefined = getIn(values, modePath);

package/src/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "@firecms/formex";
 import { EnumValueConfig, resolveEnumValues, useSnackbarController } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { EnumForm } from "../EnumForm";
@@ -26,12 +26,9 @@ export function EnumPropertyField({
 
     const {
         values,
-        handleChange,
-        errors,
-        touched,
         setFieldError,
         setFieldValue
-    } = useFormikContext<PropertyWithId>();
+    } = useFormex<PropertyWithId>();
 
     const snackbarContext = useSnackbarController();
 
@@ -70,7 +67,7 @@ export function EnumPropertyField({
                           disabled={disabled}
                           allowDataInference={allowDataInference}
                           onError={(hasError) => {
-                              setFieldError(enumValuesPath, hasError ? "" : undefined);
+                              setFieldError(enumValuesPath, hasError ? "This enum property is missing some values" : undefined);
                           }}
                           getData={getData
                               ? () => getData()