@glideappsfinal/glide-data-grid 6.0.9

package/src/data-editor/stories/data-editor.stories.tsx

@@ -0,0 +1,796 @@
+/* eslint-disable sonarjs/no-identical-functions */
+import * as React from "react";
+
+import { useState, useCallback, useMemo } from "storybook/preview-api";
+import { BuilderThemeWrapper } from "../../stories/story-utils.js";
+import {
+    CompactSelection,
+    type EditableGridCell,
+    type GridCell,
+    GridCellKind,
+    type GridColumn,
+    type GridSelection,
+    type Item,
+} from "../../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+
+export default {
+    title: "Tests/TestCases",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <BuilderThemeWrapper width={1000} height={800}>
+                <Story />
+            </BuilderThemeWrapper>
+        ),
+    ],
+};
+
+function getDummyData([col, row]: Item): GridCell {
+    if (col === 0) {
+        return {
+            kind: GridCellKind.RowID,
+            data: `RowID ${col}, ${row}`,
+            allowOverlay: false,
+        };
+    }
+    if (col === 1) {
+        return {
+            kind: GridCellKind.Bubble,
+            data: [
+                `Bub ${col}`,
+                `Bub ${row}`,
+                `Bub ${col}`,
+                `Bub ${row}`,
+                `Bub ${col}`,
+                `Bub ${row}`,
+                `Bub ${col}`,
+                `Bub ${row}`,
+                `Bub ${col}`,
+                `Bub ${row}`,
+            ],
+            allowOverlay: true,
+        };
+    }
+    if (col === 2) {
+        return {
+            kind: GridCellKind.Image,
+            data: [
+                "https://i.imgur.com/5J0BftG.jpg",
+                "https://preview.redd.it/7jlqkp2cyap51.jpg?width=575&auto=webp&s=26fa9ed15b16fb450ee08ed1f2f0ccb5e0223581",
+            ],
+            allowOverlay: true,
+            readonly: false,
+        };
+    }
+    if (col === 3) {
+        return {
+            kind: GridCellKind.Markdown,
+            data: `## Markdown has titles
+
+And supports newline chars and automatic wrapping text that just needs to be long enough to trigger it.
+
+
+[Google](https://google.com)
+
+- with
+- lists
+- that
+- can
+- be
+- pretty
+- long
+                    `,
+            allowOverlay: true,
+        };
+    }
+    if (col === 4) {
+        return {
+            kind: GridCellKind.Number,
+            displayData: "$10,352",
+            allowOverlay: true,
+            data: 10_352,
+            readonly: true,
+        };
+    }
+    if (col === 5) {
+        return {
+            kind: GridCellKind.Uri,
+            data: "https://www.google.com",
+            allowOverlay: true,
+        };
+    }
+    if (col === 6) {
+        return {
+            kind: GridCellKind.Boolean,
+            data: row % 3 === 0 || row % 5 === 0,
+            readonly: true,
+            allowOverlay: false,
+        };
+    }
+    if (col === 7) {
+        return {
+            kind: GridCellKind.Text,
+            // RTL test
+            displayData: `הרפתקה חדשה`,
+            data: `הרפתקה חדשה`,
+            allowOverlay: true,
+            readonly: true,
+        };
+    }
+    if (col === 8) {
+        return {
+            kind: GridCellKind.Drilldown,
+            data: [
+                {
+                    text: "Test",
+                    img: "https://allthatsinteresting.com/wordpress/wp-content/uploads/2012/06/iconic-photos-1950-einstein.jpg",
+                },
+                { text: "No Image" },
+            ],
+            allowOverlay: true,
+        };
+    }
+    return {
+        kind: GridCellKind.Text,
+        displayData: `${col}, ${row} 🦝`,
+        data: `${col}, ${row} 🦝`,
+        allowOverlay: true,
+    };
+}
+
+function getDummyCols() {
+    return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(
+        i =>
+            ({
+                title: i.toString() + " is the longest header in the world",
+                width: 120 + (i % 4) * 10,
+                icon: "headerString",
+                hasMenu: true,
+            }) as GridColumn
+    );
+}
+
+export function Simplenotest() {
+    const [cols, setColumns] = useState(getDummyCols);
+
+    const onColumnResize = useCallback(
+        (col: GridColumn, newSize: number) => {
+            const index = cols.indexOf(col);
+            const newCols = [...cols];
+            newCols[index] = {
+                ...newCols[index],
+                width: newSize,
+            };
+            setColumns(newCols);
+        },
+        [cols]
+    );
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            getCellsForSelection={true}
+            columns={cols}
+            rows={1000}
+            onColumnResize={onColumnResize}
+        />
+    );
+}
+
+function getDummyRelationColumn(): GridColumn[] {
+    return [
+        {
+            title: "Relation",
+            width: 360,
+            icon: "headerString",
+            hasMenu: true,
+        },
+    ];
+}
+
+function getDummyRelationData([col, row]: Item): GridCell {
+    return {
+        kind: GridCellKind.Drilldown,
+        data: [
+            {
+                text: `Image ${col}-${row}`,
+                img: "https://allthatsinteresting.com/wordpress/wp-content/uploads/2012/06/iconic-photos-1950-einstein.jpg",
+            },
+            { text: `Text ${col}-${row}` },
+            { text: `More text ${col}-${row}` },
+        ],
+        allowOverlay: true,
+    };
+}
+
+export function RelationColumn() {
+    const [cols, setColumns] = useState(getDummyRelationColumn);
+
+    const onColumnResize = useCallback(
+        (col: GridColumn, newSize: number) => {
+            const index = cols.indexOf(col);
+            const newCols = [...cols];
+            newCols[index] = {
+                ...newCols[index],
+                width: newSize,
+            };
+            setColumns(newCols);
+        },
+        [cols]
+    );
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyRelationData}
+            columns={cols}
+            rows={1000}
+            onColumnResize={onColumnResize}
+            smoothScrollX={true}
+            smoothScrollY={true}
+        />
+    );
+}
+
+const columns: GridColumn[] = [
+    { title: "Number", width: 100, icon: "headerArray", overlayIcon: "rowOwnerOverlay" },
+    { title: "Square", width: 100 },
+];
+
+function getData([col, row]: Item): GridCell {
+    const n = Math.pow(row, col + 1);
+
+    return {
+        kind: GridCellKind.Number,
+        data: n,
+        displayData: n.toString(),
+        allowOverlay: false,
+    };
+}
+
+export function Minimal() {
+    return <DataEditor width="100%" getCellContent={getData} columns={columns} rows={1000} />;
+}
+
+export function Smooth() {
+    const [cols, setCols] = useState(getDummyCols);
+
+    const onColumnResize = useCallback(
+        (column: GridColumn, newSize: number) => {
+            const index = cols.indexOf(column);
+            if (index !== -1) {
+                const newCol: GridColumn = {
+                    ...column,
+                    width: newSize,
+                };
+
+                const newCols = [...cols];
+                newCols.splice(index, 1, newCol);
+
+                setCols(newCols);
+            }
+        },
+        [cols]
+    );
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            onColumnResize={onColumnResize}
+            columns={cols}
+            rows={1000}
+            smoothScrollY={true}
+            smoothScrollX={true}
+        />
+    );
+}
+
+export function ManualControl() {
+    const [gridSelection, setGridSelection] = useState<GridSelection | undefined>(undefined);
+
+    const cb = (newVal: GridSelection) => {
+        if ((newVal.current?.cell[0] ?? 0) % 2 === 0) {
+            setGridSelection(newVal);
+        }
+    };
+
+    return (
+        <DataEditor
+            width="100%"
+            gridSelection={gridSelection}
+            onGridSelectionChange={cb}
+            getCellContent={getData}
+            columns={columns}
+            rows={1000}
+        />
+    );
+}
+
+export function Draggable() {
+    return (
+        <DataEditor
+            width="100%"
+            isDraggable={true}
+            onDragStart={args => {
+                args.setData("text", "testing");
+            }}
+            getCellContent={getData}
+            columns={columns}
+            rows={1000}
+        />
+    );
+}
+
+export function IdealSize() {
+    // trying to be 500x500
+    const cols: GridColumn[] = [
+        { title: "Number", width: 250 },
+        { title: "Square", width: 250 },
+    ];
+    return (
+        <div style={{ width: 500, height: 500, position: "relative" }}>
+            <DataEditor
+                width={500}
+                height={500}
+                isDraggable={true}
+                onDragStart={args => {
+                    args.setData("text", "testing");
+                }}
+                getCellContent={getData}
+                columns={cols}
+                smoothScrollX={true}
+                smoothScrollY={true}
+                rowHeight={50}
+                headerHeight={50}
+                rows={9}
+            />
+        </div>
+    );
+}
+
+export function DynamicAddRemoveColumns({ columnCount }: { columnCount: number }) {
+    // trying to be 500x500
+    const cols: GridColumn[] = [
+        { title: "Number", width: 250 },
+        { title: "Square", width: 250 },
+    ];
+
+    for (let i = 2; i < columnCount; i++) {
+        cols.push({
+            title: "Foo",
+            width: 250,
+        });
+    }
+
+    return (
+        <DataEditor
+            width="100%"
+            isDraggable={true}
+            getCellContent={getData}
+            columns={cols}
+            smoothScrollX={true}
+            smoothScrollY={true}
+            rowHeight={50}
+            headerHeight={50}
+            rows={9}
+        />
+    );
+}
+DynamicAddRemoveColumns.args = {
+    columnCount: 2,
+};
+
+export function GridSelectionOutOfRangeNoColumns() {
+    const dummyCols = useMemo(
+        () => getDummyCols().map(v => ({ ...v, width: 300, title: "Making column smaller used to crash!" })),
+        []
+    );
+
+    const [selected, setSelected] = useState<GridSelection | undefined>({
+        current: { cell: [2, 8], range: { width: 1, height: 1, x: 2, y: 8 }, rangeStack: [] },
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const [cols, setCols] = useState(dummyCols);
+
+    const onSelected = useCallback((newSel?: GridSelection) => {
+        setSelected(newSel);
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            columns={cols}
+            rows={1000}
+            onGridSelectionChange={onSelected}
+            gridSelection={selected}
+            onColumnResize={(_col, newSize) => {
+                if (newSize > 300) {
+                    setCols(dummyCols);
+                } else {
+                    setCols([]);
+                }
+            }}
+        />
+    );
+}
+
+type ResizableColumnsSizeMap = Record<string, number>;
+
+function getResizableColumnsInitSize(): ResizableColumnsSizeMap {
+    return {
+        "resize me 0": 120,
+        "resize me 1": 120,
+        "resize me 2": 120,
+        "resize me 3": 120,
+        "resize me 4": 120,
+        "resize me 5": 120,
+        "resize me 6": 120,
+        "resize me 7": 120,
+    };
+}
+
+function getResizableColumns(sizeMap: ResizableColumnsSizeMap): GridColumn[] {
+    return Object.entries(sizeMap).map(([title, width]) => ({
+        title,
+        width,
+        icon: "headerString",
+        hasMenu: true,
+    }));
+}
+
+export function ResizableColumns() {
+    const [colSizes, setColSizes] = useState(getResizableColumnsInitSize);
+
+    const cols = useMemo(() => {
+        return getResizableColumns(colSizes);
+    }, [colSizes]);
+
+    const onColumnResize = useCallback((column: GridColumn, newSize: number) => {
+        setColSizes(prevColSizes => {
+            return {
+                ...prevColSizes,
+                [column.title]: newSize,
+            };
+        });
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            columns={cols}
+            rows={20}
+            isDraggable={false}
+            smoothScrollX={true}
+            smoothScrollY={true}
+            onColumnResize={onColumnResize}
+        />
+    );
+}
+
+export function GridSelectionOutOfRangeLessColumnsThanSelection() {
+    const dummyCols = useMemo(
+        () => getDummyCols().map(v => ({ ...v, width: 300, title: "Making column smaller used to crash!" })),
+        []
+    );
+
+    const [selected, setSelected] = useState<GridSelection | undefined>({
+        current: { cell: [2, 8], range: { width: 1, height: 1, x: 2, y: 8 }, rangeStack: [] },
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const [cols, setCols] = useState(dummyCols);
+
+    const onSelected = useCallback((newSel?: GridSelection) => {
+        setSelected(newSel);
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            columns={cols}
+            rows={1000}
+            onGridSelectionChange={onSelected}
+            gridSelection={selected}
+            onColumnResize={(_col, newSize) => {
+                if (newSize > 300) {
+                    setCols(dummyCols);
+                } else {
+                    setCols([dummyCols[0]]);
+                }
+            }}
+        />
+    );
+}
+
+export function GridAddNewRows() {
+    const cols = useMemo(getDummyCols, []);
+
+    const [rowsCount, setRowsCount] = useState(10);
+
+    const onRowAppended = useCallback(() => {
+        setRowsCount(r => r + 1);
+    }, []);
+
+    const [selected, setSelected] = useState<GridSelection | undefined>(undefined);
+
+    const onSelected = useCallback((newSel?: GridSelection) => {
+        setSelected(newSel);
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            columns={cols}
+            rows={rowsCount}
+            onRowAppended={onRowAppended}
+            onGridSelectionChange={onSelected}
+            gridSelection={selected}
+        />
+    );
+}
+
+export function GridNoTrailingBlankRow() {
+    const cols = useMemo(getDummyCols, []);
+
+    const [selected, setSelected] = useState<GridSelection | undefined>(undefined);
+
+    const onSelected = useCallback((newSel?: GridSelection) => {
+        setSelected(newSel);
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={getDummyData}
+            columns={cols}
+            rows={100}
+            onGridSelectionChange={onSelected}
+            gridSelection={selected}
+        />
+    );
+}
+
+export function MarkdownEdits() {
+    const dummyCols: GridColumn[] = useMemo(() => {
+        return [
+            {
+                title: "MD short",
+                width: 50,
+            },
+            {
+                title: "MD long",
+                width: 50,
+            },
+        ];
+    }, []);
+
+    const dummyCells = useCallback(([col, _row]: Item) => {
+        if (col === 0) {
+            const editable: EditableGridCell = {
+                data: "text",
+                allowOverlay: true,
+                kind: GridCellKind.Markdown,
+            };
+            return editable;
+        } else if (col === 1) {
+            const editable: EditableGridCell = {
+                data: `text really really really long
+## H1
+
+- this
+- is
+- a
+- longer
+- example
+- to
+- test
+- scroll
+- of
+- preview
+                `,
+                allowOverlay: true,
+                kind: GridCellKind.Markdown,
+            };
+            return editable;
+        }
+        const editable: EditableGridCell = {
+            data: "text",
+            allowOverlay: true,
+            kind: GridCellKind.Markdown,
+        };
+        return editable;
+    }, []);
+
+    const [selected, setSelected] = useState<GridSelection | undefined>({
+        current: { cell: [2, 8], range: { width: 1, height: 1, x: 2, y: 8 }, rangeStack: [] },
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const onSelected = useCallback((newSel?: GridSelection) => {
+        setSelected(newSel);
+    }, []);
+
+    return (
+        <DataEditor
+            width="100%"
+            getCellContent={dummyCells}
+            columns={dummyCols}
+            rows={1000}
+            onGridSelectionChange={onSelected}
+            gridSelection={selected}
+        />
+    );
+}
+
+export const CanEditBoolean = () => {
+    const [vals, setVals] = useState<[boolean | null | undefined, boolean | null | undefined]>([false, false]);
+    return (
+        <DataEditor
+            width="100%"
+            columns={[
+                {
+                    title: "Editable",
+                    width: 100,
+                },
+                {
+                    title: "Readonly",
+                    width: 100,
+                },
+            ]}
+            rows={1}
+            getCellContent={([col]) => {
+                return {
+                    kind: GridCellKind.Boolean,
+                    readonly: col !== 0,
+                    allowOverlay: false,
+                    data: vals[col],
+                };
+            }}
+            onCellEdited={([col], newVal) => {
+                if (newVal.kind === GridCellKind.Boolean) {
+                    setVals(cv => {
+                        const f = [...cv];
+                        f.splice(col, 1, newVal.data);
+                        return f as [boolean, boolean];
+                    });
+                }
+            }}
+        />
+    );
+};
+
+export const SimpleEditable = () => {
+    const [vals, setVals] = useState<[string, string][]>(() => {
+        const result: [string, string][] = [];
+        for (let i = 0; i < 2000; i++) {
+            result.push(["Edit", "Me"]);
+        }
+        return result;
+    });
+
+    return (
+        <DataEditor
+            width="100%"
+            columns={[
+                {
+                    title: "Column A",
+                    width: 250,
+                },
+                {
+                    title: "Column B",
+                    width: 250,
+                },
+            ]}
+            rows={vals.length}
+            getCellContent={([col, row]) => ({
+                kind: GridCellKind.Text,
+                allowOverlay: true,
+                data: vals[row][col],
+                displayData: vals[row][col],
+            })}
+            onCellEdited={([col, row], newVal) => {
+                const newVals = [...vals];
+                const newRow: [string, string] = [...newVals[row]];
+                if (typeof newVal.data === "string") {
+                    newRow[col] = newVal.data;
+                }
+                newVals[row] = newRow;
+                setVals(newVals);
+            }}
+        />
+    );
+};
+
+export function GroupHeaderActionClick() {
+    const cols = [{ title: "Col1", width: 100, grow: 1, group: "Group" }];
+
+    const [clickCount, setClickCount] = useState(0);
+
+    return (
+        <div>
+            <h3>Click count: {clickCount}</h3>
+            <DataEditor
+                width={500}
+                height={500}
+                rows={0}
+                columns={cols}
+                getCellContent={() => ({ kind: GridCellKind.Text, data: "", displayData: "", allowOverlay: false })}
+                getGroupDetails={name => ({
+                    name,
+                    actions: [
+                        {
+                            icon: "headerString",
+                            title: "Action",
+                            onClick: _e => setClickCount(c => c + 1),
+                        },
+                    ],
+                })}
+            />
+        </div>
+    );
+}
+
+export function DeleteColumnsViaOnDelete() {
+    const [headers, setHeaders] = useState<string[]>(["col-a", "col-b"]);
+
+    const dynColumns: GridColumn[] = headers.map(value => ({
+        id: value,
+        title: value,
+        width: 100,
+    }));
+
+    const renderCell = React.useCallback((): GridCell => {
+        return { kind: GridCellKind.Loading, allowOverlay: false };
+    }, []);
+
+    const addColumn = () => {
+        const str = Math.random().toString(36).slice(2, 8);
+        setHeaders(prev => [...prev, str]);
+    };
+
+    const removeColumns = (indices: number[]) => {
+        setHeaders(prev => prev.filter((_, i) => !indices.includes(i)));
+    };
+
+    const [selection, setSelection] = useState<GridSelection | undefined>(undefined);
+
+    const onDelete = (sel: GridSelection) => {
+        if (sel.columns.length > 0) {
+            setSelection(undefined);
+            removeColumns(sel.columns.toArray());
+            return false;
+        }
+        return true;
+    };
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+            <div style={{ marginBottom: 8 }}>
+                <button onClick={addColumn}>Add</button>
+            </div>
+            <div style={{ flex: 1, position: "relative" }}>
+                <DataEditor
+                    width="100%"
+                    height="100%"
+                    columns={dynColumns}
+                    rows={0}
+                    getCellContent={renderCell}
+                    gridSelection={selection}
+                    onGridSelectionChange={setSelection}
+                    onDelete={onDelete}
+                />
+            </div>
+        </div>
+    );
+}