@cimpress/react-components
Version:
React components to support the MCP styleguide
124 lines • 6.02 kB
JavaScript
/* 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 */
import React, { Component } from 'react';
import { v4 as uuid } from 'uuid';
import { Table, Checkbox, RadioGroup, Radio } from '@cimpress/react-components';
const labels = ['Interscope', 'Universal'];
const columns = [
{ Header: 'Title', accessor: 'title', sortable: true },
{
Header: 'Released',
accessor: 'released',
sortable: true,
Cell: row => React.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.createElement("select", { onChange: e => onChange(e.target.value), style: { width: '100%' }, value: filter ? filter.value : 'all' },
React.createElement("option", { value: "all" }, "Show All"),
labels.map(value => (React.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: uuid(),
}));
export default class TableDemo extends 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.createElement("div", null,
React.createElement(Checkbox, { label: "isCondensed", checked: this.state.condensed, onChange: () => this.toggle('condensed') }),
React.createElement(Checkbox, { label: "hasHover", checked: this.state.hover, onChange: () => this.toggle('hover') }),
React.createElement(Checkbox, { label: "isBordered", checked: this.state.bordered, onChange: () => this.toggle('bordered') }),
React.createElement(Checkbox, { label: "noData", checked: this.state.noData, onChange: () => this.toggle('noData') }),
React.createElement(RadioGroup, { valueSelected: this.state.pageSize, inline: true, name: "pagesize", onChange: (e, v) => this.setState({ pageSize: v }) },
React.createElement(Radio, { value: null, label: "No pagination" }),
React.createElement(Radio, { value: 10, label: "10 items" }),
React.createElement(Radio, { value: 20, label: "20 items" })),
React.createElement(RadioGroup, { valueSelected: "bottomRight", inline: true, name: "pos", onChange: (e, v) => this.setState({ paginationPosition: v }) },
React.createElement(Radio, { value: "topRight", label: "Top Right" }),
React.createElement(Radio, { value: "bottomRight", label: "Bottom Right" })),
React.createElement("div", null,
React.createElement(Checkbox, { label: "use custom noDataText", checked: this.state.useCustomNoDataText, onChange: () => this.toggle('useCustomNoDataText') }),
React.createElement("input", { type: "text", className: "form-control", id: "noDataText", value: this.state.noDataText, disabled: !this.state.useCustomNoDataText, onChange: this.onChangeNoDataText })),
React.createElement("br", null),
React.createElement(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 })));
}
}
//# sourceMappingURL=table.js.map