@cimpress/react-components
Version:
React components to support the MCP styleguide
124 lines • 6.46 kB
JavaScript
"use strict";
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 react_components_1 = require("@cimpress/react-components");
const labels = ['Interscope', 'Universal'];
const columns = [
{ Header: 'Title', accessor: 'title' },
{ Header: 'Released', accessor: 'released' },
{
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,
}));
class TableDemo extends react_1.Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
condensed: false,
selectable: false,
filterable: true,
loading: false,
noData: false,
useCustomLoadingText: false,
loadingText: 'Gathering some data for ya...',
useCustomNoDataText: false,
noDataText: 'Really nothing here...',
}
});
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, selectable, filterable, loading, useCustomLoadingText, loadingText, useCustomNoDataText, noData, noDataText, } = this.state;
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_components_1.Checkbox, { label: "condensed", checked: this.state.condensed, onChange: () => this.toggle('condensed') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "selectable", checked: this.state.selectable, onChange: () => this.toggle('selectable') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "filterable", checked: this.state.filterable, onChange: () => this.toggle('filterable') }),
react_1.default.createElement(react_components_1.Checkbox, { label: "loading", checked: this.state.loading, onChange: () => this.toggle('loading') }),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement(react_components_1.Checkbox, { label: "use custom loadingText", checked: this.state.useCustomLoadingText, onChange: () => this.toggle('useCustomLoadingText') }),
react_1.default.createElement(react_components_1.TextField, { type: "text", className: "form-control", id: "loadingText", value: this.state.loadingText, disabled: !this.state.useCustomLoadingText, onChange: this.onChangeLoadingText })),
react_1.default.createElement(react_components_1.Checkbox, { label: "noData", checked: this.state.noData, onChange: () => this.toggle('noData') }),
react_1.default.createElement("div", { className: "form-group" },
react_1.default.createElement(react_components_1.Checkbox, { label: "use custom noDataText", checked: this.state.useCustomNoDataText, onChange: () => this.toggle('useCustomNoDataText') }),
react_1.default.createElement(react_components_1.TextField, { type: "text", className: "form-control", id: "noDataText", value: this.state.noDataText, disabled: !this.state.useCustomNoDataText, onChange: this.onChangeNoDataText })),
react_1.default.createElement(react_components_1.ReactTablev6, { columns: columns, data: noData ? [] : fakeData, condensed: condensed, selectable: selectable, filterable: filterable, loading: loading, loadingText: useCustomLoadingText && loadingText, noDataText: useCustomNoDataText && noDataText, keyField: "title" })));
}
}
exports.default = TableDemo;
//# sourceMappingURL=table.js.map