@spaced-out/ui-design-system
Version:
Sense UI components library
147 lines (146 loc) • 6.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BasicTableHead = exports.BasicHeadCell = void 0;
exports.DefaultTableHeader = DefaultTableHeader;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
var _Checkbox = require("../Checkbox");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _DefaultRow = require("./DefaultRow");
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const BasicHeadCell = exports.BasicHeadCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultHeaderCell, 'th');
const BasicTableHead = exports.BasicTableHead = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableHead, 'thead');
const SortIcon = _ref => {
let {
sortDirection,
color,
className
} = _ref;
if (sortDirection === 'original') {
return /*#__PURE__*/React.createElement(_Icon.Icon, {
color: color,
name: "caret-down",
size: "small",
type: "solid",
className: className
});
} else if (sortDirection === 'asc') {
return /*#__PURE__*/React.createElement(_Icon.Icon, {
color: color,
name: "arrow-up",
size: "small",
type: "regular",
className: className
});
} else if (sortDirection === 'desc') {
return /*#__PURE__*/React.createElement(_Icon.Icon, {
color: color,
name: "arrow-down",
size: "small",
type: "regular",
className: className
});
}
};
function DefaultTableHeader(props) {
const {
className,
sortable = false,
columns,
handleSortClick,
sortKey,
sortDirection = 'original',
handleCheckboxClick,
checked,
disabled,
stickyHeader
} = props;
const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
const {
key,
label,
subtext,
filterIcon,
filtered,
className,
sticky,
sortable: columnSortable = false
} = columnData;
let headerClassName;
const filterable = Boolean(filterIcon);
if (sortable && columnSortable || filterable) {
headerClassName = (0, _classify.default)(_TableModule.default.defaultHeaderCellSortable, {
[_TableModule.default.filtered]: filtered,
[_TableModule.default.stickyHeaderCell]: sticky
}, _TableModule.default[sortDirection], className);
} else {
headerClassName = (0, _classify.default)(className, {
[_TableModule.default.stickyHeaderCell]: sticky
});
}
const headCellClickHandler = () => {
if (sortable && columnSortable && handleSortClick) {
handleSortClick(key);
}
};
let columnSortDirection = 'original';
if (sortKey === key) {
columnSortDirection = sortDirection;
}
return /*#__PURE__*/React.createElement(BasicHeadCell, {
className: (0, _classify.default)({
[_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
}, headerClassName)
// eslint-disable-next-line react/no-array-index-key
,
key: index,
scope: "col",
onClick: headCellClickHandler
}, /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_TableModule.default.labelContents)
}, /*#__PURE__*/React.createElement("div", {
className: _TableModule.default.labelContainer
}, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
color: _Text.TEXT_COLORS.secondary,
className: (0, _classify.default)({
[_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
})
}, label), /*#__PURE__*/React.createElement("span", {
className: _TableModule.default.headerSubtext
}, subtext && subtext)), (sortable || filterIcon != null) && /*#__PURE__*/React.createElement("div", {
className: _TableModule.default.headerIconContainer
}, columnSortable && /*#__PURE__*/React.createElement(SortIcon, {
color: _Text.TEXT_COLORS.secondary,
className: (0, _classify.default)(_TableModule.default.sortArrow, {
[_TableModule.default.selectedSortArrow]: sortKey === key
}),
sortDirection: columnSortDirection
}), filterIcon != null && /*#__PURE__*/React.createElement("div", {
className: _TableModule.default.filterIcon
}, filterIcon))));
}));
return /*#__PURE__*/React.createElement(BasicTableHead, {
className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, {
[_TableModule.default.stickyHeader]: stickyHeader
}, className)
}, /*#__PURE__*/React.createElement(_DefaultRow.BasicRow, {
className: _TableModule.default.defaultHeaderRow
}, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {
scope: "col"
}, /*#__PURE__*/React.createElement("div", {
className: _TableModule.default.checkbox
}, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
value: "all",
checked: checked === 'true' ? true : false,
indeterminate: checked === 'mixed',
onChange: handleCheckboxClick,
disabled: disabled,
ariaLabel: "Select all rows"
}))), tableHeaderCells()));
}