UNPKG

@atlaskit/table-tree

Version:

A table tree is an expandable table for showing nested hierarchies of information.

101 lines (98 loc) • 4.71 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _react = _interopRequireWildcard(require("react")); var _cell = _interopRequireDefault(require("./cell")); var _header = _interopRequireDefault(require("./header")); var _headers = _interopRequireDefault(require("./headers")); var _context = require("./internal/context"); var _row = _interopRequireDefault(require("./row")); var _rows = _interopRequireDefault(require("./rows")); function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); } /** * This is hard-coded here because our actual <TableTree /> has no typings * for its props. * * Adding types for real *might* break things so will need a little care. * * Defining it here for now lets us provide *something* without much headache. */ var emptyColumnWidths = []; function TableTree(_ref) { var children = _ref.children, columns = _ref.columns, _ref$columnWidths = _ref.columnWidths, defaultColumnWidths = _ref$columnWidths === void 0 ? emptyColumnWidths : _ref$columnWidths, headers = _ref.headers, shouldExpandOnClick = _ref.shouldExpandOnClick, items = _ref.items, mainColumnForExpandCollapseLabel = _ref.mainColumnForExpandCollapseLabel, label = _ref.label, referencedLabel = _ref.referencedLabel; var _useState = (0, _react.useState)(defaultColumnWidths), _useState2 = (0, _slicedToArray2.default)(_useState, 2), columnWidths = _useState2[0], setColumnWidths = _useState2[1]; var setColumnWidth = (0, _react.useCallback)(function (columnIndex, width) { if (width === columnWidths[columnIndex]) { return; } setColumnWidths(function (columnWidths) { var newColumnWidths = (0, _toConsumableArray2.default)(columnWidths); newColumnWidths[columnIndex] = width; return newColumnWidths; }); }, [columnWidths]); var getColumnWidth = (0, _react.useCallback)(function (columnIndex) { return columnWidths[columnIndex] || null; }, [columnWidths]); var contextValue = (0, _react.useMemo)(function () { return { setColumnWidth: setColumnWidth, getColumnWidth: getColumnWidth }; }, [setColumnWidth, getColumnWidth]); var heads = headers && /*#__PURE__*/_react.default.createElement(_headers.default, null, headers.map(function (header, index) { return /*#__PURE__*/_react.default.createElement(_header.default, { key: index, columnIndex: index, width: columnWidths[index] }, header); })); return /*#__PURE__*/_react.default.createElement(_context.TableTreeContext.Provider, { value: contextValue }, /*#__PURE__*/_react.default.createElement("div", { role: "treegrid", "aria-readonly": true, "aria-label": label, "aria-labelledby": referencedLabel }, heads, columns && items && /*#__PURE__*/_react.default.createElement(_rows.default, { items: items, render: function render(_ref2) { var id = _ref2.id, children = _ref2.children, content = _ref2.content; return /*#__PURE__*/_react.default.createElement(_row.default, { itemId: id, items: children, hasChildren: !!children && children.length > 0, shouldExpandOnClick: shouldExpandOnClick, mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel }, columns.map(function (CellContent, index) { return /*#__PURE__*/_react.default.createElement(_cell.default, { key: "cell-".concat(index), columnIndex: index, width: columnWidths[index] }, /*#__PURE__*/_react.default.createElement(CellContent, content)); })); } }), children)); } // eslint-disable-next-line @repo/internal/react/require-jsdoc var _default = exports.default = TableTree;