@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/content-alignment.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    defaultProps,
+    useAllMockedKinds,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Content Alignment"
+                    description={
+                        <Description>
+                            You can customize the content alignment by setting <PropName>contentAlign</PropName> of a
+                            cell to <PropName>left</PropName>, <PropName>right</PropName> or <PropName>center</PropName>
+                            .
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ContentAlignment: React.VFC = () => {
+    const { cols, getCellContent } = useAllMockedKinds();
+
+    const mangledGetCellContent = React.useCallback<typeof getCellContent>(
+        cell => {
+            const [col, _row] = cell;
+            if (col === 3) {
+                return {
+                    ...getCellContent(cell),
+                    contentAlign: "center",
+                };
+            }
+            if (col === 4) {
+                return {
+                    ...getCellContent(cell),
+                    contentAlign: "right",
+                };
+            }
+            if (col === 5) {
+                return {
+                    ...getCellContent(cell),
+                    contentAlign: "left",
+                };
+            }
+            return getCellContent(cell);
+        },
+        [getCellContent]
+    );
+
+    return <DataEditor {...defaultProps} getCellContent={mangledGetCellContent} columns={cols} rows={300} />;
+};

package/src/docs/examples/controlled-search.stories.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { useEventListener } from "../../common/utils.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    defaultProps,
+    useAllMockedKinds,
+} from "../../data-editor/stories/utils.js";
+import type { GridSelection, Item } from "../../internal/data-grid/data-grid-types.js";
+import { CompactSelection } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Controlling search results"
+                    description={
+                        <>
+                            <Description>
+                                Search results can be controlled via <PropName>searchResults</PropName>. You can
+                                implement any search algorithm you want, even a silly one.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ControlledSearch: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const [showSearch, setShowSearch] = React.useState(false);
+
+    const [selection, setSelection] = React.useState<GridSelection>({
+        rows: CompactSelection.empty(),
+        columns: CompactSelection.empty(),
+    });
+
+    useEventListener(
+        "keydown",
+        React.useCallback(event => {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyF") {
+                setShowSearch(cv => !cv);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }, []),
+        window,
+        false,
+        true
+    );
+
+    const [searchValue, setSearchValue] = React.useState("");
+
+    const searchResults = React.useMemo(() => {
+        const result: Item[] = [];
+        for (let i = 0; i < searchValue.length; i++) {
+            result.push([3, i]);
+        }
+        return result;
+    }, [searchValue.length]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            searchResults={searchResults}
+            getCellContent={getCellContent}
+            getCellsForSelection={true}
+            gridSelection={selection}
+            onGridSelectionChange={setSelection}
+            columns={cols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            searchValue={searchValue}
+            onSearchValueChange={setSearchValue}
+            showSearch={showSearch}
+            onSearchClose={() => {
+                setShowSearch(false);
+                setSearchValue("");
+            }}
+            rows={10_000}
+        />
+    );
+};

package/src/docs/examples/controlled-selection.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import type { GridSelection } from "../../internal/data-grid/data-grid-types.js";
+import { CompactSelection } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ControlledSelection: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(30, true, true);
+
+    const [selection, setSelection] = React.useState<GridSelection>({
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    return (
+        <BeautifulWrapper
+            title="Controlled Selection"
+            description={
+                <Description>
+                    The selection of the grid can be controlled via <PropName>GridSelection</PropName> and{" "}
+                    <PropName>onGridSelectionChange</PropName>.
+                    <input
+                        type="range"
+                        min={0}
+                        max={29}
+                        value={selection.current?.cell[0] ?? 0}
+                        onChange={e => {
+                            const newCol = e.target.valueAsNumber;
+                            setSelection(cv => ({
+                                ...cv,
+                                current: {
+                                    cell: [newCol, cv.current?.cell[1] ?? 0],
+                                    range: {
+                                        x: newCol,
+                                        y: cv.current?.cell[1] ?? 0,
+                                        width: 1,
+                                        height: 1,
+                                    },
+                                    rangeStack: [],
+                                },
+                            }));
+                        }}
+                    />
+                    <input
+                        type="range"
+                        min={0}
+                        max={99}
+                        value={selection.current?.cell[1] ?? 0}
+                        onChange={e => {
+                            const newRow = e.target.valueAsNumber;
+                            setSelection(cv => ({
+                                ...cv,
+                                current: {
+                                    cell: [cv.current?.cell[0] ?? 0, newRow],
+                                    range: {
+                                        x: cv.current?.cell[0] ?? 0,
+                                        y: newRow,
+                                        width: 1,
+                                        height: 1,
+                                    },
+                                    rangeStack: [],
+                                },
+                            }));
+                        }}
+                    />
+                </Description>
+            }>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                gridSelection={selection}
+                onGridSelectionChange={setSelection}
+                columns={cols}
+                rows={100}
+                rowMarkers="both"
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/copy-support.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Copy support"
+                    description={
+                        <>
+                            <Description>
+                                Large amounts of data can be copied and customized using{" "}
+                                <PropName>getCellsForSelection</PropName>.
+                            </Description>
+                            <MoreInfo>
+                                The data is copied into a format ready to be pasted into Excel or Google Sheets
+                            </MoreInfo>
+                            <textarea
+                                placeholder="Copy something below and paste it here..."
+                                style={{
+                                    width: "100%",
+                                    marginBottom: 20,
+                                    borderRadius: 9,
+                                    minHeight: 200,
+                                    padding: 10,
+                                }}
+                            />
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const CopySupport: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useMockDataGenerator(10, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            rowMarkers="both"
+            columns={cols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            rows={400}
+        />
+    );
+};

package/src/docs/examples/custom-editors.stories.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    defaultProps,
+    useMockDataGenerator,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { GridCellKind, type ProvideEditorCallback, type TextCell } from "../../index.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Custom Editors"
+                    description={
+                        <Description>
+                            The <PropName>provideEditor</PropName> callback allows you to provide a custom editor for a
+                            cell. In this example, cells in the first column get a custom editor.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+const CustomEditor: React.FC<any> = p => {
+    const { value, onFinishedEditing } = p;
+    const [text, setText] = React.useState(value.data);
+
+    return (
+        <div style={{ width: "100%", height: "100%" }}>
+            Type something:
+            <input
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    boxSizing: "border-box",
+                    border: "2px solid #666",
+                    background: "#333",
+                    color: "white",
+                    padding: "0 8px",
+                }}
+                value={text}
+                onChange={e => setText(e.target.value)}
+                onBlur={() =>
+                    onFinishedEditing({
+                        ...value,
+                        data: text,
+                    })
+                }
+            />
+        </div>
+    );
+};
+CustomEditor.displayName = "CustomEditor";
+
+const provideEditor: ProvideEditorCallback<TextCell> = cell => {
+    // You can get the location of the activated cell via cell.location:
+    if (cell.location?.[0] === 0) {
+        // eslint-disable-next-line react/display-name
+        return p => <CustomEditor {...p} />;
+    }
+    return undefined;
+};
+
+export const CustomEditors: React.VFC = () => {
+    const { cols, getCellContent, setCellValue } = useMockDataGenerator(10, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={20}
+            onCellEdited={(cell, newValue) => {
+                if (newValue.kind !== GridCellKind.Text) return;
+                setCellValue(cell, newValue);
+            }}
+            provideEditor={provideEditor as ProvideEditorCallback<any>}
+        />
+    );
+};
+CustomEditors.displayName = "CustomEditors";

package/src/docs/examples/custom-event-target.stories.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import type { GridColumn, Item, TextCell } from "../../internal/data-grid/data-grid-types.js";
+import { GridCellKind } from "../../internal/data-grid/data-grid-types.js";
+import { BeautifulWrapper, Description, defaultProps } from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Custom Event Target"
+                    description={
+                        <Description>
+                            This example demonstrates using a custom event target for the data grid. All window events
+                            are blocked, but the grid still works because it&apos;s using the container div as its event
+                            target instead of window.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const CustomEventTarget: React.VFC = () => {
+    // Create columns
+    const [cols] = React.useState<GridColumn[]>(() => {
+        return [
+            {
+                title: "Column A",
+                id: "a",
+                width: 150,
+            },
+            {
+                title: "Column B",
+                id: "b",
+                width: 150,
+            },
+            {
+                title: "Column C",
+                id: "c",
+                width: 150,
+            },
+        ];
+    });
+
+    // Create data
+    const getCellContent = React.useCallback((cell: Item): TextCell => {
+        const [col, row] = cell;
+        return {
+            kind: GridCellKind.Text,
+            allowOverlay: true,
+            displayData: `${col}, ${row}`,
+            data: `${col}, ${row}`,
+        };
+    }, []);
+
+    // Create a ref for our custom event target container
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // State to track if the container is mounted
+    const [containerMounted, setContainerMounted] = React.useState(false);
+
+    // State to track window click attempts
+    const [windowClickAttempts, setWindowClickAttempts] = React.useState(0);
+
+    // Update containerMounted state after the component mounts
+    React.useEffect(() => {
+        if (containerRef.current !== null) {
+            setContainerMounted(true);
+        }
+    }, []);
+
+    // Block all window events
+    React.useEffect(() => {
+        const blockEvent = (e: Event) => {
+            // Don't block events if they're inside our container
+            if (containerRef.current && e.target instanceof Node && containerRef.current.contains(e.target)) {
+                return;
+            }
+
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+
+            // Count click attempts outside the grid
+            if (e.type === "click") {
+                setWindowClickAttempts(prev => prev + 1);
+            }
+        };
+
+        // Block all mouse and touch events on window
+        const events = ["mousedown", "mouseup", "mousemove", "click", "touchstart", "touchend", "touchmove"];
+
+        // Add event blockers to window
+        for (const event of events) {
+            window.addEventListener(event, blockEvent, true);
+        }
+
+        return () => {
+            // Clean up event blockers
+            for (const event of events) {
+                window.removeEventListener(event, blockEvent, true);
+            }
+        };
+    }, []);
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+            <div style={{ marginBottom: 10, padding: 10, backgroundColor: "#f0f0f0", borderRadius: 4 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    <span style={{ color: "#666" }}>Window click attempts blocked: {windowClickAttempts}</span>
+                    <button
+                        onClick={() => alert("This button should not work if window events are blocked!")}
+                        style={{ padding: "5px 10px" }}>
+                        Try clicking me (should not work)
+                    </button>
+                </div>
+                <div style={{ marginTop: 10, fontSize: 14, color: "#666" }}>
+                    Try clicking outside the grid or on the button above - these clicks should be blocked. But the grid
+                    below should still be fully interactive!
+                </div>
+            </div>
+
+            <div
+                ref={containerRef}
+                style={{
+                    flex: 1,
+                    position: "relative",
+                    border: "2px solid #3c78d8",
+                    borderRadius: 4,
+                    padding: 15,
+                }}>
+                {containerMounted && (
+                    <DataEditor
+                        {...defaultProps}
+                        width="100%"
+                        height="100%"
+                        rows={1000}
+                        columns={cols}
+                        getCellContent={getCellContent}
+                        experimental={{
+                            eventTarget: containerRef.current as HTMLElement,
+                        }}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};