@glideappsfinal/glide-data-grid 6.0.9

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { NumberOverlayEditorStyle } from "./number-overlay-editor-style.js";
+import { NumericFormat } from "react-number-format";
+import type { SelectionRange } from "../../data-grid/data-grid-types.js";
+import type { NumberFormatValues } from "react-number-format/types/types.js";
+
+interface Props {
+    readonly value: number | undefined;
+    readonly disabled?: boolean;
+    readonly onChange: (values: NumberFormatValues) => void;
+    readonly highlight: boolean;
+    readonly validatedSelection?: SelectionRange;
+    readonly fixedDecimals?: number;
+    readonly allowNegative?: boolean;
+    readonly thousandSeparator?: boolean | string;
+    readonly decimalSeparator?: string;
+}
+
+function getDecimalSeparator() {
+    const numberWithDecimalSeparator = 1.1;
+    const result = Intl.NumberFormat()
+        ?.formatToParts(numberWithDecimalSeparator)
+        ?.find(part => part.type === "decimal")?.value;
+
+    return result ?? ".";
+}
+
+function getThousandSeprator() {
+    return getDecimalSeparator() === "." ? "," : ".";
+}
+
+const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
+    const {
+        value,
+        onChange,
+        disabled,
+        highlight,
+        validatedSelection,
+        fixedDecimals,
+        allowNegative,
+        thousandSeparator,
+        decimalSeparator,
+    } = p;
+
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        if (validatedSelection !== undefined) {
+            const range = typeof validatedSelection === "number" ? [validatedSelection, null] : validatedSelection;
+            inputRef.current?.setSelectionRange(range[0], range[1]);
+        }
+    }, [validatedSelection]);
+
+    return (
+        <NumberOverlayEditorStyle>
+            <NumericFormat
+                autoFocus={true}
+                getInputRef={inputRef}
+                className="gdg-input"
+                onFocus={(e: React.FocusEvent<HTMLInputElement>) =>
+                    e.target.setSelectionRange(highlight ? 0 : e.target.value.length, e.target.value.length)
+                }
+                disabled={disabled === true}
+                decimalScale={fixedDecimals}
+                allowNegative={allowNegative}
+                thousandSeparator={thousandSeparator ?? getThousandSeprator()}
+                decimalSeparator={decimalSeparator ?? getDecimalSeparator()}
+                value={Object.is(value, -0) ? "-" : value ?? ""}
+                // decimalScale={3}
+                // prefix={"$"}
+                onValueChange={onChange}
+            />
+        </NumberOverlayEditorStyle>
+    );
+};
+
+export default NumberOverlayEditor;

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

@@ -0,0 +1,53 @@
+import { styled } from "@linaria/react";
+
+export const UriOverlayEditorStyle = styled.div`
+    display: flex;
+
+    flex-grow: 1;
+
+    align-items: center;
+
+    min-height: 21px;
+
+    .gdg-link-area {
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        cursor: pointer;
+
+        margin-right: 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        color: var(--gdg-link-color);
+        text-decoration: underline !important;
+    }
+
+    .gdg-edit-icon {
+        flex-shrink: 0;
+        width: 32px;
+        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/uri-overlay-editor.tsx

@@ -0,0 +1,52 @@
+import { EditPencil } from "../../../common/utils.js";
+import * as React from "react";
+import { GrowingEntry } from "../../growing-entry/growing-entry.js";
+import { UriOverlayEditorStyle } from "./uri-overlay-editor-style.js";
+import type { SelectionRange } from "../../data-grid/data-grid-types.js";
+
+interface Props {
+    readonly uri: string;
+    readonly onChange: (ev: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    readonly forceEditMode: boolean;
+    readonly readonly: boolean;
+    readonly preview: string;
+    readonly validatedSelection?: SelectionRange;
+}
+
+const UriOverlayEditor: React.FunctionComponent<Props> = p => {
+    const { uri, onChange, forceEditMode, readonly, validatedSelection, preview } = p;
+
+    const [editMode, setEditMode] = React.useState<boolean>(!readonly && (uri === "" || forceEditMode));
+
+    const onEditClick = React.useCallback(() => {
+        setEditMode(true);
+    }, []);
+
+    if (editMode) {
+        return (
+            <GrowingEntry
+                validatedSelection={validatedSelection}
+                highlight={true}
+                autoFocus={true}
+                value={uri}
+                onChange={onChange}
+            />
+        );
+    }
+
+    return (
+        <UriOverlayEditorStyle>
+            <a className="gdg-link-area" href={uri} target="_blank" rel="noopener noreferrer">
+                {preview}
+            </a>
+            {!readonly && (
+                <div className="gdg-edit-icon" onClick={onEditClick}>
+                    <EditPencil />
+                </div>
+            )}
+            <textarea className="gdg-input" autoFocus={true} />
+        </UriOverlayEditorStyle>
+    );
+};
+
+export default UriOverlayEditor;

package/src/internal/data-grid-overlay-editor/use-stay-on-screen.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+function useRefState(): [HTMLElement | undefined, React.RefCallback<HTMLElement | null>] {
+    const [refState, setRefState] = React.useState<HTMLElement | null>();
+    return [refState ?? undefined, setRefState];
+}
+
+interface StayOnScreen {
+    ref: React.RefCallback<HTMLElement | null>;
+    style: React.CSSProperties;
+}
+
+export function useStayOnScreen(): StayOnScreen {
+    const [ref, setRef] = useRefState();
+    const [xOffset, setXOffset] = React.useState(0);
+    const [isIntersecting, setIsIntersecting] = React.useState(true);
+
+    React.useLayoutEffect(() => {
+        if (ref === undefined) return;
+        if (!("IntersectionObserver" in window)) return;
+
+        const observer = new IntersectionObserver(
+            ents => {
+                if (ents.length === 0) return;
+                setIsIntersecting(ents[0].isIntersecting);
+            },
+            { threshold: 1 }
+        );
+        observer.observe(ref);
+
+        return () => observer.disconnect();
+    }, [ref]);
+
+    React.useEffect(() => {
+        if (isIntersecting || ref === undefined) return;
+
+        let rafHandle: number | undefined;
+        const fn = () => {
+            const { right: refRight } = ref.getBoundingClientRect();
+
+            setXOffset(cv => Math.min(cv + window.innerWidth - refRight - 10, 0));
+            rafHandle = requestAnimationFrame(fn);
+        };
+
+        rafHandle = requestAnimationFrame(fn);
+        return () => {
+            if (rafHandle !== undefined) {
+                cancelAnimationFrame(rafHandle);
+            }
+        };
+    }, [ref, isIntersecting]);
+
+    const style = React.useMemo(() => {
+        return { transform: `translateX(${xOffset}px)` };
+    }, [xOffset]);
+
+    return {
+        ref: setRef,
+        style,
+    };
+}

package/src/internal/data-grid-search/data-grid-search-style.tsx

@@ -0,0 +1,96 @@
+import { styled } from "@linaria/react";
+
+export const SearchWrapper = styled.div`
+    position: absolute;
+    top: 4px;
+    right: 20px;
+
+    background-color: var(--gdg-bg-cell);
+    color: var(--gdg-text-dark);
+
+    padding: 8px;
+    border: 1px solid var(--gdg-border-color);
+    border-radius: 6px;
+
+    font-size: var(--gdg-editor-font-size);
+
+    &.out {
+        animation: gdg-search-fadeout 0.15s forwards;
+    }
+    animation: gdg-search-fadein 0.15s forwards;
+
+    .gdg-search-bar-inner {
+        display: flex;
+    }
+
+    .gdg-search-status {
+        padding-top: 4px;
+        font-size: 11px;
+    }
+
+    .gdg-search-progress {
+        position: absolute;
+        height: 4px;
+        left: 0;
+        bottom: 0;
+
+        background-color: var(--gdg-text-light);
+    }
+
+    input {
+        width: 220px;
+        color: var(--gdg-text-dark);
+        background-color: var(--gdg-bg-cell);
+        border: none;
+        border-width: 0;
+        outline: none;
+    }
+
+    button {
+        width: 24px;
+        height: 24px;
+        padding: 0;
+
+        border: none;
+        outline: none;
+        background: none;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: var(--gdg-text-medium);
+
+        &:hover {
+            color: var(--gdg-text-dark);
+        }
+
+        .button-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        &:disabled {
+            opacity: 0.4;
+            pointer-events: none;
+        }
+    }
+
+    @keyframes gdg-search-fadeout {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(400px);
+        }
+    }
+
+    @keyframes gdg-search-fadein {
+        from {
+            transform: translateX(400px);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+`;