@spaced-out/ui-design-system
Version:
Sense UI components library
437 lines (427 loc) • 16.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BasicTableBody = exports.BasicTable = void 0;
exports.StaticTable = StaticTable;
exports.StaticTableVirtualized = StaticTableVirtualized;
var React = _interopRequireWildcard(require("react"));
var _reactVirtual = require("@tanstack/react-virtual");
var _get = _interopRequireDefault(require("lodash/get"));
var _xor = _interopRequireDefault(require("lodash/xor"));
var _useWindowSize = require("../../hooks/useWindowSize");
var _size = require("../../styles/variables/_size");
var _space = require("../../styles/variables/_space");
var _classify = require("../../utils/classify");
var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
var _CircularLoader = require("../CircularLoader");
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');
function useTableWidth(ref) {
const {
width
} = (0, _useWindowSize.useWindowSize)();
const [tableWidth, setTableWidth] = React.useState();
React.useEffect(() => {
if (ref.current) {
setTableWidth(ref.current.offsetWidth);
}
}, [width]);
return tableWidth;
}
function useMappedKeys(entries, rowKeys, idName) {
// @ts-ignore - TS2322 - Type 'string[] | Data[string][]' is not assignable to type 'string[]'.
return React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
}
function useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect) {
if (!selectedKeys) {
return undefined;
}
return _ref => {
let {
checked
} = _ref;
const allIds = entries.map(row => (0, _get.default)(row, idName));
const newSelection = checked ? allIds : [];
// @ts-ignore - TS2345 - Argument of type 'Data[string][]' is not assignable to parameter of type 'string[]'.
onSelect?.(newSelection);
};
}
function RowRenderer(_ref2) {
let {
TableRow,
data,
headers,
extras,
sortedKeys,
selected,
disabled,
classNames,
keyId,
onSelect
} = _ref2;
return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
key: keyId,
data: data,
headers: headers
// extras and rowKeys are both 'optional'
,
extras: extras,
sortedKeys: sortedKeys,
selected: selected,
disabled: disabled
}) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
key: keyId,
data: data,
extras: extras,
headers: headers,
selected: selected,
onSelect: onSelect,
disabled: disabled,
classNames: {
tableRow: classNames?.tableRow,
checkbox: classNames?.checkbox
}
});
}
function TableWrapper(_ref3) {
let {
tableRef,
classNames,
className,
tableHeaderClassName,
children,
wrapperStyle,
isLoading = false,
emptyText,
showHeader = true,
stickyHeader = false,
sortable,
disabled = false,
entriesLength = 0,
selectedKeys,
headers,
sortKey,
sortDirection,
handleSortClick,
handleHeaderCheckboxClick
} = _ref3;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
"data-id": 'table-wrap',
ref: tableRef
// @ts-ignore - TS2322 - Type '{ [key: string]: string | number | null | undefined; } | undefined' is not assignable to type 'CSSProperties | undefined'.
,
style: wrapperStyle
}, /*#__PURE__*/React.createElement(BasicTable, {
"data-id": "basic-table",
className: (0, _classify.classify)(className, {
[_TableModule.default.fullHeightTable]: isLoading || !entriesLength && !!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 < entriesLength ? 'mixed' : 'true'
}), /*#__PURE__*/React.createElement(BasicTableBody, {
className: classNames?.tableBody
}, children)));
}
/**
* A Static Default Table.
*
* Our
*/
function StaticTable(props) {
const {
classNames,
className,
TableRow,
entries,
extras,
rowKeys,
headers,
showHeader = true,
tableHeaderClassName,
sortable,
// @ts-ignore - TS6133 - 'defaultSortKey' is declared but its value is never read.
defaultSortKey,
// @ts-ignore - TS6133 - 'defaultSortDirection' is declared but its value is never read.
defaultSortDirection = 'original',
// @ts-ignore - TS6133 - 'onSort' is declared but its value is never read.
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 tableRef = React.useRef(null);
// @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
const mappedKeys = useMappedKeys(entries, rowKeys, idName);
const tableWidth = useTableWidth(tableRef);
/**
* 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 = useHeaderCheckboxHandler(selectedKeys, entries,
// @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
idName, onSelect);
return /*#__PURE__*/React.createElement(TableWrapper, {
tableRef: tableRef,
wrapperStyle: {
'--border-radius': borderRadius,
'--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid
},
classNames: classNames,
className: className,
tableHeaderClassName: tableHeaderClassName,
borderRadius: borderRadius,
isLoading: isLoading,
emptyText: emptyText,
showHeader: showHeader,
stickyHeader: stickyHeader,
sortable: sortable,
disabled: false,
entriesLength: entries.length,
selectedKeys: selectedKeys,
headers: headers,
sortKey: sortKey,
sortDirection: sortDirection
// @ts-ignore - TS2322 - Type '((sortKey: string) => unknown) | undefined' is not assignable to type '((sortKey: keyof Data) => unknown) | undefined'.
,
handleSortClick: handleSortClick,
handleHeaderCheckboxClick: handleHeaderCheckboxClick
}, 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;
}
const selected = selectedKeys && Array.isArray(selectedKeys) ?
// @ts-ignore - TS2345 - Argument of type 'Data["id"] | Data[keyof Data]' is not assignable to parameter of type 'string'.
selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ?
// @ts-ignore - TS2345 - Argument of type 'Data["id"] | Data[keyof Data]' is not assignable to parameter of type 'string'.
disabledKeys.includes((0, _get.default)(data, idName)) : false;
return /*#__PURE__*/React.createElement(RowRenderer, {
TableRow: TableRow,
keyId: key,
data: data,
headers: headers,
extras: extras,
sortedKeys: rowKeys ?? mappedKeys,
selected: selected,
disabled: disabled || isRowDisabled,
classNames: classNames,
onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined
});
}));
}
function StaticTableVirtualized(props) {
const {
classNames,
className,
TableRow,
entries,
extras,
rowKeys,
headers,
showHeader = true,
tableHeaderClassName,
sortable,
// @ts-ignore - TS6133 - 'defaultSortKey' is declared but its value is never read.
defaultSortKey,
// @ts-ignore - TS6133 - 'defaultSortDirection' is declared but its value is never read.
defaultSortDirection = 'original',
// @ts-ignore - TS6133 - 'onSort' is declared but its value is never read.
onSort,
handleSortClick,
sortKey,
sortDirection,
selectedKeys,
disabledKeys = [],
onSelect,
isLoading,
idName = 'id',
emptyText,
disabled,
customLoader,
borderRadius,
stickyHeader,
virtualizationOptions
} = props;
const {
rowsCount,
rowHeight = _size.size48,
onEndReached,
isEndLoading = false,
isAllDataFetched = false
} = virtualizationOptions ?? {};
const tableRef = React.useRef(null);
// this is a fallback and honestly probably doesn't need the
// memo'ing
// @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
const mappedKeys = useMappedKeys(entries, rowKeys, idName);
const tableWidth = useTableWidth(tableRef);
const virtualizer = (0, _reactVirtual.useVirtualizer)({
count: entries.length,
getScrollElement: () => tableRef.current,
estimateSize: () => parseInt(rowHeight),
// @ts-ignore - TS2322 - Type '(index: number) => Data["id" | keyof Data]' is not assignable to type '(index: number) => Key'.
getItemKey: index => entries[index][idName],
overscan: 1
});
const currRows = virtualizer.getVirtualItems();
const hasTriggeredRef = React.useRef(false);
React.useEffect(() => {
if (!tableRef.current || !onEndReached || isAllDataFetched) {
return;
}
const scrollElement = tableRef.current;
const handleScroll = () => {
const {
scrollTop,
scrollHeight,
clientHeight
} = scrollElement;
const isAtEnd = scrollTop + clientHeight >= scrollHeight - 100; // buffer
if (isAtEnd) {
if (!hasTriggeredRef.current) {
hasTriggeredRef.current = true;
onEndReached();
}
} else {
hasTriggeredRef.current = false; // reset when scrolling up
}
};
// @ts-ignore - TS2339 - Property 'addEventListener' does not exist on type 'never'.
scrollElement.addEventListener('scroll', handleScroll);
return () => {
// @ts-ignore - TS2339 - Property 'removeEventListener' does not exist on type 'never'.
scrollElement.removeEventListener('scroll', handleScroll);
};
}, [onEndReached, isAllDataFetched]);
/**
* 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 = useHeaderCheckboxHandler(selectedKeys, entries,
// @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
idName, onSelect);
const VirtualizedStartRow = () => /*#__PURE__*/React.createElement("tr", {
style: {
height: virtualizer.getVirtualItems()[0]?.start ?? _space.spaceNone,
width: _size.sizeFluid
}
}, /*#__PURE__*/React.createElement("td", {
colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0),
style: {
padding: _space.spaceNone,
border: 'none',
height: '100%'
}
}));
const VirtualizedEndRow = () => /*#__PURE__*/React.createElement("tr", {
style: {
height: virtualizer.getTotalSize() - (
// @ts-ignore - TS2339 - Property 'at' does not exist on type 'VirtualItem[]'.
virtualizer.getVirtualItems().at(-1)?.end ?? _space.spaceNone)
},
"aria-hidden": true
}, /*#__PURE__*/React.createElement("td", {
colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0),
style: {
padding: _space.spaceNone,
border: 'none',
height: '100%'
}
}));
return /*#__PURE__*/React.createElement(TableWrapper, {
tableRef: tableRef,
wrapperStyle: {
'--border-radius': borderRadius,
'--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid,
// @ts-ignore - TS2532 - Object is possibly 'undefined'.
height: (rowsCount + 1) * parseInt(rowHeight),
overflowY: 'auto'
},
classNames: classNames,
className: className,
tableHeaderClassName: tableHeaderClassName,
borderRadius: borderRadius,
isLoading: isLoading,
emptyText: emptyText,
showHeader: showHeader,
stickyHeader: stickyHeader,
sortable: sortable,
disabled: false,
entriesLength: entries.length,
selectedKeys: selectedKeys,
headers: headers,
sortKey: sortKey,
sortDirection: sortDirection
// @ts-ignore - TS2322 - Type '((sortKey: string) => unknown) | undefined' is not assignable to type '((sortKey: keyof Data) => unknown) | undefined'.
,
handleSortClick: handleSortClick,
handleHeaderCheckboxClick: handleHeaderCheckboxClick
}, /*#__PURE__*/React.createElement(VirtualizedStartRow, null), isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
isLoading: isLoading,
emptyText: emptyText,
headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,
customLoader: customLoader
}) : currRows.map(virtualRow => {
const key = virtualRow.key;
const data = entries[virtualRow.index];
if (data == null) {
return null;
}
const selected = selectedKeys && Array.isArray(selectedKeys) ?
// @ts-ignore - TS2345 - Argument of type 'Data[keyof Data] | Data["id"]' is not assignable to parameter of type 'string'.
selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ?
// @ts-ignore - TS2345 - Argument of type 'Data[keyof Data] | Data["id"]' is not assignable to parameter of type 'string'.
disabledKeys.includes((0, _get.default)(data, idName)) : false;
return /*#__PURE__*/React.createElement(RowRenderer, {
TableRow: TableRow
// @ts-ignore - TS2322 - Type 'Key' is not assignable to type 'string'.
,
keyId: key,
data: data,
headers: headers,
extras: extras,
sortedKeys: rowKeys ?? mappedKeys,
selected: selected,
disabled: disabled || isRowDisabled,
classNames: classNames,
onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined
});
}), /*#__PURE__*/React.createElement(VirtualizedEndRow, null), isEndLoading && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
colSpan: headers.length + (handleHeaderCheckboxClick ? 1 : 0)
}, /*#__PURE__*/React.createElement("div", {
className: _TableModule.default.fetchMoreLoaderContainer
}, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, null)))));
}