mirror of
https://github.com/dbgate/dbgate
synced 2024-11-07 20:26:23 +00:00
horizontal scroll
This commit is contained in:
parent
6f12b4fd14
commit
8291885d56
@ -95,6 +95,10 @@ export default function DataGrid({ params }) {
|
||||
setFirstVisibleRowScrollIndex(value);
|
||||
};
|
||||
|
||||
const handleColumnScroll = value => {
|
||||
setFirstVisibleColumnScrollIndex(value);
|
||||
};
|
||||
|
||||
function countColumnSizes() {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
@ -111,22 +115,23 @@ export default function DataGrid({ params }) {
|
||||
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
|
||||
columnSizes.setExtraordinaryIndexes([], []);
|
||||
|
||||
// for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
// //this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
// let column = columns[colIndex];
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
//this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
let column = columns[colIndex];
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
context.font = "bold 14px Helvetica";
|
||||
|
||||
// let text = column.headerText;
|
||||
// let headerWidth = context.measureText(text).width + 32;
|
||||
let text = column.name;
|
||||
let headerWidth = context.measureText(text).width + 32;
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
|
||||
// this.columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
// }
|
||||
columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
}
|
||||
|
||||
// let headerWidth = this.rowHeaderWidthDefault;
|
||||
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
|
||||
@ -234,6 +239,7 @@ export default function DataGrid({ params }) {
|
||||
minimum={0}
|
||||
maximum={columns.length - 1}
|
||||
viewportRatio={gridScrollAreaWidth / columnSizes.getVisibleScrollSizeSum()}
|
||||
onScroll={handleColumnScroll}
|
||||
/>
|
||||
<VerticalScrollBar
|
||||
minimum={0}
|
||||
|
@ -46,8 +46,16 @@ export function HorizontalScrollBar({
|
||||
if (node) node.scrollLeft = Math.floor(position);
|
||||
}, [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 (
|
||||
<StyledHorizontalScrollBar ref={ref}>
|
||||
<StyledHorizontalScrollBar ref={ref} onScroll={handleScroll}>
|
||||
<StyledHorizontalScrollContent style={{ width: `${contentSize}px` }}> </StyledHorizontalScrollContent>
|
||||
</StyledHorizontalScrollBar>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user