mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-08 04:35:58 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

grid focus refactor - fake control take focus

Browse Source
This commit is contained in:
Jan Prochazka 2020-03-29 20:53:01 +02:00
parent 42e2dbbd48
commit 0f51501d5f
1 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/web/src/datagrid/DataGridCore.js
View File

@ -86,6 +86,12 @@ const TableFilterCell = styled.td`
padding: 0; padding: 0;
`; `;
const wheelRowCount = 5; const wheelRowCount = 5;
const FocusField = styled.input`
// visibility: hidden
position: absolute;
left: -1000px;
top: -1000px;
`;
/** @param props {import('./types').DataGridProps} */ /** @param props {import('./types').DataGridProps} */
export default function DataGridCore(props) { export default function DataGridCore(props) {
@ -102,6 +108,7 @@ export default function DataGridCore(props) {
const { isLoading, loadedRows, isLoadedAll, loadedTime } = loadProps; const { isLoading, loadedRows, isLoadedAll, loadedTime } = loadProps;
const loadedTimeRef = React.useRef(0); const loadedTimeRef = React.useRef(0);
const focusFieldRef = React.useRef();
const [vScrollValueToSet, setvScrollValueToSet] = React.useState(); const [vScrollValueToSet, setvScrollValueToSet] = React.useState();
const [vScrollValueToSetDate, setvScrollValueToSetDate] = React.useState(new Date()); const [vScrollValueToSetDate, setvScrollValueToSetDate] = React.useState(new Date());
@ -110,7 +117,7 @@ export default function DataGridCore(props) {
const [hScrollValueToSetDate, sethScrollValueToSetDate] = React.useState(new Date()); const [hScrollValueToSetDate, sethScrollValueToSetDate] = React.useState(new Date());
const [currentCell, setCurrentCell] = React.useState(topLeftCell); const [currentCell, setCurrentCell] = React.useState(topLeftCell);
const [selectedCells, setSelectedCells] = React.useState(emptyCellArray); const [selectedCells, setSelectedCells] = React.useState([topLeftCell]);
const [dragStartCell, setDragStartCell] = React.useState(nullCell); const [dragStartCell, setDragStartCell] = React.useState(nullCell);
const [shiftDragStartCell, setShiftDragStartCell] = React.useState(nullCell); const [shiftDragStartCell, setShiftDragStartCell] = React.useState(nullCell);
const [autofillDragStartCell, setAutofillDragStartCell] = React.useState(nullCell); const [autofillDragStartCell, setAutofillDragStartCell] = React.useState(nullCell);
@ -191,7 +198,7 @@ export default function DataGridCore(props) {
const [headerRowRef, { height: rowHeight }] = useDimensions(); const [headerRowRef, { height: rowHeight }] = useDimensions();
const [tableBodyRef] = useDimensions(); const [tableBodyRef] = useDimensions();
const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions(); const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
const [tableRef, { height: tableHeight, width: tableWidth }, tableElement] = useDimensions(); const [tableRef, { height: tableHeight, width: tableWidth }] = useDimensions();
const confirmSqlModalState = useModalState(); const confirmSqlModalState = useModalState();
const [confirmSql, setConfirmSql] = React.useState(''); const [confirmSql, setConfirmSql] = React.useState('');
@ -205,7 +212,8 @@ export default function DataGridCore(props) {
}; };
case 'close': { case 'close': {
const [row, col] = currentCell || []; const [row, col] = currentCell || [];
if (tableElement) tableElement.focus(); // @ts-ignore
if (focusFieldRef.current) focusFieldRef.current.focus();
// @ts-ignore // @ts-ignore
if (action.mode == 'enter' && row) setTimeout(() => moveCurrentCell(row + 1, col), 0); if (action.mode == 'enter' && row) setTimeout(() => moveCurrentCell(row + 1, col), 0);
if (action.mode == 'save') setTimeout(handleSave, 0); if (action.mode == 'save') setTimeout(handleSave, 0);
@ -269,9 +277,9 @@ export default function DataGridCore(props) {
React.useEffect(() => { React.useEffect(() => {
if (tabVisible) { if (tabVisible) {
// @ts-ignore // @ts-ignore
if (tableElement) tableElement.focus(); if (focusFieldRef.current) focusFieldRef.current.focus();
} }
}, [tabVisible, tableElement]); }, [tabVisible, focusFieldRef.current]);
// const handleCloseInplaceEditor = React.useCallback( // const handleCloseInplaceEditor = React.useCallback(
// mode => { // mode => {
@ -305,7 +313,10 @@ export default function DataGridCore(props) {
}; };
function handleGridMouseDown(event) { function handleGridMouseDown(event) {
event.target.closest('table').focus(); // event.target.closest('table').focus();
event.preventDefault();
// @ts-ignore
if (focusFieldRef.current) focusFieldRef.current.focus();
const cell = cellFromEvent(event); const cell = cellFromEvent(event);
const autofill = event.target.closest('div.autofillHandleMarker'); const autofill = event.target.closest('div.autofillHandleMarker');
if (autofill) { if (autofill) {
@ -331,9 +342,18 @@ export default function DataGridCore(props) {
copyToClipboard(); copyToClipboard();
} }
// function handlePaste(event) { function handlePaste(event) {
// console.log('PASTE', event); var pastedText = undefined;
// } // @ts-ignore
if (window.clipboardData && window.clipboardData.getData) { // IE
// @ts-ignore
pastedText = window.clipboardData.getData('Text');
} else if (event.clipboardData && event.clipboardData.getData) {
pastedText = event.clipboardData.getData('text/plain');
}
event.preventDefault();
console.log(pastedText); // Process and handle text...
}
function copyToClipboard() { function copyToClipboard() {
const rowIndexes = _.uniq(selectedCells.map(x => x[0])).sort(); const rowIndexes = _.uniq(selectedCells.map(x => x[0])).sort();
@ -698,18 +718,16 @@ export default function DataGridCore(props) {
const loadedAndInsertedRows = [...loadedRows, ...insertedRows]; const loadedAndInsertedRows = [...loadedRows, ...insertedRows];
// console.log('focusFieldRef.current', focusFieldRef.current);
return ( return (
<GridContainer ref={containerRef}> <GridContainer ref={containerRef}>
<FocusField type="text" ref={focusFieldRef} onKeyDown={handleGridKeyDown} onCopy={handleCopy} onPaste={handlePaste} />
<Table <Table
onMouseDown={handleGridMouseDown} onMouseDown={handleGridMouseDown}
onMouseMove={handleGridMouseMove} onMouseMove={handleGridMouseMove}
onMouseUp={handleGridMouseUp} onMouseUp={handleGridMouseUp}
onKeyDown={handleGridKeyDown}
onWheel={handleGridWheel} onWheel={handleGridWheel}
onCopy={handleCopy}
// onPasteCapture={handlePaste}
// table can be focused
tabIndex={-1}
ref={tableRef} ref={tableRef}
> >
<TableHead> <TableHead>