suomifi-ui-components
Version:
Suomi.fi UI component library
321 lines (315 loc) • 16.8 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var classnames = require('classnames');
var SuomifiThemeProvider = require('../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../theme/utils/spacing.js');
var Table_baseStyles = require('./Table.baseStyles.js');
var common = require('../../utils/common/common.js');
var AutoId = require('../utils/AutoId/AutoId.js');
require('../../reset/HtmlA/HtmlA.js');
var HtmlButton = require('../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../reset/HtmlDiv/HtmlDiv.js');
require('../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../reset/HtmlH/HtmlH.js');
require('../../reset/HtmlInput/HtmlInput.js');
require('../../reset/HtmlLabel/HtmlLabel.js');
require('../../reset/HtmlLegend/HtmlLegend.js');
require('../../reset/HtmlLi/HtmlLi.js');
require('../../reset/HtmlNav/HtmlNav.js');
require('../../reset/HtmlOl/HtmlOl.js');
require('../../reset/HtmlSpan/HtmlSpan.js');
require('../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../reset/HtmlUl/HtmlUl.js');
var HtmlTable = require('../../reset/HtmlTable/HtmlTable.js');
var HtmlTableCaption = require('../../reset/HtmlTable/HtmlTableCaption.js');
var HtmlTableHeader = require('../../reset/HtmlTable/HtmlTableHeader.js');
var HtmlTableRow = require('../../reset/HtmlTable/HtmlTableRow.js');
var HtmlTableBody = require('../../reset/HtmlTable/HtmlTableBody.js');
var HtmlTableHeaderCell = require('../../reset/HtmlTable/HtmlTableHeaderCell.js');
var HtmlTableCell = require('../../reset/HtmlTable/HtmlTableCell.js');
var suomifiIcons = require('suomifi-icons');
var aria = require('../../utils/aria/aria.js');
var Checkbox = require('../Form/Checkbox/Checkbox.js');
var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
var RadioButton = require('../Form/RadioButton/RadioButton.js');
var Block = require('../Block/Block.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-table';
var tableClassNames = {
table: "".concat(baseClassName, "_table"),
thead: "".concat(baseClassName, "_thead"),
tbody: "".concat(baseClassName, "_tbody"),
th: "".concat(baseClassName, "_th"),
tr: "".concat(baseClassName, "_tr"),
td: "".concat(baseClassName, "_td"),
selectionTd: "".concat(baseClassName, "_td--selection"),
tdAlignRight: "".concat(baseClassName, "_td--align-right"),
tdAlignCenter: "".concat(baseClassName, "_td--align-center"),
caption: "".concat(baseClassName, "_caption"),
alternativeCaption: "".concat(baseClassName, "_caption--alternative"),
toolbar: "".concat(baseClassName, "_toolbar"),
condenseButtons: "".concat(baseClassName, "_condense-buttons"),
condenseButton: "".concat(baseClassName, "_condense-button"),
condensed: "".concat(baseClassName, "--condensed"),
rowCountText: "".concat(baseClassName, "_row-count-text"),
sortIcons: "".concat(baseClassName, "_sort-icons"),
sortButton: "".concat(baseClassName, "_sort-button"),
skeleton: "".concat(baseClassName, "_skeleton"),
skeletonRow: "".concat(baseClassName, "_skeleton-row"),
skeletonCell: "".concat(baseClassName, "_skeleton-cell"),
skeletonContent: "".concat(baseClassName, "_skeleton-content"),
selectionCellSkeleton: "".concat(baseClassName, "_selection-cell-skeleton")
};
var BaseTable = function BaseTable(props) {
var _a;
var id = props.id,
columns = props.columns,
propData = props.data,
caption = props.caption,
condensed = props.condensed,
enableRowSelection = props.enableRowSelection,
enableSingleRowSelection = props.enableSingleRowSelection,
onSelectedRowsChange = props.onSelectedRowsChange,
tableSortedAriaLiveText = props.tableSortedAriaLiveText,
tableSortCallback = props.tableSortCallback,
loading = props.loading,
_b = props.loadingRowAmount,
loadingRowAmount = _b === void 0 ? 5 : _b,
controlledSelectedRowIds = props.controlledSelectedRowIds,
className = props.className,
ariaLabelledBy = props["aria-labelledby"];
props.globalMargins;
var rest = tslib.__rest(props, ["id", "columns", "data", "caption", "condensed", "enableRowSelection", "enableSingleRowSelection", "onSelectedRowsChange", "tableSortedAriaLiveText", "tableSortCallback", "loading", "loadingRowAmount", "controlledSelectedRowIds", "className", 'aria-labelledby', "globalMargins"]);
var _c = spacing.separateMarginProps(rest),
passProps = _c[1];
var _d = React.useState(propData),
data = _d[0],
setData = _d[1];
var _e = React.useState(''),
sortColumn = _e[0],
setSortColumn = _e[1];
var _f = React.useState(controlledSelectedRowIds || []),
selectedRowIds = _f[0],
setSelectedRowIds = _f[1];
var _g = React.useState(false),
hasHorizontalScrollbar = _g[0],
setHasHorizontalScrollbar = _g[1];
var wrapperRef = /*#__PURE__*/React__default.default.createRef();
React.useEffect(function () {
if (controlledSelectedRowIds !== undefined) {
setSelectedRowIds(controlledSelectedRowIds);
}
}, [controlledSelectedRowIds]);
React.useEffect(function () {
setData(propData);
}, [propData]);
React.useEffect(function () {
var targetDiv = wrapperRef.current;
if (!targetDiv) return;
var observer = new ResizeObserver(function () {
var isScrollbarVisible = targetDiv.scrollWidth > targetDiv.clientWidth;
setHasHorizontalScrollbar(isScrollbarVisible);
});
observer.observe(targetDiv);
return function () {
return observer.disconnect();
};
}, []);
var sortData = function sortData(key) {
var sortedData = tslib.__spreadArray([], data, true).sort(function (a, b) {
var aValue = a[key];
var bValue = b[key];
var getTextContent = function getTextContent(element) {
if (typeof element === 'string' || typeof element === 'number') {
return element.toString();
}
if ( /*#__PURE__*/React__default.default.isValidElement(element)) {
var children = element.props.children;
if (Array.isArray(children)) {
return children.map(getTextContent).join('');
}
return getTextContent(children);
}
return '';
};
var aValueText = getTextContent(aValue);
var bValueText = getTextContent(bValue);
var isNumeric = !Number.isNaN(Number(aValueText)) && !Number.isNaN(Number(bValueText));
if (isNumeric) {
return !sortColumn.includes(key) || sortColumn === "".concat(key, "-desc") ? Number(aValueText) - Number(bValueText) : Number(bValueText) - Number(aValueText);
}
return !sortColumn.includes(key) || sortColumn === "".concat(key, "-desc") ? aValueText.localeCompare(bValueText) : bValueText.localeCompare(aValueText);
});
if (!!tableSortCallback) {
tableSortCallback(key, !sortColumn.includes(key) || sortColumn === "".concat(key, "-desc") ? 'asc' : 'desc');
} else {
setData(sortedData);
}
if (!sortColumn.includes(key) || sortColumn === "".concat(key, "-desc")) {
setSortColumn("".concat(key, "-asc"));
} else {
setSortColumn("".concat(key, "-desc"));
}
};
var handleRowSelection = function handleRowSelection(rowId, operation) {
var newSelectedRowIds = [];
if (enableSingleRowSelection) {
newSelectedRowIds = [rowId];
} else {
newSelectedRowIds = operation === 'add' ? tslib.__spreadArray(tslib.__spreadArray([], selectedRowIds, true), [rowId], false) : selectedRowIds.filter(function (rid) {
return rid !== rowId;
});
}
if (controlledSelectedRowIds === undefined) {
setSelectedRowIds(newSelectedRowIds);
}
if (onSelectedRowsChange) {
onSelectedRowsChange(newSelectedRowIds);
}
};
var getSortColumnLabel = function getSortColumnLabel() {
var _a;
return ((_a = columns.find(function (col) {
return sortColumn.includes(col.key);
})) === null || _a === void 0 ? void 0 : _a.labelText) || '';
};
var getSortDirection = function getSortDirection() {
return sortColumn.endsWith('-asc') ? 'asc' : 'desc';
};
var skeletonRows = [];
if (loading) {
for (var i = 0; i < loadingRowAmount; i += 1) {
skeletonRows.push(i);
}
}
var tableCaptionId = "".concat(id, "-caption");
var getTableCaptionId = function getTableCaptionId() {
return caption ? tableCaptionId : ariaLabelledBy;
};
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
className: classnames__default.default(baseClassName, className),
forwardedRef: wrapperRef,
tabIndex: hasHorizontalScrollbar ? 0 : undefined,
role: hasHorizontalScrollbar ? 'region' : undefined,
"aria-labelledby": hasHorizontalScrollbar ? getTableCaptionId() : undefined
}, /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, {
"aria-live": "polite"
}, sortColumn !== '' && tableSortedAriaLiveText && tableSortedAriaLiveText(getSortColumnLabel(), getSortDirection())), /*#__PURE__*/React__default.default.createElement(HtmlTable.HtmlTable, tslib.__assign({
className: classnames__default.default(tableClassNames.table, (_a = {}, _a[tableClassNames.condensed] = condensed, _a)),
id: id
}, aria.getConditionalAriaProp('aria-labelledby', [ariaLabelledBy]), {
"aria-busy": loading
}, passProps), caption && ( /*#__PURE__*/React__default.default.createElement(HtmlTableCaption.HtmlTableCaption, {
className: tableClassNames.caption,
id: tableCaptionId
}, caption)), /*#__PURE__*/React__default.default.createElement(HtmlTableHeader.HtmlTableHeader, {
className: tableClassNames.thead
}, /*#__PURE__*/React__default.default.createElement(HtmlTableRow.HtmlTableRow, null, (enableRowSelection || enableSingleRowSelection) && ( /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
className: classnames__default.default(tableClassNames.th, tableClassNames.selectionTd)
})), columns.map(function (col) {
var _a;
return /*#__PURE__*/React__default.default.createElement(HtmlTableHeaderCell.HtmlTableHeaderCell, {
scope: "col",
key: col.key,
className: classnames__default.default(tableClassNames.th, col.className, (_a = {}, _a[tableClassNames.tdAlignRight] = col.textAlign === 'right', _a[tableClassNames.tdAlignCenter] = col.textAlign === 'center', _a)),
"aria-sort": sortColumn === "".concat(col.key, "-asc") ? 'ascending' : sortColumn === "".concat(col.key, "-desc") ? 'descending' : undefined
}, col.sortable ? ( /*#__PURE__*/React__default.default.createElement(HtmlButton.HtmlButton, {
onClick: function onClick() {
return sortData(col.key);
},
className: tableClassNames.sortButton
}, col.labelText, !sortColumn.includes(col.key) && /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSort, null), sortColumn === "".concat(col.key, "-asc") && col.sortIcon !== 'generic' && /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSortDownAlph, null), sortColumn === "".concat(col.key, "-desc") && col.sortIcon !== 'generic' && /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSortUpAlph, null), sortColumn === "".concat(col.key, "-asc") && col.sortIcon === 'generic' && /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSortDown, null), sortColumn === "".concat(col.key, "-desc") && col.sortIcon === 'generic' && /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconSortUp, null))) : col.labelText);
}))), /*#__PURE__*/React__default.default.createElement(HtmlTableBody.HtmlTableBody, {
className: tableClassNames.tbody
}, loading ? skeletonRows.map(function (val) {
return /*#__PURE__*/React__default.default.createElement(HtmlTableRow.HtmlTableRow, {
key: "loading-row-".concat(val, "}"),
className: tableClassNames.skeletonRow,
"aria-hidden": "true"
}, (enableRowSelection || enableSingleRowSelection) && ( /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
className: classnames__default.default(tableClassNames.skeletonCell, tableClassNames.selectionCellSkeleton)
}, /*#__PURE__*/React__default.default.createElement(Block.Block, {
className: classnames__default.default(tableClassNames.skeleton, tableClassNames.skeletonContent)
}))), columns.map(function (col) {
return /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
key: "loading-cell-".concat(col.key),
className: tableClassNames.skeletonCell
}, /*#__PURE__*/React__default.default.createElement(Block.Block, {
className: classnames__default.default(tableClassNames.skeleton, tableClassNames.skeletonContent)
}));
}));
}) : data.map(function (row) {
return /*#__PURE__*/React__default.default.createElement(HtmlTableRow.HtmlTableRow, {
key: row.id,
className: classnames__default.default(tableClassNames.tr, {
highlighted: selectedRowIds.includes(row.id)
})
}, enableRowSelection && ( /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
className: classnames__default.default(tableClassNames.td, tableClassNames.selectionTd)
}, /*#__PURE__*/React__default.default.createElement(Checkbox.Checkbox, {
checked: selectedRowIds.includes(row.id),
onClick: function onClick(checkedVal) {
return handleRowSelection(row.id, checkedVal.checkboxState ? 'add' : 'remove');
}
}, /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, row.rowSelectionCheckboxLabel)))), enableSingleRowSelection && ( /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
className: classnames__default.default(tableClassNames.td, tableClassNames.selectionTd)
}, /*#__PURE__*/React__default.default.createElement(RadioButton.RadioButton, {
value: "radiobutton-".concat(row.id),
checked: selectedRowIds.includes(row.id),
onChange: function onChange(newValue) {
return handleRowSelection(row.id, newValue ? 'add' : 'remove');
}
}, /*#__PURE__*/React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, row.rowSelectionCheckboxLabel)))), columns.map(function (col) {
var _a;
return /*#__PURE__*/React__default.default.createElement(HtmlTableCell.HtmlTableCell, {
key: "".concat(row.id, "-").concat(col.key),
className: classnames__default.default(tableClassNames.td, col.className, (_a = {}, _a[tableClassNames.tdAlignRight] = col.textAlign === 'right', _a[tableClassNames.tdAlignCenter] = col.textAlign === 'center', _a))
}, row[col.key]);
}));
}))));
};
var StyledTable = styledComponents.styled(function (_a) {
_a.theme;
var passProps = tslib.__rest(_a, ["theme"]);
return /*#__PURE__*/React__default.default.createElement(BaseTable, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-pno9ty-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.table, marginProps);
return Table_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
passProps = tslib.__rest(props, ["id"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(StyledTable, tslib.__assign({
theme: suomifiTheme,
id: id,
forwardedRef: ref,
globalMargins: margins
}, passProps));
});
});
});
});
Table.displayName = 'Table';
var templateObject_1;
exports.Table = Table;
//# sourceMappingURL=Table.js.map