@cimpress/react-components
Version:
React components to support the MCP styleguide
261 lines (259 loc) • 11.7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactTablev6 = void 0;
const react_1 = __importStar(require("react"));
const css_1 = require("@emotion/css");
const react_table_1 = __importDefault(require("react-table"));
const selectTable_1 = __importDefault(require("react-table/lib/hoc/selectTable"));
const TableHeader_1 = __importDefault(require("./TableHeader"));
const TablePagination_1 = __importDefault(require("./TablePagination"));
const TableSelect_1 = require("./TableSelect");
const TableSpinner_1 = require("./TableSpinner");
const TableNoData_1 = __importDefault(require("./TableNoData"));
const cvar_1 = __importDefault(require("../theme/cvar"));
const FeatureFlags_1 = require("../FeatureFlags");
const CheckboxReactTable = (0, selectTable_1.default)(react_table_1.default);
const defaultPageSizes = [10, 20, 50, 100];
class ReactTablev6 extends react_1.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: (0, react_1.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: (0, css_1.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_1.default,
// Defaults for pagination
defaultPageSize: 10, pageSizeOptions: defaultPageSizes, LoadingComponent: TableSpinner_1.TableSpinner, NoDataComponent: TableNoData_1.default, PaginationComponent: TablePagination_1.default,
// Selection state and callbacks
selectWidth: 73, SelectAllInputComponent: TableSelect_1.TableSelectAll, SelectInputComponent: TableSelect_1.TableSelect, style: { position: 'relative' } }, this.props);
const reactTable = (0, css_1.css) `
.rt-table {
border: 1px solid ${(0, cvar_1.default)('color-border-light')};
background-color: ${(0, cvar_1.default)('color-background')};
font: ${condensed ? (0, cvar_1.default)('text-xsmall') : 'inherit'};
& + .pagination-bottom {
margin-top: ${(0, cvar_1.default)('spacing-24')};
margin-bottom: ${this.context.v17_noOuterSpacing ? 0 : (0, cvar_1.default)('spacing-16')};
}
.rt-thead {
background-color: ${(0, cvar_1.default)('color-border-light')};
color: ${(0, cvar_1.default)('color-text-label')};
font-weight: ${condensed ? '600' : '400'};
}
.rt-thead.-header .rt-tr > * {
padding: ${condensed
? `${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-4')}}`
: `${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-8')}`};
}
.rt-thead.-filters .rt-tr > * {
padding: ${condensed
? `${(0, cvar_1.default)('spacing-4')} ${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-8')}}`
: `${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('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: ${(0, cvar_1.default)('color-text-table-header')};
}
.rt-resizer {
cursor: col-resize;
height: ${this.props.filterable ? '200%' : '100%'};
width: ${condensed ? (0, cvar_1.default)('spacing-8') : (0, cvar_1.default)('spacing-16')};
position: absolute;
right: ${condensed ? '-4px' : '-8px'};
top: 0;
z-index: 1;
}
}
.rt-tr {
display: flex;
border-top: 1px solid ${(0, cvar_1.default)('color-border-light')};
.rt-td {
padding: ${condensed ? (0, cvar_1.default)('spacing-8') : (0, cvar_1.default)('spacing-16')};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: ${(0, cvar_1.default)('color-text-table-header')};
}
}
}
`;
return (react_1.default.createElement("div", { ref: this.containerRef }, selectable ? (react_1.default.createElement(CheckboxReactTable, Object.assign({}, props, { className: reactTable, selectAll: this.state.selectAll, toggleSelection: this.toggleSelection, toggleAll: this.toggleAll, isSelected: this.isSelected }))) : (react_1.default.createElement(react_table_1.default, Object.assign({}, props, { className: reactTable })))));
}
}
exports.ReactTablev6 = ReactTablev6;
Object.defineProperty(ReactTablev6, "contextType", {
enumerable: true,
configurable: true,
writable: true,
value: FeatureFlags_1.FeatureFlagsContext
});
//# sourceMappingURL=ReactTablev6.js.map