dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 00:56:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

horizontal scroll

Browse Source
This commit is contained in:
Jan Prochazka
2020-02-01 18:51:49 +01:00
parent 6f12b4fd14
commit 8291885d56
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/datagrid/DataGrid.js
View File

@@ -95,6 +95,10 @@ export default function DataGrid({ params }) {
setFirstVisibleRowScrollIndex(value); setFirstVisibleRowScrollIndex(value);
}; };
const handleColumnScroll = value => {
setFirstVisibleColumnScrollIndex(value);
};
function countColumnSizes() { function countColumnSizes() {
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
let context = canvas.getContext('2d'); let context = canvas.getContext('2d');
@@ -111,22 +115,23 @@ export default function DataGrid({ params }) {
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes()); // columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
columnSizes.setExtraordinaryIndexes([], []); columnSizes.setExtraordinaryIndexes([], []);
// for (let colIndex = 0; colIndex < columns.length; colIndex++) { for (let colIndex = 0; colIndex < columns.length; colIndex++) {
// //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8); //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
// let column = columns[colIndex]; let column = columns[colIndex];
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica"; // if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
// else context.font = "14px Helvetica"; // else context.font = "14px Helvetica";
context.font = "bold 14px Helvetica";
// let text = column.headerText; let text = column.name;
// let headerWidth = context.measureText(text).width + 32; let headerWidth = context.measureText(text).width + 32;
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16; // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16; // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16; // if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
// this.columnSizes.putSizeOverride(colIndex, headerWidth); columnSizes.putSizeOverride(colIndex, headerWidth);
// } }
// let headerWidth = this.rowHeaderWidthDefault; // let headerWidth = this.rowHeaderWidthDefault;
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8; // if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
@@ -234,6 +239,7 @@ export default function DataGrid({ params }) {
minimum={0} minimum={0}
maximum={columns.length - 1} maximum={columns.length - 1}
viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()} viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()}
onScroll={handleColumnScroll}
/> />
<VerticalScrollBar <VerticalScrollBar
minimum={0} minimum={0}

10
web/src/datagrid/ScrollBars.js
View File

@@ -46,8 +46,16 @@ export function HorizontalScrollBar({
if (node) node.scrollLeft = Math.floor(position); if (node) node.scrollLeft = Math.floor(position);
}, [valueToSetDate]); }, [valueToSetDate]);
const handleScroll = () => {
const position = node.scrollLeft;
const ratio = position / (contentSize - width);
if (ratio < 0) return 0;
let res = ratio * (maximum - minimum + 1) + minimum;
onScroll(Math.floor(res + 0.3));
};
return ( return (
<StyledHorizontalScrollBar ref={ref}> <StyledHorizontalScrollBar ref={ref} onScroll={handleScroll}>
<StyledHorizontalScrollContent style={{ width: `${contentSize}px` }}>&nbsp;</StyledHorizontalScrollContent> <StyledHorizontalScrollContent style={{ width: `${contentSize}px` }}>&nbsp;</StyledHorizontalScrollContent>
</StyledHorizontalScrollBar> </StyledHorizontalScrollBar>
); );