-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
table-cell.tsx
84 lines (70 loc) · 2.81 KB
/
table-cell.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import "./table-cell.scss";
import type { TableSortBy, TableSortParams } from "./table";
import React, { ReactNode } from "react";
import { autobind, cssNames, displayBooleans } from "../../utils";
import { Icon } from "../icon";
import { Checkbox } from "../checkbox";
export type TableCellElem = React.ReactElement<TableCellProps>;
export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
id?: string; // used for configuration visibility of columns
className?: string;
title?: ReactNode;
checkbox?: boolean; // render cell with a checkbox
isChecked?: boolean; // mark checkbox as checked or not
renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
sortBy?: TableSortBy; // column name, must be same as key in sortable object <Table sortable={}/>
showWithColumn?: string // id of the column which follow same visibility rules
_sorting?: Partial<TableSortParams>; // <Table> sorting state, don't use this prop outside (!)
_sort?(sortBy: TableSortBy): void; // <Table> sort function, don't use this prop outside (!)
_nowrap?: boolean; // indicator, might come from parent <TableHead>, don't use this prop outside (!)
}
export class TableCell extends React.Component<TableCellProps> {
@autobind()
onClick(evt: React.MouseEvent<HTMLDivElement>) {
if (this.props.onClick) {
this.props.onClick(evt);
}
if (this.isSortable) {
this.props._sort(this.props.sortBy);
}
}
get isSortable() {
const { _sorting, sortBy } = this.props;
return _sorting && sortBy !== undefined;
}
renderSortIcon() {
const { sortBy, _sorting } = this.props;
if (!this.isSortable) return;
const sortActive = _sorting.sortBy === sortBy;
const sortIconName = (!sortActive || _sorting.orderBy === "desc") ? "arrow_drop_down" : "arrow_drop_up";
return (
<Icon
className={cssNames("sortIcon", { enabled: sortActive })}
material={sortIconName}
/>
);
}
renderCheckbox() {
const { checkbox, isChecked } = this.props;
const showCheckbox = isChecked !== undefined;
if (checkbox && showCheckbox) {
return <Checkbox value={isChecked} />;
}
}
render() {
const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props;
const classNames = cssNames("TableCell", className, {
checkbox,
nowrap: _nowrap,
sorting: this.isSortable,
});
const content = displayBooleans(displayBoolean, title || children);
return (
<div {...cellProps} className={classNames} onClick={this.onClick}>
{this.renderCheckbox()}
{_nowrap ? <div className="content">{content}</div> : content}
{this.renderSortIcon()}
</div>
);
}
}