@firecms/core 3.0.0 → 3.1.0-canary.02232f4

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -19,17 +19,17 @@ type DateTimeFieldProps = FieldProps<Date>;
  * @group Form fields
  */
 export function DateTimeFieldBinding({
-                                         propertyKey,
-                                         value,
-                                         setValue,
-                                         autoFocus,
-                                         error,
-                                         showError,
-                                         disabled,
-                                         touched,
-                                         property,
-                                         includeDescription
-                                     }: DateTimeFieldProps) {
+    propertyKey,
+    value,
+    setValue,
+    autoFocus,
+    error,
+    showError,
+    disabled,
+    touched,
+    property,
+    includeDescription
+}: DateTimeFieldProps) {
 
     const { locale } = useCustomizationController();
     const internalValue = value || null;
@@ -48,23 +48,24 @@ export function DateTimeFieldBinding({
                     onChange={(dateValue) => setValue(dateValue)}
                     size={"large"}
                     mode={property.mode}
-                    clearable={property.clearable}
+                    clearable={property.nullable || property.clearable}
                     locale={locale}
+                    timezone={property.timezone}
                     error={showError}
                     disabled={disabled}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
                         className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
-                        title={property.name}/>}
+                        title={property.name} />}
                 />
             </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
 
         </>
     );

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -13,6 +13,7 @@ import {
     defaultBorderMixin,
     ExpandablePanel,
     IconButton,
+    CloseIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -22,6 +23,7 @@ import {
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
 import { getIn } from "@firecms/formex";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -54,6 +56,7 @@ export function KeyValueFieldBinding({
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
 
+    const { t } = useTranslation();
     const initialValues = getIn(context.formex.initialValues, propertyKey);
 
     const mapFormView = <MapEditView value={value}
@@ -62,12 +65,28 @@ export function KeyValueFieldBinding({
                                      initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIconAndTooltip
-        propertyKey={propertyKey}
-        icon={getIconForProperty(property, "small")}
-        required={property.validation?.required}
-        title={property.name}
-        className={"text-text-secondary dark:text-text-secondary-dark"}/>;
+    const title = (
+        <div className="flex items-center w-full">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark flex-grow"}/>
+            {(property.nullable || property.clearable) && !disabled && (
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setValue(null);
+                    }}
+                >
+                    <CloseIcon size={"small"}/>
+                </IconButton>
+            )}
+        </div>
+    );
 
     return (
         <>
@@ -103,6 +122,7 @@ function MapEditView<T extends Record<string, any>>({
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
+    const { t } = useTranslation();
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -215,7 +235,6 @@ function MapEditView<T extends Record<string, any>>({
 
         <Button variant={"text"}
                 size={"small"}
-                color="primary"
                 className="w-full"
                 disabled={disabled}
                 startIcon={<AddIcon/>}
@@ -231,7 +250,7 @@ function MapEditView<T extends Record<string, any>>({
                     }]]);
                 }
                 }>
-            {fieldName ? `Add to ${fieldName}` : "Add"}
+            {fieldName ? t("add_to_field", { fieldName }) : t("add_entry")}
         </Button>
 
     </div>;
@@ -262,12 +281,13 @@ function MapKeyValueRow<T extends Record<string, any>>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
             return <TextField
                 key={dataType}
-                placeholder={"value"}
+                placeholder={t("value")}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
                 size={"medium"}
@@ -326,7 +346,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
-                                addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add_entry")}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
                                 canAddElements={true}
@@ -371,7 +391,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -387,7 +407,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
-                        placeholder={"key"}
+                        placeholder={t("key")}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
                         onChange={(event) => {
@@ -405,17 +425,17 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         </IconButton>}
                     >
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                                  onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                                  onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                                  onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                                  onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                                  onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                                  onClick={() => doUpdateDataType("array")}>{t("array")}</MenuItem>
                     </Menu>
 
                     <IconButton aria-label="delete"
@@ -447,6 +467,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -488,7 +509,7 @@ function ArrayKeyValueRow<T>({
                                            }}/>;
         } else if (dataType === "array") {
             return <Typography variant={"caption"}>
-                Arrays of arrays are not supported.
+                {t("arrays_of_arrays_not_supported")}
             </Typography>;
         } else if (dataType === "map") {
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
@@ -500,7 +521,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -520,15 +541,15 @@ function ArrayKeyValueRow<T>({
                         <ArrowDropDownIcon/>
                     </IconButton>}>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                              onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                              onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                              onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                              onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                              onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                 </Menu>
 
             </Typography>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -4,8 +4,10 @@ import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps, Resolve
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem, IconButton, CloseIcon } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 /**
  * Field that renders the children property fields
@@ -15,19 +17,20 @@ import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/u
  * @group Form fields
  */
 export function MapFieldBinding({
-                                    propertyKey,
-                                    value,
-                                    showError,
-                                    error,
-                                    disabled,
-                                    property,
-                                    partOfArray,
-                                    minimalistView: minimalistViewProp,
-                                    includeDescription,
-                                    autoFocus,
-                                    context,
-                                    onPropertyChange
-                                }: FieldProps<Record<string, any>>) {
+    propertyKey,
+    value,
+    showError,
+    error,
+    disabled,
+    property,
+    partOfArray,
+    minimalistView: minimalistViewProp,
+    includeDescription,
+    autoFocus,
+    context,
+    onPropertyChange,
+    setValue
+}: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.expanded === undefined ? true : property.expanded;
@@ -52,81 +55,96 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <div
-                className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
-                {Object.entries(mapProperties)
-                    .filter(([_, property]) => !isHidden(property))
-                    .map(([entryKey, childProperty], index) => {
-                            const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
-                            const fieldBindingProps: PropertyFieldBindingProps<any> = {
-                                propertyKey: `${propertyKey}.${entryKey}`,
-                                disabled: disabled || thisDisabled,
-                                property: childProperty,
-                                includeDescription,
-                                context,
-                                partOfArray: false,
-                                minimalistView: false,
-                                autoFocus: autoFocus && index === 0,
-                                onPropertyChange: function (updatedProperty) {
-                                    onPropertyChange?.({
-                                        properties: {
-                                            [entryKey]: updatedProperty
-                                        }
-                                    } as Partial<MapProperty>);
+        <div
+            className={cls("py-1 flex flex-wrap gap-x-4 w-full space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            {Object.entries(mapProperties)
+                .filter(([_, property]) => !isHidden(property))
+                .map(([entryKey, childProperty], index) => {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                        propertyKey: `${propertyKey}.${entryKey}`,
+                        disabled: disabled || thisDisabled,
+                        property: childProperty,
+                        includeDescription,
+                        context,
+                        partOfArray: false,
+                        minimalistView: false,
+                        autoFocus: autoFocus && index === 0,
+                        onPropertyChange: function (updatedProperty) {
+                            onPropertyChange?.({
+                                properties: {
+                                    [entryKey]: updatedProperty
                                 }
-                            };
-
-                            return (
-                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
-                                    <ErrorBoundary>
-                                        <PropertyFieldBinding
-                                            {...fieldBindingProps}/>
-                                    </ErrorBoundary>
-                                </div>
-                            )                                ;
+                            } as Partial<MapProperty>);
                         }
-                    )
+                    };
+
+                    const widthPercentage = childProperty.widthPercentage ?? 100;
+                    return (
+                        <FormEntry propertyKey={`${propertyKey}.${entryKey}`}
+                            widthPercentage={widthPercentage}
+                            key={`map-${propertyKey}-${index}`}>
+                            <PropertyFieldBinding
+                                {...fieldBindingProps} />
+                        </FormEntry>
+                    );
                 }
-            </div>
+                )
+            }
+        </div>
 
-            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
-        </>
-    ;
+    </>
+        ;
 
     return (
         <ErrorBoundary>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                 onExpandedChange={(expanded) => {
-                                                     onPropertyChange?.({
-                                                         expanded
-                                                     });
-                                                 }}
-                                                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
-                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
-                                                 title={<LabelWithIconAndTooltip
-                                                     propertyKey={propertyKey}
-                                                     icon={getIconForProperty(property, "small")}
-                                                     required={property.validation?.required}
-                                                     title={property.name}
-                                                     className={"text-text-secondary dark:text-text-secondary-dark"}/>}>
+                onExpandedChange={(expanded) => {
+                    onPropertyChange?.({
+                        expanded
+                    });
+                }}
+                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
+                title={<div className="flex items-center w-full">
+                    <LabelWithIconAndTooltip
+                        propertyKey={propertyKey}
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark flex-grow"} />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}>
                 {mapFormView}
             </ExpandablePanel>}
 
             {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError ?? false}
-                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError ?? false}
+                error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                disabled={disabled}
+                property={property} />
 
         </ErrorBoundary>
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any, t: any) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));
@@ -141,7 +159,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
     if (!keys.length) return <></>;
 
     return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
+        <InputLabel>{t("add_property")}</InputLabel>
         <Select
             value={""}
             size={"large"}
@@ -150,7 +168,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>
             {keys.map((key) => <SelectItem key={key}
-                                           value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
+                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
         </Select>
     </div>;
 };