design-system-simplefi
Version:
Design System for SimpleFi Applications
57 lines • 3.74 kB
JavaScript
import React, { useState } from 'react';
import { path } from 'ramda';
import * as St from './TableRow.style';
import Tooltip from '../../Tooltip/Tooltip';
import { Paragraph } from '../../typography/Paragraph';
var TableRow = function (_a) {
var _b, _c;
var item = _a.item, columns = _a.columns, tableId = _a.tableId, onRowClick = _a.onRowClick;
var _d = useState(false), isRowExpanded = _d[0], setExpanded = _d[1];
var renderCellContent = function (columnObj, itemObj, tableIdStr) {
if (columnObj.renderCell) {
return columnObj.renderCell(itemObj, tableIdStr);
}
if (typeof columnObj.value === 'function') {
return columnObj.value(itemObj);
}
return path([columnObj.value], itemObj) || '-';
};
var hasManyDecimals = function (item, maxDecimals) {
var _a;
// eslint-disable-next-line prefer-template
var itemToString = '' + item;
var numberOfDecimals = (_a = itemToString.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
return numberOfDecimals > maxDecimals;
};
var withCollapsedDecimals = function (item, maxDecimals) {
// eslint-disable-next-line prefer-template
var itemToString = '' + item;
var numberParts = itemToString.split('.');
return numberParts[0] + "." + numberParts[1].substring(0, maxDecimals) + "...";
};
var rowClicked = function (itemObj, rowClick) {
if (typeof rowClick === 'function') {
return function () { return rowClick(itemObj.key); };
}
if (tableId.split('-')[1].includes('expandableTable')) {
return function () { return setExpanded(!isRowExpanded); };
}
return null;
};
return (React.createElement(React.Fragment, null,
React.createElement(St.Tr, { style: { cursor: ((_b = item === null || item === void 0 ? void 0 : item.expanded) === null || _b === void 0 ? void 0 : _b.length) ? 'pointer' : 'auto' }, onClick: rowClicked(item, onRowClick) }, columns.map(function (column) {
var _a;
return (React.createElement("td", { key: "tr-" + tableId + "-" + column.id, style: path(['options', 'cellStyle'], column) || {} }, ((_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.collapseManyDecimals) &&
hasManyDecimals(renderCellContent(column, item, tableId), 2) ? (React.createElement(Tooltip, { placement: "bottom", popup: React.createElement(Paragraph, { margin: { bottom: 0 }, size: "md" }, renderCellContent(column, item, tableId)) },
React.createElement(St.CellContainer, { className: column.onlyDisplayOnHover ? 'visible-on-hover' : '' }, withCollapsedDecimals(renderCellContent(column, item, tableId), 2)))) : (React.createElement(St.CellContainer, { className: column.onlyDisplayOnHover ? 'visible-on-hover' : '' }, renderCellContent(column, item, tableId)))));
})),
(item === null || item === void 0 ? void 0 : item.expanded) && isRowExpanded && (React.createElement(React.Fragment, null, (_c = item === null || item === void 0 ? void 0 : item.expanded) === null || _c === void 0 ? void 0 : _c.map(function (el, index) { return (React.createElement(St.Tr, { key: "expandedTr-" + index + "-" + tableId + "-" + columns[0].id, style: { paddingLeft: '5rem' } },
React.createElement("td", { colSpan: +columns.length, style: {
width: '100%',
maxHeight: '500px',
paddingLeft: '5rem',
fontSize: '1.1rem',
}, width: "100%" }, el))); })))));
};
export default TableRow;
//# sourceMappingURL=TableRow.js.map