@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/theme-per-column.stories.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, 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="Theme per column"
+                    description={
+                        <>
+                            <Description>
+                                Each column can provide theme overrides for rendering that column.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ThemePerColumn: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const realCols = React.useMemo(() => {
+        const c = [...cols];
+        c[3] = {
+            ...c[3],
+            themeOverride: {
+                textDark: "#009CA6",
+                bgIconHeader: "#009CA6",
+                accentColor: "#009CA6",
+                accentLight: "#009CA620",
+                fgIconHeader: "#FFFFFF",
+                baseFontStyle: "600 13px",
+            },
+        };
+        c[4] = {
+            ...c[4],
+            themeOverride: {
+                textDark: "#009CA6",
+                bgIconHeader: "#009CA6",
+                accentColor: "#009CA6",
+                accentLight: "#009CA620",
+                fgIconHeader: "#FFFFFF",
+                baseFontStyle: "600 13px",
+            },
+        };
+        c[9] = {
+            ...c[9],
+            themeOverride: {
+                textDark: "#009CA6",
+                bgIconHeader: "#009CA6",
+                accentColor: "#009CA6",
+                accentLight: "#009CA620",
+                fgIconHeader: "#FFFFFF",
+            },
+        };
+        c[10] = {
+            ...c[10],
+            themeOverride: {
+                textDark: "#009CA6",
+                bgIconHeader: "#009CA6",
+                accentColor: "#009CA6",
+                accentLight: "#009CA620",
+                fgIconHeader: "#FFFFFF",
+            },
+        };
+        return c;
+    }, [cols]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={realCols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            rows={1000}
+        />
+    );
+};

package/src/docs/examples/theme-per-row.stories.tsx

@@ -0,0 +1,73 @@
+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="Theme per row"
+                    description={
+                        <>
+                            <Description>
+                                Each row can provide theme overrides for rendering that row using the{" "}
+                                <PropName>getRowThemeOverride</PropName> callback.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ThemePerRow: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useMockDataGenerator(5);
+
+    const realCols = React.useMemo(() => {
+        const c = [...cols];
+        c[3] = {
+            ...c[3],
+            themeOverride: {
+                bgCell: "#d6fafd",
+            },
+        };
+        return c;
+    }, [cols]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={realCols}
+            height="100%"
+            // trailingRowOptions={{
+            //     sticky: true,
+            //     tint: true,
+            // }}
+            // onRowAppended={() => undefined}
+            getRowThemeOverride={i =>
+                i % 2 === 0
+                    ? undefined
+                    : {
+                          bgCell: "#e0f0ff88",
+                          //   borderColor: "#3f90e0",
+                      }
+            }
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            rows={10}
+        />
+    );
+};

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

@@ -0,0 +1,150 @@
+import React from "react";
+import type { Theme } from "../../common/styles.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    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>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+const darkTheme = {
+    accentColor: "#8c96ff",
+    accentLight: "rgba(202, 206, 255, 0.253)",
+
+    textDark: "#ffffff",
+    textMedium: "#b8b8b8",
+    textLight: "#a0a0a0",
+    textBubble: "#ffffff",
+
+    bgIconHeader: "#b8b8b8",
+    fgIconHeader: "#000000",
+    textHeader: "#a1a1a1",
+    textHeaderSelected: "#000000",
+
+    bgCell: "#16161b",
+    bgCellMedium: "#202027",
+    bgHeader: "#212121",
+    bgHeaderHasFocus: "#474747",
+    bgHeaderHovered: "#404040",
+
+    bgBubble: "#212121",
+    bgBubbleSelected: "#000000",
+
+    bgSearchResult: "#423c24",
+
+    borderColor: "rgba(225,225,225,0.2)",
+    drilldownBorder: "rgba(225,225,225,0.4)",
+
+    linkColor: "#4F5DFF",
+
+    headerFontStyle: "bold 14px",
+    baseFontStyle: "13px",
+    fontFamily:
+        "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
+    checkboxMaxSize: 18,
+};
+
+const hotdogStand = {
+    accentColor: "#8c96ff",
+    accentLight: "rgba(202, 206, 255, 0.253)",
+
+    textDark: "#ffffff",
+    textMedium: "rgba(255, 255, 255, 0.9)",
+    textLight: "rgba(255, 255, 255, 0.7)",
+    textBubble: "#000000",
+
+    bgIconHeader: "#880000",
+    fgIconHeader: "#ff5555",
+    textHeader: "rgba(0, 0, 0, 0.9)",
+    textHeaderSelected: "#000000",
+
+    bgCell: "#ff0000",
+    bgCellMedium: "#ff4d4d",
+    bgHeader: "#f3f300",
+    bgHeaderHasFocus: "#eeee00",
+    bgHeaderHovered: "#e0e000",
+
+    bgBubble: "#ffff00",
+    bgBubbleSelected: "#ffff00",
+
+    bgSearchResult: "#423c24",
+
+    borderColor: "#ffff00",
+    drilldownBorder: "#ffff00",
+
+    linkColor: "#4F5DFF",
+
+    headerFontStyle: "bold 14px",
+    baseFontStyle: "13px",
+    fontFamily:
+        "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
+    roundingRadius: 6,
+    checkboxMaxSize: 40,
+};
+
+export const ThemeSupport: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const [theme, setTheme] = React.useState<Partial<Theme>>({});
+
+    const [numRows, setNumRows] = React.useState(1000);
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        setNumRows(cv => cv + 1);
+        for (let c = 0; c < 6; c++) {
+            setCellValue([c, newRow], {
+                displayData: "",
+                data: "",
+            } as any);
+        }
+    }, [numRows, setCellValue]);
+
+    return (
+        <BeautifulWrapper
+            title="Theme support"
+            description={
+                <>
+                    <Description>
+                        DataGrid respects the theme provided by the <PropName>theme</PropName> prop.
+                    </Description>
+                    <MoreInfo>
+                        <button onClick={() => setTheme({})}>Light</button> or{" "}
+                        <button onClick={() => setTheme(darkTheme)}>Dark</button> even{" "}
+                        <button onClick={() => setTheme(hotdogStand)}>Hotdog Stand</button>
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                theme={theme}
+                getCellContent={getCellContent}
+                columns={cols}
+                onRowAppended={onRowAppended}
+                trailingRowOptions={{
+                    tint: true,
+                    sticky: true,
+                }}
+                onCellEdited={setCellValue}
+                onColumnResize={onColumnResize}
+                rows={numRows}
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/tooltips.stories.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import type { IBounds } from "react-laag";
+import { useLayer } from "react-laag";
+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";
+import type { GridMouseEventArgs } from "../../internal/data-grid/event-args.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Tooltips"
+                    className="double"
+                    description={
+                        <Description>
+                            Using the <PropName>onItemHovered</PropName> event makes it easy to create tooltips. This
+                            story is intentionally forced to scroll vertically so layout in scrolling documents can be
+                            confirmed.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+const zeroBounds = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+};
+
+export const Tooltips: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    const [tooltip, setTooltip] = React.useState<{ val: string; bounds: IBounds } | undefined>();
+
+    const timeoutRef = React.useRef(0);
+
+    const onItemHovered = React.useCallback((args: GridMouseEventArgs) => {
+        if (args.kind === "cell") {
+            window.clearTimeout(timeoutRef.current);
+            setTooltip(undefined);
+            timeoutRef.current = window.setTimeout(() => {
+                setTooltip({
+                    val: `Tooltip for ${args.location[0]}, ${args.location[1]}`,
+                    bounds: {
+                        // translate to react-laag types
+                        left: args.bounds.x,
+                        top: args.bounds.y,
+                        width: args.bounds.width,
+                        height: args.bounds.height,
+                        right: args.bounds.x + args.bounds.width,
+                        bottom: args.bounds.y + args.bounds.height,
+                    },
+                });
+            }, 1000);
+        } else {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = 0;
+            setTooltip(undefined);
+        }
+    }, []);
+
+    React.useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+
+    const isOpen = tooltip !== undefined;
+    const { renderLayer, layerProps } = useLayer({
+        isOpen,
+        triggerOffset: 4,
+        auto: true,
+        container: "portal",
+        trigger: {
+            getBounds: () => tooltip?.bounds ?? zeroBounds,
+        },
+    });
+
+    return (
+        <>
+            <DataEditor
+                {...defaultProps}
+                onItemHovered={onItemHovered}
+                getCellContent={getCellContent}
+                columns={cols}
+                rowMarkers="both"
+                rows={1000}
+            />
+            {isOpen &&
+                renderLayer(
+                    <div
+                        {...layerProps}
+                        style={{
+                            ...layerProps.style,
+                            padding: "8px 12px",
+                            color: "white",
+                            font: "500 13px Inter",
+                            backgroundColor: "rgba(0, 0, 0, 0.85)",
+                            borderRadius: 9,
+                        }}>
+                        {tooltip.val}
+                    </div>
+                )}
+        </>
+    );
+};

package/src/docs/examples/trailing-row-options.stories.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import type { Theme } from "../../common/styles.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+    clearCell,
+} from "../../data-editor/stories/utils.js";
+import { GridColumnIcon, type GridColumn } 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="Trailing row options"
+                    description={
+                        <Description>
+                            You can customize the trailing row in each column by setting a{" "}
+                            <PropName>trailingRowOptions</PropName> in your columns.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+const trailingRowOptionsColumnIndexesHint: Record<number, string> = {
+    2: "Smol text",
+    3: "Add",
+    5: "New",
+};
+
+const trailingRowOptionsColumnIndexesIcon: Record<number, string> = {
+    2: GridColumnIcon.HeaderArray,
+    3: GridColumnIcon.HeaderEmoji,
+    5: GridColumnIcon.HeaderNumber,
+};
+
+const trailingRowOptionsColumnIndexesTarget: Record<number, number> = {
+    2: 0,
+    3: 0,
+    5: 0,
+};
+
+const trailingRowOptionsColumnIndexesDisabled: Record<number, boolean> = {
+    3: true,
+};
+
+const trailingRowOptionsColumnIndexesTheme: Record<number, Partial<Theme>> = {
+    2: {
+        baseFontStyle: "10px",
+    },
+};
+
+export const TrailingRowOptions: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    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]);
+
+    const columnsWithRowOptions: GridColumn[] = React.useMemo(() => {
+        return cols.map((c, idx) => ({
+            ...c,
+            trailingRowOptions: {
+                hint: trailingRowOptionsColumnIndexesHint[idx],
+                addIcon: trailingRowOptionsColumnIndexesIcon[idx],
+                targetColumn: trailingRowOptionsColumnIndexesTarget[idx],
+                disabled: trailingRowOptionsColumnIndexesDisabled[idx],
+                themeOverride: trailingRowOptionsColumnIndexesTheme[idx],
+            },
+        }));
+    }, [cols]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={columnsWithRowOptions}
+            rowMarkers={"both"}
+            onCellEdited={setCellValue}
+            trailingRowOptions={{
+                tint: true,
+                sticky: true,
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+        />
+    );
+};

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

@@ -0,0 +1,44 @@
+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="Uneven Rows"
+                    description={
+                        <Description>
+                            Rows can be made uneven by passing a callback to the <PropName>rowHeight</PropName> prop
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const UnevenRows: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowHeight={r => (r % 3 === 0 ? 30 : r % 2 ? 50 : 60)}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={1000}
+        />
+    );
+};

package/src/docs/examples/validate-data.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 { 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>
+                <BeautifulWrapper
+                    title="Validate data"
+                    description={
+                        <>
+                            <Description>
+                                Data can be validated using the <PropName>validateCell</PropName> callback
+                            </Description>
+                            <MoreInfo>This example only allows the word &quot;Valid&quot; inside text cells.</MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ValidateData: React.VFC = () => {
+    const { cols, getCellContent, setCellValue } = useMockDataGenerator(60, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers={"both"}
+            onPaste={true}
+            onCellEdited={setCellValue}
+            rows={100}
+            validateCell={(_cell, newValue) => {
+                if (newValue.kind !== GridCellKind.Text) return true;
+                if (newValue.data === "Valid") return true;
+                if (newValue.data.toLowerCase() === "valid") {
+                    return {
+                        ...newValue,
+                        data: "Valid",
+                        selectionRange: [0, 3],
+                    };
+                }
+                return false;
+            }}
+        />
+    );
+};