lucid-ui
Version:
A UI component library from AppNexus.
182 lines • 9.36 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 });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var lodash_1 = __importDefault(require("lodash"));
var index_1 = require("../../../index");
exports.default = 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(index_1.SuccessIcon, null),
},
{
id: '02',
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: react_1.default.createElement(index_1.SuccessIcon, 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(index_1.SuccessIcon, null),
},
{
id: '04',
first_name: 'Aristotle',
last_name: '--',
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: react_1.default.createElement(index_1.SuccessIcon, null),
},
{
id: '05',
first_name: 'Galileo',
last_name: 'Galilei',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: react_1.default.createElement(index_1.SuccessIcon, null),
},
{
id: '06',
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: react_1.default.createElement(index_1.SuccessIcon, 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(index_1.SuccessIcon, null),
},
{
id: '08',
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: react_1.default.createElement(index_1.SuccessIcon, null),
},
{
id: '09',
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: react_1.default.createElement(index_1.SuccessIcon, null),
},
{
id: '10',
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: react_1.default.createElement(index_1.SuccessIcon, null),
},
],
};
},
handleSelect: function (_item, selectedIndex) {
var data = this.state.data;
this.setState({
data: lodash_1.default.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 = lodash_1.default.every(data, 'isSelected');
this.setState({
data: lodash_1.default.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 = lodash_1.default.sortBy(data, field);
this.setState({
currentlySortedField: field,
currentlySortedFieldDirection: nextCurrentlySortedFieldDirection,
data: nextCurrentlySortedFieldDirection === 'down'
? nextData
: lodash_1.default.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(index_1.DataTable, { data: lodash_1.default.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(index_1.DataTable.Column, { field: 'id', width: 41, align: 'left', hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'id', sortDirection: currentlySortedFieldDirection }, "ID"),
react_1.default.createElement(index_1.DataTable.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(index_1.DataTable.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(index_1.DataTable.Column, { field: 'email', align: 'left', isSortable: true, isSorted: currentlySortedField === 'email', sortDirection: currentlySortedFieldDirection }, "E-Mail"),
react_1.default.createElement(index_1.DataTable.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'occupation', sortDirection: currentlySortedFieldDirection }, "Occupation"),
react_1.default.createElement(index_1.DataTable.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'salary', sortDirection: currentlySortedFieldDirection }, "Salary"),
react_1.default.createElement(index_1.DataTable.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"))));
},
});
//# sourceMappingURL=04.interactive-table.js.map