@rebasepro/core 0.0.1-canary.0

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

@@ -0,0 +1,315 @@
+import * as React from "react";
+import { useMemo } from "react";
+
+import { ArrayProperty, Entity, PreviewSize, StorageConfig, StringProperty } from "@rebasepro/types";
+import { useDropzone } from "react-dropzone";
+import { 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 { cls, EditIcon, IconButton, Typography } from "@rebasepro/ui";
+import { EntityTableCellActions } from "../internal/EntityTableCellActions";
+
+const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden 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: StringProperty | ArrayProperty;
+    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: StringProperty | ArrayProperty;
+    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 previewSize = previewSizeInput;
+    if (multipleFilesSupported) {
+        const arrayProperty = property as ArrayProperty;
+        if (Array.isArray(arrayProperty.of)) {
+            throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+        }
+        if (arrayProperty.of) {
+            if (arrayProperty.of.type !== "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) {
+                    console.error("Error uploading file: ", error);
+                    if (error.code === "file-too-large") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                        });
+                    } else if (error.code === "file-invalid-type") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: "Error uploading file: File type is not supported"
+                        });
+                    }
+                }
+            }
+        }
+    }
+    );
+
+    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 ArrayProperty).of as StringProperty
+        : property as StringProperty;
+
+    const imageSize = useMemo(() => getThumbnailMeasure(previewSize), [previewSize]);
+    const showError = !disabled && error;
+
+    return (
+        <div {...rootProps}
+            className={cls(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="grow m-2 max-w-[200px]"
+                onClick={open}>
+                <Typography
+                    className="text-surface-400 dark:text-surface-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-surface-500"} />
+                </IconButton>
+            </EntityTableCellActions>
+
+        </div>
+    );
+
+}
+
+interface TableStorageItemPreviewProps {
+    property: StringProperty;
+    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/useDataSourceTableController";
+export * from "./column_utils";

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

@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+
+import {
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    SearchBar
+} from "@rebasepro/ui";
+import { CollectionSize } from "@rebasepro/types";
+import { useLargeLayout } from "../../../hooks";
+
+interface CollectionTableToolbarProps {
+    loading: boolean;
+    actionsStart?: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * View mode toggle button, positioned left of the search bar.
+     */
+    viewModeToggle?: React.ReactNode;
+    title?: React.ReactNode,
+    onTextSearchClick?: () => void;
+    onTextSearch?: (searchString?: string) => void;
+    textSearchLoading?: boolean;
+}
+
+export function CollectionTableToolbar({
+    actions,
+    actionsStart,
+    loading,
+    onTextSearch,
+    onTextSearchClick,
+    textSearchLoading,
+    title,
+    viewModeToggle
+}: CollectionTableToolbarProps) {
+
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+    const largeLayout = useLargeLayout();
+
+    const searchLoading = React.useRef<boolean>(false);
+
+    useEffect(() => {
+        if (searchInputRef.current && searchLoading.current && !textSearchLoading) {
+            searchInputRef.current.focus();
+        }
+        searchLoading.current = textSearchLoading ?? false;
+    }, [textSearchLoading]);
+
+
+    return (
+        <div
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
+
+            <div className="flex items-center gap-1 md:mr-4 mr-2">
+
+                {viewModeToggle}
+
+                {title && <div className={"hidden lg:block"}>
+                    {title}
+                </div>}
+
+                {actionsStart}
+
+            </div>
+
+            <div className="flex items-center gap-1">
+
+                {largeLayout && <div className="w-[22px] mr-4">
+                    {loading &&
+                        <CircularProgress size={"smallest"} />}
+                </div>}
+
+                {(onTextSearch || onTextSearchClick) &&
+                    <SearchBar
+                        key={"search-bar"}
+                        size={"small"}
+                        inputRef={searchInputRef}
+                        loading={textSearchLoading}
+                        disabled={Boolean(onTextSearchClick)}
+                        onClick={onTextSearchClick}
+                        onTextSearch={onTextSearchClick ? undefined : onTextSearch}
+                        expandable={true} />}
+
+                {actions}
+
+            </div>
+
+        </div>
+    );
+}