hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Make resizing fully-functional

Browse Source 
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
This commit is contained in:
Alex Culliere 2021-02-12 17:21:26 +02:00
parent 42f68b5db3
commit 6ee416b381
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/components/table/table-cell.tsx
View File

@ -27,15 +27,26 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
} }
type ResizeHandlerState = { type ResizeHandlerState = {
mousePosX: number, mousePosX?: number,
currentColumn?: HTMLDivElement;
nextColumn?: HTMLDivElement;
}; };
export class TableCell extends React.Component<TableCellProps> { /**
* Ergonomic rate for throttling mouse events
* when resizing, in miliseconds.
* Represents optimal balance between user-facing latency
* and rendering performance
*/
const ERGONOMIC_THROTTLE_RATE = 10;
export class TableCell extends React.Component<TableCellProps, ResizeHandlerState> {
private resizeHandlerState?: ResizeHandlerState; private resizeHandlerState?: ResizeHandlerState;
private cellContainer: React.RefObject<HTMLDivElement> = React.createRef(); private cellContainer: React.RefObject<HTMLDivElement> = React.createRef();
constructor(props: TableCellProps) {
super(props);
this.state = {};
}
@autobind() @autobind()
onClick(evt: React.MouseEvent<HTMLDivElement>) { onClick(evt: React.MouseEvent<HTMLDivElement>) {
if (this.props.onClick) { if (this.props.onClick) {
@ -91,7 +102,7 @@ export class TableCell extends React.Component<TableCellProps> {
document.removeEventListener("mouseup", this.mouseUpHandler.bind(this)); document.removeEventListener("mouseup", this.mouseUpHandler.bind(this));
} }
mouseMoveHandler(event: MouseEvent) { mouseMoveHandler = throttle((event: MouseEvent) => {
if (!this.resizeHandlerState) { if (!this.resizeHandlerState) {
return; return;
} }
@ -100,7 +111,8 @@ export class TableCell extends React.Component<TableCellProps> {
const currentWidth = this.cellContainer.current.offsetWidth; const currentWidth = this.cellContainer.current.offsetWidth;
this.props?._onResize(currentWidth + diffPosX); this.props?._onResize(currentWidth + diffPosX);
} this.resizeHandlerState.mousePosX = event.pageX;
}, ERGONOMIC_THROTTLE_RATE);
mouseUpHandler() { mouseUpHandler() {
this.removeMouseEventListeners(); this.removeMouseEventListeners();
@ -116,14 +128,14 @@ export class TableCell extends React.Component<TableCellProps> {
}); });
const content = displayBooleans(displayBoolean, title || children); const content = displayBooleans(displayBoolean, title || children);
const cellStyle: React.CSSProperties = size !== undefined ? const cellStyle: React.CSSProperties = size !== undefined ?
{ flexBasis: `${size}px` } : { minWidth: `${size}px` } :
{}; {};
const resizeHandlers: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> = { const resizeHandlers: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> = {
onMouseDown: event => { onMouseDown: event => {
this.addMouseEventListeners();
this.resizeHandlerState = { this.resizeHandlerState = {
mousePosX: event.pageX mousePosX: event.pageX
}; };
this.addMouseEventListeners();
} }
}; };