primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,384 lines (1,343 loc) • 219 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var PrimeReact = require('primereact/api');
var utils = require('primereact/utils');
var hooks = require('primereact/hooks');
var paginator = require('primereact/paginator');
var virtualscroller = require('primereact/virtualscroller');
var overlayservice = require('primereact/overlayservice');
var ripple = require('primereact/ripple');
var button = require('primereact/button');
var csstransition = require('primereact/csstransition');
var dropdown = require('primereact/dropdown');
var inputtext = require('primereact/inputtext');
var portal = require('primereact/portal');
var tooltip = require('primereact/tooltip');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
function _toPrimitive(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _arrayLikeToArray(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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null != _i) {
var _s,
_e,
_x,
_r,
_arr = [],
_n = !0,
_d = !1;
try {
if (_x = (_i = _i.call(arr)).next, 0 === i) {
if (Object(_i) !== _i) return;
_n = !1;
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
} catch (err) {
_d = !0, _e = err;
} finally {
try {
if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
var ColumnBase = {
defaultProps: {
__TYPE: 'Column',
align: null,
alignFrozen: 'left',
alignHeader: null,
body: null,
bodyClassName: null,
bodyStyle: null,
cellEditValidator: null,
cellEditValidatorEvent: 'click',
className: null,
colSpan: null,
columnKey: null,
dataType: 'text',
editor: null,
excludeGlobalFilter: false,
expander: false,
exportField: null,
exportable: true,
field: null,
filter: false,
filterApply: null,
filterClear: null,
filterElement: null,
filterField: null,
filterFooter: null,
filterFunction: null,
filterHeader: null,
filterHeaderClassName: null,
filterHeaderStyle: null,
filterMatchMode: null,
filterMatchModeOptions: null,
filterMaxLength: null,
filterMenuClassName: null,
filterMenuStyle: null,
filterPlaceholder: null,
filterType: 'text',
footer: null,
footerClassName: null,
footerStyle: null,
frozen: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTooltip: null,
headerTooltipOptions: null,
hidden: false,
maxConstraints: 2,
onBeforeCellEditHide: null,
onBeforeCellEditShow: null,
onCellEditCancel: null,
onCellEditComplete: null,
onCellEditInit: null,
onFilterApplyClick: null,
onFilterClear: null,
onFilterConstraintAdd: null,
onFilterConstraintRemove: null,
onFilterMatchModeChange: null,
onFilterOperatorChange: null,
reorderable: true,
resizeable: true,
rowEditor: false,
rowReorder: false,
rowReorderIcon: 'pi pi-bars',
rowSpan: null,
selectionMode: null,
showAddButton: true,
showApplyButton: true,
showClearButton: true,
showFilterMatchModes: true,
showFilterMenu: true,
showFilterMenuOptions: true,
showFilterOperator: true,
sortField: null,
sortFunction: null,
sortable: false,
sortableDisabled: false,
style: null,
children: undefined
},
getCProp: function getCProp(column, name) {
return utils.ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
},
getCProps: function getCProps(column) {
return utils.ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
},
getCOtherProps: function getCOtherProps(column) {
return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
}
};
var DataTableBase = {
defaultProps: {
__TYPE: 'DataTable',
alwaysShowPaginator: true,
breakpoint: '960px',
cellClassName: null,
cellSelection: false,
className: null,
collapsedRowIcon: 'pi pi-chevron-right',
columnResizeMode: 'fit',
compareSelectionBy: 'deepEquals',
contextMenuSelection: null,
csvSeparator: ',',
currentPageReportTemplate: '({currentPage} of {totalPages})',
customRestoreState: null,
customSaveState: null,
dataKey: null,
defaultSortOrder: 1,
dragSelection: false,
editMode: 'cell',
editingRows: null,
emptyMessage: null,
expandableRowGroups: false,
expandedRowIcon: 'pi pi-chevron-down',
expandedRows: null,
exportFilename: 'download',
exportFunction: null,
filterDelay: 300,
filterDisplay: 'menu',
filterLocale: undefined,
filters: null,
first: 0,
footer: null,
footerColumnGroup: null,
frozenValue: null,
frozenWidth: null,
globalFilter: null,
globalFilterFields: null,
globalFilterMatchMode: PrimeReact.FilterMatchMode.CONTAINS,
groupRowsBy: null,
header: null,
headerColumnGroup: null,
id: null,
isDataSelectable: null,
lazy: false,
loading: false,
loadingIcon: 'pi pi-spinner',
metaKeySelection: true,
multiSortMeta: null,
onAllRowsSelect: null,
onAllRowsUnselect: null,
onCellClick: null,
onCellSelect: null,
onCellUnselect: null,
onColReorder: null,
onColumnResizeEnd: null,
onColumnResizerClick: null,
onColumnResizerDoubleClick: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onFilter: null,
onPage: null,
onRowClick: null,
onRowMouseEnter: null,
onRowMouseLeave: null,
onRowCollapse: null,
onRowDoubleClick: null,
onRowEditCancel: null,
onRowEditChange: null,
onRowEditComplete: null,
onRowEditInit: null,
onRowEditSave: null,
onRowExpand: null,
onRowReorder: null,
onRowSelect: null,
onRowToggle: null,
onRowUnselect: null,
onSelectAllChange: null,
onSelectionChange: null,
onSort: null,
onStateRestore: null,
onStateSave: null,
onValueChange: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
removableSort: false,
reorderableColumns: false,
reorderableRows: false,
resizableColumns: false,
responsiveLayout: 'scroll',
rowClassName: null,
rowEditValidator: null,
rowExpansionTemplate: null,
rowGroupFooterTemplate: null,
rowGroupHeaderTemplate: null,
rowGroupMode: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectAll: false,
selectOnEdit: true,
selection: null,
selectionAriaLabel: null,
selectionAutoFocus: true,
selectionMode: null,
selectionPageOnly: false,
showGridlines: false,
showRowReorderElement: null,
showSelectAll: true,
showSelectionElement: null,
size: 'normal',
sortField: null,
sortMode: 'single',
sortOrder: null,
stateKey: null,
stateStorage: 'session',
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
getProps: function getProps(props) {
return utils.ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return utils.ObjectUtils.getDiffProps(props, DataTableBase.defaultProps);
}
};
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' || event.key === ' ') {
// event.key is for Android support
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' || event.key === ' ') {
// event.key is for Android support
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(name) {
return ColumnBase.getCProp(props.column, name);
};
var field = getColumnProp('field') || "field_".concat(props.index);
var editingKey = props.dataKey ? props.rowData && 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 && (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 && 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 && 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
var currentData = getEditingRowData();
if (currentData) {
currentData[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]);
React__namespace.useEffect(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);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [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;
}
content = typeof content == 'boolean' ? content.toString() : content;
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 getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var isFocusable = function isFocusable() {
return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
};
var isGrouped = function isGrouped(column) {
var columnField = getColumnProp(column, 'field');
if (props.groupRowsBy && columnField) {
return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(columnField) > -1 : props.groupRowsBy === columnField;
}
return false;
};
var equals = function equals(data1, data2) {
return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, props.dataKey);
};
var getTabIndex = function getTabIndex() {
return isFocusable() && !props.allowCellSelection ? props.rowIndex === 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.rowIndex
});
};
var onDoubleClick = function onDoubleClick(event) {
props.onRowDoubleClick({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onRightClick = function onRightClick(event) {
props.onRowRightClick({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onMouseEnter = function onMouseEnter(event) {
props.onRowMouseEnter({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onMouseLeave = function onMouseLeave(event) {
props.onRowMouseLeave({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
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.rowIndex
});
};
var onMouseUp = function onMouseUp(event) {
props.onRowMouseUp({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onDragStart = function onDragStart(event) {
props.onRowDragStart({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onDragOver = function onDragOver(event) {
props.onRowDragOver({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onDragLeave = function onDragLeave(event) {
props.onRowDrag