lucid-ui
Version:
A UI component library from Xandr.
939 lines • 48 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TruncateContent = exports.ResizableFixedHeadersTable = exports.FixedHeaders = exports.MinRows = exports.LoadingWithAnchoredMessage = exports.Loading = exports.EmptyWithAnchoredMessage = exports.EmptyWithImage = exports.EmptyWithCustomTitleAndBody = exports.InteractiveTable = exports.Empty = exports.DisabledRows = exports.SelectableAndNavigableRows = exports.ColumnGroups = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var component_types_1 = require("../../util/component-types");
var SuccessIcon_1 = __importDefault(require("../Icon/SuccessIcon/SuccessIcon"));
var DataTable_1 = __importDefault(require("./DataTable"));
var TextField_1 = __importDefault(require("../TextField/TextField"));
var CheckboxLabeled_1 = __importDefault(require("../CheckboxLabeled/CheckboxLabeled"));
exports.default = {
title: 'Table/DataTable',
component: DataTable_1.default,
parameters: {
docs: {
description: {
component: DataTable_1.default.peek.description,
},
},
},
args: DataTable_1.default.defaultProps,
};
function addKeys(children) {
return (0, lodash_1.map)(children, function (child, index) { return (__assign(__assign({}, child), { key: index })); });
}
var Template = function (args) { return react_1.default.createElement(DataTable_1.default, __assign({}, args)); };
var defaultColumns = addKeys([
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', align: 'left', key: 1 }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100, key: 2 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, key: 3 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left', key: 4 }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100, key: 5 }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100, key: 6 }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100, key: 7 }, "Status"),
]);
var defaultData = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
];
exports.Basic = Template.bind({});
exports.Basic.args = {
children: defaultColumns,
data: defaultData,
};
exports.ColumnGroups = Template.bind({});
exports.ColumnGroups.args = {
density: 'extended',
children: addKeys([
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.ColumnGroup, { title: 'Name' },
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, key: 'first_name' }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isSortable: true, key: 'last_name' }, "Last")),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"),
]),
data: defaultData,
};
exports.SelectableAndNavigableRows = Template.bind({});
exports.SelectableAndNavigableRows.args = {
density: 'extended',
isSelectable: true,
isActionable: true,
children: addKeys([
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', align: 'left', hasBorderLeft: true }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100, hasBorderLeft: true, isSortable: true }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isSortable: true }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"),
]),
data: defaultData,
};
exports.DisabledRows = Template.bind({});
exports.DisabledRows.args = {
children: defaultColumns,
data: (0, lodash_1.map)(defaultData, function (row, index) { return (__assign(__assign({}, row), { isDisabled: !!(index % 2) })); }),
};
exports.Empty = Template.bind({});
exports.Empty.args = {
isFullWidth: true,
density: 'extended',
children: addKeys([
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation"),
]),
data: [],
};
/* Interactive Table */
var InteractiveTable = function (args) {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
activeIndex: 1,
currentlySortedField: 'id',
currentlySortedFieldDirection: 'down',
data: [
{
id: '01',
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
isSelected: true,
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '02',
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '03',
first_name: (react_1.default.createElement("div", null,
"Leon ",
react_1.default.createElement("div", { className: 'child' }, "The Silly"))),
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '04',
first_name: 'Aristotle',
last_name: '--',
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '05',
first_name: 'Galileo',
last_name: 'Galilei',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '06',
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '07',
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '08',
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '09',
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: '10',
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
],
};
},
handleSelect: function (_item, selectedIndex) {
var data = this.state.data;
this.setState({
data: (0, lodash_1.map)(data, function (row, rowIndex) {
if (rowIndex === selectedIndex) {
return __assign(__assign({}, row), { isSelected: !row.isSelected });
}
else {
return row;
}
}),
});
},
handleSelectAll: function () {
var data = this.state.data;
var allSelected = (0, lodash_1.every)(data, 'isSelected');
this.setState({
data: (0, lodash_1.map)(data, function (row) {
return __assign(__assign({}, row), { isSelected: !allSelected });
}),
});
},
handleRowClick: function (_item, rowIndex) {
this.setState({
activeIndex: rowIndex,
});
},
handleSort: function (field) {
var _a = this.state, currentlySortedField = _a.currentlySortedField, currentlySortedFieldDirection = _a.currentlySortedFieldDirection, data = _a.data;
var nextCurrentlySortedFieldDirection = currentlySortedField === field && currentlySortedFieldDirection === 'up'
? 'down'
: 'up';
var nextData = (0, lodash_1.sortBy)(data, field);
this.setState({
currentlySortedField: field,
currentlySortedFieldDirection: nextCurrentlySortedFieldDirection,
data: nextCurrentlySortedFieldDirection === 'down'
? nextData
: (0, lodash_1.reverse)(nextData),
activeIndex: null,
});
},
render: function () {
var _a = this.state, activeIndex = _a.activeIndex, data = _a.data, currentlySortedField = _a.currentlySortedField, currentlySortedFieldDirection = _a.currentlySortedFieldDirection;
return (react_1.default.createElement("div", null,
react_1.default.createElement("style", null, '.child { display: none; } .lucid-Table-Tr:hover .child { display: block; }'),
react_1.default.createElement(DataTable_1.default, __assign({}, args, { data: (0, lodash_1.map)(data, function (row, index) {
return index === activeIndex ? __assign(__assign({}, row), { isActive: true }) : row;
}), density: 'extended', isSelectable: true, isActionable: true, onRowClick: this.handleRowClick, onSelect: this.handleSelect, onSelectAll: this.handleSelectAll, onSort: this.handleSort }),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', width: 41, align: 'left', hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'id', sortDirection: currentlySortedFieldDirection }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { className: 'parent', field: 'first_name', width: 100, hasBorderLeft: true, hasBorderRight: true, isResizable: true, isSortable: true, isSorted: currentlySortedField === 'first_name', sortDirection: currentlySortedFieldDirection }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isResizable: true, isSortable: true, isSorted: currentlySortedField === 'last_name', sortDirection: currentlySortedFieldDirection }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left', isSortable: true, isSorted: currentlySortedField === 'email', sortDirection: currentlySortedFieldDirection }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'occupation', sortDirection: currentlySortedFieldDirection }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'salary', sortDirection: currentlySortedFieldDirection }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"))));
},
});
return react_1.default.createElement(Component, null);
};
exports.InteractiveTable = InteractiveTable;
/* Empty With Custom Title And Body */
var EmptyWithCustomTitleAndBody = function (args) {
var EmptyStateWrapper = DataTable_1.default.EmptyStateWrapper, _a = DataTable_1.default.EmptyStateWrapper, Title = _a.Title, Body = _a.Body;
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
data: [],
};
},
render: function () {
var data = this.state.data;
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { data: data, density: 'extended', isFullWidth: true, minRows: 15 }),
react_1.default.createElement(EmptyStateWrapper, null,
react_1.default.createElement(Title, null, "Something went wrong."),
react_1.default.createElement(Body, { style: { fontSize: '12px' } }, "Echo park poutine esse tempor squid do. Lo-fi ramps XOXO chicharrones laboris, portland fugiat locavore. Fap four dollar toast keytar, cronut kogi fingerstache distillery microdosing everyday carry austin DIY dreamcatcher. Distillery flexitarian meditation laboris roof party. Cred raclette gastropub tilde PBR&B. Shoreditch poke adipisicing, reprehenderit lumbersexual succulents mustache officia franzen vinyl nostrud af. Hashtag bitters organic, before they sold out butcher cronut sapiente.")),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return react_1.default.createElement(Component, null);
};
exports.EmptyWithCustomTitleAndBody = EmptyWithCustomTitleAndBody;
/* Empty With Image */
var EmptyWithImage = function (args) {
var EmptyStateWrapper = DataTable_1.default.EmptyStateWrapper, _a = DataTable_1.default.EmptyStateWrapper, Title = _a.Title, Body = _a.Body;
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
data: [],
};
},
render: function () {
var data = this.state.data;
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { data: data, density: 'extended', isFullWidth: true }),
react_1.default.createElement(EmptyStateWrapper, null,
react_1.default.createElement(Title, null, "No items found."),
react_1.default.createElement(Body, null,
react_1.default.createElement("img", { src: 'https://dummyimage.com/375x150/ff69/fff' }))),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', width: 41, align: 'center', hasBorderLeft: true, isSortable: true }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100, hasBorderLeft: true }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100, hasBorderLeft: true }, "Occupation")));
},
});
return react_1.default.createElement(Component, null);
};
exports.EmptyWithImage = EmptyWithImage;
/* Empty With Anchored Message */
var EmptyWithAnchoredMessage = function (args) {
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
activeIndex: 1,
data: [],
};
},
render: function () {
var _a = this.state, activeIndex = _a.activeIndex, data = _a.data;
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { data: (0, lodash_1.map)(data, function (row, index) {
return index === activeIndex ? __assign(__assign({}, row), { isActive: true }) : row;
}), density: 'extended', isFullWidth: true, anchorMessage: true, minRows: 15 }),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return react_1.default.createElement(Component, null);
};
exports.EmptyWithAnchoredMessage = EmptyWithAnchoredMessage;
/* Loading */
var Loading = function (args) {
var Component = (0, component_types_1.createClass)({
render: function () {
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { minRows: 50, anchorMessage: true, isFullWidth: true, isLoading: true, data: [] }),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return react_1.default.createElement(Component, null);
};
exports.Loading = Loading;
/* Loading With Anchored Message */
var LoadingWithAnchoredMessage = function (args) {
var Component = (0, component_types_1.createClass)({
render: function () {
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { minRows: 15, anchorMessage: true, isFullWidth: true, isLoading: true, data: [] }),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'center' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'right', width: 100 }, "Occupation")));
},
});
return react_1.default.createElement(Component, null);
};
exports.LoadingWithAnchoredMessage = LoadingWithAnchoredMessage;
/* Min Rows */
var MinRows = function (args) {
var data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
];
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
activeIndex: 1,
data: data,
};
},
render: function () {
var _a = this.state, activeIndex = _a.activeIndex, data = _a.data;
return (react_1.default.createElement(DataTable_1.default, __assign({}, args, { data: (0, lodash_1.map)(data, function (row, index) {
return index === activeIndex ? __assign(__assign({}, row), { isActive: true }) : row;
}), density: 'extended', isSelectable: true, isActionable: true, isFullWidth: true, minRows: 7 }),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id' }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100 }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100 }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
});
return react_1.default.createElement(Component, null);
};
exports.MinRows = MinRows;
/* Fixed Headers */
var FixedHeaders = function () {
var data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
isSelected: true,
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
isActive: true,
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
];
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
hasFixedHeader: true,
isSelectable: true,
hasLightHeader: false,
fixedColumnCount: 2,
fixedRowHeight: 50,
isActionable: false,
};
},
handleToggle: function (stateItem) {
var _a;
this.setState((_a = {}, _a[stateItem] = !this.state[stateItem], _a));
},
handleNumeric: function (stateItem, value) {
var _a;
this.setState((_a = {}, _a[stateItem] = value, _a));
},
renderDataTable: function (props) {
return (react_1.default.createElement(DataTable_1.default, __assign({ data: data }, props),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', align: 'left', width: 35 }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left', width: 900 }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100 }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100 }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
render: function () {
var _this = this;
return (react_1.default.createElement("div", null,
react_1.default.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
react_1.default.createElement(TextField_1.default, { style: { marginRight: 9, width: 45 }, onChangeDebounced: function (v) {
return _this.handleNumeric('fixedColumnCount', parseInt(v, 10));
}, placeholder: 'fixedColumnCount', value: this.state.fixedColumnCount }),
"fixedColumnCount"),
react_1.default.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
react_1.default.createElement(TextField_1.default, { style: { marginRight: 9, width: 45 }, onChangeDebounced: function (v) {
return _this.handleNumeric('fixedRowHeight', parseInt(v, 10));
}, placeholder: 'fixedRowHeight', value: this.state.fixedRowHeight }),
"fixedRowHeight"),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'hasFixedHeader', isSelected: this.state.hasFixedHeader, onSelect: function () { return _this.handleToggle('hasFixedHeader'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'isSelectable', isSelected: this.state.isSelectable, onSelect: function () { return _this.handleToggle('isSelectable'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'hasLightHeader', isSelected: this.state.hasLightHeader, onSelect: function () { return _this.handleToggle('hasLightHeader'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'isActionable', isSelected: this.state.isActionable, onSelect: function () { return _this.handleToggle('isActionable'); } }),
react_1.default.createElement("div", { style: { height: '200px' } }, this.renderDataTable(this.state))));
},
});
return react_1.default.createElement(Component, null);
};
exports.FixedHeaders = FixedHeaders;
/* Resizable Fixed Headers Table */
var ResizableFixedHeadersTable = function () {
var data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist',
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
isSelected: true,
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
isActive: true,
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
];
var Component = (0, component_types_1.createClass)({
getInitialState: function () {
return {
hasFixedHeader: true,
isSelectable: true,
hasLightHeader: false,
fixedColumnCount: 2,
fixedRowHeight: 50,
isActionable: false,
};
},
handleToggle: function (stateItem) {
this.setState(function (prevState) {
var _a;
return (_a = {},
_a[stateItem] = !prevState[stateItem],
_a);
});
},
handleNumeric: function (stateItem, value) {
var _a;
this.setState((_a = {}, _a[stateItem] = value, _a));
},
onChangeFixedColumnCount: function (prarm) {
this.handleNumeric('fixedColumnCount', parseInt(prarm, 10));
},
onChangeFixedRowHeight: function (prarm) {
this.handleNumeric('fixedRowHeight', parseInt(prarm, 10));
},
renderDataTable: function (props) {
return (react_1.default.createElement(DataTable_1.default, __assign({ data: data }, props),
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', align: 'left', width: 35, isResizable: true }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100, isResizable: true }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100, isResizable: true }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left', width: 900, isResizable: true }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100, isResizable: true }, "Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 100, isResizable: true }, "Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100, isResizable: true }, "Status")));
},
render: function () {
var _this = this;
return (react_1.default.createElement("div", null,
react_1.default.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
react_1.default.createElement(TextField_1.default, { style: { marginRight: 9, width: 45 }, onChange: function (v) { return _this.onChangeFixedColumnCount(v); }, placeholder: 'fixedColumnCount', value: this.state.fixedColumnCount }),
"fixedColumnCount"),
react_1.default.createElement("label", { style: { marginBottom: 6, display: 'block', fontSize: 12 } },
react_1.default.createElement(TextField_1.default, { style: { marginRight: 9, width: 45 }, onChange: function (v) { return _this.onChangeFixedRowHeight(v); }, placeholder: 'fixedRowHeight', value: this.state.fixedRowHeight }),
"fixedRowHeight"),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'hasFixedHeader', isSelected: this.state.hasFixedHeader, onSelect: function () { return _this.handleToggle('hasFixedHeader'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'isSelectable', isSelected: this.state.isSelectable, onSelect: function () { return _this.handleToggle('isSelectable'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'hasLightHeader', isSelected: this.state.hasLightHeader, onSelect: function () { return _this.handleToggle('hasLightHeader'); } }),
react_1.default.createElement(CheckboxLabeled_1.default, { Label: 'isActionable', isSelected: this.state.isActionable, onSelect: function () { return _this.handleToggle('isActionable'); } }),
react_1.default.createElement("div", { style: { height: '200px' } }, this.renderDataTable(this.state))));
},
});
return react_1.default.createElement(Component, null);
};
exports.ResizableFixedHeadersTable = ResizableFixedHeadersTable;
/* Truncate Content */
var TruncateContent = function () {
var data = [
{
id: 1,
first_name: 'Isaac',
last_name: 'Newton',
email: 'inewton@example.com',
occupation: 'Physicist mathematician',
salary: '$100.01',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 2,
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 3,
first_name: 'Leonardo',
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 4,
first_name: 'Aristotle',
last_name: null,
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 5,
first_name: 'Galileo',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 6,
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 7,
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 8,
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 9,
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
{
id: 10,
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(SuccessIcon_1.default, null),
},
];
var Component = (0, component_types_1.createClass)({
render: function () {
return (react_1.default.createElement(DataTable_1.default, { data: data, hasFixedHeader: true, truncateContent: true },
react_1.default.createElement(DataTable_1.default.Column, { field: 'id', align: 'left', width: 50 }, "ID"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'first_name', align: 'left', width: 100 }, "First"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'last_name', align: 'left', width: 100 }, "Last"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'email', align: 'left' }, "E-Mail"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'occupation', align: 'left', width: 100 }, "Long Occupation"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'salary', align: 'right', width: 90 }, "Large Salary"),
react_1.default.createElement(DataTable_1.default.Column, { field: 'status', align: 'center', width: 100 }, "Status")));
},
});
return react_1.default.createElement(Component, null);
};
exports.TruncateContent = TruncateContent;
//# sourceMappingURL=DataTable.stories.js.map