@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

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

@@ -0,0 +1,174 @@
+import React, { MouseEvent, useCallback } from "react";
+import equal from "react-fast-compare"
+
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
+import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { useFireCMSContext, useLargeLayout } from "../../../hooks";
+
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param onCopyClicked
+ * @param onEditClicked
+ * @param onDeleteClicked
+ * @param hideId
+ * @constructor
+ *
+ * @group Collection components
+ */
+export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
+                                                                                             entity,
+                                                                                             collection,
+                                                                                             fullPath,
+                                                                                             width,
+                                                                                             frozen,
+                                                                                             isSelected,
+                                                                                             selectionEnabled,
+                                                                                             size,
+                                                                                             highlightEntity,
+                                                                                             onCollectionChange,
+                                                                                             unhighlightEntity,
+                                                                                             actions = [],
+                                                                                             hideId,
+                                                                                             selectionController
+                                                                                         }:
+                                                                                             {
+                                                                                                 entity: Entity<any>,
+                                                                                                 collection?: EntityCollection<any>,
+                                                                                                 fullPath?: string,
+                                                                                                 width: number,
+                                                                                                 frozen?: boolean,
+                                                                                                 size: CollectionSize,
+                                                                                                 isSelected: boolean,
+                                                                                                 selectionEnabled?: boolean,
+                                                                                                 actions?: EntityAction[],
+                                                                                                 hideId?: boolean,
+                                                                                                 onCollectionChange?: () => void,
+                                                                                                 selectionController?: SelectionController;
+                                                                                                 highlightEntity?: (entity: Entity<any>) => void;
+                                                                                                 unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                             }) {
+
+    const largeLayout = useLargeLayout();
+
+    const context = useFireCMSContext();
+
+    const onCheckedChange = useCallback((checked: boolean) => {
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const onClick = useCallback((event: MouseEvent) => {
+        event.stopPropagation();
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
+
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                frozen ? "sticky left-0" : ""
+            )}
+            style={{
+                width,
+                position: frozen ? "sticky" : "initial",
+                left: frozen ? 0 : "initial",
+                contain: "strict"
+            }}>
+
+            {(hasActions || selectionEnabled) &&
+                <div className="w-34 flex justify-center">
+
+                    {uncollapsedActions.map((action, index) => (
+                        <Tooltip key={index} title={action.name}>
+                            <IconButton
+                                onClick={(event: MouseEvent) => {
+                                    event.stopPropagation();
+                                    action.onClick({
+                                        entity,
+                                        fullPath,
+                                        collection,
+                                        context,
+                                        selectionController,
+                                        highlightEntity,
+                                        unhighlightEntity,
+                                        onCollectionChange
+                                    });
+                                }}
+                                size={largeLayout ? "medium" : "small"}>
+                                {action.icon}
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={largeLayout ? "medium" : "small"}>
+                                <MoreVertIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            entity,
+                                            fullPath,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    }
+
+                    {selectionEnabled &&
+                        <Tooltip title={`Select ${entity.id}`}>
+                            <Checkbox
+                                size={largeLayout ? "medium" : "small"}
+                                checked={isSelected}
+                                onCheckedChange={onCheckedChange}
+                            />
+                        </Tooltip>}
+
+                </div>}
+
+            {!hideId && size !== "xs" && (
+                <div className="w-[138px] text-center overflow-hidden truncate">
+
+                    {entity
+                        ? <Typography
+                            onClick={(event) => {
+                                event.stopPropagation();
+                            }}
+                            className={"font-mono select-all"}
+                            variant={"caption"}
+                            color={"secondary"}> {entity.id} </Typography>
+                        : <Skeleton/>
+                    }
+                </div>
+            )}
+
+        </div>
+    );
+
+}, equal);

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

@@ -0,0 +1,264 @@
+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 { useOutsideAlerter } 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);
+        useOutsideAlerter(ref, () => {
+            if (selected && onSelect) {
+                onSelect(undefined);
+            }
+        }, Boolean(selected && onSelect));
+
+        const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
+        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]);
+
+        useEffect(() => {
+            if (bounds) {
+                const newOverflowingValue = bounds.height > maxHeight;
+                if (isOverflowing !== newOverflowingValue)
+                    setIsOverflowing(newOverflowingValue);
+            }
+        }, [bounds, isOverflowing, 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) =>
+        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>;

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>
+        }
+    </>;
+}