diff --git a/web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx b/web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx index 7307ed5434a8..21cdf4e724b1 100644 --- a/web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx +++ b/web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx @@ -9,15 +9,15 @@ import { Tooltip } from "../../Common/Tooltip/Tooltip"; import styles from "./GridPreview.module.scss"; type Task = { - id: number, - data: Record, + id: number; + data: Record; }; type GridViewContextType = { - tasks: Task[], - imageField: string | undefined, - currentTaskId: number | null, - setCurrentTaskId: (id: number | null) => void, + tasks: Task[]; + imageField: string | undefined; + currentTaskId: number | null; + setCurrentTaskId: (id: number | null) => void; }; type TaskModalProps = GridViewContextType & { view: any }; @@ -30,9 +30,9 @@ export const GridViewContext = createContext({ }); const TaskModal = observer(({ view, tasks, imageField, currentTaskId, setCurrentTaskId }: TaskModalProps) => { - const index = tasks.findIndex(task => task.id === currentTaskId); + const index = tasks.findIndex((task) => task.id === currentTaskId); const task = tasks[index]; - const src = imageField ? (task?.data?.[imageField] || "") : ""; + const src = imageField ? task?.data?.[imageField] || "" : ""; const goToNext = useCallback(() => { if (index < tasks.length - 1) { @@ -129,13 +129,13 @@ const TaskModal = observer(({ view, tasks, imageField, currentTaskId, setCurrent type GridViewProviderProps = PropsWithChildren<{ data: Task[]; view: any; - fields: { alias: string, currentType: string }[]; + fields: { alias: string; currentType: string }[]; }>; export const GridViewProvider: React.FC = ({ children, data, view, fields }) => { const [currentTaskId, setCurrentTaskId] = useState(null); - const modalRef = useRef<{ update: (props: object) => void, close: () => void } | null>(null); - const imageField = fields.find(f => f.currentType === "Image")?.alias; + const modalRef = useRef<{ update: (props: object) => void; close: () => void } | null>(null); + const imageField = fields.find((f) => f.currentType === "Image")?.alias; const onClose = useCallback(() => { modalRef.current = null; @@ -150,7 +150,15 @@ export const GridViewProvider: React.FC = ({ children, da if (!imageField) return; - const children = ; + const children = ( + + ); if (!modalRef.current) { modalRef.current = modal({ diff --git a/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx b/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx index 33bc2573046f..d5a6e3e43128 100644 --- a/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx +++ b/web/libs/datamanager/src/components/MainView/GridView/GridView.jsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react"; -import { useCallback, useContext, useMemo, useState } from "react"; +import { useCallback, useContext, useMemo } from "react"; import AutoSizer from "react-virtualized-auto-sizer"; import { FixedSizeGrid } from "react-window"; import InfiniteLoader from "react-window-infinite-loader"; @@ -59,12 +59,15 @@ const GridDataGroup = observer(({ type, value, field, row }) => { const GridCell = observer(({ view, selected, row, fields, onClick, ...props }) => { const { setCurrentTaskId, imageField } = useContext(GridViewContext); - const handleBodyClick = useCallback((e) => { - if (!isFF(FF_GRID_PREVIEW) || !imageField) return; - // @todo skip this interaction if there are no images in the task - e.stopPropagation(); - setCurrentTaskId(row.id); - }, [imageField, row.id]); + const handleBodyClick = useCallback( + (e) => { + if (!isFF(FF_GRID_PREVIEW) || !imageField) return; + // @todo skip this interaction if there are no images in the task + e.stopPropagation(); + setCurrentTaskId(row.id); + }, + [imageField, row.id], + ); return (