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

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

@@ -0,0 +1,70 @@
+import { ErrorOutlineIcon, IconButton } from "@firecms/ui";
+import { ErrorTooltip } from "../../ErrorTooltip";
+import { useCallback, useEffect, useRef } from "react";
+
+export interface EntityTableCellActionsProps {
+    showError: false | Error | undefined;
+    disabled: boolean;
+    showExpandIcon: boolean | undefined;
+    selected: boolean | undefined;
+    openPopup?: (cellRect: DOMRect | undefined) => void;
+    children?: React.ReactNode;
+}
+
+export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+
+    const ref = useRef<HTMLDivElement>(null);
+    const doOpenPopup = useCallback(() => {
+        if (openPopup) {
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            openPopup(cellRect);
+        }
+    }, []);
+
+    const iconRef = useRef<HTMLButtonElement>();
+    useEffect(() => {
+        if (iconRef.current && selected) {
+            iconRef.current.focus({ preventScroll: true });
+        }
+    }, [selected]);
+
+    return <>
+        {(showError || (!disabled && showExpandIcon)) &&
+            <div ref={ref} className="absolute top-0.5 right-0.5 flex items-center">
+                {selected && children}
+
+                {selected && !disabled && showExpandIcon &&
+                    <IconButton
+                        ref={iconRef}
+                        color={"inherit"}
+                        size={"small"}
+                        onClick={doOpenPopup}>
+                        <svg
+                            fill={"#888"}
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24">
+                            <path className="cls-2"
+                                  d="M20,5a1,1,0,0,0-1-1L14,4h0a1,1,0,0,0,0,2h2.57L13.29,9.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L18,7.42V10a1,1,0,0,0,1,1h0a1,1,0,0,0,1-1Z"/>
+                            <path className="cls-2"
+                                  d="M10.71,13.29a1,1,0,0,0-1.42,0L6,16.57V14a1,1,0,0,0-1-1H5a1,1,0,0,0-1,1l0,5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H7.42l3.29-3.29A1,1,0,0,0,10.71,13.29Z"/>
+                        </svg>
+                    </IconButton>
+                }
+
+                {showError && <ErrorTooltip
+                    side={"left"}
+                    className={"flex items-center justify-center"}
+                    style={{ width: 32, height: 32 }}
+                    title={showError.message}>
+                    <ErrorOutlineIcon
+                        size={"small"}
+                        color={"error"}
+                    />
+                </ErrorTooltip>
+                }
+
+            </div>
+        }
+    </>;
+}

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

@@ -0,0 +1,70 @@
+import { EntityCollection, Property, ResolvedArrayProperty, ResolvedProperty } from "../../../types";
+
+export function getTableCellAlignment(property: Property | ResolvedProperty): "right" | "left" | "center" {
+    if (property.dataType === "boolean") {
+        return "center";
+    } else if (property.dataType === "number") {
+        if (property.enumValues)
+            return "left";
+        return "right";
+    } else if (property.dataType === "date") {
+        return "right";
+    } else {
+        return "left";
+    }
+}
+
+export function getTablePropertyColumnWidth(property: ResolvedProperty): number {
+
+    if (property.columnWidth) {
+        return property.columnWidth;
+    }
+
+    if (property.dataType === "string") {
+        if (property.url) {
+            return 280;
+        } else if (property.storage) {
+            return 160;
+        } else if (property.enumValues) {
+            return 200;
+        } else if (property.multiline) {
+            return 300;
+        } else if (property.markdown) {
+            return 300;
+        } else if (property.email) {
+            return 200;
+        } else {
+            return 200;
+        }
+    } else if (property.dataType === "array") {
+        const arrayProperty = property as ResolvedArrayProperty;
+        if (arrayProperty.of) {
+            if (Array.isArray(property.of)) {
+                return 300;
+            } else {
+                return getTablePropertyColumnWidth(arrayProperty.of as ResolvedProperty);
+            }
+        } else {
+            return 300;
+        }
+    } else if (property.dataType === "number") {
+        if (property.enumValues) {
+            return 200;
+        }
+        return 140;
+    } else if (property.dataType === "map") {
+        return 360;
+    } else if (property.dataType === "date") {
+        return 200;
+    } else if (property.dataType === "reference") {
+        return 220;
+    } else if (property.dataType === "boolean") {
+        return 140;
+    } else {
+        return 200;
+    }
+}
+
+export function getSubcollectionColumnId(collection: EntityCollection) {
+    return `subcollection:${collection.id ?? collection.path}`;
+}

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

@@ -0,0 +1,126 @@
+import { EntityAction } from "../../../types";
+import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
+import { DeleteEntityDialog } from "../../DeleteEntityDialog";
+
+export const editEntityAction: EntityAction = {
+    icon: <KeyboardTabIcon/>,
+    name: "Edit",
+    collapsed: false,
+    onClick({
+                entity,
+                collection,
+                fullPath,
+                context,
+                highlightEntity,
+                unhighlightEntity,
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.analyticsController?.onAnalyticsEvent?.("entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity),
+        });
+        return Promise.resolve(undefined);
+    }
+}
+
+export const copyEntityAction: EntityAction = {
+    icon: <FileCopyIcon/>,
+    name: "Copy",
+    onClick({
+                entity,
+                collection,
+                context,
+                highlightEntity,
+                unhighlightEntity,
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            copy: true,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity),
+        });
+        return Promise.resolve(undefined);
+    }
+}
+
+export const archiveEntityAction: EntityAction = {
+    icon: <ArchiveIcon/>,
+    name: "Archive",
+    onClick({
+                entity,
+                collection,
+                context: {
+                    dataSource,
+                }
+            }): Promise<void> {
+        // Add your code here
+        return Promise.resolve(undefined);
+    }
+}
+
+export const openWebsiteAction: EntityAction = {
+    icon: <OpenInNewIcon/>,
+    name: "See in website",
+    onClick({
+                entity,
+                collection,
+                context,
+            }): Promise<void> {
+        // open a new tab
+        window.open(`https://example.com/${entity.id}`, "_blank");
+        return Promise.resolve(undefined);
+    }
+}
+
+export const deleteEntityAction: EntityAction = {
+    icon: <DeleteIcon/>,
+    name: "Delete",
+    onClick({
+                entity,
+                fullPath,
+                collection,
+                context,
+                selectionController,
+                onCollectionChange,
+                sideEntityController
+            }): Promise<void> {
+        const { closeDialog } = context.dialogsController.open({
+            key: "delete_entity_dialog_" + entity.id,
+            Component: ({ open }) => {
+                if (!collection || !fullPath)
+                    throw new Error("deleteEntityAction: Collection is undefined");
+                return <DeleteEntityDialog
+                    entityOrEntitiesToDelete={entity}
+                    path={fullPath}
+                    collection={collection}
+                    callbacks={collection.callbacks}
+                    open={open}
+                    onEntityDelete={() => {
+                        context.analyticsController?.onAnalyticsEvent?.("single_entity_deleted", {
+                            path: fullPath
+                        });
+                        selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
+                        onCollectionChange?.();
+                        sideEntityController?.close();
+                    }}
+                    onClose={closeDialog}/>;
+            }
+        })
+        return Promise.resolve(undefined);
+    }
+}

package/src/components/EntityCollectionTable/internal/popup_field/ElementResizeListener.tsx

@@ -0,0 +1,59 @@
+import { RefObject, useCallback, useEffect, useRef } from "react";
+
+interface Props {
+    onResize: (event: Event) => void;
+}
+
+export const ElementResizeListener: React.FC<Props> = ({ onResize }) => {
+    const rafRef = useRef(0);
+    const objectRef: RefObject<HTMLObjectElement> = useRef(null);
+    const onResizeRef = useRef(onResize);
+
+    onResizeRef.current = onResize;
+
+    const _onResize = useCallback((e: Event) => {
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            onResizeRef.current(e);
+        });
+    }, []);
+
+    const onLoad = useCallback(() => {
+        const obj = objectRef.current;
+        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
+            obj.contentDocument.defaultView.addEventListener("resize", _onResize);
+        }
+    }, [_onResize]);
+
+    useEffect(() => {
+        const obj = objectRef.current;
+        return () => {
+            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
+                obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
+            }
+        };
+    }, [_onResize]);
+
+    return (
+        <object
+            onLoad={onLoad}
+            ref={objectRef}
+            tabIndex={-1}
+            type={"text/html"}
+            data={"about:blank"}
+            title={""}
+            style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                height: "100%",
+                width: "100%",
+                pointerEvents: "none",
+                zIndex: -1,
+                opacity: 0
+            }}
+        />
+    );
+};