@rebasepro/admin 0.7.0 → 0.8.0

package/src/components/EntityCollectionTable/fields/VirtualTableDateField.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { cls, DateTimeField, focusedDisabled } from "@rebasepro/ui";
-import { useCustomizationController } from "@rebasepro/core";
-
-export function VirtualTableDateField(props: {
-    name: string;
-    error: Error | undefined;
-    mode?: "date" | "date_time";
-    timezone?: string;
-    internalValue: Date | undefined | null;
-    updateValue: (newValue: (Date | null)) => void;
-    focused: boolean;
-    disabled: boolean;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-}) {
-
-    const { locale } = useCustomizationController();
-    const {
-        disabled,
-        error,
-        mode,
-        timezone,
-        internalValue,
-        updateValue
-    } = props;
-
-    return (
-        <DateTimeField
-            value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue ?? null)}
-            invisible={true}
-            inputClassName={cls("w-full h-full", focusedDisabled)}
-            className={cls("w-full h-full", focusedDisabled)}
-            mode={mode}
-            timezone={timezone}
-            locale={locale}
-        />
-    );
-}

package/src/components/EntityCollectionTable/fields/VirtualTableInput.tsx

@@ -1,90 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-import { useDebouncedCallback, focusedDisabled, TextareaAutosize } from "@rebasepro/ui";
-
-export function VirtualTableInput(props: {
-    error: Error | undefined;
-    value: string;
-    multiline: boolean;
-    focused: boolean;
-    disabled: boolean;
-    updateValue: (newValue: (string | null)) => void;
-    onBlur?: () => void;
-}) {
-
-    const ref = React.useRef<HTMLTextAreaElement>(null);
-
-    const {
-        disabled,
-        value,
-        multiline,
-        updateValue,
-        focused
-    } = props;
-
-    const prevValue = useRef<string | null>(value);
-
-    const [internalValue, setInternalValue] = useState<typeof value>(value);
-    const focusedState = useRef<boolean>(false);
-
-    useEffect(() => {
-        if (prevValue.current !== value && value !== internalValue)
-            setInternalValue(value);
-        prevValue.current = value;
-    }, [value]);
-
-    const doUpdate = React.useCallback(() => {
-        const emptyInitialValue = !value;
-        if (emptyInitialValue && !internalValue)
-            return;
-        if (internalValue !== value && internalValue !== prevValue.current) {
-            prevValue.current = internalValue;
-            updateValue(internalValue);
-        }
-    }, [internalValue, updateValue, value]);
-    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
-    useEffect(() => {
-        if (ref.current && focused && !focusedState.current) {
-            focusedState.current = true;
-            ref.current.focus({ preventScroll: true });
-            ref.current.selectionStart = ref.current.value.length;
-            ref.current.selectionEnd = ref.current.value.length;
-        } else {
-            focusedState.current = focused;
-        }
-    }, [focused, ref]);
-
-    return (
-        <TextareaAutosize
-            className={focusedDisabled}
-            ref={ref}
-            style={{
-                padding: 0,
-                margin: 0,
-                width: "100%",
-                color: "unset",
-                fontWeight: "unset",
-                fontSize: "unset",
-                fontFamily: "unset",
-                background: "unset",
-                border: "unset",
-                resize: "none",
-                outline: "none"
-            }}
-            value={internalValue ?? ""}
-            onChange={(evt) => {
-                const newValue = evt.target.value as string;
-                if (multiline || !newValue.endsWith("\n"))
-                    setInternalValue(newValue);
-            }}
-            onFocus={() => {
-                focusedState.current = true;
-            }}
-            onBlur={() => {
-                focusedState.current = false;
-                doUpdate();
-                if (props.onBlur) props.onBlur();
-            }}
-        />
-    );
-}

package/src/components/EntityCollectionTable/fields/VirtualTableNumberInput.tsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDebouncedCallback, cls, focusedDisabled, TextField } from "@rebasepro/ui";
-
-export function VirtualTableNumberInput(props: {
-    error: Error | undefined;
-    value: number;
-    align: "right" | "left" | "center";
-    updateValue: (newValue: (number | null)) => void;
-    focused: boolean;
-    disabled: boolean;
-}) {
-
-    const {
-        align,
-        value,
-        updateValue,
-        focused
-    } = props;
-    const propStringValue = (value && typeof value === "number") ? value.toString() : "";
-    const [internalValue, setInternalValue] = useState<string | null>(propStringValue);
-
-    const prevValue = useRef<number | null>(value);
-
-    useEffect(() => {
-        if (prevValue.current !== value && String(value) !== internalValue)
-            setInternalValue(value ? value.toString() : null);
-        prevValue.current = value;
-    }, [value]);
-
-    const doUpdate = React.useCallback(() => {
-        if (internalValue !== propStringValue) {
-            if (internalValue !== undefined && internalValue !== null) {
-                const numberValue = parseFloat(internalValue);
-                if (isNaN(numberValue))
-                    return;
-                if (numberValue !== undefined && numberValue !== null)
-                    updateValue(numberValue);
-            } else {
-                updateValue(null);
-            }
-        }
-
-    }, [internalValue, value]);
-    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
-    useEffect(
-        () => {
-            if (!focused && propStringValue !== internalValue)
-                setInternalValue(value !== undefined && value !== null ? value.toString() : null);
-        },
-        [value, focused]
-    );
-
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        if (inputRef.current && focused) {
-            inputRef.current.focus({ preventScroll: true });
-        }
-    }, [focused, inputRef]);
-
-    const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
-
-    return (
-        <TextField
-            inputRef={inputRef}
-            invisible={true}
-            size="small"
-            className="w-full"
-            inputClassName={cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
-            inputStyle={{
-                textAlign: align
-            }}
-            value={internalValue ?? ""}
-            onChange={(evt) => {
-                const newValue = evt.target.value.replace(",", ".");
-                if (newValue.length === 0)
-                    setInternalValue(null);
-                if (regexp.test(newValue) || newValue.startsWith("-"))
-                    setInternalValue(newValue);
-            }}
-        />
-    );
-}

package/src/components/EntityCollectionTable/fields/VirtualTableSwitch.tsx

@@ -1,32 +0,0 @@
-import React, { useEffect } from "react";
-import { BooleanSwitch } from "@rebasepro/ui";
-
-export function VirtualTableSwitch(props: {
-    error: Error | undefined;
-    internalValue?: boolean;
-    focused: boolean;
-    disabled: boolean;
-    updateValue: (newValue: (boolean | null)) => void;
-}) {
-    const {
-        internalValue,
-        updateValue,
-        focused
-    } = props;
-    const ref = React.useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-        if (ref.current && focused) {
-            ref.current.focus({ preventScroll: true });
-        }
-    }, [focused, ref]);
-
-    return (
-        <BooleanSwitch
-            ref={ref}
-            size={"small"}
-            value={Boolean(internalValue)}
-            onValueChange={updateValue}
-        />
-    );
-}

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -1,141 +0,0 @@
-import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
-import type { FieldProps } from "../../types/fields";
-import type { Property, StringProperty } from "@rebasepro/types";
-import React, { useCallback, useMemo } from "react";
-import { Entity, EntityReference } from "@rebasepro/types";
-import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { ErrorView } from "@rebasepro/core";
-import { ReferencePreview } from "../../preview";
-import { IconForView } from "@rebasepro/core";
-import { getIconForProperty } from "../../util/property_utils";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { cls } from "@rebasepro/ui";
-import { useCollectionRegistryController } from "../../index";
-
-/**
- * Field that opens a reference selection dialog and stores the entity ID as a string.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function ReferenceAsStringFieldBinding(props: FieldProps<StringProperty>) {
-    if (typeof props.property.reference?.path !== "string") {
-        return <ReadOnlyFieldBinding {...props as FieldProps<Property>}/>;
-    }
-
-    return <ReferenceAsStringFieldBindingInternal {...props}/>;
-}
-
-function ReferenceAsStringFieldBindingInternal({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    isSubmitting,
-    disabled,
-    minimalistView,
-    property,
-    includeDescription,
-    size = "medium"
-}: FieldProps<StringProperty>) {
-    if (!property.reference?.path) {
-        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
-    }
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const collectionRegistryController = useCollectionRegistryController();
-    const path = property.reference!.path;
-    const collection: EntityCollection | undefined = useMemo(() => {
-        return path ? collectionRegistryController.getCollection(path) : undefined;
-    }, [path]);
-
-    const referenceValue: EntityReference | undefined = useMemo(() => {
-        if (value && path) {
-            return new EntityReference({ id: value,
-path });
-        }
-        return undefined;
-    }, [value, path]);
-
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    }
-
-    const onSingleEntitySelected = useCallback((e: Entity<Record<string, unknown>> | null) => {
-        setValue(e ? String(e.id) : null);
-    }, [setValue]);
-
-    const referenceDialogController = useEntitySelectionDialog({
-        multiselect: false,
-        path,
-        collection,
-        onSingleEntitySelected,
-        selectedEntityIds: value ? [value] : undefined,
-        fixedFilter: property.reference?.fixedFilter
-    }
-    );
-
-    const onEntryClick = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        referenceDialogController.open();
-    };
-
-    return (
-        <>
-            {!minimalistView && <LabelWithIconAndTooltip
-                propertyKey={propertyKey}
-                icon={getIconForProperty(property, "small")}
-                required={property.validation?.required}
-                title={property.name ?? propertyKey}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
-
-            {!collection && <ErrorView
-                error={"The specified collection does not exist. Check console"}/>}
-
-            {collection && <>
-
-                {referenceValue && <ReferencePreview
-                    disabled={!path}
-                    previewProperties={property.reference?.ui?.previewProperties}
-                    hover={!disabled}
-                    size={size}
-                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={referenceValue}
-                    includeEntityLink={property.reference?.includeEntityLink}
-                    includeId={property.reference?.includeId}
-                />}
-
-                {!value && <div className="justify-center text-left">
-                    <EntityPreviewContainer
-                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
-                            disabled || isSubmitting
-                                ? "text-surface-accent-500"
-                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
-                        onClick={onEntryClick}
-                        size={"medium"}>
-                        <IconForView collectionOrView={collection}
-                            className={"text-surface-300 dark:text-surface-600"}/>
-                        {`Edit ${property.name}`.toUpperCase()}
-                    </EntityPreviewContainer>
-                </div>}
-            </>}
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}