@spaced-out/ui-design-system
Version:
Sense UI components library
154 lines (148 loc) • 6.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BasicTableBody = exports.BasicTable = void 0;
exports.StaticTable = StaticTable;
var React = _interopRequireWildcard(require("react"));
var _get = _interopRequireDefault(require("lodash/get"));
var _xor = _interopRequireDefault(require("lodash/xor"));
var _useWindowSize = require("../../hooks/useWindowSize");
var _size = require("../../styles/variables/_size");
var _classify = require("../../utils/classify");
var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
var _DefaultRow = require("./DefaultRow");
var _DefaultTableHeader = require("./DefaultTableHeader");
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 BasicTable = exports.BasicTable = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTable, 'table');
const BasicTableBody = exports.BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableBody, 'tbody');
/**
* A Static Default Table.
*
* Our
*/
function StaticTable(props) {
const {
classNames,
className,
TableRow,
entries,
extras,
rowKeys,
headers,
showHeader = true,
tableHeaderClassName,
sortable,
// eslint-disable-next-line unused-imports/no-unused-vars
defaultSortKey,
// eslint-disable-next-line unused-imports/no-unused-vars
defaultSortDirection = 'original',
// eslint-disable-next-line unused-imports/no-unused-vars
onSort,
handleSortClick,
sortKey,
sortDirection,
selectedKeys,
disabledKeys = [],
onSelect,
isLoading,
idName = 'id',
emptyText,
disabled,
customLoader,
borderRadius,
stickyHeader
} = props;
// this is a fallback and honestly probably doesn't need the
// memo'ing
const mappedKeys = React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
const tableRef = React.useRef(null);
const {
width
} = (0, _useWindowSize.useWindowSize)();
const [tableWidth, setTableWidth] = React.useState();
React.useEffect(() => {
if (tableRef.current) {
setTableWidth(tableRef.current.offsetWidth);
}
}, [width]);
/**
* this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
*/
const handleHeaderCheckboxClick = selectedKeys ? ({
checked
}) => {
let selectedRowIds = [];
if (selectedKeys) {
if (checked === true) {
selectedRowIds = entries.map(singleRowObj => (0, _get.default)(singleRowObj, idName));
}
onSelect?.(selectedRowIds);
}
} : undefined;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
"data-id": "table-wrap",
ref: tableRef,
style: {
'--border-radius': borderRadius,
'--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid
}
}, /*#__PURE__*/React.createElement(BasicTable, {
"data-id": "basic-table",
className: (0, _classify.classify)(className, {
[_TableModule.default.fullHeightTable]: isLoading || !entries.length && !!emptyText
}, classNames?.table)
}, showHeader && /*#__PURE__*/React.createElement(_DefaultTableHeader.DefaultTableHeader, {
className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
sortable: sortable,
columns: headers,
handleSortClick: handleSortClick,
sortKey: sortKey,
sortDirection: sortDirection,
disabled: disabled,
handleCheckboxClick: handleHeaderCheckboxClick,
stickyHeader: stickyHeader,
checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
}), /*#__PURE__*/React.createElement(BasicTableBody, {
className: classNames?.tableBody
}, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
isLoading: isLoading,
emptyText: emptyText,
headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,
customLoader: customLoader
}) : mappedKeys.map(key => {
const data = entries.find(e => (0, _get.default)(e, idName) === key);
if (data == null) {
return null;
}
data;
const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
key: key,
data: data,
headers: headers
// extras and rowKeys are both 'optional'
,
extras: extras,
sortedKeys: rowKeys ?? mappedKeys,
selected: selected,
disabled: disabled || isRowDisabled
}) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
key: key,
data: data,
extras: extras,
headers: headers,
selected: selected,
onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
disabled: disabled || isRowDisabled,
classNames: {
tableRow: classNames?.tableRow,
checkbox: classNames?.checkbox
}
});
}))));
}