Upgrade react-data-grid fork to latest and change pgAdmin accordingly. #7705
Aditya Toshniwal
GitHub
parent
c45fb47b08
commit
c6e7ce03cc
|
|
@ -126,7 +126,7 @@
|
|||
"react-arborist": "^3.2.0",
|
||||
"react-aspen": "^1.1.0",
|
||||
"react-checkbox-tree": "^1.7.2",
|
||||
"react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8",
|
||||
"react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -70,8 +70,9 @@ export function FileNameEditor({row, column, onRowChange, onClose}) {
|
|||
}, []);
|
||||
|
||||
const onKeyDown = (e)=>{
|
||||
if(e.code === 'Tab' || e.code === 'Enter') {
|
||||
if(e.code === 'Tab' || e.code == 'Escape' || e.code == 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
|
@ -116,20 +117,16 @@ const columns = [
|
|||
{
|
||||
key: 'Filename',
|
||||
name: gettext('Name'),
|
||||
formatter: FileNameFormatter,
|
||||
editor: FileNameEditor,
|
||||
editorOptions: {
|
||||
editOnClick: false,
|
||||
onCellKeyDown: (e)=>e.preventDefault(),
|
||||
}
|
||||
renderCell: FileNameFormatter,
|
||||
renderEditCell: FileNameEditor,
|
||||
},{
|
||||
key: 'Properties.DateModified',
|
||||
name: gettext('Date Modified'),
|
||||
formatter: ({row})=><>{row.Properties?.['Date Modified']}</>
|
||||
renderCell: ({row})=><>{row.Properties?.['Date Modified']}</>
|
||||
},{
|
||||
key: 'Properties.Size',
|
||||
name: gettext('Size'),
|
||||
formatter: ({row})=><>{row.file_type != 'dir' && row.Properties?.['Size']}</>
|
||||
renderCell: ({row})=><>{row.file_type != 'dir' && row.Properties?.['Size']}</>
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -161,7 +158,7 @@ export default function ListView({items, operation, ...props}) {
|
|||
sortable: true,
|
||||
resizable: true
|
||||
}}
|
||||
headerRowHeight={28}
|
||||
headerRowHeight={35}
|
||||
rowHeight={28}
|
||||
mincolumnWidthBy={25}
|
||||
enableCellSelect={false}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,6 @@
|
|||
@import 'node_modules/rc-dock/dist/rc-dock.css';
|
||||
@import 'node_modules/@szhsin/react-menu/dist/index.css';
|
||||
|
||||
@import 'node_modules/react-data-grid/lib/styles.css';
|
||||
|
||||
@import './pgadmin.css';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// This software is released under the PostgreSQL Licence
|
||||
//
|
||||
//////////////////////////////////////////////////////////////
|
||||
import React, { useContext, useEffect, useMemo } from 'react';
|
||||
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
|
||||
import ReactDataGrid, { Row } from 'react-data-grid';
|
||||
import { Box } from '@mui/material';
|
||||
import PropTypes from 'prop-types';
|
||||
|
|
@ -23,6 +23,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
|
|||
backgroundColor: theme.otherVars.qtDatagridBg,
|
||||
fontSize: '12px',
|
||||
border: 'none',
|
||||
userSelect: 'none',
|
||||
'--rdg-selection-color': theme.palette.primary.main,
|
||||
'& .rdg-cell': {
|
||||
...theme.mixins.panelBorder.right,
|
||||
|
|
@ -35,10 +36,17 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
|
|||
'&[aria-selected=true]:not([role="columnheader"])': {
|
||||
outlineWidth: '0px',
|
||||
outlineOffset: '0px',
|
||||
},
|
||||
'& .rdg-cell-value': {
|
||||
height: '100%',
|
||||
}
|
||||
},
|
||||
'& .rdg-header-row .rdg-cell': {
|
||||
padding: 0,
|
||||
|
||||
'& .rdg-header-sort-name': {
|
||||
margin: 'auto 0',
|
||||
}
|
||||
},
|
||||
'& .rdg-header-row': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
|
@ -61,20 +69,6 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
|
|||
}
|
||||
},
|
||||
},
|
||||
'&.ReactGrid-hasSelectColumn': {
|
||||
'& .rdg-cell': {
|
||||
'&[aria-selected=true][aria-colindex="1"]': {
|
||||
outlineWidth: '2px',
|
||||
outlineOffset: '-2px',
|
||||
backgroundColor: theme.otherVars.qtDatagridBg,
|
||||
color: theme.palette.text.primary,
|
||||
}
|
||||
},
|
||||
'& .rdg-row[aria-selected=true] .rdg-cell:nth-of-type(1)': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
export const GridContextUtils = React.createContext();
|
||||
|
|
@ -110,12 +104,18 @@ export function CustomRow({inTest=false, ...props}) {
|
|||
if(inTest) {
|
||||
return <div data-test='test-div' tabIndex={-1} onKeyDown={handleKeyDown}></div>;
|
||||
}
|
||||
const onRowClick = (...args)=>{
|
||||
gridUtils.onItemClick?.(props.rowIdx);
|
||||
props.onRowClick?.(...args);
|
||||
|
||||
const onCellClick = (args) => {
|
||||
gridUtils.onItemClick?.(args.row.rowIdx);
|
||||
props.onRowClick?.(args.row);
|
||||
};
|
||||
|
||||
const onCellDoubleClick = (args) => {
|
||||
gridUtils.onItemEnter?.(args.row);
|
||||
};
|
||||
|
||||
return (
|
||||
<Row {...props} onKeyDown={handleKeyDown} onRowClick={onRowClick} onRowDoubleClick={(row)=>gridUtils.onItemEnter?.(row)}
|
||||
<Row {...props} onKeyDown={handleKeyDown} onCellClick={onCellClick} onCellDoubleClick={onCellDoubleClick}
|
||||
selectCell={(row, column)=>props.selectCell(row, column)} aria-selected={isRowSelected}/>
|
||||
);
|
||||
}
|
||||
|
|
@ -136,14 +136,23 @@ export default function PgReactDataGrid({gridRef, className, hasSelectColumn=tru
|
|||
props.enableCellSelect && finalClassName.push('ReactGrid-cellSelection');
|
||||
finalClassName.push(className);
|
||||
const valObj = useMemo(() => ({onItemEnter, onItemSelect, onItemClick}), [onItemEnter, onItemSelect, onItemClick]);
|
||||
|
||||
const renderRow = useCallback((key, props) => {
|
||||
return <CustomRow key={key} {...props} />;
|
||||
}, []);
|
||||
|
||||
const renderSortStatus = useCallback((props) => {
|
||||
return <CutomSortIcon {...props} />;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<GridContextUtils.Provider value={valObj}>
|
||||
<StyledReactDataGrid
|
||||
ref={gridRef}
|
||||
className={finalClassName.join(' ')}
|
||||
components={{
|
||||
sortIcon: CutomSortIcon,
|
||||
rowRenderer: CustomRow,
|
||||
renderers={{
|
||||
renderRow,
|
||||
renderSortStatus,
|
||||
noRowsFallback: <Box textAlign="center" gridColumn="1/-1" p={1}>{noRowsIcon}{noRowsText || gettext('No rows found.')}</Box>,
|
||||
}}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -35,12 +35,9 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
fontSize: '13px',
|
||||
'--rdg-background-color': theme.palette.default.main,
|
||||
'--rdg-selection-color': theme.palette.primary.main,
|
||||
'& .ResultGridComponent-gridPanel': {
|
||||
'--rdg-background-color': theme.palette.default.main + ' !important',
|
||||
'&.ResultGridComponent-grid': {
|
||||
fontSize: '13px',
|
||||
'--rdg-selection-color': 'none'
|
||||
},
|
||||
'& .ResultGridComponent-grid.ReactGrid-root': {
|
||||
fontSize: '13px',
|
||||
'--rdg-selection-color': 'none',
|
||||
'& .rdg-header-row': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
'& .rdg-cell': {
|
||||
|
|
@ -57,13 +54,29 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
},
|
||||
'& .rdg-row': {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
'&[aria-selected=true]': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: theme.otherVars.qtDatagridSelectFg,
|
||||
'& .rdg-cell:nth-of-type(1)': {
|
||||
backgroundColor: 'transparent',
|
||||
outlineColor: 'transparent',
|
||||
color: theme.palette.primary.contrastText,
|
||||
'&[aria-selected=false]': {
|
||||
'&.ResultGridComponent-selectedRow': {
|
||||
paddingLeft: '0.5rem',
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
},
|
||||
'&.ResultGridComponent-source': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.sourceRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'&.ResultGridComponent-target': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.targetRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'&.ResultGridComponent-different': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.diffRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'&.ResultGridComponent-identical': {
|
||||
paddingLeft: '0.5rem',
|
||||
color: theme.otherVars.schemaDiff.diffColorFg,
|
||||
},
|
||||
},
|
||||
'& .rdg-cell': {
|
||||
|
|
@ -74,19 +87,15 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
...theme.mixins.panelBorder.bottom,
|
||||
'&[aria-colindex="1"]': {
|
||||
padding: 0,
|
||||
textAlign: 'center',
|
||||
},
|
||||
'&[aria-selected=true]:not([role="columnheader"]):not([aria-colindex="1"])': {
|
||||
outlineWidth: '0',
|
||||
outlineOffset: '-1px',
|
||||
color: theme.otherVars.qtDatagridSelectFg,
|
||||
},
|
||||
'&[aria-selected=true][aria-colindex="1"]': {
|
||||
outlineWidth: 0,
|
||||
backgroundColor: theme.palette.default.main + ' !important'
|
||||
'& .ResultGridComponent-rowIcon': {
|
||||
display: 'inline-block !important',
|
||||
height: '1.3rem',
|
||||
width: '1.3rem'
|
||||
},
|
||||
'& .ResultGridComponent-cellExpand': {
|
||||
display: 'table',
|
||||
blockSize: '100%',
|
||||
width: '100%',
|
||||
'& > span': {
|
||||
verticalAlign: 'middle',
|
||||
cursor: 'pointer',
|
||||
|
|
@ -97,11 +106,7 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
},
|
||||
'& .ResultGridComponent-subRow': {
|
||||
paddingLeft: '1rem',
|
||||
'& .ResultGridComponent-rowIcon': {
|
||||
display: 'inline-block !important',
|
||||
height: '1.3rem',
|
||||
width: '1.3rem'
|
||||
},
|
||||
|
||||
'& .ResultGridComponent-count': {
|
||||
display: 'inline-block !important',
|
||||
'& .ResultGridComponent-countLabel': {
|
||||
|
|
@ -115,29 +120,6 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
}
|
||||
}
|
||||
},
|
||||
'& .ResultGridComponent-selectedRow': {
|
||||
paddingLeft: '0.5rem',
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
},
|
||||
'& .ResultGridComponent-source': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.sourceRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'& .ResultGridComponent-target': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.targetRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'& .ResultGridComponent-different': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.diffRowColor,
|
||||
color: theme.otherVars.schemaDiff.diffSelectFG,
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'& .ResultGridComponent-identical': {
|
||||
paddingLeft: '0.5rem',
|
||||
color: theme.otherVars.schemaDiff.diffColorFg,
|
||||
},
|
||||
'& .ResultGridComponent-recordRow': {
|
||||
marginLeft: '2.7rem',
|
||||
height: '1.3rem',
|
||||
|
|
@ -146,15 +128,9 @@ const StyledBox = styled(Box)(({theme}) => ({
|
|||
marginRight: '0.3rem',
|
||||
paddingLeft: '0.5rem',
|
||||
},
|
||||
'& .ResultGridComponent-selectCell': {
|
||||
'&.ResultGridComponent-selectCell': {
|
||||
padding: '0 0.3rem'
|
||||
},
|
||||
'& .ResultGridComponent-selectedRowCheckBox': {
|
||||
backgroundColor: theme.otherVars.schemaDiff.diffSelCheckbox,
|
||||
},
|
||||
'& .ResultGridComponent-selChBox': {
|
||||
paddingLeft: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .ResultGridComponent-noRowsIcon': {
|
||||
|
|
@ -456,33 +432,31 @@ function selectHeaderRenderer({selectedRows, setSelectedRows, rootSelection, set
|
|||
Cell.displayName = 'Cell';
|
||||
return Cell;
|
||||
}
|
||||
function selectFormatter({selectedRows, setSelectedRows, setRootSelection, activeRow, setActiveRow, allRowIds, selectedRowIds, selectedResultRows, deselectResultRows, getStyleClassName}) {
|
||||
function selectFormatter({selectedRows, setSelectedRows, setRootSelection, setActiveRow, allRowIds, selectedRowIds, selectedResultRows, deselectResultRows}) {
|
||||
const Cell = ({ row, isCellSelected }) => {
|
||||
isCellSelected && setActiveRow(row.id);
|
||||
return (
|
||||
<Box className={!row?.children && getStyleClassName(row, selectedRows, isCellSelected, activeRow, true) + ' ResultGridComponent-selChBox'}>
|
||||
<InputCheckbox
|
||||
className='ResultGridComponent-selectCell'
|
||||
cid={`${row.id}`}
|
||||
value={selectedRows.includes(`${row.id}`)}
|
||||
size='small'
|
||||
onChange={(e) => {
|
||||
setSelectedRows((prev) => {
|
||||
let tempSelectedRows = [...prev];
|
||||
if (!prev.includes(e.target.id)) {
|
||||
selectedResultRows(row, tempSelectedRows);
|
||||
tempSelectedRows.length === allRowIds.length && setRootSelection(true);
|
||||
} else {
|
||||
deselectResultRows(row, tempSelectedRows);
|
||||
}
|
||||
tempSelectedRows = new Set(tempSelectedRows);
|
||||
selectedRowIds([...tempSelectedRows]);
|
||||
return [...tempSelectedRows];
|
||||
});
|
||||
}
|
||||
}
|
||||
></InputCheckbox>
|
||||
</Box>
|
||||
<InputCheckbox
|
||||
className='ResultGridComponent-selectCell'
|
||||
cid={`${row.id}`}
|
||||
value={selectedRows.includes(`${row.id}`)}
|
||||
size='small'
|
||||
onChange={(e) => {
|
||||
setSelectedRows((prev) => {
|
||||
let tempSelectedRows = [...prev];
|
||||
if (!prev.includes(e.target.id)) {
|
||||
selectedResultRows(row, tempSelectedRows);
|
||||
tempSelectedRows.length === allRowIds.length && setRootSelection(true);
|
||||
} else {
|
||||
deselectResultRows(row, tempSelectedRows);
|
||||
}
|
||||
tempSelectedRows = new Set(tempSelectedRows);
|
||||
selectedRowIds([...tempSelectedRows]);
|
||||
return [...tempSelectedRows];
|
||||
});
|
||||
}
|
||||
}
|
||||
></InputCheckbox>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -494,7 +468,7 @@ function selectFormatter({selectedRows, setSelectedRows, setRootSelection, activ
|
|||
return Cell;
|
||||
}
|
||||
|
||||
function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selectedRows, dispatch, getStyleClassName}) {
|
||||
function expandFormatter({setActiveRow, filterParams, gridData, selectedRows, dispatch}) {
|
||||
const Cell = ({ row, isCellSelected })=>{
|
||||
const hasChildren = row.children !== undefined;
|
||||
isCellSelected && setActiveRow(row.id);
|
||||
|
|
@ -510,15 +484,12 @@ function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selec
|
|||
onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow', filterParams: filterParams, gridData: gridData, selectedRows: selectedRows })}
|
||||
/>
|
||||
)}
|
||||
<div className="rdg-cell-value">
|
||||
|
||||
{!hasChildren && (
|
||||
<Box className={getStyleClassName(row, selectedRows, isCellSelected, activeRow)}>
|
||||
<span className={'ResultGridComponent-recordRow ' + row.icon}></span>
|
||||
{row.label}
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
{!hasChildren && (
|
||||
<Box>
|
||||
<span className={'ResultGridComponent-recordRow ' + row.icon}></span>
|
||||
{row.label}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -531,12 +502,12 @@ function expandFormatter({activeRow, setActiveRow, filterParams, gridData, selec
|
|||
return Cell;
|
||||
}
|
||||
|
||||
function resultFormatter({selectedRows, activeRow, setActiveRow, getStyleClassName}) {
|
||||
function resultFormatter({setActiveRow}) {
|
||||
const Cell = ({ row, isCellSelected })=>{
|
||||
isCellSelected && setActiveRow(row.id);
|
||||
|
||||
return (
|
||||
<Box className={getStyleClassName(row, selectedRows, isCellSelected, activeRow)}>
|
||||
<Box>
|
||||
{row.status}
|
||||
</Box>
|
||||
);
|
||||
|
|
@ -648,10 +619,10 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
|
|||
}
|
||||
}
|
||||
|
||||
function getStyleClassName(row, selectedRowIds, isCellSelected, activeRowId, isCheckbox = false) {
|
||||
function getStyleClassName(row, selectedRowIds, activeRowId) {
|
||||
let clsName = null;
|
||||
if (selectedRowIds.includes(`${row.id}`) || isCellSelected || row.id == activeRowId) {
|
||||
clsName = isCheckbox ? 'ResultGridComponent-selectedRowCheckBox' : 'ResultGridComponent-selectedRow';
|
||||
if (selectedRowIds.includes(`${row.id}`) || row.id == activeRowId) {
|
||||
clsName = 'ResultGridComponent-selectedRow';
|
||||
} else if (row.status == FILTER_NAME.DIFFERENT) {
|
||||
clsName = 'ResultGridComponent-different';
|
||||
} else if (row.status == FILTER_NAME.SOURCE_ONLY) {
|
||||
|
|
@ -671,14 +642,14 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
|
|||
...SelectColumn,
|
||||
minWidth: 30,
|
||||
width: 30,
|
||||
headerRenderer: selectHeaderRenderer({
|
||||
renderHeaderCell: selectHeaderRenderer({
|
||||
selectedRows, setSelectedRows, rootSelection,
|
||||
setRootSelection, allRowIds, selectedRowIds
|
||||
}),
|
||||
formatter: selectFormatter({
|
||||
renderCell: selectFormatter({
|
||||
selectedRows, setSelectedRows, setRootSelection,
|
||||
activeRow, setActiveRow, allRowIds, selectedRowIds,
|
||||
selectedResultRows, deselectResultRows, getStyleClassName
|
||||
setActiveRow, allRowIds, selectedRowIds,
|
||||
selectedResultRows, deselectResultRows
|
||||
}),
|
||||
},
|
||||
{
|
||||
|
|
@ -692,15 +663,15 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
|
|||
|
||||
return 1;
|
||||
},
|
||||
formatter: expandFormatter({
|
||||
activeRow, setActiveRow, filterParams, gridData,
|
||||
selectedRows, dispatch, getStyleClassName
|
||||
renderCell: expandFormatter({
|
||||
setActiveRow, filterParams, gridData,
|
||||
selectedRows, dispatch
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
name: 'Comparison Result',
|
||||
formatter: resultFormatter({selectedRows, activeRow, setActiveRow, getStyleClassName}),
|
||||
renderCell: resultFormatter({setActiveRow}),
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -768,7 +739,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
|
|||
<PgReactDataGrid
|
||||
id="schema-diff-result-grid"
|
||||
columns={columns} rows={rows}
|
||||
className={'ResultGridComponent-gridPanel ResultGridComponent-grid'}
|
||||
className='ResultGridComponent-grid'
|
||||
treeDepth={2}
|
||||
enableRowSelect={true}
|
||||
defaultColumnOptions={{
|
||||
|
|
@ -782,6 +753,9 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
|
|||
direction={'vertical-lr'}
|
||||
noRowsText={gettext('No difference found')}
|
||||
noRowsIcon={<InfoIcon className='ResultGridComponent-noRowsIcon' />}
|
||||
rowClass={(row) =>
|
||||
getStyleClassName(row, selectedRows, activeRow)
|
||||
}
|
||||
/>
|
||||
:
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -134,17 +134,17 @@ const columns = [
|
|||
key: 'name',
|
||||
name: gettext('Object name'),
|
||||
width: 250,
|
||||
formatter: ObjectNameFormatter,
|
||||
renderCell: ObjectNameFormatter,
|
||||
},{
|
||||
key: 'type',
|
||||
name: gettext('Type'),
|
||||
width: 30,
|
||||
formatter: TypePathFormatter,
|
||||
width: 70,
|
||||
renderCell: TypePathFormatter,
|
||||
},{
|
||||
key: 'path',
|
||||
name: gettext('Object path'),
|
||||
enableSorting: false,
|
||||
formatter: TypePathFormatter,
|
||||
renderCell: TypePathFormatter,
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -416,10 +416,10 @@ export default function SearchObjects({nodeData}) {
|
|||
columns={columns}
|
||||
rows={sortedItems}
|
||||
defaultColumnOptions={{
|
||||
enableSorting: true,
|
||||
enableResizing: true
|
||||
sortable: true,
|
||||
resizable: true
|
||||
}}
|
||||
headerRowHeight={28}
|
||||
headerRowHeight={35}
|
||||
rowHeight={28}
|
||||
mincolumnWidthBy={25}
|
||||
enableCellSelect={false}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import { Box } from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import _ from 'lodash';
|
||||
import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo} from 'react';
|
||||
import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo, useCallback} from 'react';
|
||||
import {Row, useRowSelection} from 'react-data-grid';
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
|
|
@ -74,7 +74,6 @@ function CustomRow(props) {
|
|||
const dataGridExtras = useContext(DataGridExtrasContext);
|
||||
|
||||
const rowInfoValue = useMemo(()=>({
|
||||
rowIdx: props.rowIdx,
|
||||
getCellElement: (colIdx)=>{
|
||||
return rowRef.current?.querySelector(`.rdg-cell[aria-colindex="${colIdx+1}"]`);
|
||||
}
|
||||
|
|
@ -114,15 +113,14 @@ function getCopyShortcutHandler(handleCopy) {
|
|||
};
|
||||
}
|
||||
|
||||
function SelectAllHeaderRenderer({onAllRowsSelectionChange, isCellSelected}) {
|
||||
const [checked, setChecked] = useState(false);
|
||||
function SelectAllHeaderRenderer({isCellSelected}) {
|
||||
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
||||
const cellRef = useRef();
|
||||
const eventBus = useContext(QueryToolEventsContext);
|
||||
const dataGridExtras = useContext(DataGridExtrasContext);
|
||||
const onClick = ()=>{
|
||||
eventBus.fireEvent(QUERY_TOOL_EVENTS.FETCH_MORE_ROWS, true, ()=>{
|
||||
setChecked(!checked);
|
||||
onAllRowsSelectionChange(!checked);
|
||||
onRowSelectionChange({ type: 'HEADER', checked: !isRowSelected });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -198,24 +196,24 @@ SelectableHeaderRenderer.propTypes = {
|
|||
function setEditorFormatter(col) {
|
||||
// If grid is editable then add editor else make it readonly
|
||||
if (col.cell == 'oid' && col.name == 'oid') {
|
||||
col.editor = null;
|
||||
col.formatter = Formatters.TextFormatter;
|
||||
col.renderEditCell = null;
|
||||
col.renderCell = Formatters.TextFormatter;
|
||||
} else if (col.cell == 'Json') {
|
||||
col.editor = Editors.JsonTextEditor;
|
||||
col.formatter = Formatters.TextFormatter;
|
||||
col.renderEditCell = Editors.JsonTextEditor;
|
||||
col.renderCell = Formatters.TextFormatter;
|
||||
} else if (['number', 'oid'].indexOf(col.cell) != -1 || ['xid', 'real'].indexOf(col.type) != -1) {
|
||||
col.formatter = Formatters.NumberFormatter;
|
||||
col.editor = Editors.NumberEditor;
|
||||
col.renderCell = Formatters.NumberFormatter;
|
||||
col.renderEditCell = Editors.NumberEditor;
|
||||
} else if (col.cell == 'boolean') {
|
||||
col.editor = Editors.CheckboxEditor;
|
||||
col.formatter = Formatters.TextFormatter;
|
||||
col.renderEditCell = Editors.CheckboxEditor;
|
||||
col.renderCell = Formatters.TextFormatter;
|
||||
} else if (col.cell == 'binary') {
|
||||
// We do not support editing binary data in SQL editor and data grid.
|
||||
col.editor = null;
|
||||
col.formatter = Formatters.BinaryFormatter;
|
||||
col.renderEditCell = null;
|
||||
col.renderCell = Formatters.BinaryFormatter;
|
||||
} else {
|
||||
col.editor = Editors.TextEditor;
|
||||
col.formatter = Formatters.TextFormatter;
|
||||
col.renderEditCell = Editors.TextEditor;
|
||||
col.renderCell = Formatters.TextFormatter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +249,7 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
|
|||
for(const col of retColumns) {
|
||||
col.width = getTextWidth(col, rows, canvasContext, columnWidthBy);
|
||||
col.resizable = true;
|
||||
col.editorOptions = {
|
||||
col.renderEditCellOptions = {
|
||||
commitOnOutsideClick: false,
|
||||
onCellKeyDown: (e)=>{
|
||||
// global keyboard shortcuts will work now and will open the the editor for the cell once pgAdmin reopens
|
||||
|
|
@ -276,12 +274,9 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
|
|||
canvas.remove();
|
||||
return retColumns;
|
||||
}
|
||||
|
||||
function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColumnsChange}) {
|
||||
const {rowIdx} = useContext(RowInfoContext);
|
||||
function RowNumColFormatter({row, rowKeyGetter, rowIdx, dataChangeStore, onSelectedColumnsChange}) {
|
||||
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
||||
|
||||
|
||||
let rowKey = rowKeyGetter(row);
|
||||
let rownum = rowIdx+1;
|
||||
if(rowKey in (dataChangeStore?.added || {})) {
|
||||
|
|
@ -291,7 +286,7 @@ function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColum
|
|||
}
|
||||
return (<div className='QueryTool-rowNumCell' onClick={()=>{
|
||||
onSelectedColumnsChange(new Set());
|
||||
onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false});
|
||||
onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: false});
|
||||
}} onKeyDown={()=>{/* already taken care by parent */}}>
|
||||
{rownum}
|
||||
</div>);
|
||||
|
|
@ -313,13 +308,13 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColu
|
|||
};
|
||||
|
||||
for(const [idx, col] of retColumns.entries()) {
|
||||
col.headerRenderer = HeaderRenderer;
|
||||
col.renderHeaderCell = HeaderRenderer;
|
||||
col.cellClass = cellClassGetter(col, selectedColumns.has(idx), dataChangeStore, rowKeyGetter);
|
||||
}
|
||||
|
||||
let rowNumCol = retColumns[0];
|
||||
rowNumCol.headerRenderer = SelectAllHeaderRenderer;
|
||||
rowNumCol.formatter = (props)=>{
|
||||
rowNumCol.renderHeaderCell = SelectAllHeaderRenderer;
|
||||
rowNumCol.renderCell = (props)=>{
|
||||
return <RowNumColFormatter {...props} rowKeyGetter={rowKeyGetter} dataChangeStore={dataChangeStore} onSelectedColumnsChange={onSelectedColumnsChange} />;
|
||||
};
|
||||
|
||||
|
|
@ -372,6 +367,10 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
|
|||
eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_COPY_DATA);
|
||||
}
|
||||
|
||||
const renderCustomRow = useCallback((key, props) => {
|
||||
return <CustomRow key={key} {...props} />;
|
||||
}, []);
|
||||
|
||||
const dataGridExtras = useMemo(()=>({
|
||||
onSelectedCellChange, handleCopy
|
||||
}), [onSelectedCellChange]);
|
||||
|
|
@ -399,8 +398,8 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
|
|||
enableCellSelect={true}
|
||||
onCopy={handleCopy}
|
||||
onMultiCopy={handleCopy}
|
||||
components={{
|
||||
rowRenderer: CustomRow,
|
||||
renderers={{
|
||||
renderRow: renderCustomRow,
|
||||
}}
|
||||
enableRangeSelection={true}
|
||||
rangeLeftBoundaryColIdx={0}
|
||||
|
|
|
|||
|
|
@ -5389,7 +5389,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clsx@npm:^2.1.0, clsx@npm:^2.1.1":
|
||||
"clsx@npm:^2.0.0, clsx@npm:^2.1.0, clsx@npm:^2.1.1":
|
||||
version: 2.1.1
|
||||
resolution: "clsx@npm:2.1.1"
|
||||
checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
|
||||
|
|
@ -13251,15 +13251,15 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8":
|
||||
version: 7.0.0-beta.14
|
||||
resolution: "react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#commit=200d2f5e02de694e3e9ffbe177c279bc40240fb8"
|
||||
"react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5":
|
||||
version: 7.0.0-beta.44
|
||||
resolution: "react-data-grid@https://github.com/pgadmin-org/react-data-grid.git#commit=4e10a5a327ff58198ac83c7b0c62549b20b78ae5"
|
||||
dependencies:
|
||||
clsx: ^1.1.1
|
||||
clsx: ^2.0.0
|
||||
peerDependencies:
|
||||
react: ^16.14 || ^17.0 || ^18.0
|
||||
react-dom: ^16.14 || ^17.0 || ^18.0
|
||||
checksum: ee77fcd8b689e664824f24ed91c82263158e5fb77214f8b5e6bc88d13deb30bd8bd381e6901bc508f1152745dbb8b858f57d605f13bb936275137d01e81a0ae7
|
||||
react: ^18.0 || ^19.0
|
||||
react-dom: ^18.0 || ^19.0
|
||||
checksum: 75e8910f9b69c60c28223e82647cb8323e08d13d1b56eec94e918e7feadc50f5f4257205a3cd628b9fba019577c3ffab62bdecda7d950e7647ba75988de28261
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
@ -14038,7 +14038,7 @@ __metadata:
|
|||
react-arborist: ^3.2.0
|
||||
react-aspen: ^1.1.0
|
||||
react-checkbox-tree: ^1.7.2
|
||||
react-data-grid: "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8"
|
||||
react-data-grid: "https://github.com/pgadmin-org/react-data-grid.git#4e10a5a327ff58198ac83c7b0c62549b20b78ae5"
|
||||
react-dnd: ^16.0.1
|
||||
react-dnd-html5-backend: ^16.0.1
|
||||
react-dom: ^18.2.0
|
||||
|
|
|
|||
Loading…
Reference in New Issue