lucid-ui
Version:
A UI component library from AppNexus.
170 lines (169 loc) • 7.96 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import _ from 'lodash';
import { DataTable, SuccessIcon } from '../../../index';
export default createClass({
getInitialState() {
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.createElement(SuccessIcon, null),
},
{
id: '02',
first_name: 'Albert',
last_name: 'Einstein',
email: 'aeinstein@example.com',
occupation: 'Physicist',
salary: '$100.02',
status: React.createElement(SuccessIcon, null),
},
{
id: '03',
first_name: (React.createElement("div", null,
"Leon ",
React.createElement("div", { className: 'child' }, "The Silly"))),
last_name: 'da Vinci',
email: 'ldvinci@example.com',
occupation: 'Engineer',
salary: '$100.03',
status: React.createElement(SuccessIcon, null),
},
{
id: '04',
first_name: 'Aristotle',
last_name: '--',
email: 'aristotle@example.com',
occupation: 'Tutor',
salary: '$100.04',
status: React.createElement(SuccessIcon, null),
},
{
id: '05',
first_name: 'Galileo',
last_name: 'Galilei',
email: 'ggalilei@example.com',
occupation: 'Physicist',
salary: '$100.05',
status: React.createElement(SuccessIcon, null),
},
{
id: '06',
first_name: 'Charles',
last_name: 'Darwin',
email: 'cdarwin@example.com',
occupation: 'Biologist',
salary: '$100.06',
status: React.createElement(SuccessIcon, null),
},
{
id: '07',
first_name: 'Alexander',
last_name: 'Macedon',
email: 'amacedon@example.com',
occupation: 'Head of State',
salary: '$100.07',
status: React.createElement(SuccessIcon, null),
},
{
id: '08',
first_name: 'Plato',
last_name: 'Plato',
email: 'plato@example.com',
occupation: 'Philosopher',
salary: '$100.08',
status: React.createElement(SuccessIcon, null),
},
{
id: '09',
first_name: 'Mahatma',
last_name: 'Gandhi',
email: 'mgandhi@example.com',
occupation: 'Politician',
salary: '$100.09',
status: React.createElement(SuccessIcon, null),
},
{
id: '10',
first_name: 'William',
last_name: 'Shakespeare',
email: 'wshakespear@example.com',
occupation: 'Playwright',
salary: '$100.10',
status: React.createElement(SuccessIcon, null),
},
],
};
},
handleSelect(_item, selectedIndex) {
const { data } = this.state;
this.setState({
data: _.map(data, (row, rowIndex) => {
if (rowIndex === selectedIndex) {
return {
...row,
isSelected: !row.isSelected,
};
}
else {
return row;
}
}),
});
},
handleSelectAll() {
const { data } = this.state;
const allSelected = _.every(data, 'isSelected');
this.setState({
data: _.map(data, row => {
return {
...row,
isSelected: !allSelected,
};
}),
});
},
handleRowClick(_item, rowIndex) {
this.setState({
activeIndex: rowIndex,
});
},
handleSort(field) {
const { currentlySortedField, currentlySortedFieldDirection, data, } = this.state;
const nextCurrentlySortedFieldDirection = currentlySortedField === field && currentlySortedFieldDirection === 'up'
? 'down'
: 'up';
const nextData = _.sortBy(data, field);
this.setState({
currentlySortedField: field,
currentlySortedFieldDirection: nextCurrentlySortedFieldDirection,
data: nextCurrentlySortedFieldDirection === 'down'
? nextData
: _.reverse(nextData),
activeIndex: null,
});
},
render() {
const { activeIndex, data, currentlySortedField, currentlySortedFieldDirection, } = this.state;
return (React.createElement("div", null,
React.createElement("style", null, '.child { display: none; } .lucid-Table-Tr:hover .child { display: block; }'),
React.createElement(DataTable, { data: _.map(data, (row, index) => index === activeIndex ? { ...row, isActive: true } : row), density: 'extended', isSelectable: true, isActionable: true, onRowClick: this.handleRowClick, onSelect: this.handleSelect, onSelectAll: this.handleSelectAll, onSort: this.handleSort },
React.createElement(DataTable.Column, { field: 'id', width: 41, align: 'left', hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'id', sortDirection: currentlySortedFieldDirection }, "ID"),
React.createElement(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.createElement(DataTable.Column, { field: 'last_name', align: 'left', width: 100, hasBorderRight: true, isResizable: true, isSortable: true, isSorted: currentlySortedField === 'last_name', sortDirection: currentlySortedFieldDirection }, "Last"),
React.createElement(DataTable.Column, { field: 'email', align: 'left', isSortable: true, isSorted: currentlySortedField === 'email', sortDirection: currentlySortedFieldDirection }, "E-Mail"),
React.createElement(DataTable.Column, { field: 'occupation', align: 'left', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'occupation', sortDirection: currentlySortedFieldDirection }, "Occupation"),
React.createElement(DataTable.Column, { field: 'salary', align: 'right', width: 100, hasBorderLeft: true, isSortable: true, isSorted: currentlySortedField === 'salary', sortDirection: currentlySortedFieldDirection }, "Salary"),
React.createElement(DataTable.Column, { field: 'status', align: 'center', width: 100, hasBorderLeft: true }, "Status"))));
},
});