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

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import { MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "../../../form";
 import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { FieldHelperView } from "./FieldHelperView";
@@ -18,7 +18,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
     const {
         values,
         setFieldValue
-    } = useFormikContext<MapProperty>();
+    } = useFormex<MapProperty>();
 
     const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
     const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();

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

@@ -2,13 +2,13 @@ import React from "react";
 import { NumberPropertyValidation } from "./validation/NumberPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { TextField } from "@firecms/ui";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "../../../form";
 
 export function NumberPropertyField({ disabled }: {
     disabled: boolean;
 }) {
 
-    const { values, setFieldValue } = useFormikContext();
+    const { values, setFieldValue } = useFormex();
 
     return (
         <>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Field, getIn, useFormikContext } from "formik";
+import { Field, getIn, useFormex } from "../../../form";
 import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
 import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
 import { FieldHelperView } from "./FieldHelperView";
@@ -9,13 +9,18 @@ export function ReferencePropertyField({
                                            multiple,
                                            disabled,
                                            showErrors
-                                       }: { existing: boolean, multiple: boolean, disabled: boolean, showErrors: boolean }) {
+                                       }: {
+    existing: boolean,
+    multiple: boolean,
+    disabled: boolean,
+    showErrors: boolean
+}) {
 
     const {
         values,
         handleChange,
         errors,
-    } = useFormikContext<StringProperty | NumberProperty>();
+    } = useFormex<StringProperty | NumberProperty>();
 
     const navigation = useNavigationController();
 
@@ -31,16 +36,15 @@ export function ReferencePropertyField({
     return (
         <>
             <div className={"col-span-12"}>
-                <Field required
-                       name={pathPath}
+
+                <Field name={pathPath}
                        pathPath={pathPath}
                        type="select"
-                       validate={validatePath}
                        disabled={existing || disabled}
                        value={pathValue}
                        error={pathError}
                        handleChange={handleChange}
-                       component={CollectionsSelect}/>
+                       as={CollectionsSelect}/>
 
             </div>
 
@@ -48,13 +52,6 @@ export function ReferencePropertyField({
     );
 }
 
-function validatePath(value?: string) {
-    let error;
-    if (!value) {
-        error = "You must specify a target collection for the field";
-    }
-    return error;
-}
 
 export function CollectionsSelect({
                                       disabled,

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { ArrayProperty, getFieldConfig, Property, PropertyConfig } from "@firecms/core";
 import { Button, Paper, Typography } from "@firecms/ui";
-import { Field, getIn, useFormikContext } from "formik";
+import { Field, getIn, useFormex } from "../../../form";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { PropertyFieldPreview } from "../PropertyFieldPreview";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
@@ -31,16 +31,17 @@ export function RepeatPropertyField({
         errors,
         setFieldValue,
         touched
-    } = useFormikContext<ArrayProperty>();
+    } = useFormex<ArrayProperty>();
 
     const [propertyDialogOpen, setPropertyDialogOpen] = useState(false);
     const ofProperty = getIn(values, "of");
     const ofPropertyError = getIn(touched, "of") && getIn(errors, "of");
 
-    const onPropertyChanged = useCallback(({ id, property, namespace }:
-                                               { id?: string, property: Property, namespace?: string }) => {
+    const onPropertyChanged = ({ id, property, namespace }:
+                                   { id?: string, property: Property, namespace?: string }) => {
+        console.log("onPropertyChanged", id, property, namespace);
         setFieldValue("of", property);
-    }, []);
+    };
 
     const widget = ofProperty && getFieldConfig(ofProperty, propertyConfigs);
     return (
@@ -52,11 +53,11 @@ export function RepeatPropertyField({
                 <Field
                     name={"of"}
                     value={ofProperty}
-                    validate={(property: Property) => {
-                        return property?.dataType ? undefined : "You need to specify a repeat field";
-                    }}
+                    // validate={(property: Property) => {
+                    //     return property?.dataType ? undefined : "You need to specify a repeat field";
+                    // }}
                 >
-                    {() => (
+                    {({}) => (
                         <Paper className="p-2 mt-4">
 
                             {ofProperty && <PropertyFieldPreview

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { SwitchControl, } from "@firecms/core";
 import {
     Button,
     Checkbox,
@@ -11,10 +10,11 @@ import {
     Typography
 } from "@firecms/ui";
 
-import { Field, getIn, useFormikContext } from "formik";
+import { Field, FormexFieldProps, getIn, useFormex } from "../../../form";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
+import { SwitchControl } from "../SwitchControl";
 
 const fileTypes: Record<string, string> = {
     "image/*": "Images",
@@ -37,7 +37,7 @@ export function StoragePropertyField({
     const {
         values,
         setFieldValue
-    } = useFormikContext();
+    } = useFormex();
 
     const baseStoragePath = multiple ? "of.storage" : "storage";
     const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
@@ -158,12 +158,18 @@ export function StoragePropertyField({
                                     <li>{"{rand} - Random value used to avoid name collisions"}</li>
                                 </ul>
                             </Typography>
-                            <Field type="checkbox"
-                                   name={storeUrl}
-                                   label={"Save URL instead of storage path"}
-                                   disabled={existing || disabled}
-                                   component={SwitchControl}/>
-                            <br/>
+
+                            <Field name={storeUrl}
+                                   type="checkbox">
+                                {({ field, form }: FormexFieldProps) => {
+                                    return <SwitchControl
+                                        label={"Save URL instead of storage path"}
+                                        disabled={existing || disabled}
+                                        form={form}
+                                        field={field}/>
+                                }}
+                            </Field>
+
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
                                 Turn this setting on, if you prefer to save
                                 the download

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "../../../form";
 
 import { TextField } from "@firecms/ui";
 
@@ -15,7 +15,7 @@ export function StringPropertyField({
     showErrors: boolean;
 }) {
 
-    const { values, setFieldValue } = useFormikContext();
+    const { values, setFieldValue } = useFormex();
 
     return (
         <>

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "../../../form";
 
 import { Select, SelectItem, TextField } from "@firecms/ui";
 
@@ -13,7 +13,7 @@ export function UrlPropertyField({
     showErrors: boolean;
 }) {
 
-    const { values, setFieldValue } = useFormikContext();
+    const { values, setFieldValue } = useFormex();
 
     const urlValue = getIn(values, "url");
 

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { FastField, useFormikContext } from "formik";
-import { SwitchControl } from "@firecms/core";
+import { Field, FormexFieldProps } from "../../../../form";
+import { SwitchControl } from "../../SwitchControl";
 
-export function AdvancedPropertyValidation({ disabled }: {disabled: boolean}) {
-
-    const { values, handleChange } = useFormikContext();
+export function AdvancedPropertyValidation({ disabled }: {
+    disabled: boolean
+}) {
 
     const columnWidth = "columnWidth";
     const hideFromCollection = "hideFromCollection";
@@ -13,23 +13,32 @@ export function AdvancedPropertyValidation({ disabled }: {disabled: boolean}) {
 
     return (
 
-        <div className={"grid grid-cols-12 gap-2"} >
+        <div className={"grid grid-cols-12 gap-2"}>
             <div className={"col-span-12"}>
-                <FastField type="checkbox"
-                           name={hideFromCollection}
-                           label={"Hide from collection"}
-                           disabled={disabled}
-                           tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
-                           component={SwitchControl}/>
+                <Field type="checkbox" name={hideFromCollection}>
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Hide from collection"}
+                            disabled={disabled}
+                            form={form}
+                            tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
 
             <div className={"col-span-12"}>
-                <FastField type="checkbox"
-                           name={readOnly}
-                           label={"Read only"}
-                           disabled={disabled}
-                           tooltip={"Is this a read only field. Display only as a preview"}
-                           component={SwitchControl}/>
+                <Field name={readOnly}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Read only"}
+                            disabled={disabled}
+                            tooltip={"Is this a read only field. Display only as a preview"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
         </div>
     );

package/src/ui/collection_editor/properties/validation/ArrayPropertyValidation.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { getIn, useFormikContext } from "formik";
+import { getIn, useFormex } from "../../../../form";
 import { DebouncedTextField } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
 
@@ -17,7 +17,7 @@ export function ArrayPropertyValidation({
     const {
         values,
         handleChange
-    } = useFormikContext();
+    } = useFormex();
 
     const validationMin = "validation.min";
     const validationMax = "validation.max";

package/src/ui/collection_editor/properties/validation/GeneralPropertyValidation.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { FastField, getIn, useFormikContext } from "formik";
-import { SwitchControl } from "@firecms/core";
+import { Field, FormexFieldProps, getIn, useFormex } from "../../../../form";
 import { DebouncedTextField } from "@firecms/ui";
+import { SwitchControl } from "../../SwitchControl";
 
 export function GeneralPropertyValidation({ disabled }: {
     required?: boolean;
-    disabled:boolean;
+    disabled: boolean;
 }) {
 
-    const { values, handleChange } = useFormikContext();
+    const { values, handleChange } = useFormex();
 
     const validationRequired = "validation.required";
     const validationRequiredMessage = "validation.requiredMessage";
@@ -19,21 +19,32 @@ export function GeneralPropertyValidation({ disabled }: {
     return (
         <>
             <div className={"col-span-6"}>
-                <FastField type="checkbox"
-                           disabled={disabled}
-                           name={validationRequired}
-                           label={"Required"}
-                           tooltip={"You won't be able to save this entity if this value is not set"}
-                           component={SwitchControl}/>
+                <Field name={validationRequired}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={"Required"}
+                            tooltip={"You won't be able to save this entity if this value is not set"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
 
             <div className={"col-span-6"}>
-                <FastField type="checkbox"
-                           disabled={disabled}
-                           name={validationUnique}
-                           label={"Unique"}
-                           tooltip={"There cannot be multiple entities with the same value"}
-                           component={SwitchControl}/>
+
+                <Field name={validationUnique}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={"Unique"}
+                            tooltip={"There cannot be multiple entities with the same value"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
 
             {getIn(values, validationRequired) && <div className={"col-span-12"}>

package/src/ui/collection_editor/properties/validation/NumberPropertyValidation.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { FastField, getIn, useFormikContext } from "formik";
-import { SwitchControl } from "@firecms/core";
+import { Field, FormexFieldProps, getIn, useFormex } from "../../../../form";
 import { DebouncedTextField } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
 
 export function NumberPropertyValidation({ disabled }: {
     disabled: boolean;
@@ -12,7 +12,7 @@ export function NumberPropertyValidation({ disabled }: {
     const {
         values,
         handleChange
-    } = useFormikContext();
+    } = useFormex();
 
     const validationMin = "validation.min";
     const validationMax = "validation.max";
@@ -75,25 +75,40 @@ export function NumberPropertyValidation({ disabled }: {
             </div>
 
             <div className={"col-span-4"}>
-                <FastField type="checkbox"
-                           name={validationPositive}
-                           label={"Positive value"}
-                           disabled={disabled}
-                           component={SwitchControl}/>
+                <Field name={validationPositive}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Positive value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
             <div className={"col-span-4"}>
-                <FastField type="checkbox"
-                           name={validationNegative}
-                           label={"Negative value"}
-                           disabled={disabled}
-                           component={SwitchControl}/>
+                <Field name={validationNegative}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Negative value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
             <div className={"col-span-4"}>
-                <FastField type="checkbox"
-                           name={validationInteger}
-                           label={"Integer value"}
-                           disabled={disabled}
-                           component={SwitchControl}/>
+                <Field name={validationInteger}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Integer value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
             </div>
         </div>
     );