@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/form/components/StorageItemPreview.tsx

@@ -5,6 +5,7 @@ import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface StorageItemPreviewProps {
     name: string;
@@ -27,7 +28,7 @@ export function StorageItemPreview({
                                        placeholder,
                                        className
                                    }: StorageItemPreviewProps) {
-
+    const { t } = useTranslation();
     return (
         <div className={cls(
             "relative border-box flex items-center justify-center",
@@ -41,7 +42,7 @@ export function StorageItemPreview({
 
                     <Tooltip
                         asChild={true}
-                        title="Remove">
+                        title={t("remove")}>
                         <IconButton
                             size={"small"}
                             onClick={(event) => {

package/src/form/components/StorageUploadProgress.tsx

@@ -32,6 +32,7 @@ export function StorageUploadProgress({
 
     const [error, setError] = React.useState<Error | undefined>();
     const [loading, setLoading] = React.useState<boolean>(false);
+    const [progress, setProgress] = React.useState<number>(0);
     const mounted = React.useRef(false);
     const uploading = React.useRef(false);
 
@@ -46,7 +47,10 @@ export function StorageUploadProgress({
             file,
             fileName,
             path: storagePath,
-            metadata
+            metadata,
+            onProgress: (p) => {
+                if (mounted.current) setProgress(p);
+            }
         })
             .then(async ({ path, storageUrl }) => {
                 console.debug("Upload successful", path);
@@ -79,22 +83,33 @@ export function StorageUploadProgress({
         };
     }, [entry.file, entry.fileName, upload]);
 
+    const isLargeFile = entry.file && entry.file.size > 500 * 1024;
+    const renderProgressBar = loading && isLargeFile && progress > 0;
+    const progressBar = renderProgressBar && (
+        <div className="absolute bottom-0 left-0 h-1 bg-primary w-full origin-left transition-transform duration-200"
+             style={{ transform: `scaleX(${progress / 100})` }} />
+    );
+
     if (simple) {
-        return <div className={`w-${imageSize} h-${imageSize}`}>
+        return <div className={`relative overflow-hidden w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
+            {progressBar}
+
         </div>
     }
     return (
 
         <div className={cls(paperMixin,
-            "p-4 relative border-box flex items-center justify-center",
+            "p-4 relative overflow-hidden border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}
 
+            {progressBar}
+
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}
 

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import { ExpandablePanel, IconButton, CloseIcon } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
@@ -50,15 +50,28 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = resolvedProperties.map((childProperty, index) => {
         const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -4,9 +4,8 @@ import { ReferencePreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-
-import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -48,6 +47,7 @@ export function ArrayOfReferencesFieldBinding({
         setValue
     });
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {
         return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
@@ -84,7 +84,7 @@ export function ArrayOfReferencesFieldBinding({
                                     }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
-            return <div>Internal ERROR</div>;
+            return <div>{t("internal_error")}</div>;
         return (
             <ReferencePreview
                 key={internalId}
@@ -100,15 +100,28 @@ export function ArrayOfReferencesFieldBinding({
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = <>
         {!collection && <ErrorView
@@ -132,7 +145,7 @@ export function ArrayOfReferencesFieldBinding({
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>
-                Edit {property.name}
+                {t("edit_name", { name: property.name ?? "" })}
             </Button>
         </div>}
     </>;

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -8,9 +8,10 @@ import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, mergeDeep, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
-import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -37,6 +38,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                         }: FieldProps<T>) {
 
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
@@ -72,19 +74,33 @@ export function BlockFieldBinding<T extends Array<any>>({
     };
 
     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"}/>
+        <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>
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
     const body = <ArrayContainer value={value}
                                  className={"flex flex-col gap-3"}
                                  droppableId={propertyKey}
-                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
@@ -167,6 +183,7 @@ function BlockEntry({
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
     const formex = useFormex();
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (!type) {
@@ -227,7 +244,7 @@ function BlockEntry({
                             <Select
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
-                                                         className={"px-4 py-2 font-medium"}>Type</Typography>}
+                                                         className={"px-4 py-2 font-medium"}>{t("type")}</Typography>}
                                 size={"medium"}
                                 fullWidth={true}
                                 position={"item-aligned"}

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -48,7 +48,7 @@ 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}

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,
@@ -230,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>;
@@ -261,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"}
@@ -325,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}
@@ -370,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>;
         }
     }
@@ -386,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) => {
@@ -404,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"
@@ -446,6 +467,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -487,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")}>
@@ -499,7 +521,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -519,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

@@ -6,7 +6,8 @@ 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
@@ -27,7 +28,8 @@ export function MapFieldBinding({
     includeDescription,
     autoFocus,
     context,
-    onPropertyChange
+    onPropertyChange,
+    setValue
 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
@@ -91,7 +93,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
     </>
         ;
@@ -107,12 +109,26 @@ export function MapFieldBinding({
                 }}
                 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"} />}>
+                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>}
 
@@ -128,7 +144,7 @@ export function MapFieldBinding({
     );
 }
 
-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));
@@ -143,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"}