this.primereact = this.primereact || {}; this.primereact.datatable = (function (exports, React, paginator, utils, PrimeReact, overlayservice, ripple, csstransition, portal, inputtext, dropdown, button, virtualscroller) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact); function _extends() { _extends = Object.assign || 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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayLikeToArray(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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o, minLen); } 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(arr, i) || _nonIterableRest(); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } 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(arr) || _nonIterableSpread(); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var RowRadioButton = /*#__PURE__*/function (_Component) { _inherits(RowRadioButton, _Component); var _super = _createSuper$c(RowRadioButton); function RowRadioButton(props) { var _this; _classCallCheck(this, RowRadioButton); _this = _super.call(this, props); _this.state = { focused: false }; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this)); _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this)); _this.onChange = _this.onChange.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); return _this; } _createClass(RowRadioButton, [{ key: "onClick", value: function onClick(event) { if (!this.props.disabled) { this.props.onChange(event); this.input.focus(); } } }, { key: "onFocus", value: function onFocus() { this.setState({ focused: true }); } }, { key: "onBlur", value: function onBlur() { this.setState({ focused: false }); } }, { key: "onChange", value: function onChange(event) { this.onClick(event); } }, { key: "onKeyDown", value: function onKeyDown(event) { if (event.code === 'Space') { this.onClick(event); event.preventDefault(); } } }, { key: "render", value: function render() { var _this2 = this; var className = utils.classNames('p-radiobutton p-component', { 'p-radiobutton-focused': this.state.focused }); var boxClassName = utils.classNames('p-radiobutton-box p-component', { 'p-highlight': this.props.checked, 'p-focus': this.state.focused, 'p-disabled': this.props.disabled }); var name = "".concat(this.props.tableSelector, "_dt_radio"); return /*#__PURE__*/React__default["default"].createElement("div", { className: className }, /*#__PURE__*/React__default["default"].createElement("div", { className: "p-hidden-accessible" }, /*#__PURE__*/React__default["default"].createElement("input", { name: name, ref: function ref(el) { return _this2.input = el; }, type: "radio", checked: this.props.checked, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, onKeyDown: this.onKeyDown })), /*#__PURE__*/React__default["default"].createElement("div", { className: boxClassName, onClick: this.onClick, role: "radio", "aria-checked": this.props.checked }, /*#__PURE__*/React__default["default"].createElement("div", { className: "p-radiobutton-icon" }))); } }]); return RowRadioButton; }(React.Component); function _createSuper$b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$b(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var RowCheckbox = /*#__PURE__*/function (_Component) { _inherits(RowCheckbox, _Component); var _super = _createSuper$b(RowCheckbox); function RowCheckbox(props) { var _this; _classCallCheck(this, RowCheckbox); _this = _super.call(this, props); _this.state = { focused: false }; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this)); _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); return _this; } _createClass(RowCheckbox, [{ key: "onClick", value: function onClick(event) { if (!this.props.disabled) { this.setState({ focused: true }); this.props.onChange(event); } } }, { key: "onFocus", value: function onFocus() { this.setState({ focused: true }); } }, { key: "onBlur", value: function onBlur() { this.setState({ focused: false }); } }, { key: "onKeyDown", value: function onKeyDown(event) { if (event.code === 'Space') { this.onClick(event); event.preventDefault(); } } }, { key: "render", value: function render() { var className = utils.classNames('p-checkbox p-component', { 'p-checkbox-focused': this.state.focused }); var boxClassName = utils.classNames('p-checkbox-box p-component', { 'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused }); var iconClassName = utils.classNames('p-checkbox-icon', { 'pi pi-check': this.props.checked }); var tabIndex = this.props.disabled ? null : '0'; return /*#__PURE__*/React__default["default"].createElement("div", { className: className, onClick: this.onClick }, /*#__PURE__*/React__default["default"].createElement("div", { className: boxClassName, role: "checkbox", "aria-checked": this.props.checked, tabIndex: tabIndex, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur }, /*#__PURE__*/React__default["default"].createElement("span", { className: iconClassName }))); } }]); return RowCheckbox; }(React.Component); function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var BodyCell = /*#__PURE__*/function (_Component) { _inherits(BodyCell, _Component); var _super = _createSuper$a(BodyCell); function BodyCell(props) { var _this; _classCallCheck(this, BodyCell); _this = _super.call(this, props); _this.state = { editing: props.editing, editingRowData: props.rowData, styleObject: {} }; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this)); _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this)); _this.onEditorFocus = _this.onEditorFocus.bind(_assertThisInitialized(_this)); _this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this)); _this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this)); _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this)); _this.onRowEditSave = _this.onRowEditSave.bind(_assertThisInitialized(_this)); _this.onRowEditCancel = _this.onRowEditCancel.bind(_assertThisInitialized(_this)); _this.onRowEditInit = _this.onRowEditInit.bind(_assertThisInitialized(_this)); _this.editorCallback = _this.editorCallback.bind(_assertThisInitialized(_this)); return _this; } _createClass(BodyCell, [{ key: "field", get: function get() { return this.getColumnProp('field') || "field_".concat(this.props.index); } }, { key: "isEditable", value: function isEditable() { return this.getColumnProp('editor'); } }, { key: "isSelected", value: function isSelected() { return this.props.selection ? this.props.selection instanceof Array ? this.findIndex(this.props.selection) > -1 : this.equals(this.props.selection) : false; } }, { key: "equalsData", value: function equalsData(data) { return this.props.compareSelectionBy === 'equals' ? data === this.props.rowData : utils.ObjectUtils.equals(data, this.props.rowData, this.props.dataKey); } }, { key: "equals", value: function equals(selectedCell) { return (selectedCell.rowIndex === this.props.rowIndex || this.equalsData(selectedCell.rowData)) && (selectedCell.field === this.field || selectedCell.cellIndex === this.props.index); } }, { key: "isOutsideClicked", value: function isOutsideClicked(target) { return this.el && !(this.el.isSameNode(target) || this.el.contains(target)); } }, { key: "getColumnProp", value: function getColumnProp(prop) { return this.props.column ? this.props.column.props[prop] : null; } }, { key: "getVirtualScrollerOption", value: function getVirtualScrollerOption(option) { return this.props.virtualScrollerOptions ? this.props.virtualScrollerOptions[option] : null; } }, { key: "getStyle", value: function getStyle() { var bodyStyle = this.getColumnProp('bodyStyle'); var columnStyle = this.getColumnProp('style'); return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, this.state.styleObject) : Object.assign({}, columnStyle, bodyStyle); } }, { key: "getCellParams", value: function getCellParams() { return { value: this.resolveFieldData(), field: this.field, rowData: this.props.rowData, rowIndex: this.props.rowIndex, cellIndex: this.props.index, selected: this.isSelected(), column: this.props.column, props: this.props }; } }, { key: "getCellCallbackParams", value: function getCellCallbackParams(event) { var params = this.getCellParams(); return _objectSpread$7({ originalEvent: event }, params); } }, { key: "resolveFieldData", value: function resolveFieldData(data) { return utils.ObjectUtils.resolveFieldData(data || this.props.rowData, this.field); } }, { key: "getEditingRowData", value: function getEditingRowData() { return this.props.editingMeta && this.props.editingMeta[this.props.rowIndex] ? this.props.editingMeta[this.props.rowIndex].data : this.props.rowData; } }, { key: "getTabIndex", value: function getTabIndex(cellSelected) { return this.props.allowCellSelection ? cellSelected ? 0 : this.props.rowIndex === 0 && this.props.index === 0 ? this.props.tabIndex : -1 : null; } }, { key: "findIndex", value: function findIndex(collection) { var _this2 = this; return (collection || []).findIndex(function (data) { return _this2.equals(data); }); } }, { key: "closeCell", value: function closeCell(event) { var _this3 = this; var params = this.getCellCallbackParams(event); var onBeforeCellEditHide = this.getColumnProp('onBeforeCellEditHide'); if (onBeforeCellEditHide) { onBeforeCellEditHide(params); } /* When using the 'tab' key, the focus event of the next cell is not called in IE. */ setTimeout(function () { _this3.setState({ editing: false }, function () { _this3.unbindDocumentEditListener(); overlayservice.OverlayService.off('overlay-click', _this3.overlayEventListener); _this3.overlayEventListener = null; }); }, 1); } }, { key: "switchCellToViewMode", value: function switchCellToViewMode(event, submit) { var callbackParams = this.getCellCallbackParams(event); var newRowData = this.state.editingRowData; var newValue = this.resolveFieldData(newRowData); var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, { newRowData: newRowData, newValue: newValue }); var onCellEditCancel = this.getColumnProp('onCellEditCancel'); var cellEditValidator = this.getColumnProp('cellEditValidator'); var onCellEditComplete = this.getColumnProp('onCellEditComplete'); if (!submit && onCellEditCancel) { onCellEditCancel(params); } var valid = true; if (cellEditValidator) { valid = cellEditValidator(params); } if (valid) { if (submit && onCellEditComplete) { onCellEditComplete(params); } this.closeCell(event); } else { event.preventDefault(); } } }, { key: "findNextSelectableCell", value: function findNextSelectableCell(cell) { var nextCell = cell.nextElementSibling; return nextCell ? utils.DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableCell(nextCell) : null; } }, { key: "findPrevSelectableCell", value: function findPrevSelectableCell(cell) { var prevCell = cell.previousElementSibling; return prevCell ? utils.DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableCell(prevCell) : null; } }, { key: "findDownSelectableCell", value: function findDownSelectableCell(cell) { var downRow = cell.parentElement.nextElementSibling; var downCell = downRow ? downRow.children[this.props.index] : null; return downRow && downCell ? utils.DomHandler.hasClass(downRow, 'p-selectable-row') && utils.DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : this.findDownSelectableCell(downCell) : null; } }, { key: "findUpSelectableCell", value: function findUpSelectableCell(cell) { var upRow = cell.parentElement.previousElementSibling; var upCell = upRow ? upRow.children[this.props.index] : null; return upRow && upCell ? utils.DomHandler.hasClass(upRow, 'p-selectable-row') && utils.DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : this.findUpSelectableCell(upCell) : null; } }, { key: "changeTabIndex", value: function changeTabIndex(currentCell, nextCell) { if (currentCell && nextCell) { currentCell.tabIndex = -1; nextCell.tabIndex = this.props.tabIndex; } } }, { key: "focusOnElement", value: function focusOnElement() { var _this4 = this; clearTimeout(this.tabindexTimeout); this.tabindexTimeout = setTimeout(function () { if (_this4.state.editing) { var focusableEl = _this4.props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)') : utils.DomHandler.findSingle(_this4.el, '.p-row-editor-save'); focusableEl && focusableEl.focus(); } _this4.keyHelper && (_this4.keyHelper.tabIndex = _this4.state.editing ? -1 : 0); }, 1); } }, { key: "focusOnInit", value: function focusOnInit() { var _this5 = this; clearTimeout(this.initFocusTimeout); this.initFocusTimeout = setTimeout(function () { var focusableEl = _this5.props.editMode === 'row' ? utils.DomHandler.findSingle(_this5.el, '.p-row-editor-init') : null; focusableEl && focusableEl.focus(); }, 1); } }, { key: "updateStickyPosition", value: function updateStickyPosition() { if (this.getColumnProp('frozen')) { var styleObject = _objectSpread$7({}, this.state.styleObject); var align = this.getColumnProp('alignFrozen'); if (align === 'right') { var right = 0; var next = this.el.nextElementSibling; if (next) { right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); } styleObject['right'] = right + 'px'; } else { var left = 0; var prev = this.el.previousElementSibling; if (prev) { left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); } styleObject['left'] = left + 'px'; } var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right']; !isSameStyle && this.setState({ styleObject: styleObject }); } } }, { key: "editorCallback", value: function editorCallback(val) { var editingRowData = _objectSpread$7({}, this.state.editingRowData); editingRowData[this.field] = val; this.setState({ editingRowData: editingRowData }); // update editing meta for complete methods on row mode this.props.editingMeta[this.props.rowIndex].data[this.field] = val; } }, { key: "onClick", value: function onClick(event) { var _this6 = this; var params = this.getCellCallbackParams(event); if (this.props.editMode !== 'row' && this.isEditable() && !this.state.editing && (this.props.selectOnEdit || !this.props.selectOnEdit && this.props.selected)) { this.selfClick = true; var onBeforeCellEditShow = this.getColumnProp('onBeforeCellEditShow'); var onCellEditInit = this.getColumnProp('onCellEditInit'); var cellEditValidatorEvent = this.getColumnProp('cellEditValidatorEvent'); if (onBeforeCellEditShow) { onBeforeCellEditShow(params); } // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened. setTimeout(function () { _this6.setState({ editing: true }, function () { if (onCellEditInit) { onCellEditInit(params); } if (cellEditValidatorEvent === 'click') { _this6.bindDocumentEditListener(); _this6.overlayEventListener = function (e) { if (!_this6.isOutsideClicked(e.target)) { _this6.selfClick = true; } }; overlayservice.OverlayService.on('overlay-click', _this6.overlayEventListener); } }); }, 1); } if (this.props.allowCellSelection && this.props.onClick) { this.props.onClick(params); } } }, { key: "onMouseDown", value: function onMouseDown(event) { var params = this.getCellCallbackParams(event); if (this.props.onMouseDown) { this.props.onMouseDown(params); } } }, { key: "onMouseUp", value: function onMouseUp(event) { var params = this.getCellCallbackParams(event); if (this.props.onMouseUp) { this.props.onMouseUp(params); } } }, { key: "onKeyDown", value: function onKeyDown(event) { if (this.props.editMode !== 'row') { if (event.which === 13 || event.which === 9) { // tab || enter this.switchCellToViewMode(event, true); } if (event.which === 27) { // escape this.switchCellToViewMode(event, false); } } if (this.props.allowCellSelection) { var target = event.target, cell = event.currentTarget; switch (event.which) { //left arrow case 37: var prevCell = this.findPrevSelectableCell(cell); if (prevCell) { this.changeTabIndex(cell, prevCell); prevCell.focus(); } event.preventDefault(); break; //right arrow case 39: var nextCell = this.findNextSelectableCell(cell); if (nextCell) { this.changeTabIndex(cell, nextCell); nextCell.focus(); } event.preventDefault(); break; //up arrow case 38: var upCell = this.findUpSelectableCell(cell); if (upCell) { this.changeTabIndex(cell, upCell); upCell.focus(); } event.preventDefault(); break; //down arrow case 40: var downCell = this.findDownSelectableCell(cell); if (downCell) { this.changeTabIndex(cell, downCell); downCell.focus(); } event.preventDefault(); break; //enter case 13: // @deprecated if (!utils.DomHandler.isClickable(target)) { this.onClick(event); event.preventDefault(); } break; //space case 32: if (!utils.DomHandler.isClickable(target) && !target.readOnly) { this.onClick(event); event.preventDefault(); } break; } } } }, { key: "onBlur", value: function onBlur(event) { this.selfClick = false; if (this.props.editMode !== 'row' && this.state.editing && this.getColumnProp('cellEditValidatorEvent') === 'blur') { this.switchCellToViewMode(event, true); } } }, { key: "onEditorFocus", value: function onEditorFocus(event) { this.onClick(event); } }, { key: "onRadioChange", value: function onRadioChange(event) { this.props.onRadioChange({ originalEvent: event, data: this.props.rowData, index: this.props.rowIndex }); } }, { key: "onCheckboxChange", value: function onCheckboxChange(event) { this.props.onCheckboxChange({ originalEvent: event, data: this.props.rowData, index: this.props.rowIndex }); } }, { key: "onRowToggle", value: function onRowToggle(event) { this.props.onRowToggle({ originalEvent: event, data: this.props.rowData }); event.preventDefault(); } }, { key: "onRowEditInit", value: function onRowEditInit(event) { this.props.onRowEditInit({ originalEvent: event, data: this.props.rowData, newData: this.getEditingRowData(), field: this.field, index: this.props.rowIndex }); } }, { key: "onRowEditSave", value: function onRowEditSave(event) { this.props.onRowEditSave({ originalEvent: event, data: this.props.rowData, newData: this.getEditingRowData(), field: this.field, index: this.props.rowIndex }); this.focusOnInit(); } }, { key: "onRowEditCancel", value: function onRowEditCancel(event) { this.props.onRowEditCancel({ originalEvent: event, data: this.props.rowData, newData: this.getEditingRowData(), field: this.field, index: this.props.rowIndex }); this.focusOnInit(); } }, { key: "bindDocumentEditListener", value: function bindDocumentEditListener() { var _this7 = this; if (!this.documentEditListener) { this.documentEditListener = function (e) { if (!_this7.selfClick && _this7.isOutsideClicked(e.target)) { _this7.switchCellToViewMode(e, true); } _this7.selfClick = false; }; document.addEventListener('click', this.documentEditListener, true); } } }, { key: "unbindDocumentEditListener", value: function unbindDocumentEditListener() { if (this.documentEditListener) { document.removeEventListener('click', this.documentEditListener, true); this.documentEditListener = null; this.selfClick = false; } } }, { key: "componentDidMount", value: function componentDidMount() { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } if (this.props.editMode === 'cell' || this.props.editMode === 'row') { this.focusOnElement(); if (prevProps.editingMeta !== this.props.editingMeta) { this.setState({ editingRowData: this.getEditingRowData() }); } if (prevState.editing !== this.state.editing) { var callbackParams = this.getCellCallbackParams(); var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, { editing: this.state.editing }); this.props.onEditingMetaChange(params); } } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.unbindDocumentEditListener(); if (this.overlayEventListener) { overlayservice.OverlayService.off('overlay-click', this.overlayEventListener); this.overlayEventListener = null; } } }, { key: "renderLoading", value: function renderLoading() { var options = this.getVirtualScrollerOption('getLoaderOptions')(this.props.rowIndex, { cellIndex: this.props.index, cellFirst: this.props.index === 0, cellLast: this.props.index === this.getVirtualScrollerOption('columns').length - 1, cellEven: this.props.index % 2 === 0, cellOdd: this.props.index % 2 !== 0, column: this.props.column, field: this.field }); var content = utils.ObjectUtils.getJSXElement(this.getVirtualScrollerOption('loadingTemplate'), options); return /*#__PURE__*/React__default["default"].createElement("td", null, content); } }, { key: "renderElement", value: function renderElement() { var _this8 = this; var content, editorKeyHelper; var cellSelected = this.props.allowCellSelection && this.isSelected(); var isRowEditor = this.props.editMode === 'row'; var tabIndex = this.getTabIndex(cellSelected); var selectionMode = this.getColumnProp('selectionMode'); var rowReorder = this.getColumnProp('rowReorder'); var expander = this.getColumnProp('expander'); var rowEditor = this.getColumnProp('rowEditor'); var header = this.getColumnProp('header'); var body = this.getColumnProp('body'); var editor = this.getColumnProp('editor'); var frozen = this.getColumnProp('frozen'); var align = this.getColumnProp('align'); var value = this.resolveFieldData(); var cellClassName = utils.ObjectUtils.getPropValue(this.props.cellClassName, value, { props: this.props.tableProps, rowData: this.props.rowData, column: this.props.column }); var className = utils.classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('className'), cellClassName, _defineProperty({ 'p-selection-column': selectionMode !== null, 'p-editable-column': editor, 'p-cell-editing': editor && this.state.editing, 'p-frozen-column': frozen, 'p-selectable-cell': this.props.allowCellSelection && this.props.isSelectable({ data: this.getCellParams(), index: this.props.rowIndex }), 'p-highlight': cellSelected }, "p-align-".concat(align), !!align)); var style = this.getStyle(); var title = this.props.responsiveLayout === 'stack' && /*#__PURE__*/React__default["default"].createElement("span", { className: "p-column-title" }, utils.ObjectUtils.getJSXElement(header, { props: this.props.tableProps })); if (selectionMode) { var showSelection = this.props.showSelectionElement ? this.props.showSelectionElement(this.props.rowData, { rowIndex: this.props.rowIndex, props: this.props.tableProps }) : true; content = showSelection && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__default["default"].createElement(RowRadioButton, { checked: this.props.selected, onChange: this.onRadioChange, tabIndex: this.props.tabIndex, tableSelector: this.props.tableSelector }), selectionMode === 'multiple' && /*#__PURE__*/React__default["default"].createElement(RowCheckbox, { checked: this.props.selected, onChange: this.onCheckboxChange, tabIndex: this.props.tabIndex })); } else if (rowReorder) { var showReorder = this.props.showRowReorderElement ? this.props.showRowReorderElement(this.props.rowData, { rowIndex: this.props.rowIndex, props: this.props.tableProps }) : true; content = showReorder && /*#__PURE__*/React__default["default"].createElement("i", { className: utils.classNames('p-datatable-reorderablerow-handle', this.getColumnProp('rowReorderIcon')) }); } else if (expander) { var iconClassName = utils.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon); var ariaControls = "".concat(this.props.tableSelector, "_content_").concat(this.props.rowIndex, "_expanded"); var expanderProps = { onClick: this.onRowToggle, className: 'p-row-toggler p-link', iconClassName: iconClassName }; content = /*#__PURE__*/React__default["default"].createElement("button", { className: expanderProps.className, onClick: expanderProps.onClick, type: "button", "aria-expanded": this.props.expanded, "aria-controls": ariaControls, tabIndex: this.props.tabIndex }, /*#__PURE__*/React__default["default"].createElement("span", { className: expanderProps.iconClassName }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)); if (body) { expanderProps['element'] = content; content = utils.ObjectUtils.getJSXElement(body, this.props.rowData, { column: this.props.column, field: this.field, rowIndex: this.props.rowIndex, frozenRow: this.props.frozenRow, props: this.props.tableProps, expander: expanderProps }); } } else if (isRowEditor && rowEditor) { var rowEditorProps = {}; if (this.state.editing) { rowEditorProps = { editing: true, onSaveClick: this.onRowEditSave, saveClassName: 'p-row-editor-save p-link', saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check', onCancelClick: this.onRowEditCancel, cancelClassName: 'p-row-editor-cancel p-link', cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times' }; content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", { type: "button", onClick: rowEditorProps.onSaveClick, className: rowEditorProps.saveClassName, tabIndex: this.props.tabIndex }, /*#__PURE__*/React__default["default"].createElement("span", { className: rowEditorProps.saveIconClassName }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("button", { type: "button", onClick: rowEditorProps.onCancelClick, className: rowEditorProps.cancelClassName, tabIndex: this.props.tabIndex }, /*#__PURE__*/React__default["default"].createElement("span", { className: rowEditorProps.cancelIconClassName }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null))); } else { rowEditorProps = { editing: false, onInitClick: this.onRowEditInit, initClassName: 'p-row-editor-init p-link', initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil' }; content = /*#__PURE__*/React__default["default"].createElement("button", { type: "button", onClick: rowEditorProps.onInitClick, className: rowEditorProps.initClassName, tabIndex: this.props.tabIndex }, /*#__PURE__*/React__default["default"].createElement("span", { className: rowEditorProps.initIconClassName }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)); } if (body) { rowEditorProps['element'] = content; content = utils.ObjectUtils.getJSXElement(body, this.props.rowData, { column: this.props.column, field: this.field, rowIndex: this.props.rowIndex, frozenRow: this.props.frozenRow, props: this.props.tableProps, rowEditor: rowEditorProps }); } } else if (body && !this.state.editing) { content = body ? utils.ObjectUtils.getJSXElement(body, this.props.rowData, { column: this.props.column, field: this.field, rowIndex: this.props.rowIndex, frozenRow: this.props.frozenRow, props: this.props.tableProps }) : value; } else if (editor && this.state.editing) { content = utils.ObjectUtils.getJSXElement(editor, { rowData: this.state.editingRowData, value: this.resolveFieldData(this.state.editingRowData), column: this.props.column, field: this.field, rowIndex: this.props.rowIndex, frozenRow: this.props.frozenRow, props: this.props.tableProps, editorCallback: this.editorCallback }); } else { content = value; } if (!isRowEditor && editor) { /* eslint-disable */ editorKeyHelper = /*#__PURE__*/React__default["default"].createElement("a", { tabIndex: "0", ref: function ref(el) { return _this8.keyHelper = el; }, className: "p-cell-editor-key-helper p-hidden-accessible", onFocus: this.onEditorFocus }, /*#__PURE__*/React__default["default"].createElement("span", null)); /* eslint-enable */ } return /*#__PURE__*/React__default["default"].createElement("td", { ref: function ref(el) { return _this8.el = el; }, style: style, className: className, rowSpan: this.props.rowSpan, tabIndex: tabIndex, role: "cell", onClick: this.onClick, onKeyDown: this.onKeyDown, onBlur: this.onBlur, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp }, editorKeyHelper, title, content); } }, { key: "render", value: function render() { return this.getVirtualScrollerOption('loading') ? this.renderLoading() : this.renderElement(); } }], [{ key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(nextProps, prevState) { if (nextProps.editMode === 'row' && nextProps.editing !== prevState.editing) { return { editing: nextProps.editing }; } return null; } }]); return BodyCell; }(React.Component); function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var BodyRow = /*#__PURE__*/function (_Component) { _inherits(BodyRow, _Component); var _super = _createSuper$9(BodyRow); function BodyRow(props) { var _this; _classCallCheck(this, BodyRow); _this = _super.call(this, props); if (!_this.props.onRowEditChange) { _this.state = { editing: false }; } _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onDoubleClick = _this.onDoubleClick.bind(_assertThisInitialized(_this)); _this.onRightClick = _this.onRightClick.bind(_assertThisInitialized(_this)); _this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this)); _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this)); _this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this)); _this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this)); _this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this)); _this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this)); _this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this)); _this.onEditInit = _this.onEditInit.bind(_assertThisInitialized(_this)); _this.onEditSave = _this.onEditSave.bind(_assertThisInitialized(_this)); _this.onEditCancel = _this.onEditCancel.bind(_assertThisInitialized(_this)); return _this; } _createClass(BodyRow, [{ key: "isFocusable", value: function isFocusable() { return this.props.selectionMode && this.props.selectionModeInColumn !== 'single' && this.props.selectionModeInColumn !== 'multiple'; } }, { key: "isGrouped", value: function isGrouped(column) { if (this.props.groupRowsBy && this.getColumnProp(column, 'field')) { if (Array.isArray(this.props.groupRowsBy)) return this.props.groupRowsBy.indexOf(column.props.field) > -1;else return this.props.groupRowsBy === column.props.field; } return false; } }, { key: "equals", value: function equals(data1, data2) { return this.props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey); } }, { key: "getColumnProp", value: function getColumnProp(col, prop) { return col ? col.props[prop] : null; } }, { key: "getEditing", value: function getEditing() { return this.props.onRowEditChange ? this.props.editing : this.state.editing; } }, { key: "getTabIndex", value: function getTabIndex() { return this.isFocusable() && !this.props.allowCellSelection ? this.props.index === 0 ? this.props.tabIndex : -1 : null; } }, { key: "findIndex", value: function findIndex(collection, rowData) { var _this2 = this; return (collection || []).findIndex(function (data) { return _this2.equals(rowData, data); }); } }, { key: "changeTabIndex", value: function changeTabIndex(currentRow, nextRow) { if (currentRow && nextRow) { currentRow.tabIndex = -1; nextRow.tabIndex = this.props.tabIndex; } } }, { key: "findNextSelectableRow", value: function findNextSelectableRow(row) { var nextRow = row.nextElementSibling; return nextRow ? utils.DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null; } }, { key: "findPrevSelectableRow", value: function findPrevSelectableRow(row) { var prevRow = row.previousElementSibling; return prevRow ? utils.DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow) : null; } }, { key: "shouldRenderBodyCell", value: function shouldRenderBodyCell(value, column, i) { if (this.getColumnProp(column, 'hidden')) { return false; } else if (this.props.rowGroupMode && this.props.rowGroupMode === 'rowspan' && this.isGrouped(column)) { var prevRowData = value[i - 1]; if (prevRowData) { var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[i], this.getColumnProp(column, 'field')); var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.getColumnProp(column, 'field')); return currentRowFieldData !== previousRowFieldData; } } return true; } }, { key: "calculateRowGroupSize", value: function calculateRowGroupSize(value, column, index) { if (this.isGrouped(column)) { var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[index], this.getColumnProp(column, 'field')); var nextRowFieldData = currentRowFieldData; var groupRowSpan = 0; while (currentRowFieldData === nextRowFieldData) { groupRowSpan++; var nextRowData = value[++index]; if (nextRowData) { nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.getColumnProp(column, 'field')); } else { break; } } return groupRowSpan === 1 ? null : groupRowSpan; } else { return null; } } }, { key: "onClick", value: function onClick(event) { this.props.onRowClick({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDoubleClick", value: function onDoubleClick(event) { this.props.onRowDoubleClick({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onRightClick", value: function onRightClick(event) { this.props.onRowRightClick({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onTouchEnd", value: function onTouchEnd(event) { this.props.onRowTouchEnd(event); } }, { key: "onKeyDown", value: function onKeyDown(event) { if (this.isFocusable() && !this.props.allowCellSelection) { var target = event.target, row = event.currentTarget; switch (event.which) { //down arrow case 40: var nextRow = this.findNextSelectableRow(row); if (nextRow) { this.changeTabIndex(row, nextRow); nextRow.focus(); } event.preventDefault(); break; //up arrow case 38: var prevRow = this.findPrevSelectableRow(row); if (prevRow) { this.changeTabIndex(row, prevRow); prevRow.focus(); } event.preventDefault(); break; //enter case 13: // @deprecated if (!utils.DomHandler.isClickable(target)) { this.onClick(event); event.preventDefault(); } break; //space case 32: if (!utils.DomHandler.isClickable(target) && !target.readOnly) { this.onClick(event); event.preventDefault(); } break; } } } }, { key: "onMouseDown", value: function onMouseDown(event) { this.props.onRowMouseDown({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onMouseUp", value: function onMouseUp(event) { this.props.onRowMouseUp({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDragStart", value: function onDragStart(event) { this.props.onRowDragStart({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDragOver", value: function onDragOver(event) { this.props.onRowDragOver({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDragLeave", value: function onDragLeave(event) { this.props.onRowDragLeave({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDragEnd", value: function onDragEnd(event) { this.props.onRowDragEnd({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onDrop", value: function onDrop(event) { this.props.onRowDrop({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } }, { key: "onEditChange", value: function onEditChange(e, editing) { if (this.props.onRowEditChange) { var editingRows; var dataKey = this.props.dataKey; var originalEvent = e.originalEvent, data = e.data, index = e.index; if (dataKey) { var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey)); editingRows = this.props.editingRows ? _objectSpread$6({}, this.props.editingRows) : {}; if (editingRows[dataKeyValue] != null) delete editingRows[dataKeyValue];else editingRows[dataKeyValue] = true; } else { var editingRowIndex = this.findIndex(this.props.editingRows, data); editingRows = this.props.editingRows ? _toConsumableArray(this.props.editingRows) : []; if (editingRowIndex !== -1) editingRows = editingRows.filter(function (val, i) { return i !== editingRowIndex; });else editingRows.push(data); } this.props.onRowEditChange({ originalEvent: originalEvent, data: editingRows, index: index }); } else { this.setState({ editing: editing }); } } }, { key: "onEditInit", value: function onEditInit(e) { var event = e.originalEvent; if (this.props.onRowEditInit) { this.props.onRowEditInit({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } this.onEditChange(e, true); event.preventDefault(); } }, { key: "onEditSave", value: function onEditSave(e) { var event = e.originalEvent; var valid = this.props.rowEditValidator ? this.props.rowEditValidator(this.props.rowData, { props: this.props.tableProps }) : true; if (this.props.onRowEditSave) { this.props.onRowEditSave({ originalEvent: event, data: this.props.rowData, index: this.props.index, valid: valid }); } if (valid) { if (this.props.onRowEditComplete) { this.props.onRowEditComplete(e); } this.onEditChange(e, false); } event.preventDefault(); } }, { key: "onEditCancel", value: function onEditCancel(e) { var event = e.originalEvent; if (this.props.onRowEditCancel) { this.props.onRowEditCancel({ originalEvent: event, data: this.props.rowData, index: this.props.index }); } this.onEditChange(e, false); event.preventDefault(); } }, { key: "renderContent", value: function renderContent() { var _this3 = this; return this.props.columns.map(function (col, i) { if (_this3.shouldRenderBodyCell(_this3.props.value, col, _this3.props.index)) { var key = "".concat(_this3.getColumnProp(col, 'columnKey') || _this3.getColumnProp(col, 'field'), "_").concat(i); var rowSpan = _this3.props.rowGroupMode === 'rowspan' ? _this3.calculateRowGroupSize(_this3.props.value, col, _this3.props.index) : null; var editing = _this3.getEditing(); return /*#__PURE__*/React__default["default"].createElement(BodyCell, { key: key, value: _this3.props.value, tableProps: _this3.props.tableProps, tableSelector: _this3.props.tableSelector, column: col, rowData: _this3.props.rowData, rowIndex: _this3.props.index, index: i, rowSpan: rowSpan, dataKey: _this3.props.dataKey, editing: editing, editingMeta: _this3.props.editingMeta, editMode: _this3.props.editMode, onRowEditInit: _this3.onEditInit, onRowEditSave: _this3.onEditSave, onRowEditCancel: _this3.onEditCancel, onEditingMetaChange: _this3.props.onEditingMetaChange, onRowToggle: _this3.props.onRowToggle, selection: _this3.props.selection, allowCellSelection: _this3.props.allowCellSelection, compareSelectionBy: _this3.props.compareSelectionBy, selectOnEdit: _this3.props.selectOnEdit, selected: _this3.props.selected, onClick: _this3.props.onCellClick, onMouseDown: _this3.props.onCellMouseDown, onMouseUp: _this3.props.onCellMouseUp, tabIndex: _this3.props.tabIndex, cellClassName: _this3.props.cellClassName, responsiveLayout: _this3.props.responsiveLayout, frozenRow: _this3.props.frozenRow, isSelectable: _this3.props.isSelectable, showSelectionElement: _this3.props.showSelectionElement, showRowReorderElement: _this3.props.showRowReorderElement, onRadioChange: _this3.props.onRadioChange, onCheckboxChange: _this3.props.onCheckboxChange, expanded: _this3.props.expanded, expandedRowIcon: _this3.props.expandedRowIcon, collapsedRowIcon: _this3.props.collapsedRowIcon, virtualScrollerOptions: _this3.props.virtualScrollerOptions }); } return null; }); } }, { key: "render", value: function render() { var _this4 = this; var rowClassName = utils.ObjectUtils.getPropValue(this.props.rowClassName, this.props.rowData, { props: this.props.tableProps }); var className = utils.classNames(rowClassName, { 'p-highlight': !this.props.allowCellSelection && this.props.selected, 'p-highlight-contextmenu': this.props.contextMenuSelected, 'p-selectable-row': this.props.allowRowSelection && this.props.isSelectable({ data: this.props.rowData, index: this.props.index }), 'p-row-odd': this.props.index % 2 !== 0 }); var content = this.renderContent(); var tabIndex = this.getTabIndex(); return /*#__PURE__*/React__default["default"].createElement("tr", { ref: function ref(el) { return _this4.el = el; }, role: "row", tabIndex: tabIndex, className: className, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, onClick: this.onClick, onDoubleClick: this.onDoubleClick, onContextMenu: this.onRightClick, onTouchEnd: this.onTouchEnd, onKeyDown: this.onKeyDown, onDragStart: this.onDragStart, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDrop: this.onDrop }, content); } }]); return BodyRow; }(React.Component); function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var RowTogglerButton = /*#__PURE__*/function (_Component) { _inherits(RowTogglerButton, _Component); var _super = _createSuper$8(RowTogglerButton); function RowTogglerButton(props) { var _this; _classCallCheck(this, RowTogglerButton); _this = _super.call(this, props); _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } _createClass(RowTogglerButton, [{ key: "onClick", value: function onClick(event) { this.props.onClick({ originalEvent: event, data: this.props.rowData }); } }, { key: "render", value: function render() { var iconClassName = utils.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon); return /*#__PURE__*/React__default["default"].createElement("button", { type: "button", onClick: this.onClick, className: "p-row-toggler p-link", tabIndex: this.props.tabIndex }, /*#__PURE__*/React__default["default"].createElement("span", { className: iconClassName }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)); } }]); return RowTogglerButton; }(React.Component); var _excluded = ["originalEvent"]; function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var TableBody = /*#__PURE__*/function (_Component) { _inherits(TableBody, _Component); var _super = _createSuper$7(TableBody); function TableBody(props) { var _this; _classCallCheck(this, TableBody); _this = _super.call(this, props); _this.state = { rowGroupHeaderStyleObject: {} }; // row _this.onRowClick = _this.onRowClick.bind(_assertThisInitialized(_this)); _this.onRowDoubleClick = _this.onRowDoubleClick.bind(_assertThisInitialized(_this)); _this.onRowRightClick = _this.onRowRightClick.bind(_assertThisInitialized(_this)); _this.onRowTouchEnd = _this.onRowTouchEnd.bind(_assertThisInitialized(_this)); _this.onRowMouseDown = _this.onRowMouseDown.bind(_assertThisInitialized(_this)); _this.onRowMouseUp = _this.onRowMouseUp.bind(_assertThisInitialized(_this)); _this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this)); // drag _this.onRowDragStart = _this.onRowDragStart.bind(_assertThisInitialized(_this)); _this.onRowDragOver = _this.onRowDragOver.bind(_assertThisInitialized(_this)); _this.onRowDragLeave = _this.onRowDragLeave.bind(_assertThisInitialized(_this)); _this.onRowDragEnd = _this.onRowDragEnd.bind(_assertThisInitialized(_this)); _this.onRowDrop = _this.onRowDrop.bind(_assertThisInitialized(_this)); // selection _this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this)); _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this)); _this.onDragSelectionMouseMove = _this.onDragSelectionMouseMove.bind(_assertThisInitialized(_this)); _this.onDragSelectionMouseUp = _this.onDragSelectionMouseUp.bind(_assertThisInitialized(_this)); _this.isSelectable = _this.isSelectable.bind(_assertThisInitialized(_this)); // cell _this.onCellClick = _this.onCellClick.bind(_assertThisInitialized(_this)); _this.onCellMouseDown = _this.onCellMouseDown.bind(_assertThisInitialized(_this)); _this.onCellMouseUp = _this.onCellMouseUp.bind(_assertThisInitialized(_this)); _this.ref = _this.ref.bind(_assertThisInitialized(_this)); return _this; } _createClass(TableBody, [{ key: "ref", value: function ref(el) { this.el = el; this.props.virtualScrollerContentRef && this.props.virtualScrollerContentRef(el); } }, { key: "equals", value: function equals(data1, data2) { if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey); } }, { key: "isSubheaderGrouping", value: function isSubheaderGrouping() { return this.props.rowGroupMode && this.props.rowGroupMode === 'subheader'; } }, { key: "isSelectionEnabled", value: function isSelectionEnabled() { return this.props.selectionMode || this.props.selectionModeInColumn !== null || this.props.columns && this.props.columns.some(function (col) { return col && !!col.props.selectionMode; }); } }, { key: "isRadioSelectionMode", value: function isRadioSelectionMode() { return this.props.selectionMode === 'radiobutton'; } }, { key: "isCheckboxSelectionMode", value: function isCheckboxSelectionMode() { return this.props.selectionMode === 'checkbox'; } }, { key: "isRadioSelectionModeInColumn", value: function isRadioSelectionModeInColumn() { return this.props.selectionModeInColumn === 'single'; } }, { key: "isCheckboxSelectionModeInColumn", value: function isCheckboxSelectionModeInColumn() { return this.props.selectionModeInColumn === 'multiple'; } }, { key: "isSingleSelection", value: function isSingleSelection() { return this.props.selectionMode === 'single' && !this.isCheckboxSelectionModeInColumn() || !this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn(); } }, { key: "isMultipleSelection", value: function isMultipleSelection() { return this.props.selectionMode === 'multiple' && !this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn(); } }, { key: "isRadioOnlySelection", value: function isRadioOnlySelection() { return this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn(); } }, { key: "isCheckboxOnlySelection", value: function isCheckboxOnlySelection() { return this.isCheckboxSelectionMode() && this.isCheckboxSelectionModeInColumn(); } }, { key: "isSelected", value: function isSelected(rowData) { if (rowData && this.props.selection) { return this.props.selection instanceof Array ? this.findIndex(this.props.selection, rowData) > -1 : this.equals(rowData, this.props.selection); } return false; } }, { key: "isContextMenuSelected", value: function isContextMenuSelected(rowData) { if (rowData && this.props.contextMenuSelection) { return this.equals(rowData, this.props.contextMenuSelection); } return false; } }, { key: "isSelectable", value: function isSelectable(options) { return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true; } }, { key: "isRowExpanded", value: function isRowExpanded(rowData) { if (rowData && this.props.expandedRows) { if (this.isSubheaderGrouping() && this.props.expandableRowGroups) { return this.isRowGroupExpanded(rowData); } else { if (this.props.dataKey) return this.props.expandedRows ? this.props.expandedRows[utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.expandedRows, rowData) !== -1; } } return false; } }, { key: "isRowGroupExpanded", value: function isRowGroupExpanded(rowData) { var _this2 = this; if (this.props.dataKey === this.props.groupRowsBy) return Object.keys(this.props.expandedRows).some(function (data) { return utils.ObjectUtils.equals(data, utils.ObjectUtils.resolveFieldData(rowData, _this2.props.dataKey)); });else return this.props.expandedRows.some(function (data) { return utils.ObjectUtils.equals(data, rowData, _this2.props.groupRowsBy); }); } }, { key: "isRowEditing", value: function isRowEditing(rowData) { if (this.props.editMode === 'row' && rowData && this.props.editingRows) { if (this.props.dataKey) return this.props.editingRows ? this.props.editingRows[utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.editingRows, rowData) !== -1; } return false; } }, { key: "allowDrag", value: function allowDrag(event) { return this.props.dragSelection && this.isMultipleSelection() && !event.originalEvent.shiftKey; } }, { key: "allowRowDrag", value: function allowRowDrag(event) { return !this.allowCellSelection() && this.allowDrag(event); } }, { key: "allowCellDrag", value: function allowCellDrag(event) { return this.allowCellSelection() && this.allowDrag(event); } }, { key: "allowSelection", value: function allowSelection(event) { return !utils.DomHandler.isClickable(event.originalEvent.target); } }, { key: "allowMetaKeySelection", value: function allowMetaKeySelection(event) { return !this.rowTouched && (!this.props.metaKeySelection || this.props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey)); } }, { key: "allowRangeSelection", value: function allowRangeSelection(event) { return this.isMultipleSelection() && event.originalEvent.shiftKey && this.anchorRowIndex !== null; } }, { key: "allowRowSelection", value: function allowRowSelection() { return (this.props.selectionMode || this.props.selectionModeInColumn) && !this.isRadioOnlySelection() && !this.isCheckboxOnlySelection(); } }, { key: "allowCellSelection", value: function allowCellSelection() { return this.props.cellSelection && !this.isRadioSelectionModeInColumn() && !this.isCheckboxSelectionModeInColumn(); } }, { key: "getColumnsLength", value: function getColumnsLength() { return this.props.columns ? this.props.columns.length : 0; } }, { key: "getVirtualScrollerOption", value: function getVirtualScrollerOption(option, options) { options = options || this.props.virtualScrollerOptions; return options ? options[option] : null; } }, { key: "findIndex", value: function findIndex(collection, rowData) { var _this3 = this; return (collection || []).findIndex(function (data) { return _this3.equals(rowData, data); }); } }, { key: "rowGroupHeaderStyle", value: function rowGroupHeaderStyle() { if (this.props.scrollable) { return { top: this.state.rowGroupHeaderStyleObject['top'] }; } return null; } }, { key: "getRowKey", value: function getRowKey(rowData, index) { return this.props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey) + '_' + index : index; } }, { key: "shouldRenderRowGroupHeader", value: function shouldRenderRowGroupHeader(value, rowData, i) { var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy); var prevRowData = value[i - 1]; if (prevRowData) { var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.props.groupRowsBy); return currentRowFieldData !== previousRowFieldData; } else { return true; } } }, { key: "shouldRenderRowGroupFooter", value: function shouldRenderRowGroupFooter(value, rowData, i, expanded) { if (this.props.expandableRowGroups && !expanded) { return false; } else { var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy); var nextRowData = value[i + 1]; if (nextRowData) { var nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.props.groupRowsBy); return currentRowFieldData !== nextRowFieldData; } else { return true; } } } }, { key: "updateFrozenRowStickyPosition", value: function updateFrozenRowStickyPosition() { this.el.style.top = utils.DomHandler.getOuterHeight(this.el.previousElementSibling) + 'px'; } }, { key: "updateFrozenRowGroupHeaderStickyPosition", value: function updateFrozenRowGroupHeaderStickyPosition() { var tableHeaderHeight = utils.DomHandler.getOuterHeight(this.el.previousElementSibling); var top = tableHeaderHeight + 'px'; if (this.state.rowGroupHeaderStyleObject && this.state.rowGroupHeaderStyleObject.top !== top) { this.setState({ rowGroupHeaderStyleObject: { top: top } }); } } }, { key: "updateVirtualScrollerPosition", value: function updateVirtualScrollerPosition() { var tableHeaderHeight = utils.DomHandler.getOuterHeight(this.el.previousElementSibling); this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px'; } }, { key: "onSingleSelection", value: function onSingleSelection(_ref) { var originalEvent = _ref.originalEvent, data = _ref.data, index = _ref.index, toggleable = _ref.toggleable, type = _ref.type; if (!this.isSelectable({ data: data, index: index })) { return; } var selected = this.isSelected(data); var selection = this.props.selection; if (selected) { if (toggleable) { selection = null; this.onUnselect({ originalEvent: originalEvent, data: data, type: type }); } } else { selection = data; this.onSelect({ originalEvent: originalEvent, data: data, type: type }); } this.focusOnElement(originalEvent, true); if (this.props.onSelectionChange && selection !== this.props.selection) { this.props.onSelectionChange({ originalEvent: originalEvent, value: selection, type: type }); } } }, { key: "onMultipleSelection", value: function onMultipleSelection(_ref2) { var _this4 = this; var originalEvent = _ref2.originalEvent, data = _ref2.data, index = _ref2.index, toggleable = _ref2.toggleable, type = _ref2.type; if (!this.isSelectable({ data: data, index: index })) { return; } var selected = this.isSelected(data); var selection = this.props.selection || []; if (selected) { if (toggleable) { var selectionIndex = this.findIndex(selection, data); selection = this.props.selection.filter(function (val, i) { return i !== selectionIndex; }); this.onUnselect({ originalEvent: originalEvent, data: data, type: type }); } else if (selection.length) { this.props.selection.forEach(function (d) { return _this4.onUnselect({ originalEvent: originalEvent, data: d, type: type }); }); selection = [data]; this.onSelect({ originalEvent: originalEvent, data: data, type: type }); } } else { selection = toggleable && this.isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data]; this.onSelect({ originalEvent: originalEvent, data: data, type: type }); } this.focusOnElement(originalEvent, true); if (this.props.onSelectionChange && selection !== this.props.selection) { this.props.onSelectionChange({ originalEvent: originalEvent, value: selection, type: type }); } } }, { key: "onRangeSelection", value: function onRangeSelection(event, type) { utils.DomHandler.clearSelection(); this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index; var selectionInRange = this.selectRange(event); var selection = this.isMultipleSelection() ? _toConsumableArray(new Set([].concat(_toConsumableArray(this.props.selection || []), _toConsumableArray(selectionInRange)))) : selectionInRange; if (this.props.onSelectionChange && selection !== this.props.selection) { this.props.onSelectionChange({ originalEvent: event.originalEvent, value: selection, type: type }); } this.anchorRowIndex = this.rangeRowIndex; this.anchorCellIndex = event.cellIndex; this.focusOnElement(event.originalEvent, false); } }, { key: "selectRange", value: function selectRange(event) { var rangeStart, rangeEnd; var isLazyAndPaginator = this.props.lazy && this.props.paginator; if (isLazyAndPaginator) { this.anchorRowIndex += this.anchorRowFirst; this.rangeRowIndex += this.props.first; } if (this.rangeRowIndex > this.anchorRowIndex) { rangeStart = this.anchorRowIndex; rangeEnd = this.rangeRowIndex; } else if (this.rangeRowIndex < this.anchorRowIndex) { rangeStart = this.rangeRowIndex; rangeEnd = this.anchorRowIndex; } else { rangeStart = rangeEnd = this.rangeRowIndex; } if (isLazyAndPaginator) { rangeStart = Math.max(rangeStart - this.props.first, 0); rangeEnd -= this.props.first; } return this.allowCellSelection() ? this.selectRangeOnCell(event, rangeStart, rangeEnd) : this.selectRangeOnRow(event, rangeStart, rangeEnd); } }, { key: "selectRangeOnRow", value: function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) { var value = this.props.value; var selection = []; for (var i = rowRangeStart; i <= rowRangeEnd; i++) { var rangeRowData = value[i]; if (!this.isSelectable({ data: rangeRowData, index: i })) { continue; } selection.push(rangeRowData); this.onSelect({ originalEvent: event.originalEvent, data: rangeRowData, type: 'row' }); } return selection; } }, { key: "selectRangeOnCell", value: function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) { var cellRangeStart, cellRangeEnd, cellIndex = event.cellIndex; if (cellIndex > this.anchorCellIndex) { cellRangeStart = this.anchorCellIndex; cellRangeEnd = cellIndex; } else if (cellIndex < this.anchorCellIndex) { cellRangeStart = cellIndex; cellRangeEnd = this.anchorCellIndex; } else { cellRangeStart = cellRangeEnd = cellIndex; } var value = this.props.value; var selection = []; for (var i = rowRangeStart; i <= rowRangeEnd; i++) { var rowData = value[i]; var columns = this.props.columns; for (var j = cellRangeStart; j <= cellRangeEnd; j++) { var field = columns[j].props.field; var _value = utils.ObjectUtils.resolveFieldData(rowData, field); var rangeRowData = { value: _value, field: field, rowData: rowData, rowIndex: i, cellIndex: j, selected: true }; if (!this.isSelectable({ data: rangeRowData, index: i })) { continue; } selection.push(rangeRowData); this.onSelect({ originalEvent: event.originalEvent, data: rangeRowData, type: 'cell' }); } } return selection; } }, { key: "onSelect", value: function onSelect(event) { if (this.allowCellSelection()) this.props.onCellSelect && this.props.onCellSelect(_objectSpread$5(_objectSpread$5({ originalEvent: event.originalEvent }, event.data), {}, { type: event.type }));else this.props.onRowSelect && this.props.onRowSelect(event); } }, { key: "onUnselect", value: function onUnselect(event) { if (this.allowCellSelection()) this.props.onCellUnselect && this.props.onCellUnselect(_objectSpread$5(_objectSpread$5({ originalEvent: event.originalEvent }, event.data), {}, { type: event.type }));else this.props.onRowUnselect && this.props.onRowUnselect(event); } }, { key: "enableDragSelection", value: function enableDragSelection(event) { if (this.props.dragSelection && !this.dragSelectionHelper) { this.dragSelectionHelper = document.createElement('div'); utils.DomHandler.addClass(this.dragSelectionHelper, 'p-datatable-drag-selection-helper'); this.initialDragPosition = { x: event.clientX, y: event.clientY }; this.dragSelectionHelper.style.top = "".concat(event.pageY, "px"); this.dragSelectionHelper.style.left = "".concat(event.pageX, "px"); this.bindDragSelectionEvents(); } } }, { key: "focusOnElement", value: function focusOnElement(event, isFocused) { var target = event.currentTarget; if (!this.allowCellSelection() && this.props.selectionAutoFocus) { if (this.isCheckboxSelectionModeInColumn()) { var checkbox = utils.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box'); checkbox && checkbox.focus(); } else if (this.isRadioSelectionModeInColumn()) { var radio = utils.DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]'); radio && radio.focus(); } } !isFocused && target && target.focus(); } }, { key: "changeTabIndex", value: function changeTabIndex(event, type) { var target = event.currentTarget; var isSelectable = utils.DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row'); if (isSelectable) { var selector = type === 'cell' ? 'tr > td' : 'tr'; var tabbableEl = utils.DomHandler.findSingle(this.el, "".concat(selector, "[tabindex=\"").concat(this.props.tabIndex, "\"]")); if (tabbableEl && target) { tabbableEl.tabIndex = -1; target.tabIndex = this.props.tabIndex; } } } }, { key: "onRowClick", value: function onRowClick(event) { if (this.allowCellSelection() || !this.allowSelection(event)) { return; } this.props.onRowClick && this.props.onRowClick(event); if (this.allowRowSelection()) { if (this.allowRangeSelection(event)) { this.onRangeSelection(event, 'row'); } else { var toggleable = this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn() || this.allowMetaKeySelection(event); this.anchorRowIndex = event.index; this.rangeRowIndex = event.index; this.anchorRowFirst = this.props.first; if (this.isSingleSelection()) { this.onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, { toggleable: toggleable, type: 'row' })); } else { this.onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, { toggleable: toggleable, type: 'row' })); } } this.changeTabIndex(event.originalEvent, 'row'); } else { this.focusOnElement(event.originalEvent); } this.rowTouched = false; } }, { key: "onRowDoubleClick", value: function onRowDoubleClick(e) { var event = e.originalEvent; if (utils.DomHandler.isClickable(event.target)) { return; } if (this.props.onRowDoubleClick) { this.props.onRowDoubleClick(e); } } }, { key: "onRowRightClick", value: function onRowRightClick(event) { if (this.props.onContextMenu || this.props.onContextMenuSelectionChange) { utils.DomHandler.clearSelection(); if (this.props.onContextMenuSelectionChange) { this.props.onContextMenuSelectionChange({ originalEvent: event.originalEvent, value: event.data }); } if (this.props.onContextMenu) { this.props.onContextMenu({ originalEvent: event.originalEvent, data: event.data }); } event.originalEvent.preventDefault(); } } }, { key: "onRowTouchEnd", value: function onRowTouchEnd() { this.rowTouched = true; } }, { key: "onRowMouseDown", value: function onRowMouseDown(e) { utils.DomHandler.clearSelection(); var event = e.originalEvent; if (utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false; if (this.allowRowDrag(e)) { this.enableDragSelection(event, 'row'); this.anchorRowIndex = e.index; this.rangeRowIndex = e.index; this.anchorRowFirst = this.props.first; } } }, { key: "onRowMouseUp", value: function onRowMouseUp(event) { var isSameRow = event.index === this.anchorRowIndex; if (this.allowRowDrag(event) && !isSameRow) { this.onRangeSelection(event, 'row'); } } }, { key: "onRowToggle", value: function onRowToggle(event) { var expandedRows; var dataKey = this.props.dataKey; var hasDataKey = this.props.groupRowsBy ? dataKey === this.props.groupRowsBy : !!dataKey; if (hasDataKey) { var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(event.data, dataKey)); expandedRows = this.props.expandedRows ? _objectSpread$5({}, this.props.expandedRows) : {}; if (expandedRows[dataKeyValue] != null) { delete expandedRows[dataKeyValue]; if (this.props.onRowCollapse) { this.props.onRowCollapse({ originalEvent: event, data: event.data }); } } else { expandedRows[dataKeyValue] = true; if (this.props.onRowExpand) { this.props.onRowExpand({ originalEvent: event, data: event.data }); } } } else { var expandedRowIndex = this.findIndex(this.props.expandedRows, event.data); expandedRows = this.props.expandedRows ? _toConsumableArray(this.props.expandedRows) : []; if (expandedRowIndex !== -1) { expandedRows = expandedRows.filter(function (val, i) { return i !== expandedRowIndex; }); if (this.props.onRowCollapse) { this.props.onRowCollapse({ originalEvent: event, data: event.data }); } } else { expandedRows.push(event.data); if (this.props.onRowExpand) { this.props.onRowExpand({ originalEvent: event, data: event.data }); } } } if (this.props.onRowToggle) { this.props.onRowToggle({ data: expandedRows }); } } }, { key: "onRowDragStart", value: function onRowDragStart(e) { var event = e.originalEvent, index = e.index; this.rowDragging = true; this.draggedRowIndex = index; event.dataTransfer.setData('text', 'b'); // For firefox } }, { key: "onRowDragOver", value: function onRowDragOver(e) { var event = e.originalEvent, index = e.index; if (this.rowDragging && this.draggedRowIndex !== index) { var rowElement = event.currentTarget; var rowY = utils.DomHandler.getOffset(rowElement).top + utils.DomHandler.getWindowScrollTop(); var pageY = event.pageY; var rowMidY = rowY + utils.DomHandler.getOuterHeight(rowElement) / 2; var prevRowElement = rowElement.previousElementSibling; if (pageY < rowMidY) { utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); this.droppedRowIndex = index; if (prevRowElement) utils.DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');else utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); } else { if (prevRowElement) utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');else utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); this.droppedRowIndex = index + 1; utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); } } event.preventDefault(); } }, { key: "onRowDragLeave", value: function onRowDragLeave(e) { var event = e.originalEvent; var rowElement = event.currentTarget; var prevRowElement = rowElement.previousElementSibling; if (prevRowElement) { utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); } }, { key: "onRowDragEnd", value: function onRowDragEnd(e) { var event = e.originalEvent; this.rowDragging = false; this.draggedRowIndex = null; this.droppedRowIndex = null; event.currentTarget.draggable = false; } }, { key: "onRowDrop", value: function onRowDrop(e) { var event = e.originalEvent; if (this.droppedRowIndex != null) { var dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1; var val = _toConsumableArray(this.props.value); utils.ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex); if (this.props.onRowReorder) { this.props.onRowReorder({ originalEvent: event, value: val, dragIndex: this.draggedRowIndex, dropIndex: this.droppedRowIndex }); } } //cleanup this.onRowDragLeave(e); this.onRowDragEnd(e); event.preventDefault(); } }, { key: "onRadioChange", value: function onRadioChange(event) { this.onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, { toggleable: true, type: 'radio' })); } }, { key: "onCheckboxChange", value: function onCheckboxChange(event) { this.onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, { toggleable: true, type: 'checkbox' })); } }, { key: "onDragSelectionMouseMove", value: function onDragSelectionMouseMove(event) { var _this$initialDragPosi = this.initialDragPosition, x = _this$initialDragPosi.x, y = _this$initialDragPosi.y; var dx = event.clientX - x; var dy = event.clientY - y; if (dy < 0) this.dragSelectionHelper.style.top = "".concat(event.pageY + 5, "px"); if (dx < 0) this.dragSelectionHelper.style.left = "".concat(event.pageX + 5, "px"); this.dragSelectionHelper.style.height = "".concat(Math.abs(dy), "px"); this.dragSelectionHelper.style.width = "".concat(Math.abs(dx), "px"); event.preventDefault(); } }, { key: "onDragSelectionMouseUp", value: function onDragSelectionMouseUp() { if (this.dragSelectionHelper) { this.dragSelectionHelper.remove(); this.dragSelectionHelper = null; } document.removeEventListener('mousemove', this.onDragSelectionMouseMove); document.removeEventListener('mouseup', this.onDragSelectionMouseUp); } }, { key: "onCellClick", value: function onCellClick(event) { if (!this.allowSelection(event)) { return; } this.props.onCellClick && this.props.onCellClick(event); if (this.allowCellSelection()) { if (this.allowRangeSelection(event)) { this.onRangeSelection(event, 'cell'); } else { var toggleable = this.allowMetaKeySelection(event); var originalEvent = event.originalEvent, data = _objectWithoutProperties(event, _excluded); this.anchorRowIndex = event.rowIndex; this.rangeRowIndex = event.rowIndex; this.anchorRowFirst = this.props.first; this.anchorCellIndex = event.cellIndex; if (this.isSingleSelection()) { this.onSingleSelection({ originalEvent: originalEvent, data: data, index: event.rowIndex, toggleable: toggleable, type: 'cell' }); } else { this.onMultipleSelection({ originalEvent: originalEvent, data: data, index: event.rowIndex, toggleable: toggleable, type: 'cell' }); } } this.changeTabIndex(event.originalEvent, 'cell'); } this.rowTouched = false; } }, { key: "onCellMouseDown", value: function onCellMouseDown(event) { if (this.allowCellDrag(event)) { this.enableDragSelection(event.originalEvent); this.anchorRowIndex = event.rowIndex; this.rangeRowIndex = event.rowIndex; this.anchorRowFirst = this.props.first; this.anchorCellIndex = event.cellIndex; } } }, { key: "onCellMouseUp", value: function onCellMouseUp(event) { var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex; if (this.allowCellDrag(event) && !isSameCell) { this.onRangeSelection(event, 'cell'); } } }, { key: "bindDragSelectionEvents", value: function bindDragSelectionEvents() { document.addEventListener('mousemove', this.onDragSelectionMouseMove); document.addEventListener('mouseup', this.onDragSelectionMouseUp); document.body.appendChild(this.dragSelectionHelper); } }, { key: "unbindDragSelectionEvents", value: function unbindDragSelectionEvents() { this.onDragSelectionMouseUp(); } }, { key: "componentDidMount", value: function componentDidMount() { if (this.props.frozenRow) { this.updateFrozenRowStickyPosition(); } if (this.props.scrollable && this.props.rowGroupMode === 'subheader') { this.updateFrozenRowGroupHeaderStickyPosition(); } if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) { this.updateVirtualScrollerPosition(); } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.props.frozenRow) { this.updateFrozenRowStickyPosition(); } if (this.props.scrollable && this.props.rowGroupMode === 'subheader') { this.updateFrozenRowGroupHeaderStickyPosition(); } if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) { this.updateVirtualScrollerPosition(); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { if (this.props.dragSelection) { this.unbindDragSelectionEvents(); } } }, { key: "renderEmptyContent", value: function renderEmptyContent() { if (!this.props.loading) { var colSpan = this.getColumnsLength(); var content = utils.ObjectUtils.getJSXElement(this.props.emptyMessage, { props: this.props, frozen: this.props.frozenRow }) || PrimeReact.localeOption('emptyMessage'); return /*#__PURE__*/React__default["default"].createElement("tr", { className: "p-datatable-emptymessage", role: "row" }, /*#__PURE__*/React__default["default"].createElement("td", { colSpan: colSpan, role: "cell" }, content)); } return null; } }, { key: "renderGroupHeader", value: function renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan) { if (isSubheaderGrouping && this.shouldRenderRowGroupHeader(this.props.value, rowData, index - this.props.first)) { var style = this.rowGroupHeaderStyle(); var toggler = this.props.expandableRowGroups && /*#__PURE__*/React__default["default"].createElement(RowTogglerButton, { onClick: this.onRowToggle, rowData: rowData, expanded: expanded, expandedRowIcon: this.props.expandedRowIcon, collapsedRowIcon: this.props.collapsedRowIcon }); var content = utils.ObjectUtils.getJSXElement(this.props.rowGroupHeaderTemplate, rowData, { index: index, props: this.props.tableProps }); return /*#__PURE__*/React__default["default"].createElement("tr", { className: "p-rowgroup-header", style: style, role: "row" }, /*#__PURE__*/React__default["default"].createElement("td", { colSpan: colSpan }, toggler, /*#__PURE__*/React__default["default"].createElement("span", { className: "p-rowgroup-header-name" }, content))); } return null; } }, { key: "renderRow", value: function renderRow(rowData, index, expanded) { if (!this.props.expandableRowGroups || expanded) { var selected = this.isSelectionEnabled() ? this.isSelected(rowData) : false; var contextMenuSelected = this.isContextMenuSelected(rowData); var allowRowSelection = this.allowRowSelection(); var allowCellSelection = this.allowCellSelection(); var editing = this.isRowEditing(rowData); return /*#__PURE__*/React__default["default"].createElement(BodyRow, { tableProps: this.props.tableProps, tableSelector: this.props.tableSelector, value: this.props.value, columns: this.props.columns, rowData: rowData, index: index, selected: selected, contextMenuSelected: contextMenuSelected, onRowClick: this.onRowClick, onRowDoubleClick: this.onRowDoubleClick, onRowRightClick: this.onRowRightClick, tabIndex: this.props.tabIndex, isSelectable: this.isSelectable, onRowTouchEnd: this.onRowTouchEnd, onRowMouseDown: this.onRowMouseDown, onRowMouseUp: this.onRowMouseUp, onRowToggle: this.onRowToggle, onRowDragStart: this.onRowDragStart, onRowDragOver: this.onRowDragOver, onRowDragLeave: this.onRowDragLeave, onRowDragEnd: this.onRowDragEnd, onRowDrop: this.onRowDrop, onRadioChange: this.onRadioChange, onCheckboxChange: this.onCheckboxChange, onCellClick: this.onCellClick, onCellMouseDown: this.onCellMouseDown, onCellMouseUp: this.onCellMouseUp, editing: editing, editingRows: this.props.editingRows, editingMeta: this.props.editingMeta, editMode: this.props.editMode, onRowEditChange: this.props.onRowEditChange, onEditingMetaChange: this.props.onEditingMetaChange, groupRowsBy: this.props.groupRowsBy, compareSelectionBy: this.props.compareSelectionBy, dataKey: this.props.dataKey, rowGroupMode: this.props.rowGroupMode, onRowEditInit: this.props.onRowEditInit, rowEditValidator: this.props.rowEditValidator, onRowEditSave: this.props.onRowEditSave, onRowEditComplete: this.props.onRowEditComplete, onRowEditCancel: this.props.onRowEditCancel, selection: this.props.selection, allowRowSelection: allowRowSelection, allowCellSelection: allowCellSelection, selectOnEdit: this.props.selectOnEdit, selectionMode: this.props.selectionMode, selectionModeInColumn: this.props.selectionModeInColumn, cellClassName: this.props.cellClassName, responsiveLayout: this.props.responsiveLayout, frozenRow: this.props.frozenRow, showSelectionElement: this.props.showSelectionElement, showRowReorderElement: this.props.showRowReorderElement, expanded: expanded, expandedRowIcon: this.props.expandedRowIcon, collapsedRowIcon: this.props.collapsedRowIcon, rowClassName: this.props.rowClassName, virtualScrollerOptions: this.props.virtualScrollerOptions }); } } }, { key: "renderExpansion", value: function renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan) { if (expanded && !(isSubheaderGrouping && this.props.expandableRowGroups)) { var content = utils.ObjectUtils.getJSXElement(this.props.rowExpansionTemplate, rowData, { index: index }); var id = "".concat(this.props.tableSelector, "_content_").concat(index, "_expanded"); return /*#__PURE__*/React__default["default"].createElement("tr", { id: id, className: "p-datatable-row-expansion", role: "row" }, /*#__PURE__*/React__default["default"].createElement("td", { role: "cell", colSpan: colSpan }, content)); } return null; } }, { key: "renderGroupFooter", value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) { if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index - this.props.first, expanded)) { var content = utils.ObjectUtils.getJSXElement(this.props.rowGroupFooterTemplate, rowData, { index: index, colSpan: colSpan, props: this.props.tableProps }); return /*#__PURE__*/React__default["default"].createElement("tr", { className: "p-rowgroup-footer", role: "row" }, content); } return null; } }, { key: "renderContent", value: function renderContent() { var _this5 = this; return this.props.value.map(function (rowData, i) { var index = _this5.getVirtualScrollerOption('getItemOptions') ? _this5.getVirtualScrollerOption('getItemOptions')(i).index : _this5.props.first + i; var key = _this5.getRowKey(rowData, index); var expanded = _this5.isRowExpanded(rowData); var isSubheaderGrouping = _this5.isSubheaderGrouping(); var colSpan = _this5.getColumnsLength(); var groupHeader = _this5.renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan); var row = _this5.renderRow(rowData, index, expanded); var expansion = _this5.renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan); var groupFooter = _this5.renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan); return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, { key: key }, groupHeader, row, expansion, groupFooter); }); } }, { key: "render", value: function render() { var className = utils.classNames('p-datatable-tbody', this.props.className); var content = this.props.empty ? this.renderEmptyContent() : this.renderContent(); return /*#__PURE__*/React__default["default"].createElement("tbody", { ref: this.ref, className: className }, content); } }]); return TableBody; }(React.Component); function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var FooterCell = /*#__PURE__*/function (_Component) { _inherits(FooterCell, _Component); var _super = _createSuper$6(FooterCell); function FooterCell(props) { var _this; _classCallCheck(this, FooterCell); _this = _super.call(this, props); _this.state = { styleObject: {} }; return _this; } _createClass(FooterCell, [{ key: "getColumnProp", value: function getColumnProp(prop) { return this.props.column.props[prop]; } }, { key: "getStyle", value: function getStyle() { var footerStyle = this.getColumnProp('footerStyle'); var columnStyle = this.getColumnProp('style'); return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, this.state.styleObject) : Object.assign({}, columnStyle, footerStyle); } }, { key: "updateStickyPosition", value: function updateStickyPosition() { if (this.getColumnProp('frozen')) { var styleObject = _objectSpread$4({}, this.state.styleObject); var align = this.getColumnProp('alignFrozen'); if (align === 'right') { var right = 0; var next = this.el.nextElementSibling; if (next) { right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); } styleObject['right'] = right + 'px'; } else { var left = 0; var prev = this.el.previousElementSibling; if (prev) { left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); } styleObject['left'] = left + 'px'; } this.setState({ styleObject: styleObject }); } } }, { key: "componentDidMount", value: function componentDidMount() { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } } }, { key: "render", value: function render() { var _this2 = this; var style = this.getStyle(); var align = this.getColumnProp('align'); var className = utils.classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), _defineProperty({ 'p-frozen-column': this.getColumnProp('frozen') }, "p-align-".concat(align), !!align)); var colSpan = this.getColumnProp('colSpan'); var rowSpan = this.getColumnProp('rowSpan'); var content = utils.ObjectUtils.getJSXElement(this.getColumnProp('footer'), { props: this.props.tableProps }); return /*#__PURE__*/React__default["default"].createElement("td", { ref: function ref(el) { return _this2.el = el; }, style: style, className: className, role: "cell", colSpan: colSpan, rowSpan: rowSpan }, content); } }]); return FooterCell; }(React.Component); function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var TableFooter = /*#__PURE__*/function (_Component) { _inherits(TableFooter, _Component); var _super = _createSuper$5(TableFooter); function TableFooter() { _classCallCheck(this, TableFooter); return _super.apply(this, arguments); } _createClass(TableFooter, [{ key: "hasFooter", value: function hasFooter() { return this.props.footerColumnGroup ? true : this.props.columns ? this.props.columns.some(function (col) { return col && col.props.footer; }) : false; } }, { key: "renderGroupFooterCells", value: function renderGroupFooterCells(row) { var columns = React__default["default"].Children.toArray(row.props.children); return this.renderFooterCells(columns); } }, { key: "renderFooterCells", value: function renderFooterCells(columns) { var _this = this; return React__default["default"].Children.map(columns, function (col, i) { var isVisible = col ? !col.props.hidden : true; var key = col ? col.props.columnKey || col.props.field || i : i; return isVisible && /*#__PURE__*/React__default["default"].createElement(FooterCell, { key: key, tableProps: _this.props.tableProps, column: col }); }); } }, { key: "renderContent", value: function renderContent() { var _this2 = this; if (this.props.footerColumnGroup) { var rows = React__default["default"].Children.toArray(this.props.footerColumnGroup.props.children); return rows.map(function (row, i) { return /*#__PURE__*/React__default["default"].createElement("tr", { key: i, role: "row" }, _this2.renderGroupFooterCells(row)); }); } return /*#__PURE__*/React__default["default"].createElement("tr", { role: "row" }, this.renderFooterCells(this.props.columns)); } }, { key: "render", value: function render() { if (this.hasFooter()) { var content = this.renderContent(); return /*#__PURE__*/React__default["default"].createElement("tfoot", { className: "p-datatable-tfoot" }, content); } return null; } }]); return TableFooter; }(React.Component); function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var HeaderCheckbox = /*#__PURE__*/function (_Component) { _inherits(HeaderCheckbox, _Component); var _super = _createSuper$4(HeaderCheckbox); function HeaderCheckbox(props) { var _this; _classCallCheck(this, HeaderCheckbox); _this = _super.call(this, props); _this.state = { focused: false }; _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this)); _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this)); _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); return _this; } _createClass(HeaderCheckbox, [{ key: "onFocus", value: function onFocus() { this.setState({ focused: true }); } }, { key: "onBlur", value: function onBlur() { this.setState({ focused: false }); } }, { key: "onClick", value: function onClick(event) { if (!this.props.disabled) { this.setState({ focused: true }); this.props.onChange({ originalEvent: event, checked: !this.props.checked }); } } }, { key: "onKeyDown", value: function onKeyDown(event) { if (event.code === 'Space') { this.onClick(event); event.preventDefault(); } } }, { key: "render", value: function render() { var boxClassName = utils.classNames('p-checkbox-box p-component', { 'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused }); var iconClassName = utils.classNames('p-checkbox-icon', { 'pi pi-check': this.props.checked }); var tabIndex = this.props.disabled ? null : 0; return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-checkbox p-component", onClick: this.onClick }, /*#__PURE__*/React__default["default"].createElement("div", { className: boxClassName, role: "checkbox", "aria-checked": this.props.checked, tabIndex: tabIndex, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown }, /*#__PURE__*/React__default["default"].createElement("span", { className: iconClassName }))); } }]); return HeaderCheckbox; }(React.Component); function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var ColumnFilter = /*#__PURE__*/function (_Component) { _inherits(ColumnFilter, _Component); var _super = _createSuper$3(ColumnFilter); function ColumnFilter(props) { var _this; _classCallCheck(this, ColumnFilter); _this = _super.call(this, props); _this.state = { overlayVisible: false }; _this.overlayRef = /*#__PURE__*/React__default["default"].createRef(); _this.filterCallback = _this.filterCallback.bind(_assertThisInitialized(_this)); _this.filterApplyCallback = _this.filterApplyCallback.bind(_assertThisInitialized(_this)); _this.onOperatorChange = _this.onOperatorChange.bind(_assertThisInitialized(_this)); _this.addConstraint = _this.addConstraint.bind(_assertThisInitialized(_this)); _this.clearFilter = _this.clearFilter.bind(_assertThisInitialized(_this)); _this.applyFilter = _this.applyFilter.bind(_assertThisInitialized(_this)); _this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this)); _this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this)); _this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this)); _this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this)); _this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this)); _this.onContentKeyDown = _this.onContentKeyDown.bind(_assertThisInitialized(_this)); _this.onContentClick = _this.onContentClick.bind(_assertThisInitialized(_this)); _this.onContentMouseDown = _this.onContentMouseDown.bind(_assertThisInitialized(_this)); return _this; } _createClass(ColumnFilter, [{ key: "field", get: function get() { return this.getColumnProp('filterField') || this.getColumnProp('field'); } }, { key: "overlay", get: function get() { return this.overlayRef ? this.overlayRef.current : null; } }, { key: "filterModel", get: function get() { return this.props.filters[this.field]; } }, { key: "filterStoreModel", get: function get() { return this.props.filtersStore[this.field]; } }, { key: "hasFilter", value: function hasFilter() { if (this.props.filtersStore) { var fieldFilter = this.props.filtersStore[this.field]; return fieldFilter && (fieldFilter.operator ? !this.isFilterBlank(fieldFilter.constraints[0].value) : !this.isFilterBlank(fieldFilter.value)); } return false; } }, { key: "hasRowFilter", value: function hasRowFilter() { return this.filterModel && !this.isFilterBlank(this.filterModel.value); } }, { key: "isFilterBlank", value: function isFilterBlank(filter) { return utils.ObjectUtils.isEmpty(filter); } }, { key: "isRowMatchModeSelected", value: function isRowMatchModeSelected(matchMode) { return this.filterModel && this.filterModel.matchMode === matchMode; } }, { key: "showMenuButton", value: function showMenuButton() { return this.getColumnProp('showFilterMenu') && (this.props.display === 'row' ? this.getColumnProp('dataType') !== 'boolean' : true); } }, { key: "matchModes", value: function matchModes() { return this.getColumnProp('filterMatchModeOptions') || PrimeReact__default["default"].filterMatchModeOptions[this.findDataType()].map(function (key) { return { label: PrimeReact.localeOption(key), value: key }; }); } }, { key: "isShowMatchModes", value: function isShowMatchModes() { return this.getColumnProp('dataType') !== 'boolean' && this.getColumnProp('showFilterMatchModes') && this.matchModes() && this.getColumnProp('showFilterMenuOptions'); } }, { key: "isShowOperator", value: function isShowOperator() { return this.getColumnProp('showFilterOperator') && this.filterModel && this.filterModel.operator && this.getColumnProp('showFilterMenuOptions'); } }, { key: "showRemoveIcon", value: function showRemoveIcon() { return this.fieldConstraints().length > 1; } }, { key: "isShowAddConstraint", value: function isShowAddConstraint() { return this.getColumnProp('showAddButton') && this.filterModel && this.filterModel.operator && this.fieldConstraints() && this.fieldConstraints().length < this.getColumnProp('maxConstraints') && this.getColumnProp('showFilterMenuOptions'); } }, { key: "isOutsideClicked", value: function isOutsideClicked(target) { return !this.isTargetClicked(target) && this.overlayRef && this.overlayRef.current && !(this.overlayRef.current.isSameNode(target) || this.overlayRef.current.contains(target)); } }, { key: "isTargetClicked", value: function isTargetClicked(target) { return this.icon && (this.icon.isSameNode(target) || this.icon.contains(target)); } }, { key: "getColumnProp", value: function getColumnProp(prop) { return this.props.column.props[prop]; } }, { key: "getDefaultConstraint", value: function getDefaultConstraint() { if (this.props.filtersStore && this.filterStoreModel) { if (this.filterStoreModel.operator) { return { matchMode: this.filterStoreModel.constraints[0].matchMode, operator: this.filterStoreModel.operator }; } else { return { matchMode: this.filterStoreModel.matchMode }; } } } }, { key: "findDataType", value: function findDataType() { var dataType = this.getColumnProp('dataType'); var matchMode = this.getColumnProp('filterMatchMode'); var hasMatchMode = function hasMatchMode(key) { return PrimeReact__default["default"].filterMatchModeOptions[key].some(function (mode) { return mode === matchMode; }); }; if (matchMode === 'custom' && !hasMatchMode(dataType)) { PrimeReact__default["default"].filterMatchModeOptions[dataType].push(PrimeReact.FilterMatchMode.CUSTOM); return dataType; } else if (matchMode) { return Object.keys(PrimeReact__default["default"].filterMatchModeOptions).find(function (key) { return hasMatchMode(key); }) || dataType; } return dataType; } }, { key: "clearFilter", value: function clearFilter() { var field = this.field; var filterClearCallback = this.getColumnProp('onFilterClear'); var defaultConstraint = this.getDefaultConstraint(); var filters = _objectSpread$3({}, this.props.filters); if (filters[field].operator) { filters[field].constraints.splice(1); filters[field].operator = defaultConstraint.operator; filters[field].constraints[0] = { value: null, matchMode: defaultConstraint.matchMode }; } else { filters[field].value = null; filters[field].matchMode = defaultConstraint.matchMode; } filterClearCallback && filterClearCallback(); this.props.onFilterChange(filters); this.props.onFilterApply(); this.hide(); } }, { key: "applyFilter", value: function applyFilter() { var filterApplyClickCallback = this.getColumnProp('onFilterApplyClick'); filterApplyClickCallback && filterApplyClickCallback({ field: this.field, constraints: this.filterModel }); this.props.onFilterApply(); this.hide(); } }, { key: "toggleMenu", value: function toggleMenu() { this.setState(function (prevState) { return { overlayVisible: !prevState.overlayVisible }; }); } }, { key: "onToggleButtonKeyDown", value: function onToggleButtonKeyDown(event) { switch (event.key) { case 'Escape': case 'Tab': this.hide(); break; case 'ArrowDown': if (this.state.overlayVisible) { var focusable = utils.DomHandler.getFirstFocusableElement(this.overlay); focusable && focusable.focus(); event.preventDefault(); } else if (event.altKey) { this.setState({ overlayVisible: true }); event.preventDefault(); } break; } } }, { key: "onContentKeyDown", value: function onContentKeyDown(event) { if (event.key === 'Escape') { this.hide(); this.icon && this.icon.focus(); } } }, { key: "onInputChange", value: function onInputChange(event, index) { var filters = _objectSpread$3({}, this.props.filters); var value = event.target.value; if (this.props.display === 'menu') { filters[this.field].constraints[index].value = value; } else { filters[this.field].value = value; } this.props.onFilterChange(filters); if (!this.getColumnProp('showApplyButton') || this.props.display === 'row') { this.props.onFilterApply(); } } }, { key: "onRowMatchModeChange", value: function onRowMatchModeChange(matchMode) { var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange'); var filters = _objectSpread$3({}, this.props.filters); filters[this.field].matchMode = matchMode; filterMatchModeChangeCallback && filterMatchModeChangeCallback({ field: this.field, matchMode: matchMode }); this.props.onFilterChange(filters); this.props.onFilterApply(); this.hide(); } }, { key: "onRowMatchModeKeyDown", value: function onRowMatchModeKeyDown(event, matchMode, clear) { var item = event.target; switch (event.key) { case 'ArrowDown': var nextItem = this.findNextItem(item); if (nextItem) { item.removeAttribute('tabindex'); nextItem.tabIndex = 0; nextItem.focus(); } event.preventDefault(); break; case 'ArrowUp': var prevItem = this.findPrevItem(item); if (prevItem) { item.removeAttribute('tabindex'); prevItem.tabIndex = 0; prevItem.focus(); } event.preventDefault(); break; case 'Enter': clear ? this.clearFilter() : this.onRowMatchModeChange(matchMode.value); event.preventDefault(); break; } } }, { key: "onOperatorChange", value: function onOperatorChange(e) { var filterOperationChangeCallback = this.getColumnProp('onFilterOperatorChange'); var value = e.value; var filters = _objectSpread$3({}, this.props.filters); filters[this.field].operator = value; this.props.onFilterChange(filters); filterOperationChangeCallback && filterOperationChangeCallback({ field: this.field, operator: value }); if (!this.getColumnProp('showApplyButton')) { this.props.onFilterApply(); } } }, { key: "onMenuMatchModeChange", value: function onMenuMatchModeChange(value, index) { var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange'); var filters = _objectSpread$3({}, this.props.filters); filters[this.field].constraints[index].matchMode = value; this.props.onFilterChange(filters); filterMatchModeChangeCallback && filterMatchModeChangeCallback({ field: this.field, matchMode: value, index: index }); if (!this.getColumnProp('showApplyButton')) { this.props.onFilterApply(); } } }, { key: "addConstraint", value: function addConstraint() { var filterConstraintAddCallback = this.getColumnProp('onFilterConstraintAdd'); var defaultConstraint = this.getDefaultConstraint(); var filters = _objectSpread$3({}, this.props.filters); var newConstraint = { value: null, matchMode: defaultConstraint.matchMode }; filters[this.field].constraints.push(newConstraint); filterConstraintAddCallback && filterConstraintAddCallback({ field: this.field, constraint: newConstraint }); this.props.onFilterChange(filters); if (!this.getColumnProp('showApplyButton')) { this.props.onFilterApply(); } } }, { key: "removeConstraint", value: function removeConstraint(index) { var filterConstraintRemoveCallback = this.getColumnProp('onFilterConstraintRemove'); var filters = _objectSpread$3({}, this.props.filters); var removedConstraint = filters[this.field].constraints.splice(index, 1); filterConstraintRemoveCallback && filterConstraintRemoveCallback({ field: this.field, constraint: removedConstraint }); this.props.onFilterChange(filters); if (!this.getColumnProp('showApplyButton')) { this.props.onFilterApply(); } } }, { key: "findNextItem", value: function findNextItem(item) { var nextItem = item.nextElementSibling; if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;else return item.parentElement.firstElementChild; } }, { key: "findPrevItem", value: function findPrevItem(item) { var prevItem = item.previousElementSibling; if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;else return item.parentElement.lastElementChild; } }, { key: "hide", value: function hide() { this.setState({ overlayVisible: false }); } }, { key: "onContentClick", value: function onContentClick(event) { this.selfClick = true; overlayservice.OverlayService.emit('overlay-click', { originalEvent: event, target: this.overlay }); } }, { key: "onContentMouseDown", value: function onContentMouseDown() { this.selfClick = true; } }, { key: "onOverlayEnter", value: function onOverlayEnter() { var _this2 = this; utils.ZIndexUtils.set('overlay', this.overlay, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']); utils.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default["default"].appendTo, false); this.bindOutsideClickListener(); this.bindScrollListener(); this.bindResizeListener(); this.overlayEventListener = function (e) { if (!_this2.isOutsideClicked(e.target)) { _this2.selfClick = true; } }; overlayservice.OverlayService.on('overlay-click', this.overlayEventListener); } }, { key: "onOverlayExit", value: function onOverlayExit() { this.onOverlayHide(); } }, { key: "onOverlayExited", value: function onOverlayExited() { utils.ZIndexUtils.clear(this.overlay); } }, { key: "onOverlayHide", value: function onOverlayHide() { this.unbindOutsideClickListener(); this.unbindResizeListener(); this.unbindScrollListener(); overlayservice.OverlayService.off('overlay-click', this.overlayEventListener); this.overlayEventListener = null; } }, { key: "bindOutsideClickListener", value: function bindOutsideClickListener() { var _this3 = this; if (!this.outsideClickListener) { this.outsideClickListener = function (event) { if (!_this3.selfClick && _this3.isOutsideClicked(event.target)) { _this3.hide(); } _this3.selfClick = false; }; document.addEventListener('click', this.outsideClickListener); } } }, { key: "unbindOutsideClickListener", value: function unbindOutsideClickListener() { if (this.outsideClickListener) { document.removeEventListener('click', this.outsideClickListener); this.outsideClickListener = null; this.selfClick = false; } } }, { key: "bindScrollListener", value: function bindScrollListener() { var _this4 = this; if (!this.scrollHandler) { this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.icon, function () { if (_this4.state.overlayVisible) { _this4.hide(); } }); } this.scrollHandler.bindScrollListener(); } }, { key: "unbindScrollListener", value: function unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } }, { key: "bindResizeListener", value: function bindResizeListener() { var _this5 = this; if (!this.resizeListener) { this.resizeListener = function () { if (_this5.state.overlayVisible && !utils.DomHandler.isTouchDevice()) { _this5.hide(); } }; window.addEventListener('resize', this.resizeListener); } } }, { key: "unbindResizeListener", value: function unbindResizeListener() { if (this.resizeListener) { window.removeEventListener('resize', this.resizeListener); this.resizeListener = null; } } }, { key: "fieldConstraints", value: function fieldConstraints() { return this.filterModel ? this.filterModel.constraints || [this.filterModel] : []; } }, { key: "operator", value: function operator() { return this.filterModel.operator; } }, { key: "operatorOptions", value: function operatorOptions() { return [{ label: PrimeReact.localeOption('matchAll'), value: PrimeReact.FilterOperator.AND }, { label: PrimeReact.localeOption('matchAny'), value: PrimeReact.FilterOperator.OR }]; } }, { key: "noFilterLabel", value: function noFilterLabel() { return PrimeReact.localeOption('noFilter'); } }, { key: "removeRuleButtonLabel", value: function removeRuleButtonLabel() { return PrimeReact.localeOption('removeRule'); } }, { key: "addRuleButtonLabel", value: function addRuleButtonLabel() { return PrimeReact.localeOption('addRule'); } }, { key: "clearButtonLabel", value: function clearButtonLabel() { return PrimeReact.localeOption('clear'); } }, { key: "applyButtonLabel", value: function applyButtonLabel() { return PrimeReact.localeOption('apply'); } }, { key: "filterCallback", value: function filterCallback(value) { var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var filters = _objectSpread$3({}, this.props.filters); var meta = filters[this.field]; this.props.display === 'menu' && meta && meta.operator ? filters[this.field].constraints[index].value = value : filters[this.field].value = value; this.props.onFilterChange(filters); } }, { key: "filterApplyCallback", value: function filterApplyCallback() { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } args && this.filterCallback(args[0], args[1]); this.props.onFilterApply(); } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.props.display === 'menu' && this.state.overlayVisible) { utils.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default["default"].appendTo, false); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { if (this.overlayEventListener) { overlayservice.OverlayService.off('overlay-click', this.overlayEventListener); this.overlayEventListener = null; } if (this.overlay) { utils.ZIndexUtils.clear(this.overlay); this.onOverlayHide(); } } }, { key: "renderFilterElement", value: function renderFilterElement(model, index) { var _this6 = this; var value = model ? model.value : null; return this.getColumnProp('filterElement') ? utils.ObjectUtils.getJSXElement(this.getColumnProp('filterElement'), { field: this.field, index: index, filterModel: model, value: value, filterApplyCallback: this.filterApplyCallback, filterCallback: this.filterCallback }) : /*#__PURE__*/React__default["default"].createElement(inputtext.InputText, { type: this.getColumnProp('filterType'), value: value || '', onChange: function onChange(e) { return _this6.onInputChange(e, index); }, className: "p-column-filter", placeholder: this.getColumnProp('filterPlaceholder'), maxLength: this.getColumnProp('filterMaxLength') }); } }, { key: "renderRowFilterElement", value: function renderRowFilterElement() { if (this.props.display === 'row') { var content = this.renderFilterElement(this.filterModel, 0); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-fluid p-column-filter-element" }, content); } return null; } }, { key: "renderMenuFilterElement", value: function renderMenuFilterElement(fieldConstraint, index) { if (this.props.display === 'menu') { return this.renderFilterElement(fieldConstraint, index); } return null; } }, { key: "renderMenuButton", value: function renderMenuButton() { var _this7 = this; if (this.showMenuButton()) { var className = utils.classNames('p-column-filter-menu-button p-link', { 'p-column-filter-menu-button-open': this.state.overlayVisible, 'p-column-filter-menu-button-active': this.hasFilter() }); return /*#__PURE__*/React__default["default"].createElement("button", { ref: function ref(el) { return _this7.icon = el; }, type: "button", className: className, "aria-haspopup": true, "aria-expanded": this.state.overlayVisible, onClick: this.toggleMenu, onKeyDown: this.onToggleButtonKeyDown }, /*#__PURE__*/React__default["default"].createElement("span", { className: "pi pi-filter-icon pi-filter" })); } return null; } }, { key: "renderClearButton", value: function renderClearButton() { if (this.getColumnProp('showClearButton') && this.props.display === 'row') { var className = utils.classNames('p-column-filter-clear-button p-link', { 'p-hidden-space': !this.hasRowFilter() }); return /*#__PURE__*/React__default["default"].createElement("button", { className: className, type: "button", onClick: this.clearFilter }, /*#__PURE__*/React__default["default"].createElement("span", { className: "pi pi-filter-slash" })); } return null; } }, { key: "renderRowItems", value: function renderRowItems() { var _this8 = this; if (this.isShowMatchModes()) { var matchModes = this.matchModes(); var noFilterLabel = this.noFilterLabel(); return /*#__PURE__*/React__default["default"].createElement("ul", { className: "p-column-filter-row-items" }, matchModes.map(function (matchMode, i) { var value = matchMode.value, label = matchMode.label; var className = utils.classNames('p-column-filter-row-item', { 'p-highlight': _this8.isRowMatchModeSelected(value) }); var tabIndex = i === 0 ? 0 : null; return /*#__PURE__*/React__default["default"].createElement("li", { className: className, key: label, onClick: function onClick() { return _this8.onRowMatchModeChange(value); }, onKeyDown: function onKeyDown(e) { return _this8.onRowMatchModeKeyDown(e, matchMode); }, tabIndex: tabIndex }, label); }), /*#__PURE__*/React__default["default"].createElement("li", { className: "p-column-filter-separator" }), /*#__PURE__*/React__default["default"].createElement("li", { className: "p-column-filter-row-item", onClick: this.clearFilter, onKeyDown: function onKeyDown(e) { return _this8.onRowMatchModeKeyDown(e, null, true); } }, noFilterLabel)); } return null; } }, { key: "renderOperator", value: function renderOperator() { if (this.isShowOperator()) { var options = this.operatorOptions(); var value = this.operator(); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-column-filter-operator" }, /*#__PURE__*/React__default["default"].createElement(dropdown.Dropdown, { options: options, value: value, onChange: this.onOperatorChange, className: "p-column-filter-operator-dropdown" })); } return null; } }, { key: "renderMatchModeDropdown", value: function renderMatchModeDropdown(constraint, index) { var _this9 = this; if (this.isShowMatchModes()) { var options = this.matchModes(); return /*#__PURE__*/React__default["default"].createElement(dropdown.Dropdown, { options: options, value: constraint.matchMode, onChange: function onChange(e) { return _this9.onMenuMatchModeChange(e.value, index); }, className: "p-column-filter-matchmode-dropdown" }); } return null; } }, { key: "renderRemoveButton", value: function renderRemoveButton(index) { var _this10 = this; if (this.showRemoveIcon()) { var removeRuleLabel = this.removeRuleButtonLabel(); return /*#__PURE__*/React__default["default"].createElement(button.Button, { type: "button", icon: "pi pi-trash", className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm", onClick: function onClick() { return _this10.removeConstraint(index); }, label: removeRuleLabel }); } return null; } }, { key: "renderConstraints", value: function renderConstraints() { var _this11 = this; var fieldConstraints = this.fieldConstraints(); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-column-filter-constraints" }, fieldConstraints.map(function (fieldConstraint, i) { var matchModeDropdown = _this11.renderMatchModeDropdown(fieldConstraint, i); var menuFilterElement = _this11.renderMenuFilterElement(fieldConstraint, i); var removeButton = _this11.renderRemoveButton(i); return /*#__PURE__*/React__default["default"].createElement("div", { key: i, className: "p-column-filter-constraint" }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React__default["default"].createElement("div", null, removeButton)); })); } }, { key: "renderAddRule", value: function renderAddRule() { if (this.isShowAddConstraint()) { var addRuleLabel = this.addRuleButtonLabel(); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-column-filter-add-rule" }, /*#__PURE__*/React__default["default"].createElement(button.Button, { type: "button", label: addRuleLabel, icon: "pi pi-plus", className: "p-column-filter-add-button p-button-text p-button-sm", onClick: this.addConstraint })); } return null; } }, { key: "renderFilterClearButton", value: function renderFilterClearButton() { if (this.getColumnProp('showClearButton')) { if (!this.getColumnProp('filterClear')) { var clearLabel = this.clearButtonLabel(); return /*#__PURE__*/React__default["default"].createElement(button.Button, { type: "button", className: "p-button-outlined p-button-sm", onClick: this.clearFilter, label: clearLabel }); } return utils.ObjectUtils.getJSXElement(this.getColumnProp('filterClear'), { field: this.field, filterModel: this.filterModel, filterClearCallback: this.clearFilter }); } return null; } }, { key: "renderFilterApplyButton", value: function renderFilterApplyButton() { if (this.getColumnProp('showApplyButton')) { if (!this.getColumnProp('filterApply')) { var applyLabel = this.applyButtonLabel(); return /*#__PURE__*/React__default["default"].createElement(button.Button, { type: "button", className: "p-button-sm", onClick: this.applyFilter, label: applyLabel }); } return utils.ObjectUtils.getJSXElement(this.getColumnProp('filterApply'), { field: this.field, filterModel: this.filterModel, filterApplyCallback: this.applyFilter }); } return null; } }, { key: "renderButtonBar", value: function renderButtonBar() { var clearButton = this.renderFilterClearButton(); var applyButton = this.renderFilterApplyButton(); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-column-filter-buttonbar" }, clearButton, applyButton); } }, { key: "renderItems", value: function renderItems() { var operator = this.renderOperator(); var constraints = this.renderConstraints(); var addRule = this.renderAddRule(); var buttonBar = this.renderButtonBar(); return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, operator, constraints, addRule, buttonBar); } }, { key: "renderOverlay", value: function renderOverlay() { var style = this.getColumnProp('filterMenuStyle'); var className = utils.classNames('p-column-filter-overlay p-component p-fluid', this.getColumnProp('filterMenuClassName'), { 'p-column-filter-overlay-menu': this.props.display === 'menu', 'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled', 'p-ripple-disabled': PrimeReact__default["default"].ripple === false }); var filterHeader = utils.ObjectUtils.getJSXElement(this.getColumnProp('filterHeader'), { field: this.field, filterModel: this.filterModel, filterApplyCallback: this.filterApplyCallback }); var filterFooter = utils.ObjectUtils.getJSXElement(this.getColumnProp('filterFooter'), { field: this.field, filterModel: this.filterModel, filterApplyCallback: this.filterApplyCallback }); var items = this.props.display === 'row' ? this.renderRowItems() : this.renderItems(); return /*#__PURE__*/React__default["default"].createElement(portal.Portal, null, /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, { nodeRef: this.overlayRef, classNames: "p-connected-overlay", "in": this.state.overlayVisible, timeout: { enter: 120, exit: 100 }, unmountOnExit: true, onEnter: this.onOverlayEnter, onExit: this.onOverlayExit, onExited: this.onOverlayExited }, /*#__PURE__*/React__default["default"].createElement("div", { ref: this.overlayRef, style: style, className: className, onKeyDown: this.onContentKeyDown, onClick: this.onContentClick, onMouseDown: this.onContentMouseDown }, filterHeader, items, filterFooter))); } }, { key: "render", value: function render() { var className = utils.classNames('p-column-filter p-fluid', { 'p-column-filter-row': this.props.display === 'row', 'p-column-filter-menu': this.props.display === 'menu' }); var rowFilterElement = this.renderRowFilterElement(); var menuButton = this.renderMenuButton(); var clearButton = this.renderClearButton(); var overlay = this.renderOverlay(); return /*#__PURE__*/React__default["default"].createElement("div", { className: className }, rowFilterElement, menuButton, clearButton, overlay); } }]); return ColumnFilter; }(React.Component); 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; } function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var HeaderCell = /*#__PURE__*/function (_Component) { _inherits(HeaderCell, _Component); var _super = _createSuper$2(HeaderCell); function HeaderCell(props) { var _this; _classCallCheck(this, HeaderCell); _this = _super.call(this, props); _this.state = { styleObject: {} }; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this)); _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); // drag _this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this)); _this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this)); _this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this)); _this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this)); // resize _this.onResizerMouseDown = _this.onResizerMouseDown.bind(_assertThisInitialized(_this)); _this.onResizerClick = _this.onResizerClick.bind(_assertThisInitialized(_this)); _this.onResizerDoubleClick = _this.onResizerDoubleClick.bind(_assertThisInitialized(_this)); return _this; } _createClass(HeaderCell, [{ key: "isBadgeVisible", value: function isBadgeVisible() { return this.props.multiSortMeta && this.props.multiSortMeta.length > 1; } }, { key: "isSortableDisabled", value: function isSortableDisabled() { return !this.getColumnProp('sortable') || this.getColumnProp('sortable') && (this.props.allSortableDisabled || this.getColumnProp('sortableDisabled')); } }, { key: "getColumnProp", value: function getColumnProp() { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return this.props.column ? typeof args[0] === 'string' ? this.props.column.props[args[0]] : (args[0] || this.props.column).props[args[1]] : null; } }, { key: "getStyle", value: function getStyle() { var headerStyle = this.getColumnProp('headerStyle'); var columnStyle = this.getColumnProp('style'); return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, this.state.styleObject) : Object.assign({}, columnStyle, headerStyle); } }, { key: "getMultiSortMetaIndex", value: function getMultiSortMetaIndex() { var _this2 = this; return this.props.multiSortMeta.findIndex(function (meta) { return meta.field === _this2.getColumnProp('field') || meta.field === _this2.getColumnProp('sortField'); }); } }, { key: "getSortMeta", value: function getSortMeta() { var sorted = false; var sortOrder = 0; var metaIndex = -1; if (this.props.sortMode === 'single') { sorted = this.props.sortField && (this.props.sortField === this.getColumnProp('field') || this.props.sortField === this.getColumnProp('sortField')); sortOrder = sorted ? this.props.sortOrder : 0; } else if (this.props.sortMode === 'multiple') { metaIndex = this.getMultiSortMetaIndex(); if (metaIndex > -1) { sorted = true; sortOrder = this.props.multiSortMeta[metaIndex].order; } } return { sorted: sorted, sortOrder: sortOrder, metaIndex: metaIndex }; } }, { key: "getAriaSort", value: function getAriaSort(_ref) { var sorted = _ref.sorted, sortOrder = _ref.sortOrder; if (this.getColumnProp('sortable')) { var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt'; if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none'; } return null; } }, { key: "updateStickyPosition", value: function updateStickyPosition() { if (this.getColumnProp('frozen')) { var styleObject = _objectSpread$2({}, this.state.styleObject); var align = this.getColumnProp('alignFrozen'); if (align === 'right') { var right = 0; var next = this.el.nextElementSibling; if (next) { right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); } styleObject['right'] = right + 'px'; } else { var left = 0; var prev = this.el.previousElementSibling; if (prev) { left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); } styleObject['left'] = left + 'px'; } var filterRow = this.el.parentElement.nextElementSibling; if (filterRow) { var index = utils.DomHandler.index(this.el); filterRow.children[index].style.left = styleObject['left']; filterRow.children[index].style.right = styleObject['right']; } var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right']; !isSameStyle && this.setState({ styleObject: styleObject }); } } }, { key: "updateSortableDisabled", value: function updateSortableDisabled(prevColumn) { if (this.getColumnProp(prevColumn, 'sortableDisabled') !== this.getColumnProp('sortableDisabled') || this.getColumnProp(prevColumn, 'sortable') !== this.getColumnProp('sortable')) { this.props.onSortableChange(); } } }, { key: "onClick", value: function onClick(event) { if (!this.isSortableDisabled()) { var targetNode = event.target; if (utils.DomHandler.hasClass(targetNode, 'p-sortable-column') || utils.DomHandler.hasClass(targetNode, 'p-column-title') || utils.DomHandler.hasClass(targetNode, 'p-column-header-content') || utils.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || utils.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) { utils.DomHandler.clearSelection(); this.props.onSortChange({ originalEvent: event, column: this.props.column, sortableDisabledFields: this.props.sortableDisabledFields }); } } } }, { key: "onMouseDown", value: function onMouseDown(event) { this.props.onColumnMouseDown({ originalEvent: event, column: this.props.column }); } }, { key: "onKeyDown", value: function onKeyDown(event) { if (event.key === 'Enter' && event.currentTarget === this.el && utils.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) { this.onClick(event); event.preventDefault(); } } }, { key: "onDragStart", value: function onDragStart(event) { this.props.onColumnDragStart({ originalEvent: event, column: this.props.column }); } }, { key: "onDragOver", value: function onDragOver(event) { this.props.onColumnDragOver({ originalEvent: event, column: this.props.column }); } }, { key: "onDragLeave", value: function onDragLeave(event) { this.props.onColumnDragLeave({ originalEvent: event, column: this.props.column }); } }, { key: "onDrop", value: function onDrop(event) { this.props.onColumnDrop({ originalEvent: event, column: this.props.column }); } }, { key: "onResizerMouseDown", value: function onResizerMouseDown(event) { this.props.onColumnResizeStart({ originalEvent: event, column: this.props.column }); } }, { key: "onResizerClick", value: function onResizerClick(event) { if (this.props.onColumnResizerClick) { this.props.onColumnResizerClick({ originalEvent: event, element: event.currentTarget.parentElement, column: this.props.column }); event.preventDefault(); } } }, { key: "onResizerDoubleClick", value: function onResizerDoubleClick(event) { if (this.props.onColumnResizerDoubleClick) { this.props.onColumnResizerDoubleClick({ originalEvent: event, element: event.currentTarget.parentElement, column: this.props.column }); event.preventDefault(); } } }, { key: "componentDidMount", value: function componentDidMount() { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps) { if (this.getColumnProp('frozen')) { this.updateStickyPosition(); } this.updateSortableDisabled(prevProps.column); } }, { key: "renderResizer", value: function renderResizer() { if (this.props.resizableColumns && !this.getColumnProp('frozen')) { return /*#__PURE__*/React__default["default"].createElement("span", { className: "p-column-resizer", onMouseDown: this.onResizerMouseDown, onClick: this.onResizerClick, onDoubleClick: this.onResizerDoubleClick }); } return null; } }, { key: "renderTitle", value: function renderTitle() { var title = utils.ObjectUtils.getJSXElement(this.getColumnProp('header'), { props: this.props.tableProps }); return /*#__PURE__*/React__default["default"].createElement("span", { className: "p-column-title" }, title); } }, { key: "renderSortIcon", value: function renderSortIcon(_ref2) { var sorted = _ref2.sorted, sortOrder = _ref2.sortOrder; if (this.getColumnProp('sortable')) { var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt'; var className = utils.classNames('p-sortable-column-icon pi pi-fw', sortIcon); return /*#__PURE__*/React__default["default"].createElement("span", { className: className }); } return null; } }, { key: "renderBadge", value: function renderBadge(_ref3) { var metaIndex = _ref3.metaIndex; if (metaIndex !== -1 && this.isBadgeVisible()) { var value = this.props.groupRowsBy && this.props.groupRowsBy === this.props.groupRowSortField ? metaIndex : metaIndex + 1; return /*#__PURE__*/React__default["default"].createElement("span", { className: "p-sortable-column-badge" }, value); } return null; } }, { key: "renderCheckbox", value: function renderCheckbox() { if (this.props.showSelectAll && this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') { var allRowsSelected = this.props.allRowsSelected(this.props.value); return /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, { checked: allRowsSelected, onChange: this.props.onColumnCheckboxChange, disabled: this.props.empty }); } return null; } }, { key: "renderFilter", value: function renderFilter() { if (this.props.filterDisplay === 'menu' && this.getColumnProp('filter')) { return /*#__PURE__*/React__default["default"].createElement(ColumnFilter, { display: "menu", column: this.props.column, filters: this.props.filters, onFilterChange: this.props.onFilterChange, onFilterApply: this.props.onFilterApply, filtersStore: this.props.filtersStore }); } return null; } }, { key: "renderHeader", value: function renderHeader(sortMeta) { var title = this.renderTitle(); var sortIcon = this.renderSortIcon(sortMeta); var badge = this.renderBadge(sortMeta); var checkbox = this.renderCheckbox(); var filter = this.renderFilter(); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-column-header-content" }, title, sortIcon, badge, checkbox, filter); } }, { key: "renderElement", value: function renderElement() { var _this3 = this; var isSortableDisabled = this.isSortableDisabled(); var sortMeta = this.getSortMeta(); var style = this.getStyle(); var align = this.getColumnProp('alignHeader') || this.getColumnProp('align'); var className = utils.classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), _defineProperty({ 'p-sortable-column': this.getColumnProp('sortable'), 'p-resizable-column': this.props.resizableColumns, 'p-highlight': sortMeta.sorted, 'p-frozen-column': this.getColumnProp('frozen'), 'p-selection-column': this.getColumnProp('selectionMode'), 'p-sortable-disabled': this.getColumnProp('sortable') && isSortableDisabled, 'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable') }, "p-align-".concat(align), !!align)); var tabIndex = this.getColumnProp('sortable') && !isSortableDisabled ? this.props.tabIndex : null; var colSpan = this.getColumnProp('colSpan'); var rowSpan = this.getColumnProp('rowSpan'); var ariaSort = this.getAriaSort(sortMeta); var resizer = this.renderResizer(); var header = this.renderHeader(sortMeta); return /*#__PURE__*/React__default["default"].createElement("th", { ref: function ref(el) { return _this3.el = el; }, style: style, className: className, tabIndex: tabIndex, role: "columnheader", onClick: this.onClick, onKeyDown: this.onKeyDown, onMouseDown: this.onMouseDown, onDragStart: this.onDragStart, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop, colSpan: colSpan, rowSpan: rowSpan, "aria-sort": ariaSort }, resizer, header); } }, { key: "render", value: function render() { return this.renderElement(); } }]); return HeaderCell; }(React.Component); 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 _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var TableHeader = /*#__PURE__*/function (_Component) { _inherits(TableHeader, _Component); var _super = _createSuper$1(TableHeader); function TableHeader(props) { var _this; _classCallCheck(this, TableHeader); _this = _super.call(this, props); _this.state = { sortableDisabledFields: [], allSortableDisabled: false, styleObject: {} }; _this.onSortableChange = _this.onSortableChange.bind(_assertThisInitialized(_this)); _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this)); return _this; } _createClass(TableHeader, [{ key: "isSingleSort", value: function isSingleSort() { return this.props.sortMode === 'single'; } }, { key: "isMultipleSort", value: function isMultipleSort() { return this.props.sortMode === 'multiple'; } }, { key: "isAllSortableDisabled", value: function isAllSortableDisabled() { return this.isSingleSort() && this.state.allSortableDisabled; } }, { key: "isColumnSorted", value: function isColumnSorted(column) { return this.props.sortField !== null ? column.props.field === this.props.sortField || column.props.sortField === this.props.sortField : false; } }, { key: "updateSortableDisabled", value: function updateSortableDisabled() { var _this2 = this; if (this.isSingleSort() || this.isMultipleSort() && this.props.onSortChange) { var sortableDisabledFields = []; var allSortableDisabled = false; this.props.columns.forEach(function (column) { if (column.props.sortableDisabled) { sortableDisabledFields.push(column.props.sortField || column.props.field); if (!allSortableDisabled && _this2.isColumnSorted(column)) { allSortableDisabled = true; } } }); this.setState({ sortableDisabledFields: sortableDisabledFields, allSortableDisabled: allSortableDisabled }); } } }, { key: "onSortableChange", value: function onSortableChange() { this.updateSortableDisabled(); } }, { key: "onCheckboxChange", value: function onCheckboxChange(e) { this.props.onColumnCheckboxChange(e, this.props.value); } }, { key: "componentDidMount", value: function componentDidMount() { this.updateSortableDisabled(); } }, { key: "renderGroupHeaderCells", value: function renderGroupHeaderCells(row) { var columns = React__default["default"].Children.toArray(row.props.children); return this.renderHeaderCells(columns); } }, { key: "renderHeaderCells", value: function renderHeaderCells(columns) { var _this3 = this; return React__default["default"].Children.map(columns, function (col, i) { var isVisible = col ? !col.props.hidden : true; var key = col ? col.props.columnKey || col.props.field || i : i; return isVisible && /*#__PURE__*/React__default["default"].createElement(HeaderCell, { key: key, value: _this3.props.value, tableProps: _this3.props.tableProps, column: col, tabIndex: _this3.props.tabIndex, empty: _this3.props.empty, resizableColumns: _this3.props.resizableColumns, groupRowsBy: _this3.props.groupRowsBy, groupRowSortField: _this3.props.groupRowSortField, sortMode: _this3.props.sortMode, sortField: _this3.props.sortField, sortOrder: _this3.props.sortOrder, multiSortMeta: _this3.props.multiSortMeta, allSortableDisabled: _this3.isAllSortableDisabled(), onSortableChange: _this3.onSortableChange, sortableDisabledFields: _this3.state.sortableDisabledFields, filterDisplay: _this3.props.filterDisplay, filters: _this3.props.filters, filtersStore: _this3.props.filtersStore, onFilterChange: _this3.props.onFilterChange, onFilterApply: _this3.props.onFilterApply, onColumnMouseDown: _this3.props.onColumnMouseDown, onColumnDragStart: _this3.props.onColumnDragStart, onColumnDragOver: _this3.props.onColumnDragOver, onColumnDragLeave: _this3.props.onColumnDragLeave, onColumnDrop: _this3.props.onColumnDrop, onColumnResizeStart: _this3.props.onColumnResizeStart, onColumnResizerClick: _this3.props.onColumnResizerClick, onColumnResizerDoubleClick: _this3.props.onColumnResizerDoubleClick, showSelectAll: _this3.props.showSelectAll, allRowsSelected: _this3.props.allRowsSelected, onColumnCheckboxChange: _this3.onCheckboxChange, reorderableColumns: _this3.props.reorderableColumns, onSortChange: _this3.props.onSortChange }); }); } }, { key: "renderCheckbox", value: function renderCheckbox(selectionMode) { if (this.props.showSelectAll && selectionMode === 'multiple') { var allRowsSelected = this.props.allRowsSelected(this.props.value); return /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, { checked: allRowsSelected, onChange: this.onCheckboxChange, disabled: this.props.empty }); } return null; } }, { key: "renderFilter", value: function renderFilter(column, filter) { if (filter) { return /*#__PURE__*/React__default["default"].createElement(ColumnFilter, { display: "row", column: column, filters: this.props.filters, filtersStore: this.props.filtersStore, onFilterChange: this.props.onFilterChange, onFilterApply: this.props.onFilterApply }); } return null; } }, { key: "renderFilterCells", value: function renderFilterCells() { var _this4 = this; return React__default["default"].Children.map(this.props.columns, function (col, i) { var isVisible = !col.props.hidden; if (isVisible) { var _col$props = col.props, filterHeaderStyle = _col$props.filterHeaderStyle, style = _col$props.style, filterHeaderClassName = _col$props.filterHeaderClassName, className = _col$props.className, frozen = _col$props.frozen, columnKey = _col$props.columnKey, field = _col$props.field, selectionMode = _col$props.selectionMode, filter = _col$props.filter; var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {}); var colClassName = utils.classNames('p-filter-column', filterHeaderClassName, className, { 'p-frozen-column': frozen }); var colKey = columnKey || field || i; var checkbox = _this4.renderCheckbox(selectionMode); var filterRow = _this4.renderFilter(col, filter); return /*#__PURE__*/React__default["default"].createElement("th", { key: colKey, style: colStyle, className: colClassName }, checkbox, filterRow); } return null; }); } }, { key: "renderContent", value: function renderContent() { var _this5 = this; if (this.props.headerColumnGroup) { var rows = React__default["default"].Children.toArray(this.props.headerColumnGroup.props.children); return rows.map(function (row, i) { return /*#__PURE__*/React__default["default"].createElement("tr", { key: i, role: "row" }, _this5.renderGroupHeaderCells(row)); }); } else { var headerRow = /*#__PURE__*/React__default["default"].createElement("tr", { role: "row" }, this.renderHeaderCells(this.props.columns)); var filterRow = this.props.filterDisplay === 'row' && /*#__PURE__*/React__default["default"].createElement("tr", { role: "row" }, this.renderFilterCells()); return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, headerRow, filterRow); } } }, { key: "render", value: function render() { var content = this.renderContent(); return /*#__PURE__*/React__default["default"].createElement("thead", { className: "p-datatable-thead" }, content); } }]); return TableHeader; }(React.Component); function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var DataTable = /*#__PURE__*/function (_Component) { _inherits(DataTable, _Component); var _super = _createSuper(DataTable); function DataTable(props) { var _this; _classCallCheck(this, DataTable); _this = _super.call(this, props); _this.state = { d_rows: props.rows, columnOrder: [], groupRowsSortMeta: null, editingMeta: {}, attributeSelector: null }; if (!_this.props.onPage) { _this.state.first = props.first; _this.state.rows = props.rows; } if (!_this.props.onSort) { _this.state.sortField = props.sortField; _this.state.sortOrder = props.sortOrder; _this.state.multiSortMeta = props.multiSortMeta; } _this.state.d_filters = _this.cloneFilters(props.filters); if (!_this.props.onFilter) { _this.state.filters = props.filters; } // header _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this)); _this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this)); _this.onFilterApply = _this.onFilterApply.bind(_assertThisInitialized(_this)); _this.onColumnHeaderMouseDown = _this.onColumnHeaderMouseDown.bind(_assertThisInitialized(_this)); _this.onColumnHeaderDragStart = _this.onColumnHeaderDragStart.bind(_assertThisInitialized(_this)); _this.onColumnHeaderDragOver = _this.onColumnHeaderDragOver.bind(_assertThisInitialized(_this)); _this.onColumnHeaderDragLeave = _this.onColumnHeaderDragLeave.bind(_assertThisInitialized(_this)); _this.onColumnHeaderDrop = _this.onColumnHeaderDrop.bind(_assertThisInitialized(_this)); _this.onColumnResizeStart = _this.onColumnResizeStart.bind(_assertThisInitialized(_this)); _this.onColumnHeaderCheckboxChange = _this.onColumnHeaderCheckboxChange.bind(_assertThisInitialized(_this)); _this.allRowsSelected = _this.allRowsSelected.bind(_assertThisInitialized(_this)); // body _this.onEditingMetaChange = _this.onEditingMetaChange.bind(_assertThisInitialized(_this)); //paginator _this.onPageChange = _this.onPageChange.bind(_assertThisInitialized(_this)); return _this; } _createClass(DataTable, [{ key: "isCustomStateStorage", value: function isCustomStateStorage() { return this.props.stateStorage === 'custom'; } }, { key: "isStateful", value: function isStateful() { return this.props.stateKey != null || this.isCustomStateStorage(); } }, { key: "isVirtualScrollerDisabled", value: function isVirtualScrollerDisabled() { return utils.ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable; } }, { key: "isEquals", value: function isEquals(data1, data2) { return this.props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey); } }, { key: "hasFilter", value: function hasFilter() { return utils.ObjectUtils.isNotEmpty(this.getFilters()) || this.props.globalFilter; } }, { key: "getFirst", value: function getFirst() { return this.props.onPage ? this.props.first : this.state.first; } }, { key: "getRows", value: function getRows() { return this.props.onPage ? this.props.rows : this.state.rows; } }, { key: "getSortField", value: function getSortField() { return this.props.onSort ? this.props.sortField : this.state.sortField; } }, { key: "getSortOrder", value: function getSortOrder() { return this.props.onSort ? this.props.sortOrder : this.state.sortOrder; } }, { key: "getMultiSortMeta", value: function getMultiSortMeta() { return (this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta) || []; } }, { key: "getFilters", value: function getFilters() { return this.props.onFilter ? this.props.filters : this.state.filters; } }, { key: "getColumnProp", value: function getColumnProp(col, prop) { return col.props[prop]; } }, { key: "getColumns", value: function getColumns(ignoreReorderable) { var _this2 = this; var columns = React__default["default"].Children.toArray(this.props.children); if (!columns) { return null; } if (!ignoreReorderable && this.props.reorderableColumns && this.state.columnOrder) { var orderedColumns = this.state.columnOrder.reduce(function (arr, columnKey) { var column = _this2.findColumnByKey(columns, columnKey); column && arr.push(column); return arr; }, []); return [].concat(_toConsumableArray(orderedColumns), _toConsumableArray(columns.filter(function (col) { return orderedColumns.indexOf(col) < 0; }))); } return columns; } }, { key: "getStorage", value: function getStorage() { switch (this.props.stateStorage) { case 'local': return window.localStorage; case 'session': return window.sessionStorage; case 'custom': return null; default: throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".'); } } }, { key: "saveState", value: function saveState() { var state = {}; if (this.props.paginator) { state.first = this.getFirst(); state.rows = this.getRows(); } var sortField = this.getSortField(); if (sortField) { state.sortField = sortField; state.sortOrder = this.getSortOrder(); } var multiSortMeta = this.getMultiSortMeta(); if (multiSortMeta) { state.multiSortMeta = multiSortMeta; } if (this.hasFilter()) { state.filters = this.getFilters(); } if (this.props.resizableColumns) { this.saveColumnWidths(state); } if (this.props.reorderableColumns) { state.columnOrder = this.state.columnOrder; } if (this.props.expandedRows) { state.expandedRows = this.props.expandedRows; } if (this.props.selection && this.props.onSelectionChange) { state.selection = this.props.selection; } if (this.isCustomStateStorage()) { if (this.props.customSaveState) { this.props.customSaveState(state); } } else { var storage = this.getStorage(); if (utils.ObjectUtils.isNotEmpty(state)) { storage.setItem(this.props.stateKey, JSON.stringify(state)); } } if (this.props.onStateSave) { this.props.onStateSave(state); } } }, { key: "clearState", value: function clearState() { var storage = this.getStorage(); if (storage && this.props.stateKey) { storage.removeItem(this.props.stateKey); } } }, { key: "restoreState", value: function restoreState(state) { var restoredState = {}; if (this.isCustomStateStorage()) { if (this.props.customRestoreState) { restoredState = this.props.customRestoreState(); } } else { var storage = this.getStorage(); var stateString = storage.getItem(this.props.stateKey); var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/; var reviver = function reviver(key, value) { return typeof value === "string" && dateFormat.test(value) ? new Date(value) : value; }; if (stateString) { restoredState = JSON.parse(stateString, reviver); } } this._restoreState(restoredState, state); } }, { key: "restoreTableState", value: function restoreTableState(restoredState) { var state = this._restoreState(restoredState); if (utils.ObjectUtils.isNotEmpty(state)) { this.setState(state); } } }, { key: "_restoreState", value: function _restoreState(restoredState) { var _this3 = this; var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (utils.ObjectUtils.isNotEmpty(restoredState)) { if (this.props.paginator) { if (this.props.onPage) { var getOnPageParams = function getOnPageParams(first, rows) { var totalRecords = _this3.getTotalRecords(_this3.processedData()); var pageCount = Math.ceil(totalRecords / rows) || 1; var page = Math.floor(first / rows); return { first: first, rows: rows, page: page, pageCount: pageCount }; }; this.props.onPage(this.createEvent(getOnPageParams(restoredState.first, restoredState.rows))); } else { state.first = restoredState.first; state.rows = restoredState.rows; } } if (restoredState.sortField) { if (this.props.onSort) { this.props.onSort(this.createEvent({ sortField: restoredState.sortField, sortOrder: restoredState.sortOrder })); } else { state.sortField = restoredState.sortField; state.sortOrder = restoredState.sortOrder; } } if (restoredState.multiSortMeta) { if (this.props.onSort) { this.props.onSort(this.createEvent({ multiSortMeta: restoredState.multiSortMeta })); } else { state.multiSortMeta = restoredState.multiSortMeta; } } if (restoredState.filters) { state.d_filters = this.cloneFilters(restoredState.filters); if (this.props.onFilter) { this.props.onFilter(this.createEvent({ filters: restoredState.filters })); } else { state.filters = this.cloneFilters(restoredState.filters); } } if (this.props.resizableColumns) { this.columnWidthsState = restoredState.columnWidths; this.tableWidthState = restoredState.tableWidth; } if (this.props.reorderableColumns) { state.columnOrder = restoredState.columnOrder; } if (restoredState.expandedRows && this.props.onRowToggle) { this.props.onRowToggle({ data: restoredState.expandedRows }); } if (restoredState.selection && this.props.onSelectionChange) { this.props.onSelectionChange({ value: restoredState.selection }); } if (this.props.onStateRestore) { this.props.onStateRestore(restoredState); } } return state; } }, { key: "saveColumnWidths", value: function saveColumnWidths(state) { var widths = []; var headers = utils.DomHandler.find(this.el, '.p-datatable-thead > tr > th'); headers.forEach(function (header) { return widths.push(utils.DomHandler.getOuterWidth(header)); }); state.columnWidths = widths.join(','); if (this.props.columnResizeMode === 'expand') { state.tableWidth = utils.DomHandler.getOuterWidth(this.table) + 'px'; } } }, { key: "restoreColumnWidths", value: function restoreColumnWidths() { var _this4 = this; if (this.columnWidthsState) { var widths = this.columnWidthsState.split(','); if (this.props.columnResizeMode === 'expand' && this.tableWidthState) { this.table.style.width = this.tableWidthState; this.table.style.minWidth = this.tableWidthState; this.el.style.width = this.tableWidthState; } if (utils.ObjectUtils.isNotEmpty(widths)) { this.createStyleElement(); var innerHTML = ''; widths.forEach(function (width, index) { var style = _this4.props.scrollable ? "flex: 1 1 ".concat(width, "px !important") : "width: ".concat(width, "px !important"); innerHTML += "\n .p-datatable[".concat(_this4.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n "); }); this.styleElement.innerHTML = innerHTML; } } } }, { key: "findParentHeader", value: function findParentHeader(element) { if (element.nodeName === 'TH') { return element; } else { var parent = element.parentElement; while (parent.nodeName !== 'TH') { parent = parent.parentElement; if (!parent) break; } return parent; } } }, { key: "getGroupRowSortField", value: function getGroupRowSortField() { return this.props.sortMode === 'single' ? this.props.sortField : this.state.groupRowsSortMeta ? this.state.groupRowsSortMeta.field : null; } }, { key: "getSelectableData", value: function getSelectableData(val) { var _this5 = this; if (this.props.showSelectionElement || this.props.isDataSelectable) { return val.filter(function (data, index) { var isSelectable = true; if (_this5.props.showSelectionElement) isSelectable = _this5.props.showSelectionElement({ rowIndex: index, props: _this5.props }); if (_this5.props.isDataSelectable && isSelectable) isSelectable = _this5.props.isDataSelectable({ data: data, index: index }); return isSelectable; }); } return val; } }, { key: "allRowsSelected", value: function allRowsSelected(processedData) { var _this6 = this; if (this.props.onSelectAllChange) { return this.props.selectAll; } else { var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData; var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : data; var selectableVal = this.getSelectableData(val); return selectableVal && this.props.selection && selectableVal.every(function (sv) { return _this6.props.selection.some(function (s) { return _this6.isEquals(s, sv); }); }); } } }, { key: "getSelectionModeInColumn", value: function getSelectionModeInColumn(columns) { if (columns) { var col = columns.find(function (c) { return !!c.props.selectionMode; }); return col ? col.props.selectionMode : null; } return null; } }, { key: "findColumnByKey", value: function findColumnByKey(columns, key) { return utils.ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) { return col.props.columnKey === key || col.props.field === key; }) : null; } }, { key: "getTotalRecords", value: function getTotalRecords(data) { return this.props.lazy ? this.props.totalRecords : data ? data.length : 0; } }, { key: "onEditingMetaChange", value: function onEditingMetaChange(e) { var rowData = e.rowData, field = e.field, rowIndex = e.rowIndex, editing = e.editing; var editingMeta = _objectSpread({}, this.state.editingMeta); var meta = editingMeta[rowIndex]; if (editing) { !meta && (meta = editingMeta[rowIndex] = { data: _objectSpread({}, rowData), fields: [] }); meta['fields'].push(field); } else if (meta) { var fields = meta['fields'].filter(function (f) { return f !== field; }); !fields.length ? delete editingMeta[rowIndex] : meta['fields'] = fields; } this.setState({ editingMeta: editingMeta }); } }, { key: "clearEditingMetaData", value: function clearEditingMetaData() { if (this.props.editMode && utils.ObjectUtils.isNotEmpty(this.state.editingMeta)) { this.setState({ editingMeta: {} }); } } }, { key: "onColumnResizeStart", value: function onColumnResizeStart(e) { var event = e.originalEvent, column = e.column; var containerLeft = utils.DomHandler.getOffset(this.el).left; this.resizeColumn = column; this.resizeColumnElement = event.currentTarget.parentElement; this.columnResizing = true; this.lastResizeHelperX = event.pageX - containerLeft + this.el.scrollLeft; this.bindColumnResizeEvents(); } }, { key: "onColumnResize", value: function onColumnResize(event) { var containerLeft = utils.DomHandler.getOffset(this.el).left; utils.DomHandler.addClass(this.el, 'p-unselectable-text'); this.resizeHelper.style.height = this.el.offsetHeight + 'px'; this.resizeHelper.style.top = 0 + 'px'; this.resizeHelper.style.left = event.pageX - containerLeft + this.el.scrollLeft + 'px'; this.resizeHelper.style.display = 'block'; } }, { key: "onColumnResizeEnd", value: function onColumnResizeEnd() { var delta = this.resizeHelper.offsetLeft - this.lastResizeHelperX; var columnWidth = this.resizeColumnElement.offsetWidth; var newColumnWidth = columnWidth + delta; var minWidth = this.resizeColumnElement.style.minWidth || 15; if (columnWidth + delta > parseInt(minWidth, 10)) { if (this.props.columnResizeMode === 'fit') { var nextColumn = this.resizeColumnElement.nextElementSibling; var nextColumnWidth = nextColumn.offsetWidth - delta; if (newColumnWidth > 15 && nextColumnWidth > 15) { this.resizeTableCells(newColumnWidth, nextColumnWidth); } } else if (this.props.columnResizeMode === 'expand') { var tableWidth = this.table.offsetWidth + delta + 'px'; this.table.style.width = tableWidth; this.table.style.minWidth = tableWidth; this.resizeTableCells(newColumnWidth); } if (this.props.onColumnResizeEnd) { this.props.onColumnResizeEnd({ element: this.resizeColumnElement, column: this.resizeColumn, delta: delta }); } if (this.isStateful()) { this.saveState(); } } this.resizeHelper.style.display = 'none'; this.resizeColumn = null; this.resizeColumnElement = null; utils.DomHandler.removeClass(this.el, 'p-unselectable-text'); this.unbindColumnResizeEvents(); } }, { key: "resizeTableCells", value: function resizeTableCells(newColumnWidth, nextColumnWidth) { var _this7 = this; var widths = []; var colIndex = utils.DomHandler.index(this.resizeColumnElement); var headers = utils.DomHandler.find(this.table, '.p-datatable-thead > tr > th'); headers.forEach(function (header) { return widths.push(utils.DomHandler.getOuterWidth(header)); }); this.destroyStyleElement(); this.createStyleElement(); var innerHTML = ''; widths.forEach(function (width, index) { var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width; var style = _this7.props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important"); innerHTML += "\n .p-datatable[".concat(_this7.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n "); }); this.styleElement.innerHTML = innerHTML; } }, { key: "bindColumnResizeEvents", value: function bindColumnResizeEvents() { var _this8 = this; if (!this.documentColumnResizeListener) { this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) { if (_this8.columnResizing) { _this8.onColumnResize(event); } }); } if (!this.documentColumnResizeEndListener) { this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () { if (_this8.columnResizing) { _this8.columnResizing = false; _this8.onColumnResizeEnd(); } }); } } }, { key: "unbindColumnResizeEvents", value: function unbindColumnResizeEvents() { if (this.documentColumnResizeListener) { document.removeEventListener('document', this.documentColumnResizeListener); this.documentColumnResizeListener = null; } if (this.documentColumnResizeEndListener) { document.removeEventListener('document', this.documentColumnResizeEndListener); this.documentColumnResizeEndListener = null; } } }, { key: "onColumnHeaderMouseDown", value: function onColumnHeaderMouseDown(e) { utils.DomHandler.clearSelection(); var event = e.originalEvent, column = e.column; if (this.props.reorderableColumns && this.getColumnProp(column, 'reorderable') !== false) { if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || utils.DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true; } } }, { key: "onColumnHeaderCheckboxChange", value: function onColumnHeaderCheckboxChange(e, processedData) { var _this9 = this; if (this.props.onSelectAllChange) { this.props.onSelectAllChange(e); } else { var originalEvent = e.originalEvent, checked = e.checked; var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData; var selection = this.props.selectionPageOnly && this.props.selection ? this.props.selection.filter(function (s) { return !data.some(function (d) { return _this9.isEquals(s, d); }); }) : []; if (checked) { selection = this.props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data)); selection = this.getSelectableData(selection); this.props.onAllRowsSelect && this.props.onAllRowsSelect({ originalEvent: originalEvent, data: selection, type: 'all' }); } else { this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({ originalEvent: originalEvent, data: selection, type: 'all' }); } if (this.props.onSelectionChange) { this.props.onSelectionChange({ originalEvent: originalEvent, value: selection, type: 'all' }); } } } }, { key: "onColumnHeaderDragStart", value: function onColumnHeaderDragStart(e) { var event = e.originalEvent, column = e.column; if (this.columnResizing) { event.preventDefault(); return; } this.colReorderIconWidth = utils.DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp); this.colReorderIconHeight = utils.DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp); this.draggedColumn = column; this.draggedColumnElement = this.findParentHeader(event.currentTarget); event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible } }, { key: "onColumnHeaderDragOver", value: function onColumnHeaderDragOver(e) { var event = e.originalEvent; var dropHeader = this.findParentHeader(event.currentTarget); if (this.props.reorderableColumns && this.draggedColumnElement && dropHeader) { event.preventDefault(); if (this.draggedColumnElement !== dropHeader) { var containerOffset = utils.DomHandler.getOffset(this.el); var dropHeaderOffset = utils.DomHandler.getOffset(dropHeader); var targetLeft = dropHeaderOffset.left - containerOffset.left; var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2; this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px'; this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px'; if (event.pageX > columnCenter) { this.reorderIndicatorUp.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px'; this.reorderIndicatorDown.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px'; this.dropPosition = 1; } else { this.reorderIndicatorUp.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px'; this.reorderIndicatorDown.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px'; this.dropPosition = -1; } this.reorderIndicatorUp.style.display = 'block'; this.reorderIndicatorDown.style.display = 'block'; } } } }, { key: "onColumnHeaderDragLeave", value: function onColumnHeaderDragLeave(e) { var event = e.originalEvent; if (this.props.reorderableColumns && this.draggedColumnElement) { event.preventDefault(); this.reorderIndicatorUp.style.display = 'none'; this.reorderIndicatorDown.style.display = 'none'; } } }, { key: "onColumnHeaderDrop", value: function onColumnHeaderDrop(e) { var _this10 = this; var event = e.originalEvent, column = e.column; event.preventDefault(); if (this.draggedColumnElement) { var dragIndex = utils.DomHandler.index(this.draggedColumnElement); var dropIndex = utils.DomHandler.index(this.findParentHeader(event.currentTarget)); var allowDrop = dragIndex !== dropIndex; if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dragIndex - dropIndex === 1 && this.dropPosition === 1)) { allowDrop = false; } if (allowDrop) { var columns = this.getColumns(); var isSameColumn = function isSameColumn(col1, col2) { return col1.props.columnKey || col2.props.columnKey ? utils.ObjectUtils.equals(col1.props, col2.props, 'columnKey') : utils.ObjectUtils.equals(col1.props, col2.props, 'field'); }; var dragColIndex = columns.findIndex(function (child) { return isSameColumn(child, _this10.draggedColumn); }); var dropColIndex = columns.findIndex(function (child) { return isSameColumn(child, column); }); if (dropColIndex < dragColIndex && this.dropPosition === 1) { dropColIndex++; } if (dropColIndex > dragColIndex && this.dropPosition === -1) { dropColIndex--; } utils.ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex); var columnOrder = columns.reduce(function (orders, col) { orders.push(col.props.columnKey || col.props.field); return orders; }, []); this.setState({ columnOrder: columnOrder }); if (this.props.onColReorder) { this.props.onColReorder({ originalEvent: event, dragIndex: dragColIndex, dropIndex: dropColIndex, columns: columns }); } } this.reorderIndicatorUp.style.display = 'none'; this.reorderIndicatorDown.style.display = 'none'; this.draggedColumnElement.draggable = false; this.draggedColumnElement = null; this.draggedColumn = null; this.dropPosition = null; } } }, { key: "createStyleElement", value: function createStyleElement() { this.styleElement = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce); } }, { key: "createResponsiveStyle", value: function createResponsiveStyle() { if (!this.responsiveStyleElement) { this.responsiveStyleElement = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce); var innerHTML = "\n@media screen and (max-width: ".concat(this.props.breakpoint, ") {\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-thead > tr > th,\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tfoot > tr > td {\n display: none !important;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td {\n display: flex;\n width: 100% !important;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td:not(:last-child) {\n border: 0 none;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n border-top: 0;\n border-right: 0;\n border-left: 0;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td > .p-column-title {\n display: block;\n }\n}\n"); this.responsiveStyleElement.innerHTML = innerHTML; } } }, { key: "destroyResponsiveStyle", value: function destroyResponsiveStyle() { this.responsiveStyleElement = utils.DomHandler.removeInlineStyle(this.responsiveStyleElement); } }, { key: "destroyStyleElement", value: function destroyStyleElement() { this.styleElement = utils.DomHandler.removeInlineStyle(this.styleElement); } }, { key: "onPageChange", value: function onPageChange(e) { this.clearEditingMetaData(); if (this.props.onPage) this.props.onPage(this.createEvent(e));else this.setState({ first: e.first, rows: e.rows }); if (this.props.onValueChange) { this.props.onValueChange(this.processedData()); } } }, { key: "onSortChange", value: function onSortChange(e) { this.clearEditingMetaData(); var event = e.originalEvent, column = e.column, sortableDisabledFields = e.sortableDisabledFields; var sortField = column.props.sortField || column.props.field; var sortOrder = this.props.defaultSortOrder; var multiSortMeta; var eventMeta; this.columnSortable = column.props.sortable; this.columnSortFunction = column.props.sortFunction; this.columnField = column.props.sortField; if (this.props.sortMode === 'multiple') { var metaKey = event.metaKey || event.ctrlKey; multiSortMeta = _toConsumableArray(this.getMultiSortMeta()); var sortMeta = multiSortMeta.find(function (sortMeta) { return sortMeta.field === sortField; }); sortOrder = sortMeta ? this.getCalculatedSortOrder(sortMeta.order) : sortOrder; var newMetaData = { field: sortField, order: sortOrder }; if (sortOrder) { multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter(function (meta) { return sortableDisabledFields.some(function (field) { return field === meta.field; }); }); this.addSortMeta(newMetaData, multiSortMeta); } else if (this.props.removableSort) { this.removeSortMeta(newMetaData, multiSortMeta); } eventMeta = { multiSortMeta: multiSortMeta }; } else { sortOrder = this.getSortField() === sortField ? this.getCalculatedSortOrder(this.getSortOrder()) : sortOrder; if (this.props.removableSort) { sortField = sortOrder ? sortField : null; } eventMeta = { sortField: sortField, sortOrder: sortOrder }; } if (this.props.onSort) { this.props.onSort(this.createEvent(eventMeta)); } else { eventMeta.first = 0; this.setState(eventMeta); } if (this.props.onValueChange) { this.props.onValueChange(this.processedData({ sortField: sortField, sortOrder: sortOrder, multiSortMeta: multiSortMeta })); } } }, { key: "getCalculatedSortOrder", value: function getCalculatedSortOrder(currentOrder) { return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1; } }, { key: "compareValuesOnSort", value: function compareValuesOnSort(value1, value2) { var result = null; if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; return result; } }, { key: "addSortMeta", value: function addSortMeta(meta, multiSortMeta) { var index = multiSortMeta.findIndex(function (sortMeta) { return sortMeta.field === meta.field; }); if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta); } }, { key: "removeSortMeta", value: function removeSortMeta(meta, multiSortMeta) { var index = multiSortMeta.findIndex(function (sortMeta) { return sortMeta.field === meta.field; }); if (index >= 0) { multiSortMeta.splice(index, 1); } multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null; } }, { key: "sortSingle", value: function sortSingle(data, field, order) { var _this11 = this; if (this.props.groupRowsBy && this.props.groupRowsBy === this.props.sortField) { var multiSortMeta = [{ field: this.props.sortField, order: this.props.sortOrder || this.props.defaultSortOrder }]; this.props.sortField !== field && multiSortMeta.push({ field: field, order: order }); return this.sortMultiple(data, multiSortMeta); } var value = _toConsumableArray(data); if (this.columnSortable && this.columnSortFunction) { value = this.columnSortFunction({ field: field, order: order }); } else { value.sort(function (data1, data2) { var value1 = utils.ObjectUtils.resolveFieldData(data1, field); var value2 = utils.ObjectUtils.resolveFieldData(data2, field); var result = _this11.compareValuesOnSort(value1, value2); return order * result; }); } return value; } }, { key: "sortMultiple", value: function sortMultiple(data) { var _this12 = this; var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; if (this.props.groupRowsBy && (this.groupRowsSortMeta || multiSortMeta.length && this.props.groupRowsBy === multiSortMeta[0].field)) { var firstSortMeta = multiSortMeta[0]; !this.groupRowsSortMeta && (this.groupRowsSortMeta = firstSortMeta); if (firstSortMeta.field !== this.groupRowsSortMeta.field) { multiSortMeta = [this.groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta)); } } var value = _toConsumableArray(data); if (this.columnSortable && this.columnSortFunction) { var meta = multiSortMeta.find(function (meta) { return meta.field === _this12.columnField; }); var field = this.columnField; var order = meta ? meta.order : this.defaultSortOrder; value = this.columnSortFunction({ field: field, order: order }); } else { value.sort(function (data1, data2) { return _this12.multisortField(data1, data2, multiSortMeta, 0); }); } return value; } }, { key: "multisortField", value: function multisortField(data1, data2, multiSortMeta, index) { var value1 = utils.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field); var value2 = utils.ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); if (value1 === value2) { return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0; } var result = this.compareValuesOnSort(value1, value2); return multiSortMeta[index].order * result; } }, { key: "onFilterChange", value: function onFilterChange(filters) { this.clearEditingMetaData(); this.setState({ d_filters: filters }); } }, { key: "onFilterApply", value: function onFilterApply() { var _this13 = this; clearTimeout(this.filterTimeout); this.filterTimeout = setTimeout(function () { var filters = _this13.cloneFilters(_this13.state.d_filters); if (_this13.props.onFilter) { _this13.props.onFilter(_this13.createEvent({ filters: filters })); } else { _this13.setState({ first: 0, filters: filters }); } if (_this13.props.onValueChange) { _this13.props.onValueChange(_this13.processedData({ filters: filters })); } }, this.props.filterDelay); } }, { key: "filterLocal", value: function filterLocal(data, filters) { if (!data) return; filters = filters || {}; var columns = this.getColumns(); var filteredValue = []; var isGlobalFilter = filters['global'] || this.props.globalFilter; var globalFilterFieldsArray; if (isGlobalFilter) { globalFilterFieldsArray = this.props.globalFilterFields || columns.filter(function (col) { return !col.props.excludeGlobalFilter; }).map(function (col) { return col.props.filterField || col.props.field; }); } for (var i = 0; i < data.length; i++) { var localMatch = true; var globalMatch = false; var localFiltered = false; for (var prop in filters) { if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') { localFiltered = true; var filterField = prop; var filterMeta = filters[filterField]; if (filterMeta.operator) { for (var j = 0; j < filterMeta.constraints.length; j++) { var filterConstraint = filterMeta.constraints[j]; localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint, j); if (filterMeta.operator === PrimeReact.FilterOperator.OR && localMatch || filterMeta.operator === PrimeReact.FilterOperator.AND && !localMatch) { break; } } } else { localMatch = this.executeLocalFilter(filterField, data[i], filterMeta, 0); } if (!localMatch) { break; } } } if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) { for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) { var globalFilterField = globalFilterFieldsArray[_j]; var matchMode = filters['global'] ? filters['global'].matchMode : PrimeReact.FilterMatchMode.CONTAINS; var value = filters['global'] ? filters['global'].value : this.props.globalFilter; globalMatch = PrimeReact.FilterService.filters[matchMode](utils.ObjectUtils.resolveFieldData(data[i], globalFilterField), value, this.props.filterLocale); if (globalMatch) { break; } } } var matches = void 0; if (isGlobalFilter) { matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch; } else { matches = localFiltered && localMatch; } if (matches) { filteredValue.push(data[i]); } } if (filteredValue.length === this.props.value.length) { filteredValue = data; } return filteredValue; } }, { key: "executeLocalFilter", value: function executeLocalFilter(field, rowData, filterMeta, index) { var filterValue = filterMeta.value; var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || PrimeReact.FilterMatchMode.STARTS_WITH; var dataFieldValue = utils.ObjectUtils.resolveFieldData(rowData, field); var filterConstraint = PrimeReact.FilterService.filters[filterMatchMode]; return filterConstraint(dataFieldValue, filterValue, this.props.filterLocale, index); } }, { key: "cloneFilters", value: function cloneFilters(filters) { var _this14 = this; filters = filters || this.props.filters; var cloned = {}; if (filters) { Object.entries(filters).forEach(function (_ref) { var _ref2 = _slicedToArray(_ref, 2), prop = _ref2[0], value = _ref2[1]; cloned[prop] = value.operator ? { operator: value.operator, constraints: value.constraints.map(function (constraint) { return _objectSpread({}, constraint); }) } : _objectSpread({}, value); }); } else { var columns = this.getColumns(); cloned = columns.reduce(function (_filters, col) { var field = col.props.filterField || col.props.field; var filterFunction = col.props.filterFunction; var dataType = col.props.dataType; var matchMode = col.props.filterMatchMode || (PrimeReact__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH); var constraint = { value: null, matchMode: matchMode }; if (filterFunction) { PrimeReact.FilterService.register("custom_".concat(field), function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return filterFunction.apply(void 0, args.concat([{ column: col }])); }); } _filters[field] = _this14.props.filterDisplay === 'menu' ? { operator: PrimeReact.FilterOperator.AND, constraints: [constraint] } : constraint; return _filters; }, {}); } return cloned; } }, { key: "filter", value: function filter(value, field, matchMode) { var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; var filters = _objectSpread({}, this.state.d_filters); var meta = filters[field]; var constraint = meta && meta.operator ? meta.constraints[index] : meta; constraint = meta ? { value: value, matchMode: matchMode || constraint.matchMode } : { value: value, matchMode: matchMode }; this.props.filterDisplay === 'menu' && meta && meta.operator ? filters[field].constraints[index] = constraint : filters[field] = constraint; this.setState({ d_filters: filters }, this.onFilterApply); } }, { key: "reset", value: function reset() { var state = { d_rows: this.props.rows, d_filters: this.cloneFilters(this.props.filters), groupRowsSortMeta: null, editingMeta: {} }; if (!this.props.onPage) { state.first = this.props.first; state.rows = this.props.rows; } if (!this.props.onSort) { state.sortField = this.props.sortField; state.sortOrder = this.props.sortOrder; state.multiSortMeta = this.props.multiSortMeta; } if (!this.props.onFilter) { state.filters = this.props.filters; } this.resetColumnOrder(); this.setState(state); } }, { key: "resetColumnOrder", value: function resetColumnOrder() { var columns = this.getColumns(true); var columnOrder = []; if (columns) { columnOrder = columns.reduce(function (orders, col) { orders.push(col.props.columnKey || col.props.field); return orders; }, []); } this.setState({ columnOrder: columnOrder }); } }, { key: "exportCSV", value: function exportCSV(options) { var _this15 = this; var data; var csv = "\uFEFF"; var columns = this.getColumns(); if (options && options.selectionOnly) { data = this.props.selection || []; } else { data = [].concat(_toConsumableArray(this.props.frozenValue || []), _toConsumableArray(this.processedData() || [])); } //headers columns.forEach(function (column, i) { var _column$props = column.props, field = _column$props.field, header = _column$props.header, exportable = _column$props.exportable; if (exportable && field) { csv += '"' + (header || field) + '"'; if (i < columns.length - 1) { csv += _this15.props.csvSeparator; } } }); //body data.forEach(function (record) { csv += '\n'; columns.forEach(function (column, i) { var _column$props2 = column.props, columnField = _column$props2.field, exportField = _column$props2.exportField, exportable = _column$props2.exportable; var field = exportField || columnField; if (exportable && field) { var cellData = utils.ObjectUtils.resolveFieldData(record, field); if (cellData != null) { cellData = _this15.props.exportFunction ? _this15.props.exportFunction({ data: cellData, field: field, rowData: record, column: column }) : String(cellData).replace(/"/g, '""'); } else cellData = ''; csv += '"' + cellData + '"'; if (i < columns.length - 1) { csv += _this15.props.csvSeparator; } } }); }); utils.DomHandler.exportCSV(csv, this.props.exportFilename); } }, { key: "closeEditingCell", value: function closeEditingCell() { if (this.props.editMode !== "row") { document.body.click(); } } }, { key: "createEvent", value: function createEvent(event) { return _objectSpread({ first: this.getFirst(), rows: this.getRows(), sortField: this.getSortField(), sortOrder: this.getSortOrder(), multiSortMeta: this.getMultiSortMeta(), filters: this.getFilters() }, event); } }, { key: "processedData", value: function processedData(localState) { var data = this.props.value || []; if (!this.props.lazy) { if (data && data.length) { var filters = localState && localState.filters || this.getFilters(); var sortField = localState && localState.sortField || this.getSortField(); var sortOrder = localState && localState.sortOrder || this.getSortOrder(); var multiSortMeta = localState && localState.multiSortMeta || this.getMultiSortMeta(); if (utils.ObjectUtils.isNotEmpty(filters) || this.props.globalFilter) { data = this.filterLocal(data, filters); } if (sortField || utils.ObjectUtils.isNotEmpty(multiSortMeta)) { if (this.props.sortMode === 'single') data = this.sortSingle(data, sortField, sortOrder);else if (this.props.sortMode === 'multiple') data = this.sortMultiple(data, multiSortMeta); } } } return data; } }, { key: "dataToRender", value: function dataToRender(data) { if (data && this.props.paginator) { var first = this.props.lazy ? 0 : this.getFirst(); return data.slice(first, first + this.getRows()); } return data; } }, { key: "componentDidMount", value: function componentDidMount() { var _this16 = this; this.setState({ attributeSelector: utils.UniqueComponentId() }, function () { _this16.el.setAttribute(_this16.state.attributeSelector, ''); }); if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) { this.createResponsiveStyle(); } if (this.isStateful()) { this.setState(this.restoreState(this.state)); if (this.props.resizableColumns) { this.restoreColumnWidths(); } } } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.isStateful()) { this.saveState(); } if (prevProps.responsiveLayout !== this.props.responsiveLayout) { this.destroyResponsiveStyle(); if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) { this.createResponsiveStyle(); } } if (prevProps.filters !== this.props.filters) { this.setState({ filters: this.cloneFilters(this.props.filters), d_filters: this.cloneFilters(this.props.filters) }); } if (prevProps.globalFilter !== this.props.globalFilter) { this.filter(this.props.globalFilter, 'global', 'contains'); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.unbindColumnResizeEvents(); this.destroyStyleElement(); this.destroyResponsiveStyle(); } }, { key: "renderLoader", value: function renderLoader() { if (this.props.loading) { var iconClassName = utils.classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-datatable-loading-overlay p-component-overlay" }, /*#__PURE__*/React__default["default"].createElement("i", { className: iconClassName })); } return null; } }, { key: "renderHeader", value: function renderHeader() { if (this.props.header) { var content = utils.ObjectUtils.getJSXElement(this.props.header, { props: this.props }); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-datatable-header" }, content); } return null; } }, { key: "renderTableHeader", value: function renderTableHeader(options, empty) { var sortField = this.getSortField(); var sortOrder = this.getSortOrder(); var multiSortMeta = _toConsumableArray(this.getMultiSortMeta()); var groupRowSortField = this.getGroupRowSortField(); var filters = this.state.d_filters; var filtersStore = this.getFilters(); var processedData = options.items, columns = options.columns; return /*#__PURE__*/React__default["default"].createElement(TableHeader, { value: processedData, tableProps: this.props, columns: columns, tabIndex: this.props.tabIndex, empty: empty, headerColumnGroup: this.props.headerColumnGroup, resizableColumns: this.props.resizableColumns, onColumnResizeStart: this.onColumnResizeStart, onColumnResizerClick: this.props.onColumnResizerClick, onColumnResizerDoubleClick: this.props.onColumnResizerDoubleClick, sortMode: this.props.sortMode, sortField: sortField, sortOrder: sortOrder, multiSortMeta: multiSortMeta, groupRowsBy: this.props.groupRowsBy, groupRowSortField: groupRowSortField, onSortChange: this.onSortChange, filterDisplay: this.props.filterDisplay, filters: filters, filtersStore: filtersStore, onFilterChange: this.onFilterChange, onFilterApply: this.onFilterApply, showSelectAll: this.props.showSelectAll, allRowsSelected: this.allRowsSelected, onColumnCheckboxChange: this.onColumnHeaderCheckboxChange, onColumnMouseDown: this.onColumnHeaderMouseDown, onColumnDragStart: this.onColumnHeaderDragStart, onColumnDragOver: this.onColumnHeaderDragOver, onColumnDragLeave: this.onColumnHeaderDragLeave, onColumnDrop: this.onColumnHeaderDrop, rowGroupMode: this.props.rowGroupMode, reorderableColumns: this.props.reorderableColumns }); } }, { key: "renderTableBody", value: function renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) { var tableSelector = this.state.attributeSelector; var first = this.getFirst(); var editingMeta = this.state.editingMeta; var rows = options.rows, columns = options.columns, contentRef = options.contentRef, className = options.className; var frozenBody = this.props.frozenValue && /*#__PURE__*/React__default["default"].createElement(TableBody, { value: this.props.frozenValue, className: "p-datatable-frozen-tbody", frozenRow: true, tableProps: this.props, tableSelector: tableSelector, columns: columns, selectionModeInColumn: selectionModeInColumn, first: first, editingMeta: editingMeta, onEditingMetaChange: this.onEditingMetaChange, tabIndex: this.props.tabIndex, onRowClick: this.props.onRowClick, onRowDoubleClick: this.props.onRowDoubleClick, onCellClick: this.props.onCellClick, selection: this.props.selection, onSelectionChange: this.props.onSelectionChange, lazy: this.props.lazy, paginator: this.props.paginator, onCellSelect: this.props.onCellSelect, onCellUnselect: this.props.onCellUnselect, onRowSelect: this.props.onRowSelect, onRowUnselect: this.props.onRowUnselect, dragSelection: this.props.dragSelection, onContextMenu: this.props.onContextMenu, onContextMenuSelectionChange: this.props.onContextMenuSelectionChange, metaKeySelection: this.props.metaKeySelection, selectionMode: this.props.selectionMode, cellSelection: this.props.cellSelection, contextMenuSelection: this.props.contextMenuSelection, dataKey: this.props.dataKey, expandedRows: this.props.expandedRows, onRowCollapse: this.props.onRowCollapse, onRowExpand: this.props.onRowExpand, onRowToggle: this.props.onRowToggle, editMode: this.props.editMode, editingRows: this.props.editingRows, onRowReorder: this.props.onRowReorder, scrollable: this.props.scrollable, rowGroupMode: this.props.rowGroupMode, groupRowsBy: this.props.groupRowsBy, expandableRowGroups: this.props.expandableRowGroups, loading: this.props.loading, emptyMessage: this.props.emptyMessage, rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate, rowExpansionTemplate: this.props.rowExpansionTemplate, rowGroupFooterTemplate: this.props.rowGroupFooterTemplate, onRowEditChange: this.props.onRowEditChange, compareSelectionBy: this.props.compareSelectionBy, selectOnEdit: this.props.selectOnEdit, onRowEditInit: this.props.onRowEditInit, rowEditValidator: this.props.rowEditValidator, onRowEditSave: this.props.onRowEditSave, onRowEditComplete: this.props.onRowEditComplete, onRowEditCancel: this.props.onRowEditCancel, cellClassName: this.props.cellClassName, responsiveLayout: this.props.responsiveLayout, selectionAutoFocus: this.props.selectionAutoFocus, isDataSelectable: this.props.isDataSelectable, showSelectionElement: this.props.showSelectionElement, showRowReorderElement: this.props.showRowReorderElement, expandedRowIcon: this.props.expandedRowIcon, collapsedRowIcon: this.props.collapsedRowIcon, rowClassName: this.props.rowClassName, isVirtualScrollerDisabled: true }); var body = /*#__PURE__*/React__default["default"].createElement(TableBody, { value: this.dataToRender(rows), className: className, empty: empty, frozenRow: false, tableProps: this.props, tableSelector: tableSelector, columns: columns, selectionModeInColumn: selectionModeInColumn, first: first, editingMeta: editingMeta, onEditingMetaChange: this.onEditingMetaChange, tabIndex: this.props.tabIndex, onRowClick: this.props.onRowClick, onRowDoubleClick: this.props.onRowDoubleClick, onCellClick: this.props.onCellClick, selection: this.props.selection, onSelectionChange: this.props.onSelectionChange, lazy: this.props.lazy, paginator: this.props.paginator, onCellSelect: this.props.onCellSelect, onCellUnselect: this.props.onCellUnselect, onRowSelect: this.props.onRowSelect, onRowUnselect: this.props.onRowUnselect, dragSelection: this.props.dragSelection, onContextMenu: this.props.onContextMenu, onContextMenuSelectionChange: this.props.onContextMenuSelectionChange, metaKeySelection: this.props.metaKeySelection, selectionMode: this.props.selectionMode, cellSelection: this.props.cellSelection, contextMenuSelection: this.props.contextMenuSelection, dataKey: this.props.dataKey, expandedRows: this.props.expandedRows, onRowCollapse: this.props.onRowCollapse, onRowExpand: this.props.onRowExpand, onRowToggle: this.props.onRowToggle, editMode: this.props.editMode, editingRows: this.props.editingRows, onRowReorder: this.props.onRowReorder, scrollable: this.props.scrollable, rowGroupMode: this.props.rowGroupMode, groupRowsBy: this.props.groupRowsBy, expandableRowGroups: this.props.expandableRowGroups, loading: this.props.loading, emptyMessage: this.props.emptyMessage, rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate, rowExpansionTemplate: this.props.rowExpansionTemplate, rowGroupFooterTemplate: this.props.rowGroupFooterTemplate, onRowEditChange: this.props.onRowEditChange, compareSelectionBy: this.props.compareSelectionBy, selectOnEdit: this.props.selectOnEdit, onRowEditInit: this.props.onRowEditInit, rowEditValidator: this.props.rowEditValidator, onRowEditSave: this.props.onRowEditSave, onRowEditComplete: this.props.onRowEditComplete, onRowEditCancel: this.props.onRowEditCancel, cellClassName: this.props.cellClassName, responsiveLayout: this.props.responsiveLayout, selectionAutoFocus: this.props.selectionAutoFocus, isDataSelectable: this.props.isDataSelectable, showSelectionElement: this.props.showSelectionElement, showRowReorderElement: this.props.showRowReorderElement, expandedRowIcon: this.props.expandedRowIcon, collapsedRowIcon: this.props.collapsedRowIcon, rowClassName: this.props.rowClassName, virtualScrollerContentRef: contentRef, virtualScrollerOptions: options, isVirtualScrollerDisabled: isVirtualScrollerDisabled }); return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, frozenBody, body); } }, { key: "renderTableFooter", value: function renderTableFooter(options) { var columns = options.columns; return /*#__PURE__*/React__default["default"].createElement(TableFooter, { tableProps: this.props, columns: columns, footerColumnGroup: this.props.footerColumnGroup }); } }, { key: "renderContent", value: function renderContent(processedData, columns, selectionModeInColumn, empty) { var _this17 = this; if (!columns) return; var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled(); var virtualScrollerOptions = this.props.virtualScrollerOptions || {}; return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-datatable-wrapper", style: { maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null } }, /*#__PURE__*/React__default["default"].createElement(virtualscroller.VirtualScroller, _extends({}, virtualScrollerOptions, { items: processedData, columns: columns, scrollHeight: this.props.scrollHeight, disabled: isVirtualScrollerDisabled, loaderDisabled: true, showSpacer: false, contentTemplate: function contentTemplate(options) { var ref = function ref(el) { _this17.table = el; options.spacerRef && options.spacerRef(el); }; var tableClassName = utils.classNames('p-datatable-table', _this17.props.tableClassName); var tableHeader = _this17.renderTableHeader(options, empty); var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled); var tableFooter = _this17.renderTableFooter(options); return /*#__PURE__*/React__default["default"].createElement("table", { ref: ref, style: _this17.props.tableStyle, className: tableClassName, role: "table" }, tableHeader, tableBody, tableFooter); } }))); } }, { key: "renderFooter", value: function renderFooter() { if (this.props.footer) { var content = utils.ObjectUtils.getJSXElement(this.props.footer, { props: this.props }); return /*#__PURE__*/React__default["default"].createElement("div", { className: "p-datatable-footer" }, content); } return null; } }, { key: "renderPaginator", value: function renderPaginator(position, totalRecords) { var className = utils.classNames('p-paginator-' + position, this.props.paginatorClassName); return /*#__PURE__*/React__default["default"].createElement(paginator.Paginator, { first: this.getFirst(), rows: this.getRows(), pageLinkSize: this.props.pageLinkSize, className: className, onPageChange: this.onPageChange, template: this.props.paginatorTemplate, totalRecords: totalRecords, rowsPerPageOptions: this.props.rowsPerPageOptions, currentPageReportTemplate: this.props.currentPageReportTemplate, leftContent: this.props.paginatorLeft, rightContent: this.props.paginatorRight, alwaysShow: this.props.alwaysShowPaginator, dropdownAppendTo: this.props.paginatorDropdownAppendTo }); } }, { key: "renderPaginatorTop", value: function renderPaginatorTop(totalRecords) { if (this.props.paginator && this.props.paginatorPosition !== 'bottom') { return this.renderPaginator('top', totalRecords); } return null; } }, { key: "renderPaginatorBottom", value: function renderPaginatorBottom(totalRecords) { if (this.props.paginator && this.props.paginatorPosition !== 'top') { return this.renderPaginator('bottom', totalRecords); } return null; } }, { key: "renderResizeHelper", value: function renderResizeHelper() { var _this18 = this; if (this.props.resizableColumns) { return /*#__PURE__*/React__default["default"].createElement("div", { ref: function ref(el) { return _this18.resizeHelper = el; }, className: "p-column-resizer-helper", style: { display: 'none' } }); } return null; } }, { key: "renderReorderIndicators", value: function renderReorderIndicators() { var _this19 = this; if (this.props.reorderableColumns) { var style = { position: 'absolute', display: 'none' }; return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { ref: function ref(el) { return _this19.reorderIndicatorUp = el; }, className: "pi pi-arrow-down p-datatable-reorder-indicator-up", style: style }), /*#__PURE__*/React__default["default"].createElement("span", { ref: function ref(el) { return _this19.reorderIndicatorDown = el; }, className: "pi pi-arrow-up p-datatable-reorder-indicator-down", style: style })); } return null; } }, { key: "render", value: function render() { var _this20 = this; var processedData = this.processedData(); var columns = this.getColumns(); var totalRecords = this.getTotalRecords(processedData); var empty = utils.ObjectUtils.isEmpty(processedData); var selectionModeInColumn = this.getSelectionModeInColumn(columns); var selectable = this.props.selectionMode || selectionModeInColumn; var className = utils.classNames('p-datatable p-component', { 'p-datatable-hoverable-rows': this.props.rowHover, 'p-datatable-selectable': selectable && !this.props.cellSelection, 'p-datatable-selectable-cell': selectable && this.props.cellSelection, 'p-datatable-auto-layout': this.props.autoLayout, 'p-datatable-resizable': this.props.resizableColumns, 'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit', 'p-datatable-scrollable': this.props.scrollable, 'p-datatable-scrollable-vertical': this.props.scrollable && this.props.scrollDirection === 'vertical', 'p-datatable-scrollable-horizontal': this.props.scrollable && this.props.scrollDirection === 'horizontal', 'p-datatable-scrollable-both': this.props.scrollable && this.props.scrollDirection === 'both', 'p-datatable-flex-scrollable': this.props.scrollable && this.props.scrollHeight === 'flex', 'p-datatable-responsive-stack': this.props.responsiveLayout === 'stack', 'p-datatable-responsive-scroll': this.props.responsiveLayout === 'scroll', 'p-datatable-striped': this.props.stripedRows, 'p-datatable-gridlines': this.props.showGridlines, 'p-datatable-grouped-header': this.props.headerColumnGroup != null, 'p-datatable-grouped-footer': this.props.footerColumnGroup != null, 'p-datatable-sm': this.props.size === 'small', 'p-datatable-lg': this.props.size === 'large' }, this.props.className); var loader = this.renderLoader(); var header = this.renderHeader(); var paginatorTop = this.renderPaginatorTop(totalRecords); var content = this.renderContent(processedData, columns, selectionModeInColumn, empty); var paginatorBottom = this.renderPaginatorBottom(totalRecords); var footer = this.renderFooter(); var resizeHelper = this.renderResizeHelper(); var reorderIndicators = this.renderReorderIndicators(); return /*#__PURE__*/React__default["default"].createElement("div", { ref: function ref(el) { return _this20.el = el; }, id: this.props.id, className: className, style: this.props.style, "data-scrollselectors": ".p-datatable-wrapper" }, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators); } }], [{ key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(nextProps, prevState) { if (nextProps.rows !== prevState.d_rows && !nextProps.onPage) { return { rows: nextProps.rows, d_rows: nextProps.rows }; } return null; } }]); return DataTable; }(React.Component); _defineProperty(DataTable, "defaultProps", { id: null, value: null, header: null, footer: null, style: null, className: null, tableStyle: null, tableClassName: null, paginator: false, paginatorPosition: 'bottom', alwaysShowPaginator: true, paginatorClassName: null, paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', paginatorLeft: null, paginatorRight: null, paginatorDropdownAppendTo: null, pageLinkSize: 5, rowsPerPageOptions: null, currentPageReportTemplate: '({currentPage} of {totalPages})', first: 0, rows: null, totalRecords: null, lazy: false, sortField: null, sortOrder: null, multiSortMeta: null, sortMode: 'single', defaultSortOrder: 1, removableSort: false, emptyMessage: null, selectionMode: null, dragSelection: false, cellSelection: false, selection: null, onSelectionChange: null, contextMenuSelection: null, onContextMenuSelectionChange: null, compareSelectionBy: 'deepEquals', dataKey: null, metaKeySelection: true, selectOnEdit: true, selectionPageOnly: false, selectionAutoFocus: true, showSelectAll: true, selectAll: false, onSelectAllChange: null, headerColumnGroup: null, footerColumnGroup: null, rowExpansionTemplate: null, expandedRows: null, onRowToggle: null, resizableColumns: false, columnResizeMode: 'fit', reorderableColumns: false, filters: null, globalFilter: null, filterDelay: 300, filterLocale: undefined, scrollable: false, scrollHeight: null, scrollDirection: 'vertical', virtualScrollerOptions: null, frozenWidth: null, frozenValue: null, csvSeparator: ',', exportFilename: 'download', rowGroupMode: null, autoLayout: false, rowClassName: null, cellClassName: null, rowGroupHeaderTemplate: null, rowGroupFooterTemplate: null, loading: false, loadingIcon: 'pi pi-spinner', tabIndex: 0, stateKey: null, stateStorage: 'session', groupRowsBy: null, editMode: 'cell', editingRows: null, expandableRowGroups: false, rowHover: false, showGridlines: false, stripedRows: false, size: 'normal', responsiveLayout: 'stack', breakpoint: '960px', filterDisplay: 'menu', expandedRowIcon: 'pi pi-chevron-down', collapsedRowIcon: 'pi pi-chevron-right', onRowEditComplete: null, globalFilterFields: null, showSelectionElement: null, showRowReorderElement: null, isDataSelectable: null, onColumnResizeEnd: null, onColumnResizerClick: null, onColumnResizerDoubleClick: null, onSort: null, onPage: null, onFilter: null, onAllRowsSelect: null, onAllRowsUnselect: null, onRowClick: null, onRowDoubleClick: null, onRowSelect: null, onRowUnselect: null, onRowExpand: null, onRowCollapse: null, onContextMenu: null, onColReorder: null, onCellClick: null, onCellSelect: null, onCellUnselect: null, onRowReorder: null, onValueChange: null, rowEditValidator: null, onRowEditInit: null, onRowEditSave: null, onRowEditCancel: null, onRowEditChange: null, exportFunction: null, customSaveState: null, customRestoreState: null, onStateSave: null, onStateRestore: null }); exports.DataTable = DataTable; Object.defineProperty(exports, '__esModule', { value: true }); return exports; })({}, React, primereact.paginator, primereact.utils, primereact.api, primereact.overlayservice, primereact.ripple, primereact.csstransition, primereact.portal, primereact.inputtext, primereact.dropdown, primereact.button, primereact.virtualscroller);