@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/drag-source.stories.tsx

@@ -0,0 +1,63 @@
+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 { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Drag source"
+                    description={
+                        <>
+                            <Description>
+                                Setting the <PropName>isDraggable</PropName> prop can allow for more granular control
+                                over what is draggable in the grid via HTML drag and drop.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const DragSource: React.VFC<{ isDraggable: boolean | "header" | "cell" }> = p => {
+    const { cols, getCellContent, onColumnResize } = useMockDataGenerator(200);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers="both"
+            rows={5000}
+            onRowMoved={(s, e) => window.alert(`Moved row ${s} to ${e}`)}
+            onColumnMoved={(s, e) => window.alert(`Moved col ${s} to ${e}`)}
+            onColumnResize={onColumnResize}
+            isDraggable={p.isDraggable}
+            onDragStart={e => {
+                e.setData("text/plain", "Drag data here!");
+            }}
+        />
+    );
+};
+(DragSource as any).argTypes = {
+    isDraggable: {
+        control: { type: "select" },
+        options: [true, false, "cell", "header"],
+    },
+};
+(DragSource as any).args = {
+    isDraggable: false,
+};

package/src/docs/examples/drop-events.stories.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { type DataEditorProps } from "../../data-editor/data-editor.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    defaultProps,
+    useAllMockedKinds,
+} from "../../data-editor/stories/utils.js";
+import type { Item } from "../../internal/data-grid/data-grid-types.js";
+import { GridCellKind } 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>
+        ),
+    ],
+};
+
+// A few supported mime types for drag and drop into cells.
+const SUPPORTED_IMAGE_TYPES = new Set(["image/png", "image/gif", "image/bmp", "image/jpeg"]);
+
+export const DropEvents: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const [highlights, setHighlights] = React.useState<DataEditorProps["highlightRegions"]>([]);
+
+    const [lastDropCell, setLastDropCell] = React.useState<Item | undefined>();
+
+    const onDrop = React.useCallback(
+        (cell: Item, dataTransfer: DataTransfer | null) => {
+            setHighlights([]);
+
+            if (dataTransfer === null) {
+                return;
+            }
+
+            const { files } = dataTransfer;
+            // This only supports one image, for simplicity.
+            if (files.length !== 1) {
+                return;
+            }
+
+            const [file] = files;
+            if (!SUPPORTED_IMAGE_TYPES.has(file.type)) {
+                return;
+            }
+
+            const imgUrl = URL.createObjectURL(file);
+
+            setCellValue(
+                cell,
+                {
+                    kind: GridCellKind.Image,
+                    data: [imgUrl],
+                    allowOverlay: true,
+                    readonly: true,
+                },
+                true,
+                true
+            );
+
+            setLastDropCell(cell);
+        },
+        [setCellValue]
+    );
+
+    const onDragOverCell = React.useCallback(
+        (cell: Item, dataTransfer: DataTransfer | null) => {
+            if (dataTransfer === null) {
+                return;
+            }
+
+            const { items } = dataTransfer;
+            // This only supports one image, for simplicity.
+            if (items.length !== 1) {
+                return;
+            }
+
+            const [item] = items;
+            if (!SUPPORTED_IMAGE_TYPES.has(item.type)) {
+                return;
+            }
+
+            const [col, row] = cell;
+            if (getCellContent(cell).kind === GridCellKind.Image) {
+                setHighlights([
+                    {
+                        color: "#44BB0022",
+                        range: {
+                            x: col,
+                            y: row,
+                            width: 1,
+                            height: 1,
+                        },
+                    },
+                ]);
+            } else {
+                setHighlights([]);
+            }
+        },
+        [getCellContent]
+    );
+
+    const onDragLeave = React.useCallback(() => {
+        setHighlights([]);
+    }, []);
+
+    return (
+        <BeautifulWrapper
+            title="Drop events"
+            description={
+                <>
+                    <Description>
+                        You can drag and drop into cells by using <PropName>onDragOverCell</PropName> and{" "}
+                        <PropName>onDrop</PropName>.
+                    </Description>
+
+                    <div>
+                        {lastDropCell === undefined ? (
+                            <MoreInfo>Nothing dropped, yet</MoreInfo>
+                        ) : (
+                            <>
+                                <MoreInfo>
+                                    You last dropped in cell <PropName>{JSON.stringify(lastDropCell)}</PropName>
+                                </MoreInfo>
+                            </>
+                        )}
+                    </div>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                columns={cols}
+                onCellEdited={setCellValue}
+                onColumnResize={onColumnResize}
+                rows={1000}
+                onDrop={onDrop}
+                onDragOverCell={onDragOverCell}
+                onDragLeave={onDragLeave}
+                highlightRegions={highlights}
+                rowMarkers="none"
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/fill-handle.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+    clearCell,
+} from "../../data-editor/stories/utils.js";
+import { GridCellKind, type FillHandleDirection } 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="Fill handle"
+                    description={
+                        <>
+                            <Description>Fill handles can be used to downfill data with the mouse.</Description>
+                            <MoreInfo>
+                                Just click and drag, the top row will be copied down. Enable using the{" "}
+                                <PropName>fillHandle</PropName> prop.
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+    argTypes: {
+        fillHandleEnabled: { control: "boolean", name: "fillHandle enabled" },
+        shape: { control: { type: "inline-radio" }, options: ["square", "circle"], name: "shape" },
+        size: { control: { type: "number" }, name: "size" },
+        offsetX: { control: { type: "number" }, name: "offsetX" },
+        offsetY: { control: { type: "number" }, name: "offsetY" },
+        outline: { control: { type: "number" }, name: "outline" },
+        allowedFillDirections: {
+            control: { type: "inline-radio" },
+            options: ["horizontal", "vertical", "orthogonal", "any"],
+            name: "allowedFillDirections",
+        },
+    },
+    args: {
+        fillHandleEnabled: true,
+        shape: "square",
+        size: 4,
+        offsetX: -2,
+        offsetY: -2,
+        outline: 0,
+        allowedFillDirections: "orthogonal",
+    },
+};
+
+export const FillHandle: React.VFC<{
+    fillHandleEnabled: boolean;
+    shape: "square" | "circle";
+    size: number;
+    offsetX: number;
+    offsetY: number;
+    outline: number;
+    allowedFillDirections: FillHandleDirection;
+}> = ({ fillHandleEnabled, shape, size, offsetX, offsetY, outline, allowedFillDirections }) => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    const getCellContentMangled = React.useCallback<typeof getCellContent>(
+        i => {
+            let val = getCellContent(i);
+            if (i[0] === 1 && val.kind === GridCellKind.Text) {
+                val = {
+                    ...val,
+                    readonly: true,
+                };
+            }
+
+            return val;
+        },
+        [getCellContent]
+    );
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        for (let c = 0; c < 6; c++) {
+            const cell = getCellContent([c, newRow]);
+            setCellValueRaw([c, newRow], clearCell(cell));
+        }
+        setNumRows(cv => cv + 1);
+    }, [getCellContent, numRows, setCellValueRaw]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContentMangled}
+            columns={cols}
+            rowMarkers={"both"}
+            onPaste={true}
+            fillHandle={fillHandleEnabled === true ? { shape, size, offsetX, offsetY, outline } : false}
+            allowedFillDirections={allowedFillDirections}
+            keybindings={{ downFill: true, rightFill: true }}
+            onCellEdited={setCellValue}
+            trailingRowOptions={{
+                sticky: true,
+                tint: true,
+                hint: "New row...",
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+        />
+    );
+};

package/src/docs/examples/freeze-columns.stories.tsx

@@ -0,0 +1,59 @@
+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 { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Freeze columns"
+                    description={
+                        <Description>
+                            Columns at the start of your grid can be frozen in place by settings{" "}
+                            <PropName>freezeColumns</PropName> to a number greater than 0.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const FreezeColumns: React.VFC<any> = (p: { freezeColumns: number }) => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers="both"
+            freezeColumns={p.freezeColumns}
+            getCellContent={getCellContent}
+            columns={cols}
+            verticalBorder={false}
+            rows={1000}
+        />
+    );
+};
+(FreezeColumns as any).argTypes = {
+    freezeColumns: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 10,
+        },
+    },
+};
+(FreezeColumns as any).args = {
+    freezeColumns: 1,
+};

package/src/docs/examples/freeze-rows.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    useMockDataGenerator,
+    defaultProps,
+    clearCell,
+} 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="Freeze rows"
+                    description={
+                        <>
+                            <Description>Rows can be frozen to make sure the user always sees them.</Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const FreezeRows: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        // our data source is a mock source that pre-fills data, so we are just clearing this here. You should not
+        // need to do this.
+        for (let c = 0; c < cols.length; c++) {
+            const cell = getCellContent([c, newRow]);
+            setCellValueRaw([c, newRow], clearCell(cell));
+        }
+        // Tell the data grid there is another row
+        setNumRows(cv => cv + 1);
+    }, [cols.length, getCellContent, numRows, setCellValueRaw]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers={"both"}
+            freezeTrailingRows={2}
+            experimental={{
+                kineticScrollPerfHack: true,
+            }}
+            onPaste={true} // we want to allow paste to just call onCellEdited
+            onCellEdited={setCellValue} // Sets the mock cell content
+            trailingRowOptions={{
+                // How to get the trailing row to look right
+                sticky: true,
+                tint: true,
+                hint: "New row...",
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+        />
+    );
+};

package/src/docs/examples/get-mouse-args.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { DataEditorRef } from "../../data-editor/data-editor.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    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>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const GetMouseArgsForPosition: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+    const ref = React.useRef<DataEditorRef>(null);
+    const [info, setInfo] = React.useState<string>("Move the mouse over the grid");
+
+    const onMouseMove = React.useCallback((ev: React.MouseEvent<HTMLDivElement>) => {
+        const args = ref.current?.getMouseArgsForPosition(ev.clientX, ev.clientY, ev.nativeEvent);
+        if (args === undefined) {
+            setInfo("Outside grid");
+        } else if (args.kind === "cell") {
+            setInfo(`Cell ${args.location[0]}, ${args.location[1]}`);
+        } else {
+            setInfo(args.kind);
+        }
+    }, []);
+
+    return (
+        <BeautifulWrapper
+            title="getMouseArgsForPosition"
+            description={
+                <Description>
+                    Use <PropName>getMouseArgsForPosition</PropName> to translate
+                    pointer coordinates into grid locations.
+                </Description>
+            }>
+            <div onMouseMove={onMouseMove}>
+                <DataEditor
+                    {...defaultProps}
+                    ref={ref}
+                    columns={cols}
+                    getCellContent={getCellContent}
+                    rows={1000}
+                />
+            </div>
+            <div style={{ marginTop: 8 }}>{info}</div>
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/header-menus.stories.tsx

@@ -0,0 +1,162 @@
+import { styled } from "@linaria/react";
+import React from "react";
+import { useLayer } from "react-laag";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    defaultProps,
+    useAllMockedKinds,
+} from "../../data-editor/stories/utils.js";
+import type { Rectangle } 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="Header menus"
+                    description={
+                        <>
+                            <Description>
+                                Headers on the data grid can be configured to support menus. We provide the events and
+                                the menu icon, you provide the menu. The menu icon can be modified via the{" "}
+                                <PropName>menuIcon</PropName> prop.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+const SimpleMenu = styled.div`
+    width: 175px;
+    padding: 8px 0;
+    border-radius: 6px;
+    box-shadow:
+        0px 0px 1px rgba(62, 65, 86, 0.7),
+        0px 6px 12px rgba(62, 65, 86, 0.35);
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: white;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+        "Helvetica Neue", sans-serif;
+
+    .danger {
+        color: rgba(255, 40, 40, 0.8);
+        :hover {
+            color: rgba(255, 40, 40, 1);
+        }
+    }
+
+    > div {
+        padding: 6px 8px;
+        color: rgba(0, 0, 0, 0.7);
+        :hover {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: rgba(0, 0, 0, 0.9);
+        }
+        transition: background-color 100ms;
+        cursor: pointer;
+    }
+`;
+
+export const HeaderMenus: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const realCols = React.useMemo(() => {
+        return cols.map((c, index) => {
+            if (index === 2) {
+                return {
+                    ...c,
+                    hasMenu: true,
+                    menuIcon: "dots",
+                    overlayIcon: "rowOwnerOverlay",
+                };
+            } else if (index === 3) {
+                return {
+                    ...c,
+                    hasMenu: true,
+                    menuIcon: "headerUri",
+                };
+            }
+
+            return {
+                ...c,
+                hasMenu: true,
+            };
+        });
+    }, [cols]);
+
+    const [menu, setMenu] = React.useState<{
+        col: number;
+        bounds: Rectangle;
+    }>();
+
+    const isOpen = menu !== undefined;
+
+    const { layerProps, renderLayer } = useLayer({
+        isOpen,
+        auto: true,
+        placement: "bottom-end",
+        triggerOffset: 2,
+        onOutsideClick: () => setMenu(undefined),
+        trigger: {
+            getBounds: () => ({
+                left: menu?.bounds.x ?? 0,
+                top: menu?.bounds.y ?? 0,
+                width: menu?.bounds.width ?? 0,
+                height: menu?.bounds.height ?? 0,
+                right: (menu?.bounds.x ?? 0) + (menu?.bounds.width ?? 0),
+                bottom: (menu?.bounds.y ?? 0) + (menu?.bounds.height ?? 0),
+            }),
+        },
+    });
+
+    const onHeaderMenuClick = React.useCallback((col: number, bounds: Rectangle) => {
+        setMenu({ col, bounds });
+    }, []);
+
+    const onHeaderClicked = React.useCallback(() => {
+        // eslint-disable-next-line no-console
+        console.log("Header clicked");
+    }, []);
+
+    return (
+        <>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                onHeaderMenuClick={onHeaderMenuClick}
+                onHeaderClicked={onHeaderClicked}
+                columns={realCols}
+                onCellContextMenu={(_, e) => e.preventDefault()}
+                onCellEdited={setCellValue}
+                onColumnResize={onColumnResize}
+                rows={1000}
+            />
+            {isOpen &&
+                renderLayer(
+                    <SimpleMenu {...layerProps}>
+                        <div onClick={() => setMenu(undefined)}>These do nothing</div>
+                        <div onClick={() => setMenu(undefined)}>Add column right</div>
+                        <div onClick={() => setMenu(undefined)}>Add column left</div>
+                        <div className="danger" onClick={() => setMenu(undefined)}>
+                            Delete
+                        </div>
+                    </SimpleMenu>
+                )}
+        </>
+    );
+};