diff --git a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx index 4affd62dd8..45f8def901 100644 --- a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx +++ b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx @@ -21,6 +21,8 @@ type Props = React.PropsWithChildren<{ centerContent?: boolean; flex?: boolean; expand?: boolean; + onClick?(): void; + onDoubleClick?(): void; }> export const TableColumnValue = observer(function TableColumnValue({ @@ -30,29 +32,47 @@ export const TableColumnValue = observer(function TableColumnValue({ flex, expand, className, + onClick, + onDoubleClick, }: Props) { const styles = useStyles(); const tableContext = useContext(TableContext); const context = useContext(TableItemContext); const handleClick = useCallback((event: React.MouseEvent) => { - if (!expand || !context) { + if (!context) { return; } - event.stopPropagation(); + if (expand) { + event.stopPropagation(); + const state = !context.isExpanded(); + tableContext?.setItemExpand(context.item, state); + } - const state = !context.isExpanded(); + if (onClick) { + onClick(); + } + }, [tableContext, context, expand, onClick]); - tableContext?.setItemExpand(context.item, state); - }, [tableContext, context, expand]); + const handleDoubleClick = useCallback((event: React.MouseEvent) => { + if (onDoubleClick) { + onDoubleClick(); + } + }, [onDoubleClick]); if (!context) { return null; } return styled(styles)( - + {flex && {children}} {!flex && children} diff --git a/webapp/packages/core-blocks/src/Table/TableItem.tsx b/webapp/packages/core-blocks/src/Table/TableItem.tsx index d031605520..c6ff0d8571 100644 --- a/webapp/packages/core-blocks/src/Table/TableItem.tsx +++ b/webapp/packages/core-blocks/src/Table/TableItem.tsx @@ -53,13 +53,10 @@ export const TableItem = observer(function TableItem({ }), [item, selectDisabled]); const handleClick = useCallback( - (e: React.MouseEvent) => { + (event: React.MouseEvent) => { if (!selectDisabled) { + event.stopPropagation(); const isSelected = context.selectedItems.get(item); - // if (!e.ctrlKey) { - // context.clearSelection(); - // } - context.setItemSelect(item, !isSelected); } diff --git a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx index c6178e00b1..b6005d5b8c 100644 --- a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx +++ b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx @@ -25,14 +25,18 @@ export const TableItemSelect = observer(function TableItemSelect({ checked, disa const tableContext = useContext(TableContext); const context = useContext(TableItemContext); const styles = useStyles(); - if (!context) { - return null; - } const handleClick = useCallback((event: React.MouseEvent) => { + if (!context) { + return; + } event.stopPropagation(); tableContext?.setItemSelect(context.item, !context.isSelected()); }, [tableContext, context]); + if (!context) { + return null; + } + return styled(styles)( ); diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts index 0d6fa6ac4f..0f56f4c05f 100644 --- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts +++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts @@ -108,18 +108,18 @@ export class TableViewerModel { ) => Promise; _saveChanges: (model: TableViewerModel, diffs: RowDiff[]) => Promise; - get isEmpty() { + get isEmpty(): boolean { return this.tableDataModel.isEmpty(); } - get isLoaderVisible() { + get isLoaderVisible(): boolean { return this._isLoaderVisible; } - get isFullyLoaded() { + get isFullyLoaded(): boolean { return !this._hasMoreRows; } - getChunkSize = () => this._chunkSize; - setChunkSize = (count: number) => this.updateChunkSize(count); + getChunkSize = (): number => this._chunkSize; + setChunkSize = (count: number): void => this.updateChunkSize(count); @observable queryDuration = 0; @observable requestStatusMessage = ''; @@ -165,34 +165,33 @@ export class TableViewerModel { this.onChunkSizeChange = this.chunkChangeSubject.asObservable(); } - cancelFetch = () => { - } + cancelFetch = (): void => { } - refresh = async () => { + refresh = async (): Promise => { this.resetData(); await this.onRequestData(0, this.getChunkSize()); this.resetSubject.next(); } - onShowDetails = () => { + onShowDetails = (): void => { if (this.exception) { this.commonDialogService.open(ErrorDetailsDialog, this.exception); } } - getQueryWhereFilter() { + getQueryWhereFilter(): string | null { return this.queryWhereFilter; } - setQueryWhereFilter(where: string | null) { + setQueryWhereFilter(where: string | null): void { this.queryWhereFilter = where; } - getSortedColumns() { + getSortedColumns(): IterableIterator { return this.sortedColumns.values(); } - setColumnSorting(colId: string, orderAsc?: boolean, multiple?: boolean) { + setColumnSorting(colId: string, orderAsc?: boolean, multiple?: boolean): void { if (!multiple) { this.sortedColumns.clear(); } @@ -201,24 +200,24 @@ export class TableViewerModel { sorting.orderAsc = orderAsc; } - removeColumnSorting(colId: string) { + removeColumnSorting(colId: string): void { this.sortedColumns.delete(colId); } @action - insertRows(position: number, rows: TableRow[], hasMore: boolean) { + insertRows(position: number, rows: TableRow[], hasMore: boolean): void { const isRowsAddition = this.tableDataModel.getRows().length < position + rows.length; this.tableDataModel.insertRows(position, rows); this._hasMoreRows = isRowsAddition ? hasMore : this._hasMoreRows; } @action - setColumns(columns: TableColumn[]) { + setColumns(columns: TableColumn[]): void { this.tableDataModel.setColumns(columns); } @action - updateInfo(status: string, duration?: number) { + updateInfo(status: string, duration?: number): void { this.queryDuration = duration || 0; this.requestStatusMessage = status; } @@ -231,15 +230,15 @@ export class TableViewerModel { return this.tableEditor.isEdited(); } - isCellEdited(rowIndex: number, column: string) { + isCellEdited(rowIndex: number, column: string): boolean { return this.tableEditor.isCellEdited(rowIndex, column); } - revertCellValue(rowNumber: number, column: string) { + revertCellValue(rowNumber: number, column: string): void { this.tableEditor.revertCellValue(rowNumber, column); } - cancelChanges() { + cancelChanges(): void { this.tableEditor.cancelChanges(); } @@ -321,7 +320,7 @@ export class TableViewerModel { } } - onCellEditingStopped(rowNumber: number, column: string, value: any, editing: boolean) { + onCellEditingStopped(rowNumber: number, column: string, value: any, editing: boolean): void { if (this.access === AccessMode.Readonly) { return; } @@ -329,7 +328,7 @@ export class TableViewerModel { this.tableEditor.editCellValue(rowNumber, column, value, editing); } - onSortChanged(sorting: SortModel) { + onSortChanged(sorting: SortModel): void { this.sortedColumns.clear(); for (const sort of sorting) { this.setColumnSorting(sort.colId, sort.sort === 'asc', true); diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Item.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Item.tsx index caed6bf085..3b99a28eba 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Item.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Item.tsx @@ -58,7 +58,7 @@ export const Item = observer(function Item({ if (!node) { return styled(useStyles(itemStyles))( - + @@ -68,7 +68,7 @@ export const Item = observer(function Item({ {Array(columns) .fill(0) .map((_, i) => ( - + ))} @@ -78,20 +78,20 @@ export const Item = observer(function Item({ if (!dbObject?.properties) { return styled(useStyles(itemStyles))( - + - {node.name} + {node.name} ); } return styled(useStyles(itemStyles))( - + @@ -99,7 +99,7 @@ export const Item = observer(function Item({ {dbObject.properties.map(property => ( - {getValue(property.value)} + {getValue(property.value)} ))} );