@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.81

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

@@ -0,0 +1,122 @@
+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,
+                context,
+                highlightEntity,
+                unhighlightEntity
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.onAnalyticsEvent?.("entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.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.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.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
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,401 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import equal from "react-fast-compare"
+
+import * as Portal from "@radix-ui/react-portal";
+
+import {
+    Entity,
+    EntityCollection,
+    EntityValues,
+    FireCMSPlugin,
+    FormContext,
+    PropertyFieldBindingProps,
+    ResolvedEntityCollection,
+    ResolvedProperties,
+    ResolvedProperty
+} from "../../../../types";
+import { Form, Formik, FormikProps } from "formik";
+import { useDraggable } from "./useDraggable";
+import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
+import { useWindowSize } from "./useWindowSize";
+import { ElementResizeListener } from "./ElementResizeListener";
+import { ErrorView, OnCellValueChangeParams } from "../../../../components";
+import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
+import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { PropertyFieldBinding } from "../../../../form";
+import { useDataSource, useFireCMSContext } from "../../../../hooks";
+
+interface PopupFormFieldProps<M extends Record<string, any>> {
+    entity?: Entity<M>;
+    customFieldValidator?: CustomFieldValidator;
+    path: string;
+    tableKey: string;
+    propertyKey?: Extract<keyof M, string>;
+    collection?: EntityCollection<M>;
+    cellRect?: DOMRect;
+    open: boolean;
+    onClose: () => void;
+    container: HTMLElement | null;
+    /**
+     * Callback when the value of a cell has been edited
+     * @param params
+     */
+    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+}
+
+export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
+    if (!props.open) return null;
+    return <PopupFormFieldInternal {...props} />;
+
+}
+
+export function PopupFormFieldInternal<M extends Record<string, any>>({
+                                                                          tableKey,
+                                                                          entity: entityProp,
+                                                                          customFieldValidator,
+                                                                          propertyKey,
+                                                                          collection: inputCollection,
+                                                                          path,
+                                                                          cellRect,
+                                                                          open,
+                                                                          onClose,
+                                                                          onCellValueChange,
+                                                                          container
+                                                                      }: PopupFormFieldProps<M>) {
+
+    // const dataSource = useDataSource();
+    const fireCMSContext = useFireCMSContext();
+
+    const [savingError, setSavingError] = React.useState<any>();
+    const [popupLocation, setPopupLocation] = useState<{
+        x: number,
+        y: number
+    }>();
+
+    const entityId = entityProp?.id;
+    const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
+    // useEffect(() => {
+    //     if (entityId && inputCollection) {
+    //         return dataSource.listenEntity?.({
+    //             path,
+    //             entityId,
+    //             collection: inputCollection,
+    //             onUpdate: (e) => {
+    //                 setEntity(e);
+    //                 setInternalValue(e?.values);
+    //             }
+    //         });
+    //     } else {
+    //         return () => {
+    //         };
+    //     }
+    // }, [dataSource, entityId, inputCollection, path, open]);
+
+    const [internalValue, setInternalValue] = useState<EntityValues<M> | undefined>(entity?.values);
+
+    const collection: ResolvedEntityCollection<M> | undefined = inputCollection
+        ? resolveCollection<M>({
+            collection: inputCollection,
+            path,
+            values: internalValue,
+            entityId,
+            fields: fireCMSContext.propertyConfigs
+        })
+        : undefined;
+
+    const windowSize = useWindowSize();
+
+    const draggableRef = React.useRef<HTMLDivElement>(null);
+    const innerRef = React.useRef<HTMLDivElement>(null);
+
+    const initialPositionSet = React.useRef<boolean>(false);
+
+    const getInitialLocation = useCallback(() => {
+        if (!cellRect) throw Error("getInitialLocation error");
+
+        return {
+            x: cellRect.left < windowSize.width - cellRect.right
+                ? cellRect.x + cellRect.width / 2
+                : cellRect.x - cellRect.width / 2,
+            y: cellRect.top < windowSize.height - cellRect.bottom
+                ? cellRect.y + cellRect.height / 2
+                : cellRect.y - cellRect.height / 2
+        };
+    }, [cellRect, windowSize.height, windowSize.width]);
+
+    const normalizePosition = useCallback(({
+                                               x,
+                                               y
+                                           }: { x: number, y: number }) => {
+
+        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
+        if (!draggableBoundingRect)
+            throw Error("normalizePosition called before draggableBoundingRect is set");
+
+        return {
+            x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
+            y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+        };
+    }, [windowSize]);
+
+    const updatePopupLocation = useCallback((position?: {
+        x: number,
+        y: number
+    }) => {
+
+        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
+        if (!cellRect || !draggableBoundingRect) return;
+        // const newPosition = normalizePosition(position ?? getInitialLocation());
+        const newPosition = position ?? normalizePosition(getInitialLocation());
+        if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y)
+            setPopupLocation(newPosition);
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+
+    useDraggable({
+        containerRef: draggableRef,
+        innerRef,
+        x: popupLocation?.x,
+        y: popupLocation?.y,
+        onMove: updatePopupLocation
+    });
+
+    useEffect(
+        () => {
+            initialPositionSet.current = false;
+        },
+        [propertyKey, entity]
+    );
+
+    useLayoutEffect(
+        () => {
+            const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
+            if (!cellRect || !draggableBoundingRect || initialPositionSet.current) return;
+            updatePopupLocation();
+            initialPositionSet.current = true;
+        },
+        [cellRect, updatePopupLocation, initialPositionSet.current]
+    );
+
+    useLayoutEffect(
+        () => {
+            updatePopupLocation(popupLocation);
+        },
+        [windowSize, cellRect]
+    );
+
+    const validationSchema = useMemo(() => {
+        if (!collection || !entityId) return;
+        return getYupEntitySchema(
+            entityId,
+            propertyKey && collection.properties[propertyKey as string]
+                ? { [propertyKey]: collection.properties[propertyKey as string] } as ResolvedProperties<any>
+                : {} as ResolvedProperties<any>,
+            customFieldValidator);
+    }, [collection, entityId, propertyKey, customFieldValidator]);
+
+    const adaptResize = useCallback(() => {
+        return updatePopupLocation(popupLocation);
+    }, [popupLocation, updatePopupLocation]);
+
+    const saveValue = async (values: M) => {
+        setSavingError(null);
+        if (inputCollection && entity && onCellValueChange && propertyKey) {
+            return onCellValueChange({
+                value: values[propertyKey as string],
+                propertyKey: propertyKey as string,
+                entity,
+                setError: setSavingError,
+                onValueUpdated: () => {
+                },
+                fullPath: path,
+                context: fireCMSContext
+            });
+        }
+        return Promise.resolve();
+    };
+
+    if (!entity)
+        return <></>;
+
+    const form = entity && (
+        <div
+            className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+            <Formik
+                initialValues={(entity?.values ?? {}) as EntityValues<M>}
+                enableReinitialize={true}
+                validationSchema={validationSchema}
+                validateOnMount={true}
+                validate={(values) => console.debug("Validating", values)}
+                onSubmit={(values, actions) => {
+                    saveValue(values)
+                        .then(() => onClose())
+                        .finally(() => actions.setSubmitting(false));
+                }}
+            >
+                {({
+                      values,
+                      setFieldValue,
+                      handleSubmit,
+                      isSubmitting
+                  }: FormikProps<EntityValues<M>>) => {
+
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    useEffect(() => {
+                        if (!equal(values, internalValue)) {
+                            setInternalValue(values);
+                        }
+                    }, [values]);
+
+                    if (!entity)
+                        return <ErrorView
+                            error={"PopupFormField misconfiguration"}/>;
+
+                    if (!collection)
+                        return <></>;
+
+                    const disabled = isSubmitting;
+
+                    const formContext: FormContext<M> = {
+                        collection,
+                        entityId,
+                        values,
+                        path,
+                        setFieldValue,
+                        save: saveValue
+                    };
+
+                    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
+                    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
+                        ? {
+                            propertyKey: propertyKey as string,
+                            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+                            property,
+                            includeDescription: false,
+                            underlyingValueHasChanged: false,
+                            context: formContext,
+                            tableMode: true,
+                            partOfArray: false,
+                            partOfBlock: false,
+                            autoFocus: open
+                        }
+                        : undefined;
+
+                    let internalForm = <>
+                        <div
+                            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
+                            className="w-[560px] max-w-full max-h-[85vh]">
+                            <Form
+                                onSubmit={handleSubmit}
+                                noValidate>
+
+                                <div
+                                    className="mb-1 p-4 flex flex-col relative">
+                                    <div
+                                        ref={innerRef}
+                                        className="cursor-auto"
+                                        style={{ cursor: "auto !important" }}>
+                                        {fieldProps &&
+                                            <PropertyFieldBinding {...fieldProps}/>}
+                                    </div>
+                                </div>
+
+                                <DialogActions>
+                                    <Button
+                                        variant="filled"
+                                        color="primary"
+                                        type="submit"
+                                        disabled={disabled}
+                                    >
+                                        Save
+                                    </Button>
+                                </DialogActions>
+
+                            </Form>
+
+                        </div>
+                    </>;
+
+                    const plugins = fireCMSContext.plugins;
+                    if (plugins) {
+                        // const formController: FormContext<M> = {
+                        //     values,
+                        //     setFieldValue
+                        // }
+                        plugins.forEach((plugin: FireCMSPlugin) => {
+                            if (plugin.form?.provider) {
+                                internalForm = (
+                                    <plugin.form.provider.Component
+                                        status={"existing"}
+                                        path={path}
+                                        collection={collection}
+                                        entity={entity}
+                                        context={fireCMSContext}
+                                        currentEntityId={entityId}
+                                        formContext={formContext}
+                                        {...plugin.form.provider.props}>
+                                        {internalForm}
+                                    </plugin.form.provider.Component>
+                                );
+                            }
+                        });
+                    }
+                    return internalForm;
+                }}
+            </Formik>
+
+            {savingError &&
+                <Typography color={"error"}>
+                    {savingError.message}
+                </Typography>
+            }
+        </div>
+    );
+
+    const draggable = (
+        <div
+            key={`draggable_${propertyKey as string}_${entityId}_${open}`}
+            style={{
+                boxShadow: "0 0 0 2px rgba(128,128,128,0.2)",
+            }}
+            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-gray-950 ${
+                !open ? "invisible" : "visible"
+            } cursor-grab overflow-visible`}
+            ref={draggableRef}>
+
+            <ElementResizeListener onResize={adaptResize}/>
+
+            <div
+                className="overflow-hidden">
+
+                {form}
+
+                <div
+                    className="absolute -top-3.5 -right-3.5 bg-gray-500 rounded-full"
+                    style={{
+                        width: "32px",
+                        height: "32px"
+                    }}>
+                    <IconButton
+                        size={"small"}
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            onClose();
+                        }}>
+                        <ClearIcon className="text-white"
+                                   size={"small"}/>
+                    </IconButton>
+                </div>
+            </div>
+
+        </div>
+    );
+
+    return (
+        <Portal.Root asChild
+                     container={container}
+        >
+            {draggable}
+        </Portal.Root>
+    );
+
+}

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

@@ -0,0 +1,97 @@
+import React, { useEffect } from "react";
+
+interface DraggableProps {
+    containerRef: React.RefObject<HTMLDivElement>,
+    innerRef: React.RefObject<HTMLDivElement>,
+    // ref: React.RefObject<HTMLDivElement>,
+    x?: number;
+    y?: number;
+    onMove: (params: { x: number, y: number }) => void,
+}
+
+export function useDraggable({
+                                 containerRef,
+                                 innerRef,
+                                 x,
+                                 y,
+                                 onMove
+                             }: DraggableProps) {
+
+    let relX = 0;
+    let relY = 0;
+
+    const listeningRef = React.useRef(false);
+
+    const onMouseDown = (event: any) => {
+        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
+            return;
+        }
+
+        const {
+            x,
+            y
+        } = containerRef.current.getBoundingClientRect();
+
+        relX = event.screenX - x;
+        relY = event.screenY - y;
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("selectstart", onSelect);
+        listeningRef.current = true;
+        // event.stopPropagation();
+    };
+    const onMouseDownInner = (event: any) => {
+        // @ts-ignore
+        event.innerClicked = true;
+    };
+
+    const onSelect = (event: any) => {
+        event.preventDefault()
+        event.stopPropagation();
+    };
+
+    const onMouseUp = (event: any) => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.removeEventListener("selectstart", onSelect);
+        event.stopPropagation();
+        listeningRef.current = false;
+    };
+
+    const onMouseMove = (event: any) => {
+        if (event.target.localName === "input" || !listeningRef.current)
+            return;
+        onMove({
+                x: event.screenX - relX,
+                y: event.screenY - relY
+            }
+        );
+        event.stopPropagation();
+    };
+
+    const update = () => {
+        if (containerRef.current) {
+            containerRef.current.style.top = `${y}px`;
+            containerRef.current.style.left = `${x}px`;
+        }
+    };
+
+    useEffect(() => {
+        const current = containerRef.current;
+        const innerCurrent = innerRef.current;
+        if (!current || !innerCurrent)
+            return;
+        if (innerCurrent)
+            innerCurrent.addEventListener("mousedown", onMouseDownInner);
+        if (current)
+            current.addEventListener("mousedown", onMouseDown);
+        update();
+        return () => {
+            if (current)
+                current.removeEventListener("mousedown", onMouseDown);
+            if (innerCurrent)
+                innerCurrent.removeEventListener("mousedown", onMouseDownInner);
+        };
+    });
+
+}

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

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useState } from "react";
+
+interface WindowSize {
+    width: number,
+    height: number
+}
+
+export function useWindowSize(): WindowSize {
+    const [size, setSize] = useState<WindowSize>({ width: 0, height: 0 });
+    useLayoutEffect(() => {
+        function updateSize() {
+            setSize({ width: window.innerWidth, height: window.innerHeight });
+        }
+
+        window.addEventListener("resize", updateSize);
+        updateSize();
+        return () => window.removeEventListener("resize", updateSize);
+    }, []);
+    return size;
+}