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

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.d.ts

@@ -0,0 +1,23 @@
+import { Entity, EntityCollection } from "../../../../types";
+import { CustomFieldValidator } from "../../../../form/validation";
+import { OnCellValueChangeParams } from "../../../../components";
+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>;
+}
+export declare function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>): import("react/jsx-runtime").JSX.Element | null;
+export declare function PopupFormFieldInternal<M extends Record<string, any>>({ tableKey, entity: entityProp, customFieldValidator, propertyKey, collection: inputCollection, path, cellRect, open, onClose, onCellValueChange, container }: PopupFormFieldProps<M>): import("react/jsx-runtime").JSX.Element;
+export {};

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>;
+}
+
+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.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface DraggableProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+    innerRef: React.RefObject<HTMLDivElement>;
+    x?: number;
+    y?: number;
+    onMove: (params: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare function useDraggable({ containerRef, innerRef, x, y, onMove }: DraggableProps): void;
+export {};

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.d.ts

@@ -0,0 +1,6 @@
+interface WindowSize {
+    width: number;
+    height: number;
+}
+export declare function useWindowSize(): WindowSize;
+export {};

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

package/src/components/EntityCollectionTable/types.d.ts

@@ -0,0 +1,39 @@
+import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+export type EntityCollectionTableController<M extends Record<string, any>> = {
+    selectedCell?: SelectedCellProps<any>;
+    select: (cell?: SelectedCellProps<M>) => void;
+    setPopupCell?: (cell?: SelectedCellProps<M>) => void;
+    onValueChange?: (params: OnCellValueChangeParams<any, M>) => void;
+    selectedEntityIds?: string[];
+    /**
+     * Size of the elements in the collection
+     */
+    size: CollectionSize;
+};
+/**
+ * Props passed in a callback when the content of a cell in a table has been edited
+ * @group Collection components
+ */
+export interface OnCellValueChangeParams<T, M extends Record<string, any>> {
+    value: T;
+    propertyKey: string;
+    entity: Entity<M>;
+    onValueUpdated: () => void;
+    setError: (e: Error) => void;
+    fullPath: string;
+    context: FireCMSContext;
+}
+/**
+ * @group Collection components
+ */
+export type UniqueFieldValidator = (props: {
+    name: string;
+    value: any;
+    property: ResolvedProperty;
+    entityId?: string;
+}) => Promise<boolean>;
+/**
+ * Callback when a cell has changed in a table
+ * @group Collection components
+ */
+export type OnCellValueChange<T, M extends Record<string, any>> = (params: OnCellValueChangeParams<T, M>) => Promise<void>;