@spaced-out/ui-design-system
Version:
Sense UI components library
165 lines (162 loc) • 6.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BasicRow = void 0;
exports.DefaultRow = DefaultRow;
exports.EmptyRow = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
var _qa = require("../../utils/qa");
var _Checkbox = require("../Checkbox");
var _CircularLoader = require("../CircularLoader");
var _Cell = require("./Cell");
var _Text = require("../Text");
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
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); }
// When using a custom Row prop, you need to create a component that looks like
// MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
// otherwise flow will complain.
// Note that b/c extras is often optional, you will need to explicitly include
// `invariant(extras, 'extras exists');` in order to pull values out of
// extras (flow will remind you that it is of type `U | void`)
const BasicRow = exports.BasicRow = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultRow, 'tr');
const EmptyRow = _ref => {
let {
isLoading,
emptyText,
headersLength = 0,
customLoader,
testId
} = _ref;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'empty-row'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
colSpan: headersLength,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _TableModule.default.emptyRow,
children: isLoading ? customLoader ? customLoader : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _TableModule.default.defaultLoader,
children: [' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
colorToken: "colorFillPrimary",
size: "large",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'loader'
})
})]
}) : emptyText || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyLarge, {
color: _Text.TEXT_COLORS.secondary,
className: _TableModule.default.defaultEmptyText,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'empty-text'
}),
children: "Nothing to display here."
})
})
})
});
};
// This is a fallback row we use to render a table when
// initially stubbing out a design, the idea is you just avoid
// passing in a Row component and instead let this render out
// all the fields in the header in the short term
// Using the default row has the benefit that mismatches between
// header and entries _will_ error out even though there are the
// suppressions below
exports.EmptyRow = EmptyRow;
function DefaultRow(_ref2) {
let {
data,
extras,
headers,
selected,
onSelect,
classNames,
disabled,
testId
} = _ref2;
// Generate a stable row identifier based on the data
const getRowId = () => {
if (data.id) {
return String(data.id);
}
if (data.key) {
return String(data.key);
}
if (typeof data === 'object' && data !== null) {
const keys = Object.keys(data);
if (keys.length > 0) {
const firstKey = keys[0];
// Use the value of the first property for uniqueness
const firstValue = data[firstKey];
if (firstValue !== undefined && firstValue !== null) {
return String(firstValue);
}
}
}
return 'row';
};
const rowId = getRowId();
const rowTestId = (0, _qa.generateTestId)({
base: testId,
slot: 'row',
index: rowId
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BasicRow, {
className: (0, _classify.default)(selected ? _TableModule.default.defaultSelectedBodyRow : _TableModule.default.defaultBodyRow, classNames?.tableRow),
"data-testid": rowTestId,
children: [selected != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cell.PaddedContentCell, {
className: (0, _classify.default)(_TableModule.default.checkbox, classNames?.checkbox),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
checked: selected ? true : false,
onChange: onSelect,
disabled: disabled,
ariaLabel: "Select row",
testId: (0, _qa.generateTestId)({
base: rowTestId,
slot: 'checkbox'
})
})
}), headers.map((item, index) => {
const {
key,
render: Renderer,
className: cellClassName,
sticky
} = item;
const value = data[key];
const cellTestId = (0, _qa.generateTestId)({
base: rowTestId,
slot: `cell-${String(key)}-${index}`
});
return Renderer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Renderer
// eslint-disable-next-line react/no-array-index-key
, {
data: data,
extras: extras,
selected: selected,
disabled: disabled,
className: (0, _classify.default)({
[_TableModule.default.stickyCell]: sticky
}),
testId: cellTestId
}, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cell.SingleCell
// eslint-disable-next-line react/no-array-index-key
, {
title: String(value),
className: (0, _classify.default)(cellClassName, {
[_TableModule.default.stickyCell]: sticky
}),
testId: cellTestId
}, index);
})]
});
}