diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx index e1511f2824..5c06a79145 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx @@ -21,15 +21,16 @@ import { TableDataContext } from '../TableDataContext'; import { CellContext, ICellContext } from './CellContext'; export const CellRenderer: React.FC> = observer(function CellRenderer(props) { + const { rowIdx, column } = props; const dataGridContext = useContext(DataGridContext); const tableDataContext = useContext(TableDataContext); const selectionContext = useContext(DataGridSelectionContext); const editingContext = useContext(EditingContext); + const resultColumn = tableDataContext?.getColumnInfo(column.key); const editor = dataGridContext?.model.source.getEditor(dataGridContext.resultIndex); const mouse = useMouse({}); const classes: string[] = []; - const { rowIdx, column } = props; if (selectionContext?.isSelected(rowIdx, column.idx)) { classes.push('rdg-cell-custom-selected'); @@ -78,7 +79,7 @@ export const CellRenderer: React.FC> = observer(function }, [column, rowIdx, selectionContext, dataGridContext]); const handleDoubleClick = useCallback(() => { - if (!column.editable) { + if (!column.editable || resultColumn?.dataKind?.toLowerCase() === 'boolean') { return; } const format = dataGridContext?.model.source.getAction(dataGridContext.resultIndex, ResultSetFormatAction); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx index a29488c6e7..5095523f2d 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx @@ -23,7 +23,7 @@ import { reactGridStyles } from '../styles/styles'; import { DataGridContext, IColumnResizeInfo, IDataGridContext } from './DataGridContext'; import { DataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext'; import { useGridSelectionContext } from './DataGridSelection/useGridSelectionContext'; -import { CellFormatterWrapper } from './Formatters/CellFormatterWrapper'; +import { CellFormatter } from './Formatters/CellFormatter'; import { RowRenderer } from './RowRenderer/RowRenderer'; import { TableDataContext } from './TableDataContext'; import { useGridDragging } from './useGridDragging'; @@ -165,7 +165,7 @@ export const DataGridTable: React.FC = observer(function CellFormatterWrapper({ className, ...rest }) { - const { column, rowIdx, isCellSelected } = rest; +export const CellFormatter: React.FC = observer(function CellFormatter({ className, ...rest }) { const context = useContext(DataGridContext); const tableDataContext = useContext(TableDataContext); const cellContext = useContext(CellContext); const editingContext = useContext(EditingContext); const [menuVisible, setMenuVisible] = useState(false); - const showCellMenu = !editingContext?.isEditing({ idx: column.idx, rowIdx }) - && (isCellSelected || cellContext?.mouse.state.mouseEnter || menuVisible); + const showCellMenu = !editingContext?.isEditing({ idx: rest.column.idx, rowIdx: rest.rowIdx }) + && (rest.isCellSelected || cellContext?.mouse.state.mouseEnter || menuVisible); const spreadsheetActions = useObjectRef>({ edit(position) { @@ -71,8 +70,8 @@ export const CellFormatterWrapper: React.FC = observer(function CellForma actions={context.actions} spreadsheetActions={spreadsheetActions} resultIndex={context.resultIndex} - row={rowIdx} - column={Number(column.key)} + row={rest.rowIdx} + column={Number(rest.column.key)} onStateSwitch={setMenuVisible} /> diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx index 6594dcfd93..25df1d6c76 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx @@ -17,10 +17,10 @@ import { DataGridContext } from '../../DataGridContext'; import { TableDataContext } from '../../TableDataContext'; const styles = css` - value { + boolean-formatter { cursor: pointer; } - value[|boolean] { + boolean-formatter[|boolean] { font-family: monospace; white-space: pre; line-height: 1; @@ -55,16 +55,15 @@ export const BooleanFormatter: React.FC = observer(function Bool }, [resultColumn]); return styled(styles)( - e.stopPropagation()}> - context?.model.source.getEditor(context.resultIndex) - .setCell(rowIdx, Number(column.key), getNextValue(rawValue))} - {...use({ boolean: rawValue !== null })} - > - {value} - + context?.model.source.getEditor(context.resultIndex) + .setCell(rowIdx, Number(column.key), getNextValue(rawValue))} + {...use({ boolean: rawValue !== null })} + > + {value} ); }); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx index 232785daab..5293827d98 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx @@ -48,7 +48,7 @@ export const TextFormatter: React.FC = observer(function TextFor if (editingContext?.isEditing({ idx: column.idx, rowIdx })) { return ( -
+
= observer(function TextFor } return styled()( - + {value} ); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.ts index 44f07aa9e5..ac828df652 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.ts @@ -88,6 +88,10 @@ export function useTableData(model: IDatabaseDataModel, return this.rows[rowIndex][key as number]; }, getColumnInfo(key: string | number): SqlResultColumn | undefined { + if (this.isIndexColumn(key)) { + return; + } + return this.dataColumns[Number(key)]; }, getDataColumnIndexFromKey(key: string | number) {