UNPKG

primereact

Version:

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

1,234 lines (1,198 loc) 108 kB
this.primereact = this.primereact || {}; this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks, paginator, ripple, overlayservice, inputtext, tooltip) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n["default"] = e; return Object.freeze(n); } var React__namespace = /*#__PURE__*/_interopNamespace(React); var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact); function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _arrayLikeToArray$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$4(arr); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _unsupportedIterableToArray$4(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$4(o, minLen); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$4(arr) || _nonIterableSpread(); } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest(); } var ColumnBase = { defaultProps: { __TYPE: 'Column', align: null, alignFrozen: 'left', alignHeader: null, body: null, bodyClassName: null, bodyStyle: null, cellEditValidator: null, cellEditValidatorEvent: 'click', className: null, colSpan: null, columnKey: null, dataType: 'text', editor: null, excludeGlobalFilter: false, expander: false, exportField: null, exportable: true, field: null, filter: false, filterApply: null, filterClear: null, filterElement: null, filterField: null, filterFooter: null, filterFunction: null, filterHeader: null, filterHeaderClassName: null, filterHeaderStyle: null, filterMatchMode: null, filterMatchModeOptions: null, filterMaxLength: null, filterMenuClassName: null, filterMenuStyle: null, filterPlaceholder: null, filterType: 'text', footer: null, footerClassName: null, footerStyle: null, frozen: false, header: null, headerClassName: null, headerStyle: null, headerTooltip: null, headerTooltipOptions: null, hidden: false, maxConstraints: 2, onBeforeCellEditHide: null, onBeforeCellEditShow: null, onCellEditCancel: null, onCellEditComplete: null, onCellEditInit: null, onFilterApplyClick: null, onFilterClear: null, onFilterConstraintAdd: null, onFilterConstraintRemove: null, onFilterMatchModeChange: null, onFilterOperatorChange: null, reorderable: true, resizeable: true, rowEditor: false, rowReorder: false, rowReorderIcon: 'pi pi-bars', rowSpan: null, selectionMode: null, showAddButton: true, showApplyButton: true, showClearButton: true, showFilterMatchModes: true, showFilterMenu: true, showFilterMenuOptions: true, showFilterOperator: true, sortField: null, sortFunction: null, sortable: false, sortableDisabled: false, style: null, children: undefined }, getCProp: function getCProp(column, name) { return utils.ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps); }, getCProps: function getCProps(column) { return utils.ObjectUtils.getComponentProps(column, ColumnBase.defaultProps); }, getCOtherProps: function getCOtherProps(column) { return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps); } }; var TreeTableBase = { defaultProps: { __TYPE: 'TreeTable', alwaysShowPaginator: true, className: null, columnResizeMode: 'fit', contextMenuSelectionKey: null, currentPageReportTemplate: '({currentPage} of {totalPages})', defaultSortOrder: 1, emptyMessage: null, expandedKeys: null, filterDelay: 300, filterLocale: undefined, filterMode: 'lenient', filters: null, first: null, footer: null, footerColumnGroup: null, frozenFooterColumnGroup: null, frozenHeaderColumnGroup: null, frozenWidth: null, globalFilter: null, globalFilterMatchMode: PrimeReact.FilterMatchMode.CONTAINS, header: null, headerColumnGroup: null, id: null, lazy: false, loading: false, loadingIcon: 'pi pi-spinner', metaKeySelection: true, multiSortMeta: null, onColReorder: null, onCollapse: null, onColumnResizeEnd: null, onContextMenu: null, onContextMenuSelectionChange: null, onExpand: null, onFilter: null, onPage: null, onRowClick: null, onSelect: null, onSelectionChange: null, onSort: null, onToggle: null, onUnselect: null, pageLinkSize: 5, paginator: false, paginatorClassName: null, paginatorDropdownAppendTo: null, paginatorLeft: null, paginatorPosition: 'bottom', paginatorRight: null, paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', propagateSelectionDown: true, propagateSelectionUp: true, removableSort: false, reorderableColumns: false, resizableColumns: false, rowClassName: null, rowHover: false, rows: null, rowsPerPageOptions: null, scrollHeight: null, scrollable: false, selectOnEdit: true, selectionKeys: null, selectionMode: null, showGridlines: false, sortField: null, sortMode: 'single', sortOrder: null, stripedRows: false, style: null, tabIndex: 0, tableClassName: null, tableStyle: null, totalRecords: null, value: null, children: undefined }, getProps: function getProps(props) { return utils.ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps); }, getOtherProps: function getOtherProps(props) { return utils.ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps); } }; var TreeTableBodyCell = function TreeTableBodyCell(props) { var _React$useState = React__namespace.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), editingState = _React$useState2[0], setEditingState = _React$useState2[1]; var elementRef = React__namespace.useRef(null); var keyHelperRef = React__namespace.useRef(null); var selfClick = React__namespace.useRef(false); var overlayEventListener = React__namespace.useRef(null); var tabIndexTimeout = React__namespace.useRef(null); var _useEventListener = hooks.useEventListener({ type: 'click', listener: function listener(e) { if (!selfClick.current && isOutsideClicked(e.target)) { switchCellToViewMode(e); } selfClick.current = false; } }), _useEventListener2 = _slicedToArray(_useEventListener, 2), bindDocumentClickListener = _useEventListener2[0], unbindDocumentClickListener = _useEventListener2[1]; var onClick = function onClick() { if (props.editor && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) { selfClick.current = true; setEditingState(true); bindDocumentClickListener(); overlayEventListener.current = function (e) { if (!isOutsideClicked(e.target)) { selfClick.current = true; } }; overlayservice.OverlayService.on('overlay-click', overlayEventListener.current); } }; var onKeyDown = function onKeyDown(event) { if (event.which === 13 || event.which === 9) { switchCellToViewMode(event); } }; var isOutsideClicked = function isOutsideClicked(target) { return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target)); }; var closeCell = function closeCell() { /* When using the 'tab' key, the focus event of the next cell is not called in IE. */ setTimeout(function () { setEditingState(false); unbindDocumentClickListener(); overlayservice.OverlayService.off('overlay-click', overlayEventListener.current); overlayEventListener.current = null; }, 1); }; var onEditorFocus = function onEditorFocus(event) { onClick(); }; var switchCellToViewMode = function switchCellToViewMode(event) { if (props.cellEditValidator) { var valid = props.cellEditValidator({ originalEvent: event, columnProps: props }); if (valid) { closeCell(); } } else { closeCell(); } }; React__namespace.useEffect(function () { if (elementRef.current && props.editor) { clearTimeout(tabIndexTimeout.current); if (editingState) { var focusable = utils.DomHandler.findSingle(elementRef.current, 'input'); if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) { focusable.setAttribute('data-isCellEditing', true); focusable.focus(); } keyHelperRef.current.tabIndex = -1; } else { tabIndexTimeout.current = setTimeout(function () { if (keyHelperRef.current) { keyHelperRef.current.setAttribute('tabindex', 0); } }, 50); } } }); hooks.useUnmountEffect(function () { if (overlayEventListener.current) { overlayservice.OverlayService.off('overlay-click', overlayEventListener.current); overlayEventListener.current = null; } }); var bodyClassName = utils.ObjectUtils.getPropValue(props.bodyClassName, props.node.data, { field: props.field, rowIndex: props.rowIndex, props: props }); var className = utils.classNames(bodyClassName || props.className, { 'p-editable-column': props.editor, 'p-cell-editing': props.editor ? editingState : false }); var style = props.bodyStyle || props.style; var content; if (editingState) { if (props.editor) content = utils.ObjectUtils.getJSXElement(props.editor, { node: props.node, rowData: props.node.data, value: utils.ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props: props });else throw new Error('Editor is not found on column.'); } else { if (props.body) content = utils.ObjectUtils.getJSXElement(props.body, props.node, { field: props.field, rowIndex: props.rowIndex, props: props });else content = utils.ObjectUtils.resolveFieldData(props.node.data, props.field); } /* eslint-disable */ var editorKeyHelper = props.editor && /*#__PURE__*/React__namespace.createElement("a", { tabIndex: 0, ref: keyHelperRef, className: "p-cell-editor-key-helper p-hidden-accessible", onFocus: onEditorFocus }, /*#__PURE__*/React__namespace.createElement("span", null)); /* eslint-enable */ return /*#__PURE__*/React__namespace.createElement("td", { ref: elementRef, className: className, style: style, onClick: onClick, onKeyDown: onKeyDown }, props.children, editorKeyHelper, content); }; TreeTableBodyCell.displayName = 'TreeTableBodyCell'; function _createForOfIteratorHelper$3(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); } function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) { var elementRef = React__namespace.useRef(null); var checkboxRef = React__namespace.useRef(null); var checkboxBoxRef = React__namespace.useRef(null); var nodeTouched = React__namespace.useRef(false); var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false; var getColumnProp = function getColumnProp(column, name) { return ColumnBase.getCProp(column, name); }; var onTogglerClick = function onTogglerClick(event) { expanded ? collapse(event) : expand(event); event.preventDefault(); event.stopPropagation(); }; var expand = function expand(event) { var expandedKeys = props.expandedKeys ? _objectSpread$2({}, props.expandedKeys) : {}; expandedKeys[props.node.key] = true; props.onToggle({ originalEvent: event, value: expandedKeys }); invokeToggleEvents(event, true); }; var collapse = function collapse(event) { var expandedKeys = _objectSpread$2({}, props.expandedKeys); delete expandedKeys[props.node.key]; props.onToggle({ originalEvent: event, value: expandedKeys }); invokeToggleEvents(event, false); }; var invokeToggleEvents = function invokeToggleEvents(event, expanded) { if (expanded) { if (props.onExpand) { props.onExpand({ originalEvent: event, node: props.node }); } } else { if (props.onCollapse) { props.onCollapse({ originalEvent: event, node: props.node }); } } }; var onClick = function onClick(event) { if (props.onRowClick) { props.onRowClick(event, props.node); } nodeTouched.current = false; }; var onTouchEnd = function onTouchEnd() { nodeTouched.current = true; }; var onCheckboxChange = function onCheckboxChange(event) { var checked = isChecked(); var selectionKeys = props.selectionKeys ? _objectSpread$2({}, props.selectionKeys) : {}; if (checked) { if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);else delete selectionKeys[props.node.key]; if (props.propagateSelectionUp && props.onPropagateUp) { props.onPropagateUp({ originalEvent: event, check: false, selectionKeys: selectionKeys }); } if (props.onUnselect) { props.onUnselect({ originalEvent: event, node: props.node }); } } else { if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);else selectionKeys[props.node.key] = { checked: true }; if (props.propagateSelectionUp && props.onPropagateUp) { props.onPropagateUp({ originalEvent: event, check: true, selectionKeys: selectionKeys }); } if (props.onSelect) { props.onSelect({ originalEvent: event, node: props.node }); } } if (props.onSelectionChange) { props.onSelectionChange({ originalEvent: event, value: selectionKeys }); } utils.DomHandler.clearSelection(); }; var onCheckboxFocus = function onCheckboxFocus() { utils.DomHandler.addClass(checkboxBoxRef.current, 'p-focus'); utils.DomHandler.addClass(checkboxRef.current, 'p-checkbox-focused'); }; var onCheckboxBlur = function onCheckboxBlur() { utils.DomHandler.removeClass(checkboxBoxRef.current, 'p-focus'); utils.DomHandler.removeClass(checkboxRef.current, 'p-checkbox-focused'); }; var propagateUp = function propagateUp(event) { var check = event.check; var selectionKeys = event.selectionKeys; var checkedChildCount = 0; var childPartialSelected = false; var _iterator = _createForOfIteratorHelper$3(props.node.children), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var child = _step.value; if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;else if (selectionKeys[child.key] && selectionKeys[child.key].partialChecked) childPartialSelected = true; } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } if (check && checkedChildCount === props.node.children.length) { selectionKeys[props.node.key] = { checked: true, partialChecked: false }; } else { if (!check) { delete selectionKeys[props.node.key]; } if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== props.node.children.length) selectionKeys[props.node.key] = { checked: false, partialChecked: true };else selectionKeys[props.node.key] = { checked: false, partialChecked: false }; } if (props.propagateSelectionUp && props.onPropagateUp) { props.onPropagateUp(event); } }; var propagateDown = function propagateDown(node, check, selectionKeys) { if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };else delete selectionKeys[node.key]; if (node.children && node.children.length) { for (var i = 0; i < node.children.length; i++) { propagateDown(node.children[i], check, selectionKeys); } } }; var onRightClick = function onRightClick(event) { utils.DomHandler.clearSelection(); if (props.onContextMenuSelectionChange) { props.onContextMenuSelectionChange({ originalEvent: event, value: props.node.key }); } if (props.onContextMenu) { props.onContextMenu({ originalEvent: event, node: props.node }); } }; var onKeyDown = function onKeyDown(event) { if (event.target === elementRef.current) { var rowElement = event.currentTarget; switch (event.which) { //down arrow case 40: var nextRow = rowElement.nextElementSibling; if (nextRow) { nextRow.focus(); } event.preventDefault(); break; //up arrow case 38: var previousRow = rowElement.previousElementSibling; if (previousRow) { previousRow.focus(); } event.preventDefault(); break; //right arrow case 39: if (!expanded) { expand(event); } event.preventDefault(); break; //left arrow case 37: if (expanded) { collapse(event); } event.preventDefault(); break; //enter case 13: onClick(event); event.preventDefault(); break; } } }; var isSelected = function isSelected() { if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;else return false; }; var isChecked = function isChecked() { return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false; }; var isPartialChecked = function isPartialChecked() { return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false; }; var createToggler = function createToggler() { var label = expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel'); var iconClassName = utils.classNames('p-treetable-toggler-icon pi pi-fw', { 'pi-chevron-right': !expanded, 'pi-chevron-down': expanded }); var style = { marginLeft: props.level * 16 + 'px', visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden' }; return /*#__PURE__*/React__namespace.createElement("button", { type: "button", className: "p-treetable-toggler p-link p-unselectable-text", onClick: onTogglerClick, tabIndex: -1, style: style, "aria-label": label }, /*#__PURE__*/React__namespace.createElement("i", { className: iconClassName, "aria-hidden": "true" }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)); }; var createCheckbox = function createCheckbox() { if (props.selectionMode === 'checkbox' && props.node.selectable !== false) { var checked = isChecked(); var partialChecked = isPartialChecked(); var _className = utils.classNames('p-checkbox-box', { 'p-highlight': checked, 'p-indeterminate': partialChecked }); var icon = utils.classNames('p-checkbox-icon p-c', { 'pi pi-check': checked, 'pi pi-minus': partialChecked }); return /*#__PURE__*/React__namespace.createElement("div", { className: "p-checkbox p-treetable-checkbox p-component", ref: checkboxRef, onClick: onCheckboxChange, role: "checkbox", "aria-checked": checked }, /*#__PURE__*/React__namespace.createElement("div", { className: "p-hidden-accessible" }, /*#__PURE__*/React__namespace.createElement("input", { type: "checkbox", onFocus: onCheckboxFocus, onBlur: onCheckboxBlur })), /*#__PURE__*/React__namespace.createElement("div", { className: _className, ref: checkboxBoxRef }, /*#__PURE__*/React__namespace.createElement("span", { className: icon }))); } else { return null; } }; var createCell = function createCell(column, index) { var toggler, checkbox; if (getColumnProp(column, 'expander')) { toggler = createToggler(); checkbox = createCheckbox(); } return /*#__PURE__*/React__namespace.createElement(TreeTableBodyCell, _extends({ key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index) }, ColumnBase.getCProps(column), { column: column, selectOnEdit: props.selectOnEdit, selected: isSelected(), node: props.node, rowIndex: props.rowIndex }), toggler, checkbox); }; var createChildren = function createChildren() { if (expanded && props.node.children) { return props.node.children.map(function (childNode, index) { return /*#__PURE__*/React__namespace.createElement(TreeTableRow, { key: "".concat(childNode.key || JSON.stringify(childNode.data), "_").concat(index), level: props.level + 1, rowIndex: props.rowIndex + '_' + index, node: childNode, columns: props.columns, expandedKeys: props.expandedKeys, selectOnEdit: props.selectOnEdit, onToggle: props.onToggle, onExpand: props.onExpand, onCollapse: props.onCollapse, selectionMode: props.selectionMode, selectionKeys: props.selectionKeys, onSelectionChange: props.onSelectionChange, metaKeySelection: props.metaKeySelection, onRowClick: props.onRowClick, onSelect: props.onSelect, onUnselect: props.onUnselect, propagateSelectionUp: props.propagateSelectionUp, propagateSelectionDown: props.propagateSelectionDown, onPropagateUp: propagateUp, rowClassName: props.rowClassName, contextMenuSelectionKey: props.contextMenuSelectionKey, onContextMenuSelectionChange: props.onContextMenuSelectionChange, onContextMenu: props.onContextMenu }); }); } else { return null; } }; var cells = props.columns.map(createCell); var children = createChildren(); var className = { 'p-highlight': isSelected(), 'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key }; if (props.rowClassName) { var rowClassName = props.rowClassName(props.node); className = _objectSpread$2(_objectSpread$2({}, className), rowClassName); } className = utils.classNames(className, props.node.className); return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", { ref: elementRef, tabIndex: 0, className: className, style: props.node.style, onClick: onClick, onTouchEnd: onTouchEnd, onContextMenu: onRightClick, onKeyDown: onKeyDown }, cells), children); }); TreeTableRow.displayName = 'TreeTableRow'; function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) { var isSingleSelectionMode = props.selectionMode === 'single'; var isMultipleSelectionMode = props.selectionMode === 'multiple'; var flattenizeTree = function flattenizeTree(nodes) { var rows = []; nodes = nodes || props.value; var _iterator = _createForOfIteratorHelper$2(nodes), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var node = _step.value; rows.push(node.key); if (isExpandedKey(node.key)) { rows = rows.concat(flattenizeTree(node.children)); } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } return rows; }; var isExpandedKey = function isExpandedKey(key) { return props.expandedKeys && !!props.expandedKeys[key]; }; var onRowClick = function onRowClick(event, node) { if (props.onRowClick) { props.onRowClick({ originalEvent: event, node: node }); } var targetNode = event.target.nodeName; if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || utils.DomHandler.hasClass(event.target, 'p-clickable')) { return; } if ((isSingleSelectionMode || isMultipleSelectionMode) && node.selectable !== false) { var selectionKeys; var selected = isSelected(node); var metaSelection = props.metaKeySelection; var flatKeys = flattenizeTree(); var rowIndex = flatKeys.findIndex(function (key) { return key === node.key; }); if (isMultipleSelectionMode && event.shiftKey) { utils.DomHandler.clearSelection(); // find first selected row var anchorRowIndex = flatKeys.findIndex(function (key) { return props.selectionKeys[key]; }); var rangeStart = Math.min(rowIndex, anchorRowIndex); var rangeEnd = Math.max(rowIndex, anchorRowIndex); selectionKeys = _objectSpread$1({}, props.selectionKeys); for (var i = rangeStart; i <= rangeEnd; i++) { var rowKey = flatKeys[i]; selectionKeys[rowKey] = true; } } else { //anchorRowIndex = rowIndex; if (metaSelection) { var metaKey = event.metaKey || event.ctrlKey; if (selected && metaKey) { if (isSingleSelectionMode) { selectionKeys = null; } else { selectionKeys = _objectSpread$1({}, props.selectionKeys); delete selectionKeys[node.key]; } if (props.onUnselect) { props.onUnselect({ originalEvent: event, node: node }); } } else { if (isSingleSelectionMode) { selectionKeys = node.key; } else if (isMultipleSelectionMode) { selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {}; selectionKeys[node.key] = true; } if (props.onSelect) { props.onSelect({ originalEvent: event, node: node }); } } } else { if (isSingleSelectionMode) { if (selected) { selectionKeys = null; if (props.onUnselect) { props.onUnselect({ originalEvent: event, node: node }); } } else { selectionKeys = node.key; if (props.onSelect) { props.onSelect({ originalEvent: event, node: node }); } } } else { if (selected) { selectionKeys = _objectSpread$1({}, props.selectionKeys); delete selectionKeys[node.key]; if (props.onUnselect) { props.onUnselect({ originalEvent: event, node: node }); } } else { selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {}; selectionKeys[node.key] = true; if (props.onSelect) { props.onSelect({ originalEvent: event, node: node }); } } } } } if (props.onSelectionChange) { props.onSelectionChange({ originalEvent: event, value: selectionKeys }); } } }; var isSelected = function isSelected(node) { if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;else return false; }; var createRow = function createRow(node, index) { return /*#__PURE__*/React__namespace.createElement(TreeTableRow, { key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index), level: 0, rowIndex: index, selectOnEdit: props.selectOnEdit, node: node, columns: props.columns, expandedKeys: props.expandedKeys, onToggle: props.onToggle, onExpand: props.onExpand, onCollapse: props.onCollapse, selectionMode: props.selectionMode, selectionKeys: props.selectionKeys, onSelectionChange: props.onSelectionChange, metaKeySelection: props.metaKeySelection, onRowClick: onRowClick, onSelect: props.onSelect, onUnselect: props.onUnselect, propagateSelectionUp: props.propagateSelectionUp, propagateSelectionDown: props.propagateSelectionDown, rowClassName: props.rowClassName, contextMenuSelectionKey: props.contextMenuSelectionKey, onContextMenuSelectionChange: props.onContextMenuSelectionChange, onContextMenu: props.onContextMenu }); }; var createRows = function createRows() { if (props.paginator && !props.lazy) { var rpp = props.rows || 0; var startIndex = props.first || 0; var endIndex = startIndex + rpp; var rows = []; for (var i = startIndex; i < endIndex; i++) { var rowData = props.value[i]; if (rowData) rows.push(createRow(props.value[i]));else break; } return rows; } else { return props.value.map(createRow); } }; var createEmptyMessage = function createEmptyMessage() { if (props.loading) { return null; } else { var colSpan = props.columns ? props.columns.length : null; var _content = props.emptyMessage || PrimeReact.localeOption('emptyMessage'); return /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", { className: "p-treetable-emptymessage", colSpan: colSpan }, _content)); } }; var content = props.value && props.value.length ? createRows() : createEmptyMessage(); return /*#__PURE__*/React__namespace.createElement("tbody", { className: "p-treetable-tbody" }, content); }); TreeTableBody.displayName = 'TreeTableBody'; var ColumnGroupBase = { defaultProps: { __TYPE: 'ColumnGroup', children: undefined }, getCProp: function getCProp(group, name) { return utils.ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps); }, getCProps: function getCProps(group) { return utils.ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps); } }; var RowBase = { defaultProps: { __TYPE: 'Row', style: null, className: null, children: undefined }, getProps: function getProps(props) { return utils.ObjectUtils.getMergedProps(props, RowBase.defaultProps); }, getOtherProps: function getOtherProps(props) { return utils.ObjectUtils.getDiffProps(props, RowBase.defaultProps); }, getCProp: function getCProp(row, name) { return utils.ObjectUtils.getComponentProp(row, name, RowBase.defaultProps); } }; var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) { var getColumnProp = function getColumnProp(column, name) { return ColumnBase.getCProp(column, name); }; var createFooterCell = function createFooterCell(column, index) { return /*#__PURE__*/React__namespace.createElement("td", { key: column.field || index, className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'), style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'), rowSpan: getColumnProp(column, 'rowSpan'), colSpan: getColumnProp(column, 'colSpan') }, getColumnProp(column, 'footer')); }; var createFooterRow = function createFooterRow(row, index) { var rowColumns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children')); var rowFooterCells = rowColumns.map(createFooterCell); return /*#__PURE__*/React__namespace.createElement("tr", { key: index }, rowFooterCells); }; var createColumnGroup = function createColumnGroup() { var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children')); return rows.map(createFooterRow); }; var createColumns = function createColumns(columns) { if (columns) { var headerCells = columns.map(createFooterCell); return /*#__PURE__*/React__namespace.createElement("tr", null, headerCells); } else { return null; } }; var hasFooter = function hasFooter() { if (props.columnGroup) { return true; } else { for (var i = 0; i < props.columns.length; i++) { if (getColumnProp(props.columns[i], 'footer')) { return true; } } } return false; }; var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns); if (hasFooter()) { return /*#__PURE__*/React__namespace.createElement("tfoot", { className: "p-treetable-tfoot" }, content); } else { return null; } }); TreeTableFooter.displayName = 'TreeTableFooter'; function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) { var filterTimeout = React__namespace.useRef(null); var onHeaderClick = function onHeaderClick(event, column) { if (getColumnProp(column, 'sortable')) { var targetNode = event.target; if (utils.DomHandler.hasClass(targetNode, 'p-sortable-column') || utils.DomHandler.hasClass(targetNode, 'p-column-title') || utils.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || utils.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) { props.onSort({ originalEvent: event, sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'), sortFunction: getColumnProp(column, 'sortFunction'), sortable: getColumnProp(column, 'sortable') }); utils.DomHandler.clearSelection(); } } }; var onHeaderMouseDown = function onHeaderMouseDown(event, column) { if (props.reorderableColumns && getColumnProp(column, 'reorderable')) { if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false; } }; var onHeaderKeyDown = function onHeaderKeyDown(event, column) { if (event.key === 'Enter') { onHeaderClick(event, column); event.preventDefault(); } }; var getMultiSortMetaDataIndex = function getMultiSortMetaDataIndex(column) { if (props.multiSortMeta) { for (var i = 0; i < props.multiSortMeta.length; i++) { if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) { return i; } } } return -1; }; var onResizerMouseDown = function onResizerMouseDown(event, column) { if (props.resizableColumns && props.onResizeStart) { props.onResizeStart({ originalEvent: event, columnEl: event.target.parentElement, column: column }); } }; var _onDragStart = function onDragStart(event, column) { if (props.onDragStart) { props.onDragStart({ originalEvent: event, column: column }); } }; var _onDragOver = function onDragOver(event, column) { if (props.onDragOver) { props.onDragOver({ originalEvent: event, column: column }); } }; var _onDragLeave = function onDragLeave(event, column) { if (props.onDragLeave) { props.onDragLeave({ originalEvent: event, column: column }); } }; var _onDrop = function onDrop(event, column) { if (props.onDrop) { props.onDrop({ originalEvent: event, column: column }); } }; var onFilterInput = function onFilterInput(e, column) { if (getColumnProp(column, 'filter') && props.onFilter) { if (filterTimeout.current) { clearTimeout(filterTimeout.current); } var filterValue = e.target.value; filterTimeout.current = setTimeout(function () { props.onFilter({ value: filterValue, field: getColumnProp(column, 'field'), matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith' }); filterTimeout.current = null; }, props.filterDelay); } }; var hasColumnFilter = function hasColumnFilter(columns) { if (columns) { var _iterator = _createForOfIteratorHelper$1(columns)