primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,443 lines (1,223 loc) • 221 kB
JavaScript
this.primereact = this.primereact || {};
this.primereact.datatable = (function (exports, React, PrimeReact, hooks, paginator, utils, virtualscroller, overlayservice, ripple, button, csstransition, dropdown, inputtext, portal, tooltip) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _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 _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 _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 _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 _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 _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 _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 _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;
}
var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onClick = function onClick(event) {
if (!props.disabled) {
setFocusedState(true);
props.onChange(event);
}
};
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Space') {
onClick(event);
event.preventDefault();
}
};
var className = utils.classNames('p-checkbox p-component', {
'p-checkbox-focused': focusedState
});
var boxClassName = utils.classNames('p-checkbox-box p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
var iconClassName = utils.classNames('p-checkbox-icon', {
'pi pi-check': props.checked
});
var tabIndex = props.disabled ? null : '0';
return /*#__PURE__*/React__namespace.createElement("div", {
className: className,
onClick: onClick
}, /*#__PURE__*/React__namespace.createElement("div", {
className: boxClassName,
role: "checkbox",
"aria-checked": props.checked,
tabIndex: tabIndex,
onKeyDown: onKeyDown,
onFocus: onFocus,
onBlur: onBlur,
"aria-label": props.ariaLabel
}, /*#__PURE__*/React__namespace.createElement("span", {
className: iconClassName
})));
});
RowCheckbox.displayName = 'RowCheckbox';
var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var inputRef = React__namespace.useRef(null);
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onClick = function onClick(event) {
if (!props.disabled) {
props.onChange(event);
utils.DomHandler.focus(inputRef.current);
}
};
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Space') {
onClick(event);
event.preventDefault();
}
};
var onChange = function onChange(event) {
onClick(event);
};
var className = utils.classNames('p-radiobutton p-component', {
'p-radiobutton-focused': focusedState
});
var boxClassName = utils.classNames('p-radiobutton-box p-component', {
'p-highlight': props.checked,
'p-focus': focusedState,
'p-disabled': props.disabled
});
var name = "".concat(props.tableSelector, "_dt_radio");
return /*#__PURE__*/React__namespace.createElement("div", {
className: className
}, /*#__PURE__*/React__namespace.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React__namespace.createElement("input", {
name: name,
ref: inputRef,
type: "radio",
checked: props.checked,
onFocus: onFocus,
onBlur: onBlur,
onChange: onChange,
onKeyDown: onKeyDown,
"aria-label": props.ariaLabel
})), /*#__PURE__*/React__namespace.createElement("div", {
className: boxClassName,
onClick: onClick,
role: "radio",
"aria-checked": props.checked
}, /*#__PURE__*/React__namespace.createElement("div", {
className: "p-radiobutton-icon"
})));
});
RowRadioButton.displayName = 'RowRadioButton';
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; }
var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(props.editing),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(props.rowData),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editingRowDataState = _React$useState4[0],
setEditingRowDataState = _React$useState4[1];
var _React$useState5 = React__namespace.useState({}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
styleObjectState = _React$useState6[0],
setStyleObjectState = _React$useState6[1];
var elementRef = React__namespace.useRef(null);
var keyHelperRef = React__namespace.useRef(null);
var overlayEventListener = React__namespace.useRef(null);
var selfClick = React__namespace.useRef(false);
var tabindexTimeout = React__namespace.useRef(null);
var initFocusTimeout = React__namespace.useRef(null);
var getColumnProp = function getColumnProp(prop) {
return props.column ? props.column.props[prop] : null;
};
var field = getColumnProp('field') || "field_".concat(props.index);
var editingKey = props.dataKey ? props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
var _useEventListener = hooks.useEventListener({
type: 'click',
listener: function listener(e) {
if (!selfClick.current && isOutsideClicked(e.target)) {
switchCellToViewMode(e, true);
}
selfClick.current = false;
},
options: true
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
if (props.editMode === 'row' && props.editing !== editingState) {
setEditingState(props.editing);
}
var isEditable = function isEditable() {
return getColumnProp('editor');
};
var isSelected = function isSelected() {
return props.selection ? props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection) : false;
};
var equalsData = function equalsData(data) {
return props.compareSelectionBy === 'equals' ? data === props.rowData : utils.ObjectUtils.equals(data, props.rowData, props.dataKey);
};
var equals = function equals(selectedCell) {
return (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
};
var isOutsideClicked = function isOutsideClicked(target) {
return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
};
var getVirtualScrollerOption = function getVirtualScrollerOption(option) {
return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
};
var getStyle = function getStyle() {
var bodyStyle = getColumnProp('bodyStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
};
var getCellParams = function getCellParams() {
return {
value: resolveFieldData(),
field: field,
rowData: props.rowData,
rowIndex: props.rowIndex,
cellIndex: props.index,
selected: isSelected(),
column: props.column,
props: props
};
};
var getCellCallbackParams = function getCellCallbackParams(event) {
var params = getCellParams();
return _objectSpread$7({
originalEvent: event
}, params);
};
var resolveFieldData = function resolveFieldData(data) {
return utils.ObjectUtils.resolveFieldData(data || props.rowData, field);
};
var getEditingRowData = function getEditingRowData() {
return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
};
var getTabIndex = function getTabIndex(cellSelected) {
return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && props.index === 0 ? props.tabIndex : -1 : null;
};
var findIndex = function findIndex(collection) {
return (collection || []).findIndex(function (data) {
return equals(data);
});
};
var closeCell = function closeCell(event) {
var params = getCellCallbackParams(event);
var onBeforeCellEditHide = 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 () {
setEditingState(false);
unbindDocumentClickListener();
overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
selfClick.current = false;
}, 1);
};
var switchCellToViewMode = function switchCellToViewMode(event, submit) {
var callbackParams = getCellCallbackParams(event);
var newRowData = editingRowDataState;
var newValue = resolveFieldData(newRowData);
var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
newRowData: newRowData,
newValue: newValue
});
var onCellEditCancel = getColumnProp('onCellEditCancel');
var cellEditValidator = getColumnProp('cellEditValidator');
var onCellEditComplete = getColumnProp('onCellEditComplete');
if (!submit && onCellEditCancel) {
onCellEditCancel(params);
}
var valid = true;
if (cellEditValidator) {
valid = cellEditValidator(params);
}
if (valid) {
if (submit && onCellEditComplete) {
onCellEditComplete(params);
}
closeCell(event);
} else {
event.preventDefault();
}
};
var findNextSelectableCell = function findNextSelectableCell(cell) {
var nextCell = cell.nextElementSibling;
return nextCell ? utils.DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
};
var findPrevSelectableCell = function findPrevSelectableCell(cell) {
var prevCell = cell.previousElementSibling;
return prevCell ? utils.DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
};
var findDownSelectableCell = function findDownSelectableCell(cell) {
var downRow = cell.parentElement.nextElementSibling;
var downCell = downRow ? downRow.children[props.index] : null;
return downRow && downCell ? utils.DomHandler.hasClass(downRow, 'p-selectable-row') && utils.DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
};
var findUpSelectableCell = function findUpSelectableCell(cell) {
var upRow = cell.parentElement.previousElementSibling;
var upCell = upRow ? upRow.children[props.index] : null;
return upRow && upCell ? utils.DomHandler.hasClass(upRow, 'p-selectable-row') && utils.DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
};
var changeTabIndex = function changeTabIndex(currentCell, nextCell) {
if (currentCell && nextCell) {
currentCell.tabIndex = -1;
nextCell.tabIndex = props.tabIndex;
}
};
var focusOnElement = function focusOnElement() {
clearTimeout(tabindexTimeout.current);
tabindexTimeout.current = setTimeout(function () {
if (editingState) {
var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : utils.DomHandler.findSingle(elementRef.current, '.p-row-editor-save');
focusableEl && focusableEl.focus();
}
keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
}, 1);
};
var focusOnInit = function focusOnInit() {
clearTimeout(initFocusTimeout.current);
initFocusTimeout.current = setTimeout(function () {
var focusableEl = props.editMode === 'row' ? utils.DomHandler.findSingle(elementRef.current, '.p-row-editor-init') : null;
focusableEl && focusableEl.focus();
}, 1);
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$7({}, styleObjectState);
var align = getColumnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = elementRef.current.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject['right'] = right + 'px';
} else {
var left = 0;
var prev = elementRef.current.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
styleObject['left'] = left + 'px';
}
var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
!isSameStyle && setStyleObjectState(styleObject);
}
};
var editorCallback = function editorCallback(val) {
var editingRowData = _objectSpread$7({}, editingRowDataState);
editingRowData[field] = val;
setEditingRowDataState(editingRowData); // update editing meta for complete methods on row mode
props.editingMeta[editingKey].data[field] = val;
};
var onClick = function onClick(event) {
var params = getCellCallbackParams(event);
if (props.editMode !== 'row' && isEditable() && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
selfClick.current = true;
var onBeforeCellEditShow = getColumnProp('onBeforeCellEditShow');
var onCellEditInit = getColumnProp('onCellEditInit');
var cellEditValidatorEvent = 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 () {
setEditingState(true);
if (onCellEditInit) {
onCellEditInit(params);
}
if (cellEditValidatorEvent === 'click') {
bindDocumentClickListener();
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e.target)) {
selfClick.current = true;
}
};
overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
}
}, 1);
}
if (props.allowCellSelection && props.onClick) {
props.onClick(params);
}
};
var onMouseDown = function onMouseDown(event) {
var params = getCellCallbackParams(event);
props.onMouseDown && props.onMouseDown(params);
};
var onMouseUp = function onMouseUp(event) {
var params = getCellCallbackParams(event);
props.onMouseUp && props.onMouseUp(params);
};
var onKeyDown = function onKeyDown(event) {
if (props.editMode !== 'row') {
if (event.which === 13 || event.which === 9) {
// tab || enter
switchCellToViewMode(event, true);
}
if (event.which === 27) {
// escape
switchCellToViewMode(event, false);
}
}
if (props.allowCellSelection) {
var target = event.target,
cell = event.currentTarget;
switch (event.which) {
//left arrow
case 37:
var prevCell = findPrevSelectableCell(cell);
if (prevCell) {
changeTabIndex(cell, prevCell);
prevCell.focus();
}
event.preventDefault();
break;
//right arrow
case 39:
var nextCell = findNextSelectableCell(cell);
if (nextCell) {
changeTabIndex(cell, nextCell);
nextCell.focus();
}
event.preventDefault();
break;
//up arrow
case 38:
var upCell = findUpSelectableCell(cell);
if (upCell) {
changeTabIndex(cell, upCell);
upCell.focus();
}
event.preventDefault();
break;
//down arrow
case 40:
var downCell = findDownSelectableCell(cell);
if (downCell) {
changeTabIndex(cell, downCell);
downCell.focus();
}
event.preventDefault();
break;
//enter
case 13:
// @deprecated
if (!utils.DomHandler.isClickable(target)) {
onClick(event);
event.preventDefault();
}
break;
//space
case 32:
if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
onClick(event);
event.preventDefault();
}
break;
}
}
};
var onBlur = function onBlur(event) {
selfClick.current = false;
if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
switchCellToViewMode(event, true);
}
};
var onEditorFocus = function onEditorFocus(event) {
onClick(event);
};
var onRadioChange = function onRadioChange(event) {
props.onRadioChange({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onCheckboxChange = function onCheckboxChange(event) {
props.onCheckboxChange({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onRowToggle = function onRowToggle(event) {
props.onRowToggle({
originalEvent: event,
data: props.rowData
});
event.preventDefault();
};
var onRowEditInit = function onRowEditInit(event) {
props.onRowEditInit({
originalEvent: event,
data: props.rowData,
newData: getEditingRowData(),
field: field,
index: props.rowIndex
});
};
var onRowEditSave = function onRowEditSave(event) {
props.onRowEditSave({
originalEvent: event,
data: props.rowData,
newData: getEditingRowData(),
field: field,
index: props.rowIndex
});
focusOnInit();
};
var onRowEditCancel = function onRowEditCancel(event) {
props.onRowEditCancel({
originalEvent: event,
data: props.rowData,
newData: getEditingRowData(),
field: field,
index: props.rowIndex
});
focusOnInit();
};
React__namespace.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
if (props.editMode === 'cell' || props.editMode === 'row') {
focusOnElement();
}
});
hooks.useUpdateEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
setEditingRowDataState(getEditingRowData());
}
}, [props.editingMeta]);
hooks.useUpdateEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
var callbackParams = getCellCallbackParams();
var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
editing: editingState,
editingKey: editingKey
});
props.onEditingMetaChange(params);
}
}, [editingState]);
hooks.useUnmountEffect(function () {
if (overlayEventListener.current) {
overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
});
var createLoading = function createLoading() {
var options = getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
cellIndex: props.index,
cellFirst: props.index === 0,
cellLast: props.index === getVirtualScrollerOption('columns').length - 1,
cellEven: props.index % 2 === 0,
cellOdd: props.index % 2 !== 0,
column: props.column,
field: field
});
var content = utils.ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
return /*#__PURE__*/React__namespace.createElement("td", null, content);
};
var createElement = function createElement() {
var content, editorKeyHelper;
var cellSelected = props.allowCellSelection && isSelected();
var isRowEditor = props.editMode === 'row';
var tabIndex = getTabIndex(cellSelected);
var selectionMode = getColumnProp('selectionMode');
var rowReorder = getColumnProp('rowReorder');
var rowEditor = getColumnProp('rowEditor');
var header = getColumnProp('header');
var body = getColumnProp('body');
var editor = getColumnProp('editor');
var frozen = getColumnProp('frozen');
var align = getColumnProp('align');
var value = resolveFieldData();
var columnBodyOptions = {
column: props.column,
field: field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps
};
var expander = utils.ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
var cellClassName = utils.ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
var bodyClassName = utils.ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
var className = utils.classNames(bodyClassName, getColumnProp('className'), cellClassName, _defineProperty({
'p-selection-column': selectionMode !== null,
'p-editable-column': editor,
'p-cell-editing': editor && editingState,
'p-frozen-column': frozen,
'p-selectable-cell': props.allowCellSelection && props.isSelectable({
data: getCellParams(),
index: props.rowIndex
}),
'p-highlight': cellSelected
}, "p-align-".concat(align), !!align));
var style = getStyle();
var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React__namespace.createElement("span", {
className: "p-column-title"
}, utils.ObjectUtils.getJSXElement(header, {
props: props.tableProps
}));
if (selectionMode) {
var showSelection = props.showSelectionElement ? props.showSelectionElement(props.rowData, {
rowIndex: props.rowIndex,
props: props.tableProps
}) : true;
var label;
if (showSelection) {
var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
var ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
label = "".concat(props.selected ? PrimeReact.ariaLabel('unselectLabel') : PrimeReact.ariaLabel('selectLabel'), " ").concat(ariaLabelText);
}
content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
checked: props.selected,
onChange: onRadioChange,
tabIndex: props.tabIndex,
tableSelector: props.tableSelector,
ariaLabel: label
}), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.createElement(RowCheckbox, {
checked: props.selected,
onChange: onCheckboxChange,
tabIndex: props.tabIndex,
ariaLabel: label
}));
} else if (rowReorder) {
var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
rowIndex: props.rowIndex,
props: props.tableProps
}) : true;
content = showReorder && /*#__PURE__*/React__namespace.createElement("i", {
className: utils.classNames('p-datatable-reorderablerow-handle', getColumnProp('rowReorderIcon'))
});
} else if (expander) {
var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
var _ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
var _label = "".concat(props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
var expanderProps = {
onClick: onRowToggle,
className: 'p-row-toggler p-link',
iconClassName: iconClassName
};
content = /*#__PURE__*/React__namespace.createElement("button", {
className: expanderProps.className,
onClick: expanderProps.onClick,
type: "button",
"aria-expanded": props.expanded,
"aria-controls": ariaControls,
tabIndex: props.tabIndex,
"aria-label": _label
}, /*#__PURE__*/React__namespace.createElement("span", {
className: expanderProps.iconClassName,
"aria-hidden": "true"
}), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
if (body) {
expanderProps['element'] = content;
content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
expander: expanderProps
});
}
} else if (isRowEditor && rowEditor) {
var rowEditorProps = {};
if (editingState) {
rowEditorProps = {
editing: true,
onSaveClick: onRowEditSave,
saveClassName: 'p-row-editor-save p-link',
saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check',
onCancelClick: onRowEditCancel,
cancelClassName: 'p-row-editor-cancel p-link',
cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
};
content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
type: "button",
name: "row-save",
onClick: rowEditorProps.onSaveClick,
className: rowEditorProps.saveClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React__namespace.createElement("span", {
className: rowEditorProps.saveIconClassName
}), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
type: "button",
name: "row-cancel",
onClick: rowEditorProps.onCancelClick,
className: rowEditorProps.cancelClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React__namespace.createElement("span", {
className: rowEditorProps.cancelIconClassName
}), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
} else {
rowEditorProps = {
editing: false,
onInitClick: onRowEditInit,
initClassName: 'p-row-editor-init p-link',
initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
};
content = /*#__PURE__*/React__namespace.createElement("button", {
type: "button",
name: "row-edit",
onClick: rowEditorProps.onInitClick,
className: rowEditorProps.initClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React__namespace.createElement("span", {
className: rowEditorProps.initIconClassName
}), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
}
if (body) {
rowEditorProps['element'] = content;
content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
rowEditor: rowEditorProps
});
}
} else if (body && (!editingState || !editor)) {
content = body ? utils.ObjectUtils.getJSXElement(body, props.rowData, {
column: props.column,
field: field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps
}) : value;
} else if (editor && editingState) {
content = utils.ObjectUtils.getJSXElement(editor, {
rowData: editingRowDataState,
value: resolveFieldData(editingRowDataState),
column: props.column,
field: field,
rowIndex: props.rowIndex,
frozenRow: props.frozenRow,
props: props.tableProps,
editorCallback: editorCallback
});
} else {
content = value;
}
if (!isRowEditor && editor) {
/* eslint-disable */
editorKeyHelper = /*#__PURE__*/React__namespace.createElement("a", {
tabIndex: "0",
ref: keyHelperRef,
className: "p-cell-editor-key-helper p-hidden-accessible",
onFocus: onEditorFocus
}, /*#__PURE__*/React__namespace.createElement("span", null));
/* eslint-enable */
}
return /*#__PURE__*/React__namespace.createElement("td", {
ref: elementRef,
style: style,
className: className,
rowSpan: props.rowSpan,
tabIndex: tabIndex,
role: "cell",
onClick: onClick,
onKeyDown: onKeyDown,
onBlur: onBlur,
onMouseDown: onMouseDown,
onMouseUp: onMouseUp
}, editorKeyHelper, title, content);
};
return getVirtualScrollerOption('loading') ? createLoading() : createElement();
});
BodyCell.displayName = 'BodyCell';
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; }
var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var editing = props.onRowEditChange ? props.editing : editingState;
var isFocusable = function isFocusable() {
return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
};
var isGrouped = function isGrouped(column) {
if (props.groupRowsBy && getColumnProp(column, 'field')) {
return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(column.props.field) > -1 : props.groupRowsBy === column.props.field;
}
return false;
};
var equals = function equals(data1, data2) {
return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, props.dataKey);
};
var getColumnProp = function getColumnProp(col, prop) {
return col ? col.props[prop] : null;
};
var getTabIndex = function getTabIndex() {
return isFocusable() && !props.allowCellSelection ? props.index === 0 ? props.tabIndex : -1 : null;
};
var findIndex = function findIndex(collection, rowData) {
return (collection || []).findIndex(function (data) {
return equals(rowData, data);
});
};
var changeTabIndex = function changeTabIndex(currentRow, nextRow) {
if (currentRow && nextRow) {
currentRow.tabIndex = -1;
nextRow.tabIndex = props.tabIndex;
}
};
var findNextSelectableRow = function findNextSelectableRow(row) {
var nextRow = row.nextElementSibling;
return nextRow ? utils.DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : findNextSelectableRow(nextRow) : null;
};
var findPrevSelectableRow = function findPrevSelectableRow(row) {
var prevRow = row.previousElementSibling;
return prevRow ? utils.DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : findPrevSelectableRow(prevRow) : null;
};
var shouldRenderBodyCell = function shouldRenderBodyCell(value, column, i) {
if (getColumnProp(column, 'hidden')) {
return false;
} else if (props.rowGroupMode && props.rowGroupMode === 'rowspan' && isGrouped(column)) {
var prevRowData = value[i - 1];
if (prevRowData) {
var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[i], getColumnProp(column, 'field'));
var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, getColumnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData;
}
}
return true;
};
var calculateRowGroupSize = function calculateRowGroupSize(value, column, index) {
if (isGrouped(column)) {
var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[index], getColumnProp(column, 'field'));
var nextRowFieldData = currentRowFieldData;
var groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
var nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, getColumnProp(column, 'field'));
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
} else {
return null;
}
};
var onClick = function onClick(event) {
props.onRowClick({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDoubleClick = function onDoubleClick(event) {
props.onRowDoubleClick({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onRightClick = function onRightClick(event) {
props.onRowRightClick({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onTouchEnd = function onTouchEnd(event) {
props.onRowTouchEnd(event);
};
var onKeyDown = function onKeyDown(event) {
if (isFocusable() && !props.allowCellSelection) {
var target = event.target,
row = event.currentTarget;
switch (event.which) {
//down arrow
case 40:
var nextRow = findNextSelectableRow(row);
if (nextRow) {
changeTabIndex(row, nextRow);
nextRow.focus();
}
event.preventDefault();
break;
//up arrow
case 38:
var prevRow = findPrevSelectableRow(row);
if (prevRow) {
changeTabIndex(row, prevRow);
prevRow.focus();
}
event.preventDefault();
break;
//enter
case 13:
// @deprecated
if (!utils.DomHandler.isClickable(target)) {
onClick(event);
event.preventDefault();
}
break;
//space
case 32:
if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
onClick(event);
event.preventDefault();
}
break;
}
}
};
var onMouseDown = function onMouseDown(event) {
props.onRowMouseDown({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onMouseUp = function onMouseUp(event) {
props.onRowMouseUp({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDragStart = function onDragStart(event) {
props.onRowDragStart({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDragOver = function onDragOver(event) {
props.onRowDragOver({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDragLeave = function onDragLeave(event) {
props.onRowDragLeave({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDragEnd = function onDragEnd(event) {
props.onRowDragEnd({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onDrop = function onDrop(event) {
props.onRowDrop({
originalEvent: event,
data: props.rowData,
index: props.index
});
};
var onEditChange = function onEditChange(e, isEditing) {
if (props.onRowEditChange) {
var editingRows;
var dataKey = props.dataKey;
var originalEvent = e.originalEvent,
data = e.data,
index = e.index,
newData = e.newData;
if (dataKey) {
var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey));
editingRows = props.editingRows ? _objectSpread$6({}, props.editingRows) : {};
if (!isEditing) {
delete editingRows[dataKeyValue]; // if the key value was changed, stop editing for the new key value too
var newDataKeyValue = String(utils.ObjectUtils.resolveFieldData(newData, dataKey));
delete editingRows[newDataKeyValue];
} else {
editingRows[dataKeyValue] = true;
}
} else {
var editingRowIndex = findIndex(props.editingRows, data);
editingRows = props.editingRows ? _toConsumableArray(props.editingRows) : [];
if (editingRowIndex !== -1) editingRows = editingRows.filter(function (val, i) {
return i !== editingRowIndex;
});else editingRows.push(data);
}
props.onRowEditChange({
originalEvent: originalEvent,
data: editingRows,
index: index
});
} else {
setEditingState(isEditing);
}
};
var onEditInit = function onEditInit(e) {
var event = e.originalEvent;
if (props.onRowEditInit) {
props.onRowEditInit({
originalEvent: event,
data: props.rowData,
index: props.index
});
}
onEditChange(e, true);
event.preventDefault();
};
var onEditSave = function onEditSave(e) {
var event = e.originalEvent,
newData = e.newData;
var valid = props.rowEditValidator ? props.rowEditValidator(newData, {
props: props.tableProps
}) : true;
if (props.onRowEditSave) {
props.onRowEditSave({
originalEvent: event,
data: props.rowData,
index: props.index,
valid: valid
});
}
if (valid) {
if (props.onRowEditComplete) {
props.onRowEditComplete(e);
}
onEditChange(e, false);
}
event.preventDefault();
};
var onEditCancel = function onEditCancel(e) {
var event = e.originalEvent;
if (props.onRowEditCancel) {
props.onRowEditCancel({
originalEvent: event,
data: props.rowData,
index: props.index
});
}
onEditChange(e, false);
event.preventDefault();
};
var createContent = function createContent() {
return props.columns.map(function (col, i) {
if (shouldRenderBodyCell(props.value, col, props.index)) {
var key = "".concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
return /*#__PURE__*/React__namespace.createElement(BodyCell, {
key: key,
value: props.value,
tableProps: props.tableProps,
tableSelector: props.tableSelector,
column: col,
rowData: props.rowData,
rowIndex: props.index,
index: i,
rowSpan: rowSpan,
dataKey: props.dataKey,
editing: editing,
editingMeta: props.editingMeta,
editMode: props.editMode,
onRowEditInit: onEditInit,
onRowEditSave: onEditSave,
onRowEditCancel: onEditCancel,
onEditingMetaChange: props.onEditingMetaChange,
onRowToggle: props.onRowToggle,
selection: props.selection,
selectionAriaLabel: props.tableProps.selectionAriaLabel,
allowCellSelection: props.allowCellSelection,
compareSelectionBy: props.compareSelectionBy,
selectOnEdit: props.selectOnEdit,
selected: props.selected,
onClick: props.onCellClick,
onMouseDown: props.onCellMouseDown,
onMouseUp: props.onCellMouseUp,
tabIndex: props.tabIndex,
cellClassName: props.cellClassName,
responsiveLayout: props.responsiveLayout,
frozenRow: props.frozenRow,
isSelectable: props.isSelectable,
showSelectionElement: props.showSelectionElement,
showRowReorderElement: props.showRowReorderElement,
onRadioChange: props.onRadioChange,
onCheckboxChange: props.onCheckboxChange,
expanded: props.expanded,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon,
virtualScrollerOptions: props.virtualScrollerOptions
});
}
return null;
});
};
var rowClassName = utils.ObjectUtils.getPropValue(props.rowClassName, props.rowData, {
props: props.tableProps
});
var className = utils.classNames(rowClassName, {
'p-highlight': !props.allowCellSelection && props.selected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.index
}),
'p-row-odd': props.index % 2 !== 0
});
var style = {
height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
};
var content = createContent();
var tabIndex = getTabIndex();
return /*#__PURE__*/React__namespace.createElement("tr", {
role: "row",
tabIndex: tabIndex,
className: className,
style: style,
onMouseDown: