design-system-simplefi
Version:
Design System for SimpleFi Applications
100 lines • 4.95 kB
JavaScript
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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import React, { useState } from 'react';
import { isEmpty, path } from 'ramda';
import { TableSt } from './Table.style';
import { TableRow } from './TableRow';
import { TableHeading } from './TableHeading';
export var Table = function (_a) {
var data = _a.data, columns = _a.columns, sortable = _a.sortable, filterable = _a.filterable, onSelect = _a.onSelect, stickyHeader = _a.stickyHeader, stickyHeaderTop = _a.stickyHeaderTop, tableId = _a.tableId, _b = _a.align, align = _b === void 0 ? 'left' : _b, customSort = _a.customSort;
var _c = useState({
sort: {},
filters: {},
}), filters = _c[0], setFilters = _c[1];
var defaultSort = function (list) {
var currentSort = filters.sort;
if (!currentSort) {
return list;
}
var column = Object.keys(currentSort)[0];
var direction = currentSort[column];
var value = (columns.find(function (x) { return x.id === column; }) || {}).value;
return __spreadArray([], list).sort(function (a, b) {
var sortA = typeof value === 'function' ? value(a) : path([value], a);
var sortB = typeof value === 'function' ? value(b) : path([value], b);
if (direction === 'ASC') {
if (sortA < sortB)
return -1;
if (sortA > sortB)
return 1;
}
else {
if (sortA > sortB)
return -1;
if (sortA < sortB)
return 1;
}
return 0;
});
};
var sortedItems = customSort && isEmpty(filters.sort) ? customSort(data) : defaultSort(data);
var filteredData = __spreadArray([], sortedItems).filter(function (item) {
if (!filters.filters.column) {
return item;
}
var filter = filters.filters;
var columnData = columns.find(function (x) { return x.id === filter.column; });
if (!columnData)
return item;
var value = path([columnData.value], item);
return ((value &&
filters.filters.values &&
filters.filters.values.includes(value)) ||
(filters.filters.range &&
filters.filters.range.min <= parseInt(value, 10) &&
filters.filters.range.max >= parseInt(value, 10)));
});
var onFilterChange = function (newFilters) {
setFilters(__assign(__assign({}, filters), { filters: __assign({}, newFilters.filter) }));
};
var onSortAction = function (column, direction) {
var _a;
setFilters(__assign(__assign({}, filters), { sort: (_a = {},
_a[column] = direction,
_a) }));
};
var headings = columns.map(function (column, index) {
var isColumnSortable = path(['options', 'sortable'], column) || false;
var isColumnFilterable = !column.options || path(['options', 'filterable'], column) || false;
return (React.createElement(TableHeading, { key: tableId + "-" + column.id, column: column.id, dataList: data
.map(function (x) {
return typeof column.value === 'function'
? column.value(x)
: path([column.value], x);
})
.filter(function (x) { return x; }), filterable: filterable && isColumnFilterable, filters: filters, position: index / (columns.length - 1), rangeFilter: path(['options', 'filterRange'], column), sortable: sortable && isColumnSortable, style: path(['options', 'headerStyle'], column) || {}, tableId: tableId, tooltipMessage: column.tooltipMessage, onFilterChange: onFilterChange, onFilterReset: function () { return onFilterChange({}); }, onSortAction: onSortAction }, column.header));
});
var rows = filteredData.map(function (dataItem) {
return (React.createElement(TableRow, { key: dataItem.key, columns: columns, item: dataItem, tableId: tableId, onRowClick: onSelect }));
});
return (React.createElement(TableSt, { align: align, id: tableId, stickyHeader: stickyHeader, stickyHeaderTop: stickyHeaderTop },
React.createElement("table", null,
React.createElement("thead", null,
React.createElement("tr", null, headings)),
React.createElement("tbody", null, rows))));
};
//# sourceMappingURL=Table.js.map