@glideappsfinal/glide-data-grid 6.0.9

package/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx

@@ -0,0 +1,262 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import ClickOutsideContainer from "../click-outside-container/click-outside-container.js";
+import { makeCSSStyle, type Theme, ThemeContext } from "../../common/styles.js";
+import type { GetCellRendererCallback } from "../../cells/cell-types.js";
+import {
+    type EditableGridCell,
+    type GridCell,
+    isEditableGridCell,
+    isInnerOnlyCell,
+    isObjectEditorCallbackResult,
+    type Item,
+    type ProvideEditorCallback,
+    type ProvideEditorCallbackResult,
+    type Rectangle,
+    type ValidatedGridCell,
+} from "../data-grid/data-grid-types.js";
+
+import type { CellActivatedEventArgs } from "../data-grid/event-args.js";
+import { DataGridOverlayEditorStyle } from "./data-grid-overlay-editor-style.js";
+import type { OverlayImageEditorProps } from "./private/image-overlay-editor.js";
+import { useStayOnScreen } from "./use-stay-on-screen.js";
+
+type ImageEditorType = React.ComponentType<OverlayImageEditorProps>;
+
+interface DataGridOverlayEditorProps {
+    readonly target: Rectangle;
+    readonly cell: Item;
+    readonly content: GridCell;
+    readonly className?: string;
+    readonly id: string;
+    readonly initialValue?: string;
+    readonly bloom?: readonly [number, number];
+    readonly theme: Theme;
+    readonly onFinishEditing: (newCell: GridCell | undefined, movement: readonly [-1 | 0 | 1, -1 | 0 | 1]) => void;
+    readonly forceEditMode: boolean;
+    readonly highlight: boolean;
+    readonly portalElementRef?: React.RefObject<HTMLElement>;
+    readonly imageEditorOverride?: ImageEditorType;
+    readonly getCellRenderer: GetCellRendererCallback;
+    readonly markdownDivCreateNode?: (content: string) => DocumentFragment;
+    readonly provideEditor?: ProvideEditorCallback<GridCell>;
+    readonly activation: CellActivatedEventArgs;
+    readonly validateCell?: (
+        cell: Item,
+        newValue: EditableGridCell,
+        prevValue: GridCell
+    ) => boolean | ValidatedGridCell;
+    readonly isOutsideClick?: (e: MouseEvent | TouchEvent) => boolean;
+    readonly customEventTarget?: HTMLElement | Window | Document;
+}
+
+const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps> = p => {
+    const {
+        target,
+        content,
+        onFinishEditing: onFinishEditingIn,
+        forceEditMode,
+        initialValue,
+        imageEditorOverride,
+        markdownDivCreateNode,
+        highlight,
+        className,
+        theme,
+        id,
+        cell,
+        bloom,
+        portalElementRef,
+        validateCell,
+        getCellRenderer,
+        provideEditor,
+        isOutsideClick,
+        customEventTarget,
+        activation,
+    } = p;
+
+    const [tempValue, setTempValueRaw] = React.useState<GridCell | undefined>(forceEditMode ? content : undefined);
+    const lastValueRef = React.useRef(tempValue ?? content);
+    lastValueRef.current = tempValue ?? content;
+
+    const [isValid, setIsValid] = React.useState(() => {
+        if (validateCell === undefined) return true;
+        return !(isEditableGridCell(content) && validateCell?.(cell, content, lastValueRef.current) === false);
+    });
+
+    const onFinishEditing = React.useCallback<typeof onFinishEditingIn>(
+        (newCell, movement) => {
+            onFinishEditingIn(isValid ? newCell : undefined, movement);
+        },
+        [isValid, onFinishEditingIn]
+    );
+
+    const setTempValue = React.useCallback(
+        (newVal: GridCell | undefined) => {
+            if (validateCell !== undefined && newVal !== undefined && isEditableGridCell(newVal)) {
+                const validResult = validateCell(cell, newVal, lastValueRef.current);
+                if (validResult === false) {
+                    setIsValid(false);
+                } else if (typeof validResult === "object") {
+                    newVal = validResult;
+                    setIsValid(true);
+                } else {
+                    setIsValid(true);
+                }
+            }
+            setTempValueRaw(newVal);
+        },
+        [cell, validateCell]
+    );
+
+    const finished = React.useRef(false);
+    const customMotion = React.useRef<[-1 | 0 | 1, -1 | 0 | 1] | undefined>(undefined);
+
+    const onClickOutside = React.useCallback(() => {
+        onFinishEditing(tempValue, [0, 0]);
+        finished.current = true;
+    }, [tempValue, onFinishEditing]);
+
+    const onEditorFinished = React.useCallback(
+        (newValue: GridCell | undefined, movement?: readonly [-1 | 0 | 1, -1 | 0 | 1]) => {
+            onFinishEditing(newValue, movement ?? customMotion.current ?? [0, 0]);
+            finished.current = true;
+        },
+        [onFinishEditing]
+    );
+
+    const onKeyDown = React.useCallback(
+        async (event: React.KeyboardEvent) => {
+            let save = false;
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                event.preventDefault();
+                customMotion.current = [0, 0];
+            } else if (
+                event.key === "Enter" &&
+                // The shift key is reserved for multi-line editing
+                // to allow inserting new lines without closing the editor.
+                !event.shiftKey
+            ) {
+                event.stopPropagation();
+                event.preventDefault();
+                customMotion.current = [0, 1];
+                save = true;
+            } else if (event.key === "Tab") {
+                event.stopPropagation();
+                event.preventDefault();
+                customMotion.current = [event.shiftKey ? -1 : 1, 0];
+                save = true;
+            }
+
+            window.setTimeout(() => {
+                if (!finished.current && customMotion.current !== undefined) {
+                    onFinishEditing(save ? tempValue : undefined, customMotion.current);
+                    finished.current = true;
+                }
+            }, 0);
+        },
+        [onFinishEditing, tempValue]
+    );
+
+    const targetValue = tempValue ?? content;
+
+    const [editorProvider, useLabel] = React.useMemo((): [ProvideEditorCallbackResult<GridCell>, boolean] | [] => {
+        if (isInnerOnlyCell(content)) return [];
+        const cellWithLocation = { ...content, location: cell, activation } as GridCell & {
+            location: Item;
+            activation: CellActivatedEventArgs;
+        };
+        const external = provideEditor?.(cellWithLocation);
+        if (external !== undefined) return [external, false];
+        return [getCellRenderer(content)?.provideEditor?.(cellWithLocation), false];
+    }, [cell, content, getCellRenderer, provideEditor, activation]);
+
+    const { ref, style: stayOnScreenStyle } = useStayOnScreen();
+
+    let pad = true;
+    let editor: React.ReactNode;
+    let style = true;
+    let styleOverride: React.CSSProperties | undefined;
+
+    if (editorProvider !== undefined) {
+        pad = editorProvider.disablePadding !== true;
+        style = editorProvider.disableStyling !== true;
+        const isObjectEditor = isObjectEditorCallbackResult(editorProvider);
+        if (isObjectEditor) {
+            styleOverride = editorProvider.styleOverride;
+        }
+        const CustomEditor = isObjectEditor ? editorProvider.editor : editorProvider;
+        editor = (
+            <CustomEditor
+                portalElementRef={portalElementRef}
+                isHighlighted={highlight}
+                activation={activation}
+                onChange={setTempValue}
+                value={targetValue}
+                initialValue={initialValue}
+                onFinishedEditing={onEditorFinished}
+                validatedSelection={isEditableGridCell(targetValue) ? targetValue.selectionRange : undefined}
+                forceEditMode={forceEditMode}
+                target={target}
+                imageEditorOverride={imageEditorOverride}
+                markdownDivCreateNode={markdownDivCreateNode}
+                isValid={isValid}
+                theme={theme}
+            />
+        );
+    }
+
+    styleOverride = { ...styleOverride, ...stayOnScreenStyle };
+
+    // Consider imperatively creating and adding the element to the dom?
+    const portalElement = portalElementRef?.current ?? document.getElementById("portal");
+    if (portalElement === null) {
+        // eslint-disable-next-line no-console
+        console.error(
+            'Cannot open Data Grid overlay editor, because portal not found. Please, either provide a portalElementRef or add `<div id="portal" />` as the last child of your `<body>`.'
+        );
+        return null;
+    }
+
+    let classWrap = style ? "gdg-style" : "gdg-unstyle";
+    if (!isValid) {
+        classWrap += " gdg-invalid";
+    }
+
+    if (pad) {
+        classWrap += " gdg-pad";
+    }
+
+    const bloomX = bloom?.[0] ?? 1;
+    const bloomY = bloom?.[1] ?? 1;
+
+    return createPortal(
+        <ThemeContext.Provider value={theme}>
+            <ClickOutsideContainer
+                style={makeCSSStyle(theme)}
+                className={className}
+                onClickOutside={onClickOutside}
+                isOutsideClick={isOutsideClick}
+                customEventTarget={customEventTarget}>
+                <DataGridOverlayEditorStyle
+                    ref={ref}
+                    id={id}
+                    className={classWrap}
+                    style={styleOverride}
+                    as={useLabel === true ? "label" : undefined}
+                    targetX={target.x - bloomX}
+                    targetY={target.y - bloomY}
+                    targetWidth={target.width + bloomX * 2}
+                    targetHeight={target.height + bloomY * 2}>
+                    <div className="gdg-clip-region" onKeyDown={onKeyDown}>
+                        {editor}
+                    </div>
+                </DataGridOverlayEditorStyle>
+            </ClickOutsideContainer>
+        </ThemeContext.Provider>,
+        portalElement
+    );
+};
+
+export default DataGridOverlayEditor;

package/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.tsx

@@ -0,0 +1,34 @@
+import { styled } from "@linaria/react";
+
+export const BubblesOverlayEditorStyle = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: auto;
+    margin-bottom: auto;
+    overflow: auto;
+
+    .boe-bubble {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: var(--gdg-rounding-radius, calc(var(--gdg-bubble-height) / 2));
+
+        padding: 0 var(--gdg-bubble-padding);
+        height: var(--gdg-bubble-height);
+        background-color: var(--gdg-bg-bubble);
+        color: var(--gdg-text-dark);
+        margin: var(--gdg-bubble-margin);
+        white-space: nowrap;
+    }
+
+    textarea {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 0px;
+        height: 0px;
+
+        opacity: 0;
+    }
+`;

package/src/internal/data-grid-overlay-editor/private/bubbles-overlay-editor.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { BubblesOverlayEditorStyle } from "./bubbles-overlay-editor-style.js";
+
+interface Props {
+    readonly bubbles: readonly string[];
+}
+
+const BubblesOverlayEditor: React.FunctionComponent<Props> = p => {
+    const { bubbles } = p;
+    return (
+        <BubblesOverlayEditorStyle>
+            {bubbles.map((b, i) => (
+                <div key={i} className="boe-bubble">
+                    {b}
+                </div>
+            ))}
+            <textarea className="gdg-input" autoFocus={true} />
+        </BubblesOverlayEditorStyle>
+    );
+};
+export default BubblesOverlayEditor;

package/src/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.tsx

@@ -0,0 +1,63 @@
+import type { DrilldownCellData } from "../../data-grid/data-grid-types.js";
+import * as React from "react";
+import { styled } from "@linaria/react";
+
+const DrilldownOverlayEditorStyle = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+
+    .doe-bubble {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        padding: 0 8px;
+        height: 24px;
+
+        background-color: var(--gdg-bg-cell);
+        color: var(--gdg-text-dark);
+        margin: 2px;
+
+        border-radius: var(--gdg-rounding-radius, 6px);
+
+        box-shadow:
+            0 0 1px rgba(62, 65, 86, 0.4),
+            0 1px 3px rgba(62, 65, 86, 0.4);
+
+        img {
+            height: 16px;
+            object-fit: contain;
+
+            margin-right: 4px;
+        }
+    }
+
+    textarea {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 0px;
+        height: 0px;
+
+        opacity: 0;
+    }
+`;
+
+interface Props {
+    readonly drilldowns: readonly DrilldownCellData[];
+}
+
+const DrilldownOverlayEditor: React.FunctionComponent<Props> = p => {
+    const { drilldowns } = p;
+    return (
+        <DrilldownOverlayEditorStyle>
+            {drilldowns.map((d, i) => (
+                <div key={i} className="doe-bubble">
+                    {d.img !== undefined && <img src={d.img} />}
+                    <div>{d.text}</div>
+                </div>
+            ))}
+        </DrilldownOverlayEditorStyle>
+    );
+};
+export default DrilldownOverlayEditor;

package/src/internal/data-grid-overlay-editor/private/image-overlay-editor-style.tsx

@@ -0,0 +1,56 @@
+import { styled } from "@linaria/react";
+
+export const ImageOverlayEditorStyle = styled.div`
+    display: flex;
+
+    height: 100%;
+
+    .gdg-centering-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        height: 100%;
+
+        img,
+        canvas {
+            max-height: calc(100vh - var(--overlay-top) - 20px);
+            object-fit: contain;
+            user-select: none;
+        }
+
+        canvas {
+            max-width: 380px;
+        }
+    }
+
+    .gdg-edit-icon {
+        position: absolute;
+        top: 12px;
+        right: 0;
+        width: 48px;
+        height: 48px;
+        color: var(--gdg-accent-color);
+
+        cursor: pointer;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        > * {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    textarea {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 0px;
+        height: 0px;
+
+        opacity: 0;
+    }
+`;

package/src/internal/data-grid-overlay-editor/private/image-overlay-editor.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { ImageOverlayEditorStyle } from "./image-overlay-editor-style.js";
+import { Carousel } from "react-responsive-carousel";
+import { EditPencil } from "../../../common/utils.js";
+
+/** @category Types */
+export interface OverlayImageEditorProps {
+    readonly urls: readonly string[];
+    readonly canWrite: boolean;
+    readonly onCancel: () => void;
+    readonly onChange: (newImage: string) => void;
+    readonly onEditClick?: () => void;
+    readonly renderImage?: (url: string) => React.ReactNode;
+}
+
+/** @category Renderers */
+export const ImageOverlayEditor: React.FunctionComponent<OverlayImageEditorProps> = p => {
+    const { urls, canWrite, onEditClick, renderImage } = p;
+
+    const filtered = urls.filter(u => u !== "");
+
+    if (filtered.length === 0) {
+        return null;
+    }
+
+    const allowMove = filtered.length > 1;
+    return (
+        <ImageOverlayEditorStyle data-testid="GDG-default-image-overlay-editor">
+            <Carousel
+                showArrows={allowMove}
+                showThumbs={false}
+                swipeable={allowMove}
+                emulateTouch={allowMove}
+                infiniteLoop={allowMove}>
+                {filtered.map(url => {
+                    const innerContent = renderImage?.(url) ?? <img draggable={false} src={url} />;
+                    return (
+                        <div className="gdg-centering-container" key={url}>
+                            {innerContent}
+                        </div>
+                    );
+                })}
+            </Carousel>
+            {canWrite && onEditClick && (
+                <button className="gdg-edit-icon" onClick={onEditClick}>
+                    <EditPencil />
+                </button>
+            )}
+        </ImageOverlayEditorStyle>
+    );
+};

package/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.tsx

@@ -0,0 +1,80 @@
+import { GrowingEntryStyle } from "../../growing-entry/growing-entry-style.js";
+import { styled } from "@linaria/react";
+
+interface Props {
+    targetWidth: number;
+}
+
+export const MarkdownOverlayEditorStyle = styled.div<Props>`
+    min-width: ${p => p.targetWidth}px;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    position: relative;
+    color: var(--gdg-text-dark);
+
+    ${GrowingEntryStyle} {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    .gdg-spacer {
+        flex: 1;
+    }
+
+    .gdg-edit-icon {
+        position: relative;
+        cursor: pointer;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        color: var(--gdg-accent-color);
+
+        padding: 0;
+
+        height: 24px;
+        width: 24px;
+        flex-shrink: 0;
+
+        transition: all "0.125s ease";
+
+        border-radius: 6px;
+
+        > * {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .gdg-edit-hover {
+        :hover {
+            background-color: var(--gdg-accent-light);
+            transition: background-color 150ms;
+        }
+    }
+
+    .gdg-checkmark-hover {
+        :hover {
+            color: #ffffff;
+            background-color: var(--gdg-accent-color);
+        }
+    }
+
+    .gdg-md-edit-textarea {
+        position: relative;
+        top: 0px;
+        left: 0px;
+        width: 0px;
+        height: 0px;
+        margin-top: 25px;
+        opacity: 0;
+        padding: 0;
+    }
+
+    .gdg-ml-6 {
+        margin-left: 6px;
+    }
+`;

package/src/internal/data-grid-overlay-editor/private/markdown-overlay-editor.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import MarkdownDiv from "../../markdown-div/markdown-div.js";
+import { GrowingEntry } from "../../growing-entry/growing-entry.js";
+import { MarkdownOverlayEditorStyle } from "./markdown-overlay-editor-style.js";
+import { EditPencil, Checkmark } from "../../../common/utils.js";
+import type { MarkdownCell, Rectangle, SelectionRange } from "../../data-grid/data-grid-types.js";
+
+interface Props {
+    readonly targetRect: Rectangle;
+    readonly onChange: (ev: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    readonly forceEditMode: boolean;
+    readonly onFinish: (newValue?: MarkdownCell | undefined) => void;
+    readonly validatedSelection?: SelectionRange;
+
+    readonly value: MarkdownCell;
+
+    createNode?: (content: string) => DocumentFragment;
+}
+
+export const MarkdownOverlayEditor: React.FunctionComponent<Props> = p => {
+    const { value, onChange, forceEditMode, createNode, targetRect, onFinish, validatedSelection } = p;
+
+    const markdown = value.data;
+    const readonly = value.readonly === true;
+
+    const [editMode, setEditMode] = React.useState<boolean>(markdown === "" || forceEditMode);
+    const onEditClick = React.useCallback(() => {
+        setEditMode(e => !e);
+    }, []);
+    const addLeftPad = markdown ? "gdg-ml-6" : "";
+
+    if (editMode) {
+        return (
+            <MarkdownOverlayEditorStyle targetWidth={targetRect.width - 20}>
+                <GrowingEntry
+                    autoFocus={true}
+                    highlight={false}
+                    validatedSelection={validatedSelection}
+                    value={markdown}
+                    onKeyDown={e => {
+                        if (e.key === "Enter") e.stopPropagation();
+                    }}
+                    onChange={onChange}
+                />
+                <div className={`gdg-edit-icon gdg-checkmark-hover ${addLeftPad}`} onClick={() => onFinish(value)}>
+                    <Checkmark />
+                </div>
+            </MarkdownOverlayEditorStyle>
+        );
+    }
+    return (
+        <MarkdownOverlayEditorStyle targetWidth={targetRect.width}>
+            <MarkdownDiv contents={markdown} createNode={createNode} />
+            {!readonly && (
+                <>
+                    <div className="spacer" />
+                    <div className={`gdg-edit-icon gdg-edit-hover ${addLeftPad}`} onClick={onEditClick}>
+                        <EditPencil />
+                    </div>
+                </>
+            )}
+            <textarea className="gdg-md-edit-textarea gdg-input" autoFocus={true} />
+        </MarkdownOverlayEditorStyle>
+    );
+};

package/src/internal/data-grid-overlay-editor/private/number-overlay-editor-style.tsx

@@ -0,0 +1,15 @@
+import { styled } from "@linaria/react";
+
+export const NumberOverlayEditorStyle = styled.div`
+    display: flex;
+    margin: 6px 0 3px;
+    color: var(--gdg-text-dark);
+
+    > input {
+        font-size: var(--gdg-editor-font-size);
+        padding: 0;
+        font-family: var(--gdg-font-family);
+        color: var(--gdg-text-dark);
+        background-color: var(--gdg-bg-cell);
+    }
+`;