@rebasepro/cms 0.17.3 → 0.18.0

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

@@ -1,422 +0,0 @@
-import type { Properties } from "@rebasepro/types";
-
-import type { FormContext, PropertyFieldBindingProps } from "../../../../types/fields";
-import type { Property } from "@rebasepro/types";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
-
-import { Button, DialogActions, IconButton, Portal, Typography, XIcon } from "@rebasepro/ui";
-
-import { Entity, EntityValues } from "@rebasepro/types";
-import { PluginProviderStack } from "@rebasepro/app";
-import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
-import { useDraggable } from "./useDraggable";
-import { CustomFieldValidator, getEntitySchema } from "../../../../form/validation";
-import { useWindowSize } from "./useWindowSize";
-import { getPropertyInPath } from "../../../../util/property_utils";
-import { PropertyFieldBinding, zodToFormErrors } from "../../../../form";
-import { useAuthController, useCustomizationController, useData, useRebaseContext } from "@rebasepro/app";
-import type { OnCellValueChangeParams } from "@rebasepro/app";
-import { isDisabled, isReadOnly } from "@rebasepro/app";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-interface PopupFormFieldProps<M extends Record<string, unknown>> {
-    customFieldValidator?: CustomFieldValidator;
-    path: string;
-    entityId: string | number;
-    tableKey: string;
-    propertyKey?: Extract<keyof M, string>;
-    // `AdminCollection<M>`, not `<any>`: the admin block's key-shaped fields
-    // (titleProperty, sort, propertiesOrder) are typed against M, and
-    // `AdminCollection<any>` collapses them to `string` — which then fails to
-    // flow into the `FormContext<M>` built below.
-    collection?: AdminCollection<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, any>) => Promise<void> | void;
-}
-
-export function PopupFormField<M extends Record<string, unknown>>(props: PopupFormFieldProps<M>) {
-    if (!props.open) return null;
-    return <PopupFormFieldLoading {...props}/>;
-
-}
-
-export function PopupFormFieldLoading<M extends Record<string, unknown>>({
-    tableKey,
-    entityId,
-    customFieldValidator,
-    propertyKey,
-    collection: inputCollection,
-    path,
-    cellRect,
-    open,
-    onClose,
-    onCellValueChange,
-    container
-}: PopupFormFieldProps<M>) {
-    const dataClient = useData();
-    const [entity, setEntity] = useState<Entity<M> | undefined>(undefined);
-    useEffect(() => {
-        if (entityId && inputCollection) {
-            dataClient.collection(path).findById(entityId).then((result) => setEntity(result as Entity<M> | undefined));
-        }
-    }, [entityId, inputCollection, dataClient, path]);
-
-    if (!entity) return null;
-    return <PopupFormFieldInternal {...{
-        tableKey,
-        entityId,
-        customFieldValidator,
-        propertyKey,
-        collection: inputCollection,
-        path,
-        cellRect,
-        open,
-        onClose,
-        onCellValueChange,
-        container
-    }} entity={entity}/>;
-}
-
-export function PopupFormFieldInternal<M extends Record<string, unknown>>({
-    tableKey,
-    entityId,
-    customFieldValidator,
-    propertyKey,
-    collection,
-    path,
-    cellRect,
-    open,
-    onClose,
-    onCellValueChange,
-    container,
-    entity
-}: PopupFormFieldProps<M> & {
-    entity?: Entity<M>
-}) {
-
-    const rebaseContext = useRebaseContext();
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-
-    const [savingError, setSavingError] = React.useState<any>();
-    const [popupLocation, setPopupLocation] = useState<{
-        x: number,
-        y: number
-    }>();
-
-    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((
-        pos: { x: number, y: number },
-        draggableBoundingRect: DOMRect,
-        currentWindowSize: { width: number, height: number }
-    ) => {
-        if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
-            return pos;
-        }
-        return {
-            x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
-            y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
-        };
-    }, []);
-
-    const updatePopupLocation = useCallback((newPositionCandidate?: {
-        x: number,
-        y: number
-    }) => {
-        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
-            return;
-        }
-        const basePosition = newPositionCandidate ?? getInitialLocation();
-        const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
-
-        if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
-            setPopupLocation(newNormalizedPosition);
-        }
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
-
-    useDraggable({
-        containerRef: draggableRef,
-        innerRef,
-        x: popupLocation?.x,
-        y: popupLocation?.y,
-        onMove: updatePopupLocation
-    });
-
-    useEffect(
-        () => {
-            initialPositionSet.current = false;
-        },
-        [propertyKey, entity]
-    );
-
-    useLayoutEffect(
-        () => {
-            if (!cellRect || initialPositionSet.current) return;
-            // Ensure draggableRef is available and has dimensions before initial positioning
-            const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-            if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
-                // If not ready, perhaps wait or log. For now, just return.
-                // This might need a retry mechanism or ensure content is rendered first.
-                return;
-            }
-            updatePopupLocation();
-            initialPositionSet.current = true;
-        },
-        [cellRect, updatePopupLocation] // Removed initialPositionSet.current from deps as it's a ref
-    );
-
-    useLayoutEffect(
-        () => {
-            updatePopupLocation(popupLocation);
-        },
-        [windowSize, cellRect, updatePopupLocation, popupLocation]
-    );
-
-    const validationSchema = useMemo(() => {
-        if (!collection || !entityId) return;
-        return getEntitySchema(
-            entityId,
-            propertyKey && collection.properties[propertyKey as string]
-                ? { [propertyKey]: collection.properties[propertyKey as string] } as Properties
-                : {} as Properties,
-            customFieldValidator);
-    }, [collection, entityId, propertyKey, customFieldValidator]);
-
-    const adaptResize = useCallback(() => {
-        // When the popup resizes, we want to re-evaluate its position
-        // based on its current location and new dimensions.
-        return updatePopupLocation(popupLocation);
-    }, [popupLocation, updatePopupLocation]);
-
-    // Setup ResizeObserver
-    useEffect(() => {
-        const element = draggableRef.current;
-        if (!element) return;
-
-        const observer = new ResizeObserver(() => {
-            adaptResize();
-        });
-
-        observer.observe(element);
-
-        return () => {
-            observer.unobserve(element);
-            observer.disconnect();
-        };
-    }, [adaptResize, draggableRef]);
-
-    const saveValue = async (values: M) => {
-        setSavingError(null);
-        if (collection && entity && onCellValueChange && propertyKey) {
-            return onCellValueChange({
-                value: values[propertyKey as string],
-                propertyKey: propertyKey as string,
-                data: entity,
-                setError: setSavingError,
-                onValueUpdated: () => {
-                }
-            });
-        }
-        return Promise.resolve();
-    };
-
-    const formex = useCreateFormex<M>({
-        initialValues: (entity?.values ?? {}) as EntityValues<M>,
-        validation: async (values) => {
-            if (!validationSchema) return {};
-            const result = await validationSchema.safeParseAsync(values);
-            if (result.success) return {};
-            return zodToFormErrors(result.error) as Record<string, string>;
-        },
-        validateOnInitialRender: true,
-        onSubmit: (values, actions) => {
-            saveValue(values)
-                .then(() => {
-                    formex.resetForm({
-                        values: values
-                    })
-                    onClose();
-                })
-                .finally(() => actions.setSubmitting(false));
-        }
-    });
-
-    const {
-        values,
-        isSubmitting,
-        setFieldValue,
-        handleSubmit
-    } = formex;
-
-    const disabled = isSubmitting;
-
-    const formContext: FormContext<M> = {
-        collection: collection,
-        entityId,
-        values,
-        path,
-        setFieldValue,
-        save: saveValue,
-        submit: handleSubmit,
-        formex,
-        status: "existing",
-        openEntityMode: "side_panel",
-        disabled: false
-    };
-
-    const property: Property | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as Properties, propertyKey as string);
-    const fieldProps: PropertyFieldBindingProps<M> | undefined = propertyKey && property
-        ? {
-            propertyKey: propertyKey as string,
-            disabled: isSubmitting || isReadOnly(property) || isDisabled(property),
-            property,
-            includeDescription: false,
-            underlyingValueHasChanged: false,
-            context: formContext,
-            partOfArray: false,
-            minimalistView: true,
-            autoFocus: open
-        }
-        : undefined;
-
-    let internalForm = <>
-        <div
-            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-            className="w-[700px] 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 = customizationController.plugins;
-    if (plugins && plugins.length > 0) {
-        internalForm = (
-            <PluginProviderStack
-                plugins={plugins}
-                scope="form"
-                scopeProps={{
-                    status: "existing",
-                    path,
-                    collection,
-                    entity,
-                    context: rebaseContext,
-                    currentEntityId: entityId,
-                    formContext
-                }}>
-                {internalForm}
-            </PluginProviderStack>
-        );
-    }
-    const form = <div
-        className={`text-surface-900 dark:text-white overflow-auto rounded-xs rounded-md bg-white dark:bg-surface-800 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
-
-        {internalForm}
-
-        {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-surface-800 ${!open ? "invisible" : "visible"
-                } cursor-grab overflow-visible`}
-            ref={draggableRef}>
-
-            {/* ElementResizeListener removed from here */}
-
-            <div
-                className="overflow-hidden">
-
-                {form}
-
-                <div
-                    className="absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full"
-                    style={{
-                        width: "32px",
-                        height: "32px"
-                    }}>
-                    <IconButton
-                        size={"small"}
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            onClose();
-                        }}>
-                        <XIcon className="text-white"/>
-                    </IconButton>
-                </div>
-            </div>
-
-        </div>
-    );
-
-    return (
-        <Portal.Root asChild
-            container={container}>
-            <Formex value={formex as FormexController<Record<string, unknown>>}>
-                {draggable}
-            </Formex>
-        </Portal.Root>
-    );
-
-}

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

@@ -1,99 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-
-/** Tracks events originating inside the inner (non-draggable) area. */
-const innerClicked = new WeakSet<MouseEvent>();
-
-interface DraggableProps {
-    containerRef: React.RefObject<HTMLDivElement | null>,
-    innerRef: React.RefObject<HTMLDivElement | null>,
-    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 = useCallback((event: MouseEvent) => {
-        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || innerClicked.has(event)) {
-            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();
-    }, [containerRef, onMove]);
-
-    const onMouseDownInner = useCallback((event: MouseEvent) => {
-        innerClicked.add(event);
-    }, [])
-
-    const onSelect = useCallback((event: Event) => {
-        event.preventDefault()
-        event.stopPropagation();
-    }, [])
-
-    const onMouseUp = (event: MouseEvent) => {
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-        document.removeEventListener("selectstart", onSelect);
-        event.stopPropagation();
-        listeningRef.current = false;
-    };
-
-    const onMouseMove = (event: MouseEvent) => {
-        if ((event.target as HTMLElement)?.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);
-        };
-    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
-
-}

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

@@ -1,22 +0,0 @@
-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;
-}