diff --git a/package-lock.json b/package-lock.json index 6a90c7f5f..6b9db5268 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@editorjs/list": "^1.7.0", "@editorjs/paragraph": "^2.8.0", "@editorjs/quote": "^2.4.0", - "@glideapps/glide-data-grid": "^5.0.0", + "@glideapps/glide-data-grid": "5.2.1", "@glideapps/glide-data-grid-cells": "^5.2.1", "@graphiql/plugin-explorer": "^0.1.12", "@graphiql/react": "^0.15.0", diff --git a/package.json b/package.json index 638b083e6..2cc9e7f39 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@editorjs/list": "^1.7.0", "@editorjs/paragraph": "^2.8.0", "@editorjs/quote": "^2.4.0", - "@glideapps/glide-data-grid": "^5.0.0", + "@glideapps/glide-data-grid": "5.2.1", "@glideapps/glide-data-grid-cells": "^5.2.1", "@graphiql/plugin-explorer": "^0.1.12", "@graphiql/react": "^0.15.0", @@ -185,6 +185,16 @@ }, "optionalDependencies": { "@storybook/react": "^5.1.9", + "@swc/core-darwin-arm64": "1.3.40", + "@swc/core-darwin-x64": "1.3.40", + "@swc/core-linux-arm-gnueabihf": "1.3.40", + "@swc/core-linux-arm64-gnu": "1.3.40", + "@swc/core-linux-arm64-musl": "1.3.40", + "@swc/core-linux-x64-gnu": "1.3.40", + "@swc/core-linux-x64-musl": "1.3.40", + "@swc/core-win32-arm64-msvc": "1.3.40", + "@swc/core-win32-ia32-msvc": "1.3.40", + "@swc/core-win32-x64-msvc": "1.3.40", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/react-hooks": "^8.0.1", @@ -224,17 +234,7 @@ "mochawesome-report-generator": "^6.0.1", "prettier": "^2.8.4", "setup-polly-jest": "^0.9.1", - "ts-jest": "^27.1.5", - "@swc/core-darwin-arm64": "1.3.40", - "@swc/core-darwin-x64": "1.3.40", - "@swc/core-linux-arm-gnueabihf": "1.3.40", - "@swc/core-linux-arm64-gnu": "1.3.40", - "@swc/core-linux-arm64-musl": "1.3.40", - "@swc/core-linux-x64-gnu": "1.3.40", - "@swc/core-linux-x64-musl": "1.3.40", - "@swc/core-win32-arm64-msvc": "1.3.40", - "@swc/core-win32-ia32-msvc": "1.3.40", - "@swc/core-win32-x64-msvc": "1.3.40" + "ts-jest": "^27.1.5" }, "//@swc/*": "swc packages are required until https://github.com/npm/cli/issues/4828 is fixed", "jest": { diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index 7585662e3..0158e9308 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -1,8 +1,10 @@ import "@glideapps/glide-data-grid/dist/index.css"; +import { getAppMountUri } from "@dashboard/config"; import useNavigator from "@dashboard/hooks/useNavigator"; import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack"; import DataEditor, { + CellClickedEventArgs, DataEditorProps, DataEditorRef, EditableGridCell, @@ -129,10 +131,10 @@ export const Datagrid: React.FC = ({ const classes = useStyles(); const { themeValues } = useTheme(); const datagridTheme = useDatagridTheme(readonly, readonly); - const editor = useRef(); + const editor = useRef(null); const customRenderers = useCustomCellRenderers(); - const hackARef = useRef(null); + const hackARef = useRef(null); const navigate = useNavigator(); const { scrolledToRight, scroller } = useScrollRight(); @@ -210,6 +212,10 @@ export const Datagrid: React.FC = ({ const handleOnCellEdited = useCallback( ([column, row]: Item, newValue: EditableGridCell): void => { onCellEdited([column, row], newValue); + if (!editor.current) { + return; + } + editor.current.updateCells( range(availableColumns.length).map(offset => ({ cell: [column + offset, row], @@ -219,15 +225,6 @@ export const Datagrid: React.FC = ({ [onCellEdited, availableColumns], ); - const handleCellClick = useCallback( - (item: Item) => { - if (onRowClick && item[0] !== -1) { - onRowClick(item); - } - }, - [onRowClick], - ); - const handleRowHover = useCallback( (args: GridMouseEventArgs) => { if (hasRowHover) { @@ -249,11 +246,26 @@ export const Datagrid: React.FC = ({ hackARef.current.style.width = `${args.bounds.width}px`; hackARef.current.style.top = `${window.scrollY + args.bounds.y}px`; hackARef.current.style.height = `${args.bounds.height}px`; - hackARef.current.href = href; + hackARef.current.href = + getAppMountUri() + (href.startsWith("/") ? href.slice(1) : href); + hackARef.current.dataset.reactRouterPath = href; }, [hasRowHover, rowAnchor], ); + const handleCellClick = useCallback( + (item: Item, args: CellClickedEventArgs) => { + if (onRowClick && item[0] !== -1) { + onRowClick(item); + } + handleRowHover(args); + if (hackARef.current) { + hackARef.current.click(); + } + }, + [onRowClick, handleRowHover], + ); + const handleGridSelectionChange = (gridSelection: GridSelection) => { // In readonly we not allow selecting cells, but we allow selcting column if (readonly && !gridSelection.current) { @@ -275,7 +287,7 @@ export const Datagrid: React.FC = ({ themeValues.colors.background.interactiveNeutralSecondaryHovering, bgCellMedium: themeValues.colors.background.interactiveNeutralSecondaryHovering, - accentLight: undefined, + accentLight: undefined as string | undefined, }; if (readonly) { @@ -321,6 +333,9 @@ export const Datagrid: React.FC = ({ clearTooltip(); } + if (!onColumnResize) { + return; + } onColumnResize(column, newSize); }, [clearTooltip, onColumnResize, tooltip], @@ -331,6 +346,9 @@ export const Datagrid: React.FC = ({ if (tooltip) { clearTooltip(); } + if (!onColumnMoved) { + return; + } onColumnMoved(startIndex, endIndex); }, [clearTooltip, onColumnMoved, tooltip], @@ -338,7 +356,7 @@ export const Datagrid: React.FC = ({ const selectionActionsComponent = useMemo( () => - selection?.rows.length > 0 + selection?.rows && selection?.rows.length > 0 ? selectionActions(Array.from(selection.rows), { removeRows: handleRemoveRows, }) @@ -346,6 +364,29 @@ export const Datagrid: React.FC = ({ [selection, selectionActions, handleRemoveRows], ); + // Hide the link when scrolling over it so that the scroll/wheel events go through to the Datagrid + // Show the link quickly after the last scroll/wheel event + const hideLinkAndShowAfterDelay = useCallback( + (() => { + let timer: ReturnType | null = null; + return () => { + if (timer) { + clearTimeout(timer); + } + + if (hackARef.current) { + hackARef.current.style.display = "none"; + } + timer = setTimeout(() => { + if (hackARef.current) { + hackARef.current.style.display = "block"; + } + }, 100); + }; + })(), + [hackARef], + ); + if (loading) { return ( @@ -387,7 +428,7 @@ export const Datagrid: React.FC = ({ {rowsTotal > 0 ? ( <> - {selection?.rows.length > 0 && ( + {selection?.rows && selection?.rows.length > 0 && (
{selectionActionsComponent}
@@ -510,16 +551,21 @@ export const Datagrid: React.FC = ({ bounds={tooltip?.bounds} title={tooltip?.title} /> - { - e.preventDefault(); - navigate(e.currentTarget.pathname); - }} - /> + {rowAnchor && ( + { + e.preventDefault(); + if (e.currentTarget.dataset.reactRouterPath) { + navigate(e.currentTarget.dataset.reactRouterPath); + } + }} + /> + )} ); };