@cimpress/react-components
Version:
React components to support the MCP styleguide
150 lines • 7.6 kB
JavaScript
"use strict";
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/no-static-element-interactions */
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const uuid_1 = require("uuid");
const react_components_1 = require("@cimpress/react-components");
const labels = ['Interscope', 'Universal'];
const columns = [
{ Header: 'Title', accessor: 'title', sortable: true },
{
Header: 'Released',
accessor: 'released',
sortable: true,
Cell: row => react_1.default.createElement("div", { onClick: () => alert('custom click') },
row.original.released,
" [custom onClick]"),
},
{
Header: 'Label',
accessor: 'label',
filterMethod: (filter, row) => {
if (filter.value === 'all') {
return true;
}
return row[filter.id] === filter.value;
},
/* eslint-disable react/prop-types */
Filter: ({ filter, onChange }) => (react_1.default.createElement("select", { onChange: e => onChange(e.target.value), style: { width: '100%' }, value: filter ? filter.value : 'all' },
react_1.default.createElement("option", { value: "all" }, "Show All"),
labels.map(value => (react_1.default.createElement("option", { value: value, key: value }, value))))),
/* eslint-enable react/prop-types */
},
{
Header: 'Chart Position',
accessor: 'chart',
className: 'hidden-sm',
headerClassName: 'hidden-sm',
},
];
const fakeData = Array(1000)
.fill(0)
.map((_, i, arr) => ({
title: `Album #${i + 1}`,
released: `July 8, ${1997 + i}`,
label: labels[i % labels.length],
chart: arr.length - i,
id: (0, uuid_1.v4)(),
}));
class TableDemo extends react_1.Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
condensed: false,
bordered: true,
hover: true,
loading: false,
noData: false,
useCustomLoadingText: false,
loadingText: 'Gathering some data for ya...',
useCustomNoDataText: false,
noDataText: 'Really nothing here...',
sortKey: {
key: 'title',
desc: false,
},
pageSize: null,
paginationPosition: 'bottomRight',
}
});
Object.defineProperty(this, "toggle", {
enumerable: true,
configurable: true,
writable: true,
value: state => {
this.setState(prevState => ({ [state]: !prevState[state] }));
}
});
Object.defineProperty(this, "onChangeLoadingText", {
enumerable: true,
configurable: true,
writable: true,
value: r => {
this.setState({ loadingText: r.target.value });
}
});
Object.defineProperty(this, "onChangeNoDataText", {
enumerable: true,
configurable: true,
writable: true,
value: r => {
this.setState({ noDataText: r.target.value });
}
});
}
render() {
const { condensed, sortKey, bordered, hover, useCustomNoDataText, noData, noDataText } = this.state;
const sortedData = fakeData.slice();
sortedData.sort((a, b) => (sortKey.desc ? -1 : 1) * a[sortKey.key].localeCompare(b[sortKey.key]));
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_components_1.Checkbox, { label: "isCondensed", checked: this.state.condensed, onChange: () => this.toggle('condensed') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "hasHover", checked: this.state.hover, onChange: () => this.toggle('hover') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "isBordered", checked: this.state.bordered, onChange: () => this.toggle('bordered') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "noData", checked: this.state.noData, onChange: () => this.toggle('noData') }),
react_1.default.createElement(react_components_1.RadioGroup, { valueSelected: this.state.pageSize, inline: true, name: "pagesize", onChange: (e, v) => this.setState({ pageSize: v }) },
react_1.default.createElement(react_components_1.Radio, { value: null, label: "No pagination" }),
react_1.default.createElement(react_components_1.Radio, { value: 10, label: "10 items" }),
react_1.default.createElement(react_components_1.Radio, { value: 20, label: "20 items" })),
react_1.default.createElement(react_components_1.RadioGroup, { valueSelected: "bottomRight", inline: true, name: "pos", onChange: (e, v) => this.setState({ paginationPosition: v }) },
react_1.default.createElement(react_components_1.Radio, { value: "topRight", label: "Top Right" }),
react_1.default.createElement(react_components_1.Radio, { value: "bottomRight", label: "Bottom Right" })),
react_1.default.createElement("div", null,
react_1.default.createElement(react_components_1.Checkbox, { label: "use custom noDataText", checked: this.state.useCustomNoDataText, onChange: () => this.toggle('useCustomNoDataText') }),
react_1.default.createElement("input", { type: "text", className: "form-control", id: "noDataText", value: this.state.noDataText, disabled: !this.state.useCustomNoDataText, onChange: this.onChangeNoDataText })),
react_1.default.createElement("br", null),
react_1.default.createElement(react_components_1.Table, { columns: columns, data: noData ? [] : sortedData, isCondensed: condensed, isBordered: bordered, hasHover: hover, sortedBy: sortKey, onSortingRequested: newSortKey => {
this.setState({ sortKey: newSortKey });
}, noDataText: useCustomNoDataText && noDataText, pageSize: this.state.pageSize, paginationPosition: this.state.paginationPosition })));
}
}
exports.default = TableDemo;
//# sourceMappingURL=table.js.map