@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -0,0 +1,313 @@
+import * as React from "react";
+import { useMemo, useState } from "react";
+
+import { Entity, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../../types";
+import { useDropzone } from "react-dropzone";
+import { PreviewSize, PropertyPreview } from "../../../preview";
+import { ErrorBoundary } from "../../ErrorBoundary";
+import { useSnackbarController, useStorageSource } from "../../../hooks";
+import { getThumbnailMeasure } from "../../../preview/util";
+import { StorageFieldItem, useStorageUploadController } from "../../../util/useStorageUploadController";
+import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
+import { cn, EditIcon, IconButton, Typography } from "@firecms/ui";
+import { EntityTableCellActions } from "../internal/EntityTableCellActions";
+
+const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
+const activeDropClasses = "pt-0 border-2 border-solid"
+const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500 bg-green-50 dark:bg-green-900"
+const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500 bg-red-50 dark:bg-red-900"
+
+/**
+ * Field that allows to upload files to Google Cloud Storage.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function TableStorageUpload(props: {
+    propertyKey: string;
+    error: Error | undefined;
+    disabled: boolean;
+    value: string | string[] | null;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    selected: boolean;
+    focused: boolean;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    entity: Entity<any>;
+    path: string;
+    previewSize: PreviewSize;
+    openPopup?: (cellRect?: DOMRect) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        propertyKey,
+        error,
+        selected,
+        openPopup,
+        value,
+        disabled,
+        property,
+        entity,
+        path,
+        previewSize,
+        updateValue,
+    } = props;
+
+    const storageSource = useStorageSource();
+
+    const {
+        internalValue,
+        setInternalValue,
+        onFilesAdded,
+        storage,
+        onFileUploadComplete,
+        storagePathBuilder,
+        multipleFilesSupported
+    } = useStorageUploadController({
+        entityValues: entity.values,
+        entityId: entity.id,
+        path,
+        property,
+        propertyKey,
+        storageSource,
+        onChange: updateValue,
+        value,
+        disabled
+    });
+
+    return (
+
+        <StorageUpload
+            internalValue={internalValue}
+            setInternalValue={setInternalValue}
+            name={propertyKey}
+            disabled={disabled}
+            autoFocus={false}
+            openPopup={openPopup}
+            error={error}
+            selected={selected}
+            property={property}
+            onChange={updateValue}
+            entity={entity}
+            storagePathBuilder={storagePathBuilder}
+            storage={storage}
+            multipleFilesSupported={multipleFilesSupported}
+            onFilesAdded={onFilesAdded}
+            onFileUploadComplete={onFileUploadComplete}
+            previewSize={previewSize}/>
+
+    );
+}
+
+interface StorageUploadProps {
+    internalValue: StorageFieldItem[];
+    setInternalValue: (v: StorageFieldItem[]) => void;
+    name: string;
+    error?: Error;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    onChange: (value: string | string[] | null) => void;
+    multipleFilesSupported: boolean;
+    autoFocus: boolean;
+    selected: boolean;
+    disabled: boolean;
+    entity: Entity<any>;
+    previewSize: PreviewSize;
+    storage: StorageConfig;
+    onFilesAdded: (acceptedFiles: File[]) => void;
+    storagePathBuilder: (file: File) => string;
+    openPopup?: (cellRect?: DOMRect) => void;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+}
+
+function StorageUpload({
+                           property,
+                           name,
+                           internalValue,
+                           setInternalValue,
+                           openPopup,
+                           entity,
+                           selected,
+                           error,
+                           onChange,
+                           multipleFilesSupported,
+                           previewSize: previewSizeInput,
+                           disabled,
+                           autoFocus,
+                           storage,
+                           onFilesAdded,
+                           onFileUploadComplete,
+                           storagePathBuilder,
+                       }: StorageUploadProps) {
+
+    const [onHover, setOnHover] = useState(false);
+
+    const previewSize = multipleFilesSupported && previewSizeInput === "medium" ? "small" : previewSizeInput;
+    if (multipleFilesSupported) {
+        const arrayProperty = property as ResolvedArrayProperty<string[]>;
+        if (Array.isArray(arrayProperty.of)) {
+            throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+        }
+        if (arrayProperty.of) {
+            if (arrayProperty.of.dataType !== "string") {
+                throw Error("Storage field using array must be of data type string");
+            }
+        } else {
+            throw Error("Storage field using array must be of data type string");
+        }
+    }
+
+    const metadata: any | undefined = storage?.metadata;
+    const hasValue = Boolean(internalValue);
+
+    const snackbarContext = useSnackbarController();
+
+    const {
+        open,
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject
+    } = useDropzone({
+            accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a, ...b }), {}) : undefined,
+            disabled,
+            maxSize: storage.maxSize,
+            noClick: true,
+            noKeyboard: true,
+            onDrop: onFilesAdded,
+            onDropRejected: (fileRejections, event) => {
+                for (const fileRejection of fileRejections) {
+                    for (const error of fileRejection.errors) {
+                        snackbarContext.open({
+                            type: "error",
+                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                        });
+                    }
+                }
+            }
+        }
+    );
+
+    const { ...rootProps } = getRootProps();
+
+    const helpText = multipleFilesSupported
+        ? "Drag 'n' drop some files here, or click here to edit"
+        : "Drag 'n' drop a file here, or click here edit";
+
+    const renderProperty = multipleFilesSupported
+        ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty
+        : property as ResolvedStringProperty;
+
+    const imageSize = useMemo(() => getThumbnailMeasure(previewSize), [previewSize]);
+    const showError = !disabled && error;
+
+    return (
+        <div {...rootProps}
+             onMouseEnter={() => setOnHover(true)}
+             onMouseMove={() => setOnHover(true)}
+             onMouseLeave={() => setOnHover(false)}
+             className={cn(dropZoneClasses,
+                 "relative w-full h-full flex",
+                 `justify-${hasValue ? "start" : "center"}`,
+                 isDragActive ? activeDropClasses : "",
+                 isDragAccept ? acceptDropClasses : "",
+                 isDragReject ? rejectDropClasses : ""
+             )}
+        >
+
+            <input autoFocus={autoFocus} {...getInputProps()} />
+
+            {internalValue.map((entry, index) => {
+                let child;
+                if (entry.storagePathOrDownloadUrl) {
+                    child = (
+                        <TableStorageItemPreview
+                            key={`storage_preview_${index}`}
+                            property={renderProperty}
+                            value={entry.storagePathOrDownloadUrl}
+                            entity={entity}
+                            size={previewSize}/>
+                    );
+                } else if (entry.file) {
+                    child = (
+                        <StorageUploadProgress
+                            key={`storage_progress_${index}`}
+                            entry={entry}
+                            metadata={metadata}
+                            storagePath={storagePathBuilder(entry.file)}
+                            onFileUploadComplete={onFileUploadComplete}
+                            imageSize={imageSize}
+                            simple={true}
+                        />
+                    );
+                }
+
+                return child;
+            })
+            }
+
+            {!internalValue && <div
+                className="flex-grow m-2 max-w-[200px]"
+                onClick={open}>
+                <Typography
+                    className="text-gray-400 dark:text-gray-600"
+                    variant={"body2"}
+                    align={"center"}>
+                    {helpText}
+                </Typography>
+            </div>}
+
+            <EntityTableCellActions
+                showError={showError}
+                disabled={disabled}
+                showExpandIcon={true}
+                selected={selected}
+                openPopup={!disabled ? openPopup : undefined}>
+                <IconButton
+                    color={"inherit"}
+                    size={"small"}
+                    onClick={open}>
+                    <EditIcon size={"small"} className={"text-gray-500"}/>
+                </IconButton>
+            </EntityTableCellActions>
+
+        </div>
+    );
+
+}
+
+interface TableStorageItemPreviewProps {
+    property: ResolvedStringProperty;
+    value: string,
+    size: PreviewSize;
+    entity: Entity<any>;
+}
+
+export function TableStorageItemPreview({
+                                            property,
+                                            value,
+                                            size,
+                                            entity
+                                        }: TableStorageItemPreviewProps) {
+
+    return (
+        <div
+            className={"relative p-2 max-w-full"}
+        >
+
+            {value &&
+                <ErrorBoundary>
+                    <PropertyPreview
+                        propertyKey={"ignore"} // TODO: Fix this
+                        value={value}
+                        property={property}
+                        // entity={entity}
+                        size={size}/>
+                </ErrorBoundary>
+            }
+
+        </div>
+    );
+
+}

package/src/components/EntityCollectionTable/index.tsx

@@ -0,0 +1,12 @@
+export {
+    EntityCollectionTable
+} from "./EntityCollectionTable";
+
+export type {
+    EntityCollectionTableProps,
+} from "./EntityCollectionTableProps";
+
+export * from "./PropertyTableCell";
+export * from "./EntityCollectionRowActions";
+export * from "../common/useDataSourceEntityCollectionTableController";
+export * from "./column_utils";

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect } from "react";
+
+import {
+    Button,
+    CircularProgress,
+    cn,
+    defaultBorderMixin,
+    FilterListOffIcon,
+    SearchBar,
+    Select,
+    SelectItem,
+    Tooltip
+} from "@firecms/ui";
+import { CollectionSize } from "../../../types";
+import { useLargeLayout } from "../../../hooks";
+
+interface CollectionTableToolbarProps {
+    size: CollectionSize;
+    filterIsSet: boolean;
+    loading: boolean;
+    forceFilter?: boolean;
+    actionsStart?: React.ReactNode;
+    actions?: React.ReactNode;
+    title?: React.ReactNode,
+    onTextSearchClick?: () => void;
+    onTextSearch?: (searchString?: string) => void;
+    onSizeChanged: (size: CollectionSize) => void;
+    clearFilter?: () => void;
+    textSearchLoading?: boolean;
+}
+
+export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
+
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+    const largeLayout = useLargeLayout();
+
+    const searchLoading = React.useRef<boolean>(false);
+
+    useEffect(() => {
+        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+            searchInputRef.current.focus();
+        }
+        searchLoading.current = props.textSearchLoading ?? false;
+    }, [props.textSearchLoading]);
+
+    const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
+        <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={props.clearFilter}
+            size={"small"}>
+            <FilterListOffIcon/>
+            Clear filter
+        </Button>;
+
+    const sizeSelect = (
+        <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
+            <Select
+                value={props.size as string}
+                className="w-16 h-10"
+                size={"small"}
+                onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+                renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
+            >
+                {["xs", "s", "m", "l", "xl"].map((size) => (
+                    <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
+                        {size.toUpperCase()}
+                    </SelectItem>
+                ))}
+            </Select>
+        </Tooltip>
+    );
+
+    return (
+        <div
+            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+
+            <div className="flex items-center gap-2 md:mr-4 mr-2">
+
+                {props.title && <div className={"hidden lg:block"}>
+                    {props.title}
+                </div>}
+
+                {sizeSelect}
+
+                {props.actionsStart}
+
+                {clearFilterButton}
+
+            </div>
+
+            <div className="flex items-center gap-2">
+
+                {largeLayout && <div className="w-[22px]">
+                    {props.loading &&
+                        <CircularProgress size={"small"}/>}
+                </div>}
+
+                {(props.onTextSearch || props.onTextSearchClick) &&
+                    <SearchBar
+                        key={"search-bar"}
+                        inputRef={searchInputRef}
+                        loading={props.textSearchLoading}
+                        disabled={Boolean(props.onTextSearchClick)}
+                        onClick={props.onTextSearchClick}
+                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        expandable={true}/>}
+
+                {props.actions}
+
+            </div>
+
+        </div>
+    );
+}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -0,0 +1,257 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import useMeasure from "react-use-measure";
+
+import { VirtualTableSize } from "../../VirtualTable";
+import { getRowHeight } from "../../VirtualTable/common";
+import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { ErrorBoundary } from "../../../components";
+
+interface EntityTableCellProps {
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * The value is used only to check changes and force re-renders
+     */
+    value?: any;
+    disabled: boolean;
+    saved?: boolean;
+    error?: Error;
+    allowScroll?: boolean;
+    align: "right" | "left" | "center";
+    size: VirtualTableSize;
+    disabledTooltip?: string;
+    width: number;
+    showExpandIcon?: boolean;
+    removePadding?: boolean;
+    fullHeight?: boolean;
+    selected?: boolean;
+    hideOverflow?: boolean;
+    onSelect?: (cellRect: DOMRect | undefined) => void;
+}
+
+type TableCellInnerProps = {
+    justifyContent: string;
+    scrollable: boolean;
+    faded: boolean;
+    fullHeight: boolean;
+    children: React.ReactNode;
+}
+
+const TableCellInner = ({
+                            justifyContent,
+                            scrollable,
+                            faded,
+                            fullHeight,
+                            children
+                        }: TableCellInnerProps) => {
+    return (
+        <div
+            className={cn("flex flex-col max-h-full w-full",
+                {
+                    "items-start": faded || scrollable
+                })}
+            style={{
+                justifyContent,
+                height: fullHeight ? "100%" : undefined,
+                overflow: scrollable ? "auto" : undefined,
+                WebkitMaskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined,
+                maskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export const EntityTableCell = React.memo<EntityTableCellProps>(
+    function EntityTableCell({
+                                 children,
+                                 actions,
+                                 size,
+                                 selected,
+                                 disabled,
+                                 disabledTooltip,
+                                 saved,
+                                 error,
+                                 align,
+                                 allowScroll,
+                                 removePadding,
+                                 fullHeight,
+                                 onSelect,
+                                 width,
+                                 hideOverflow = true,
+                                 showExpandIcon = true
+                             }: EntityTableCellProps) {
+
+        const [measureRef, bounds] = useMeasure();
+        const ref = useRef<HTMLDivElement>(null);
+
+        const maxHeight = useMemo(() => getRowHeight(size), [size]);
+
+        const [onHover, setOnHover] = useState(false);
+        const [internalSaved, setInternalSaved] = useState(saved);
+
+        const showError = !disabled && error;
+
+        useEffect(() => {
+            if (saved) {
+                setInternalSaved(true);
+            }
+            const handler = setTimeout(() => {
+                setInternalSaved(false);
+            }, 800);
+            return () => {
+                clearTimeout(handler);
+            };
+        }, [saved]);
+
+        let p = 0;
+        if (!removePadding) {
+            switch (size) {
+                case "l":
+                case "xl":
+                    p = 4;
+                    break;
+                case "m":
+                    p = 2;
+                    break;
+                case "s":
+                default:
+                    p = 1;
+                    break;
+            }
+        }
+
+        let justifyContent;
+        switch (align) {
+            case "right":
+                justifyContent = "flex-end";
+                break;
+            case "center":
+                justifyContent = "center";
+                break;
+            case "left":
+            default:
+                justifyContent = "flex-start";
+        }
+
+        // const onClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        //     if (event.detail === 3) {
+        //         doOpenPopup();
+        //     }
+        // }, [doOpenPopup]);
+
+        const onSelectCallback = useCallback(() => {
+            if (!onSelect) return;
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            if (disabled) {
+                onSelect(undefined);
+            } else if (!selected && cellRect) {
+                onSelect(cellRect);
+            }
+        }, [ref, onSelect, selected, disabled]);
+
+        const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
+            onSelectCallback();
+            event.stopPropagation();
+        }, [onSelectCallback]);
+
+        const isOverflowing = useMemo(() => {
+            if (bounds) {
+                return bounds.height > maxHeight;
+            }
+            return false;
+        }, [bounds, maxHeight]);
+
+        const isSelected = !showError && selected;
+
+        const scrollable = !disabled && allowScroll && isOverflowing;
+        const faded = !disabled && !allowScroll && isOverflowing;
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "transition-colors duration-100 ease-in-out",
+                    `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
+                    onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
+                    saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
+                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
+                    hideOverflow ? "overflow-hidden" : "",
+                    isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
+                    isSelected && !internalSaved ? "border-primary" : "",
+                    internalSaved ? "border-green-500 " : "",
+                    showError ? "border-red-500" : ""
+                )}
+                style={{
+                    justifyContent,
+                    alignItems: disabled || !isOverflowing ? "center" : undefined,
+                    width: width ?? "100%",
+                    textAlign: align
+                }}
+                tabIndex={selected || disabled ? undefined : 0}
+                onFocus={onFocus}
+                // onClick={onClick}
+                onMouseEnter={setOnHoverTrue}
+                onMouseMove={setOnHoverTrue}
+                onMouseLeave={setOnHoverFalse}
+                // contain={scrollable ? "content" : "size"}
+            >
+
+                <ErrorBoundary>
+
+                    {fullHeight && !faded && children}
+
+                    {(!fullHeight || faded) && <TableCellInner
+                        fullHeight={fullHeight ?? false}
+                        justifyContent={justifyContent}
+                        scrollable={scrollable ?? false}
+                        faded={faded}>
+
+                        {!fullHeight && <div ref={measureRef}
+                                             style={{
+                                                 display: "flex",
+                                                 width: "100%",
+                                                 justifyContent,
+                                                 height: fullHeight ? "100%" : undefined
+                                             }}>
+                            {children}
+                        </div>}
+
+                    </TableCellInner>}
+                </ErrorBoundary>
+
+                {actions}
+
+                {disabled && onHover && disabledTooltip &&
+                    <div className="absolute top-1 right-1 text-xs">
+                        <Tooltip title={disabledTooltip}>
+                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
+                        </Tooltip>
+                    </div>}
+
+            </div>
+        );
+    }, (a, b) => {
+        return a.error === b.error &&
+            a.value === b.value &&
+            a.disabled === b.disabled &&
+            a.saved === b.saved &&
+            a.allowScroll === b.allowScroll &&
+            a.align === b.align &&
+            a.size === b.size &&
+            a.disabledTooltip === b.disabledTooltip &&
+            a.width === b.width &&
+            a.showExpandIcon === b.showExpandIcon &&
+            a.removePadding === b.removePadding &&
+            a.fullHeight === b.fullHeight &&
+            a.selected === b.selected;
+    }) as React.FunctionComponent<EntityTableCellProps>;