@cimpress/react-components
Version:
React components to support the MCP styleguide
231 lines (229 loc) • 9.73 kB
JavaScript
import React, { PureComponent, createRef } from 'react';
import { css, cx } from '@emotion/css';
import ReactTable from 'react-table';
import selectTable from 'react-table/lib/hoc/selectTable';
import TableHeader from './TableHeader';
import TablePagination from './TablePagination';
import { TableSelect, TableSelectAll } from './TableSelect';
import { TableSpinner } from './TableSpinner';
import TableNoData from './TableNoData';
import cvar from '../theme/cvar';
import { FeatureFlagsContext } from '../FeatureFlags';
const CheckboxReactTable = selectTable(ReactTable);
const defaultPageSizes = [10, 20, 50, 100];
export class ReactTablev6 extends PureComponent {
constructor() {
super(...arguments);
Object.defineProperty(this, "tableRef", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "containerRef", {
enumerable: true,
configurable: true,
writable: true,
value: createRef()
});
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
resolvedData: this.props.data, // eslint-disable-line react/no-unused-state
entireHeaderHeight: 0,
selectAll: false,
selection: [],
}
});
// get the height of the header to use as the offset to the LoadingComponent and NoDataComponent
Object.defineProperty(this, "setMeasurements", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
var _a, _b;
const rt = ((_b = (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('ReactTable')) || [];
const headers = Array.from(rt[0].getElementsByClassName('rt-thead'));
this.setState({ entireHeaderHeight: headers.reduce((agg, h) => agg + h.offsetHeight, 0) });
}
});
Object.defineProperty(this, "getVisibleData", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
if (!this.tableRef) {
return this.props.data || [];
}
const resolvedState = this.tableRef.getWrappedInstance().getResolvedState();
const pageStart = resolvedState.page * resolvedState.pageSize;
const pageEnd = (resolvedState.page + 1) * resolvedState.pageSize;
return resolvedState.resolvedData.slice(pageStart, pageEnd);
}
});
Object.defineProperty(this, "getPaginationProps", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
const { condensed, perPageLabelText, goToLabelText } = this.props;
return { condensed, perPageLabelText, goToLabelText };
}
});
Object.defineProperty(this, "getTableRef", {
enumerable: true,
configurable: true,
writable: true,
value: (tableRef) => {
this.tableRef = tableRef;
}
});
Object.defineProperty(this, "getTheadThProps", {
enumerable: true,
configurable: true,
writable: true,
value: (state, _row, column) => {
const sortable = [column.sortable, state.sortable, false].find(x => x != null);
const sorted = state.sorted.find((x) => x.id === column.id);
return { sortable, sorted };
}
});
Object.defineProperty(this, "getSharedProps", {
enumerable: true,
configurable: true,
writable: true,
value: ({ loading, condensed, filterable, }) => ({
loading,
entireHeaderHeight: this.state.entireHeaderHeight,
condensed,
filterable,
})
});
Object.defineProperty(this, "toggleSelection", {
enumerable: true,
configurable: true,
writable: true,
value: (key) => {
const selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
if (keyIndex >= 0)
selection.splice(keyIndex, 1);
else
selection.push(key);
this.setState(() => ({ selection }));
}
});
Object.defineProperty(this, "toggleAll", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
const { keyField } = this.props;
const selectAll = !this.state.selectAll;
const selection = [];
if (selectAll) {
const currentRecords = this.tableRef.getWrappedInstance().getResolvedState().sortedData;
currentRecords.forEach(item => {
selection.push(`select-${item[keyField || '_id']}`);
});
}
this.setState(() => ({ selectAll, selection }));
}
});
Object.defineProperty(this, "isSelected", {
enumerable: true,
configurable: true,
writable: true,
value: (key) => this.state.selection.includes(`select-${key}`)
});
}
componentDidMount() {
this.setMeasurements();
}
componentDidUpdate(prevProps) {
if (prevProps.condensed !== this.props.condensed || prevProps.filterable !== this.props.filterable) {
this.setMeasurements();
}
}
render() {
const { className, condensed, selectable } = this.props;
const props = Object.assign({ ref: this.getTableRef, className: cx('crc-react-table-v6', className, { 'table-condensed': condensed }),
// Callbacks for providing custom props to individual components
getPaginationProps: this.getPaginationProps, getTheadThProps: this.getTheadThProps, getNoDataProps: this.getSharedProps, getLoadingProps: this.getSharedProps, ThComponent: TableHeader,
// Defaults for pagination
defaultPageSize: 10, pageSizeOptions: defaultPageSizes, LoadingComponent: TableSpinner, NoDataComponent: TableNoData, PaginationComponent: TablePagination,
// Selection state and callbacks
selectWidth: 73, SelectAllInputComponent: TableSelectAll, SelectInputComponent: TableSelect, style: { position: 'relative' } }, this.props);
const reactTable = css `
.rt-table {
border: 1px solid ${cvar('color-border-light')};
background-color: ${cvar('color-background')};
font: ${condensed ? cvar('text-xsmall') : 'inherit'};
& + .pagination-bottom {
margin-top: ${cvar('spacing-24')};
margin-bottom: ${this.context.v17_noOuterSpacing ? 0 : cvar('spacing-16')};
}
.rt-thead {
background-color: ${cvar('color-border-light')};
color: ${cvar('color-text-label')};
font-weight: ${condensed ? '600' : '400'};
}
.rt-thead.-header .rt-tr > * {
padding: ${condensed
? `${cvar('spacing-8')} ${cvar('spacing-8')} ${cvar('spacing-4')}}`
: `${cvar('spacing-16')} ${cvar('spacing-16')} ${cvar('spacing-8')}`};
}
.rt-thead.-filters .rt-tr > * {
padding: ${condensed
? `${cvar('spacing-4')} ${cvar('spacing-8')} ${cvar('spacing-8')}}`
: `${cvar('spacing-8')} ${cvar('spacing-16')} ${cvar('spacing-16')}`};
}
.rt-resizable-header {
position: relative;
&:last-child > .rt-resizer {
display: none;
}
.rt-resizable-header-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
font-weight: 600;
line-height: 12px;
color: ${cvar('color-text-table-header')};
}
.rt-resizer {
cursor: col-resize;
height: ${this.props.filterable ? '200%' : '100%'};
width: ${condensed ? cvar('spacing-8') : cvar('spacing-16')};
position: absolute;
right: ${condensed ? '-4px' : '-8px'};
top: 0;
z-index: 1;
}
}
.rt-tr {
display: flex;
border-top: 1px solid ${cvar('color-border-light')};
.rt-td {
padding: ${condensed ? cvar('spacing-8') : cvar('spacing-16')};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: ${cvar('color-text-table-header')};
}
}
}
`;
return (React.createElement("div", { ref: this.containerRef }, selectable ? (React.createElement(CheckboxReactTable, Object.assign({}, props, { className: reactTable, selectAll: this.state.selectAll, toggleSelection: this.toggleSelection, toggleAll: this.toggleAll, isSelected: this.isSelected }))) : (React.createElement(ReactTable, Object.assign({}, props, { className: reactTable })))));
}
}
Object.defineProperty(ReactTablev6, "contextType", {
enumerable: true,
configurable: true,
writable: true,
value: FeatureFlagsContext
});
//# sourceMappingURL=ReactTablev6.js.map