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

Isolate ergonomic constants to a separate module

Browse Source 
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
This commit is contained in:
Alex Culliere 2021-02-15 14:12:29 +02:00
parent 9e33399949
commit f06fb7892b
2 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/components/table/constants.ts Normal file
View File

@ -0,0 +1,7 @@
/**
* Ergonomic rate for throttling mouse events
* when resizing, in miliseconds.
* Represents optimal balance between user-facing latency
* and rendering performance
*/
export const ERGONOMIC_RESIZE_THROTTLE_RATE = 10;

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

@ -1,11 +1,12 @@
import "./table-cell.scss";
import type { TableSortBy, TableSortParams } from "./table";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { throttle } from "lodash"; import { throttle } from "lodash";
import { autobind, cssNames, displayBooleans } from "../../utils";
import "./table-cell.scss";
import type { TableSortBy, TableSortParams } from "./table";
import { autobind, cssNames, displayBooleans, prevDefault } from "../../utils";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { Checkbox } from "../checkbox"; import { Checkbox } from "../checkbox";
import { ERGONOMIC_RESIZE_THROTTLE_RATE } from "./constants";
export type TableCellElem = React.ReactElement<TableCellProps>; export type TableCellElem = React.ReactElement<TableCellProps>;
@ -30,23 +31,10 @@ type ResizeHandlerState = {
mousePosX?: number, mousePosX?: number,
}; };
/** 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) {
@ -112,7 +100,7 @@ export class TableCell extends React.Component<TableCellProps, ResizeHandlerStat
this.props?._onResize(currentWidth + diffPosX); this.props?._onResize(currentWidth + diffPosX);
this.resizeHandlerState.mousePosX = event.pageX; this.resizeHandlerState.mousePosX = event.pageX;
}, ERGONOMIC_THROTTLE_RATE); }, ERGONOMIC_RESIZE_THROTTLE_RATE);
mouseUpHandler() { mouseUpHandler() {
this.removeMouseEventListeners(); this.removeMouseEventListeners();
@ -136,7 +124,9 @@ export class TableCell extends React.Component<TableCellProps, ResizeHandlerStat
mousePosX: event.pageX mousePosX: event.pageX
}; };
this.addMouseEventListeners(); this.addMouseEventListeners();
} },
// prevent click events from triggering
onClick: prevDefault(() => {})
}; };
return ( return (