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
41,085 lines • 1.51 MB
JavaScript
import * as React from 'react';
import { CSSTransition as CSSTransition$1, TransitionGroup } from 'react-transition-group';
import ReactDOM from 'react-dom';
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$f(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$f(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray$f(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$f(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$f(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$f(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$f(arr, i) || _nonIterableRest();
}
var FilterMatchMode = Object.freeze({
STARTS_WITH: 'startsWith',
CONTAINS: 'contains',
NOT_CONTAINS: 'notContains',
ENDS_WITH: 'endsWith',
EQUALS: 'equals',
NOT_EQUALS: 'notEquals',
IN: 'in',
LESS_THAN: 'lt',
LESS_THAN_OR_EQUAL_TO: 'lte',
GREATER_THAN: 'gt',
GREATER_THAN_OR_EQUAL_TO: 'gte',
BETWEEN: 'between',
DATE_IS: 'dateIs',
DATE_IS_NOT: 'dateIsNot',
DATE_BEFORE: 'dateBefore',
DATE_AFTER: 'dateAfter',
CUSTOM: 'custom'
});
var FilterOperator = Object.freeze({
AND: 'and',
OR: 'or'
});
function classNames() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (args) {
var classes = [];
for (var i = 0; i < args.length; i++) {
var className = args[i];
if (!className) continue;
var type = _typeof(className);
if (type === 'string' || type === 'number') {
classes.push(className);
} else if (type === 'object') {
var _classes = Array.isArray(className) ? className : Object.entries(className).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return !!value ? key : null;
});
classes = _classes.length ? classes.concat(_classes.filter(function (c) {
return !!c;
})) : classes;
}
}
return classes.join(' ');
}
return undefined;
}
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, _toPropertyKey(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 _createForOfIteratorHelper$e(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$e(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$e(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$e(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$e(o, minLen); }
function _arrayLikeToArray$e(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var DomHandler = /*#__PURE__*/function () {
function DomHandler() {
_classCallCheck(this, DomHandler);
}
_createClass(DomHandler, null, [{
key: "innerWidth",
value:
/**
* All data- properties like data-test-id
*/
/**
* All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
*/
function innerWidth(el) {
if (el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
}
}, {
key: "width",
value: function width(el) {
if (el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
}
}, {
key: "getBrowserLanguage",
value: function getBrowserLanguage() {
return navigator.userLanguage || navigator.languages && navigator.languages.length && navigator.languages[0] || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';
}
}, {
key: "getWindowScrollTop",
value: function getWindowScrollTop() {
var doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}
}, {
key: "getWindowScrollLeft",
value: function getWindowScrollLeft() {
var doc = document.documentElement;
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
}
}, {
key: "getOuterWidth",
value: function getOuterWidth(el, margin) {
if (el) {
var width = el.getBoundingClientRect().width || el.offsetWidth;
if (margin) {
var style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
}
return width;
}
return 0;
}
}, {
key: "getOuterHeight",
value: function getOuterHeight(el, margin) {
if (el) {
var height = el.getBoundingClientRect().height || el.offsetHeight;
if (margin) {
var style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
}
}, {
key: "getClientHeight",
value: function getClientHeight(el, margin) {
if (el) {
var height = el.clientHeight;
if (margin) {
var style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
}
}, {
key: "getClientWidth",
value: function getClientWidth(el, margin) {
if (el) {
var width = el.clientWidth;
if (margin) {
var style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
}
return width;
}
return 0;
}
}, {
key: "getViewport",
value: function getViewport() {
var win = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
w = win.innerWidth || e.clientWidth || g.clientWidth,
h = win.innerHeight || e.clientHeight || g.clientHeight;
return {
width: w,
height: h
};
}
}, {
key: "getOffset",
value: function getOffset(el) {
if (el) {
var rect = el.getBoundingClientRect();
return {
top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
};
}
return {
top: 'auto',
left: 'auto'
};
}
}, {
key: "index",
value: function index(element) {
if (element) {
var children = element.parentNode.childNodes;
var num = 0;
for (var i = 0; i < children.length; i++) {
if (children[i] === element) return num;
if (children[i].nodeType === 1) num++;
}
}
return -1;
}
}, {
key: "addMultipleClasses",
value: function addMultipleClasses(element, className) {
if (element && className) {
if (element.classList) {
var styles = className.split(' ');
for (var i = 0; i < styles.length; i++) {
element.classList.add(styles[i]);
}
} else {
var _styles = className.split(' ');
for (var _i = 0; _i < _styles.length; _i++) {
element.className += ' ' + _styles[_i];
}
}
}
}
}, {
key: "removeMultipleClasses",
value: function removeMultipleClasses(element, className) {
if (element && className) {
if (element.classList) {
var styles = className.split(' ');
for (var i = 0; i < styles.length; i++) {
element.classList.remove(styles[i]);
}
} else {
var _styles2 = className.split(' ');
for (var _i2 = 0; _i2 < _styles2.length; _i2++) {
element.className = element.className.replace(new RegExp('(^|\\b)' + _styles2[_i2].split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}
}
}, {
key: "addClass",
value: function addClass(element, className) {
if (element && className) {
if (element.classList) element.classList.add(className);else element.className += ' ' + className;
}
}
}, {
key: "removeClass",
value: function removeClass(element, className) {
if (element && className) {
if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}, {
key: "hasClass",
value: function hasClass(element, className) {
if (element) {
if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
}
}, {
key: "find",
value: function find(element, selector) {
return element ? Array.from(element.querySelectorAll(selector)) : [];
}
}, {
key: "findSingle",
value: function findSingle(element, selector) {
if (element) {
return element.querySelector(selector);
}
return null;
}
}, {
key: "getHeight",
value: function getHeight(el) {
if (el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
return height;
}
return 0;
}
}, {
key: "getWidth",
value: function getWidth(el) {
if (el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
return width;
}
return 0;
}
}, {
key: "alignOverlay",
value: function alignOverlay(overlay, target, appendTo) {
var calculateMinWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
if (overlay && target) {
if (appendTo === 'self') {
this.relativePosition(overlay, target);
} else {
calculateMinWidth && (overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px');
this.absolutePosition(overlay, target);
}
}
}
}, {
key: "absolutePosition",
value: function absolutePosition(element, target) {
if (element && target) {
var elementDimensions = element.offsetParent ? {
width: element.offsetWidth,
height: element.offsetHeight
} : this.getHiddenElementDimensions(element);
var elementOuterHeight = elementDimensions.height;
var elementOuterWidth = elementDimensions.width;
var targetOuterHeight = target.offsetHeight;
var targetOuterWidth = target.offsetWidth;
var targetOffset = target.getBoundingClientRect();
var windowScrollTop = this.getWindowScrollTop();
var windowScrollLeft = this.getWindowScrollLeft();
var viewport = this.getViewport();
var top, left;
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight;
if (top < 0) {
top = windowScrollTop;
}
element.style.transformOrigin = 'bottom';
} else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
}
if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);else left = targetOffset.left + windowScrollLeft;
element.style.top = top + 'px';
element.style.left = left + 'px';
}
}
}, {
key: "relativePosition",
value: function relativePosition(element, target) {
if (element && target) {
var elementDimensions = element.offsetParent ? {
width: element.offsetWidth,
height: element.offsetHeight
} : this.getHiddenElementDimensions(element);
var targetHeight = target.offsetHeight;
var targetOffset = target.getBoundingClientRect();
var viewport = this.getViewport();
var top, left;
if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
top = -1 * elementDimensions.height;
if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top;
}
element.style.transformOrigin = 'bottom';
} else {
top = targetHeight;
element.style.transformOrigin = 'top';
}
if (elementDimensions.width > viewport.width) {
// element wider then viewport and cannot fit on screen (align at left side of viewport)
left = targetOffset.left * -1;
} else if (targetOffset.left + elementDimensions.width > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
} else {
// element fits on screen (align with target)
left = 0;
}
element.style.top = top + 'px';
element.style.left = left + 'px';
}
}
}, {
key: "flipfitCollision",
value: function flipfitCollision(element, target) {
var _this = this;
var my = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left top';
var at = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'left bottom';
var callback = arguments.length > 4 ? arguments[4] : undefined;
if (element && target) {
var targetOffset = target.getBoundingClientRect();
var viewport = this.getViewport();
var myArr = my.split(' ');
var atArr = at.split(' ');
var getPositionValue = function getPositionValue(arr, isOffset) {
return isOffset ? +arr.substring(arr.search(/(\+|-)/g)) || 0 : arr.substring(0, arr.search(/(\+|-)/g)) || arr;
};
var position = {
my: {
x: getPositionValue(myArr[0]),
y: getPositionValue(myArr[1] || myArr[0]),
offsetX: getPositionValue(myArr[0], true),
offsetY: getPositionValue(myArr[1] || myArr[0], true)
},
at: {
x: getPositionValue(atArr[0]),
y: getPositionValue(atArr[1] || atArr[0]),
offsetX: getPositionValue(atArr[0], true),
offsetY: getPositionValue(atArr[1] || atArr[0], true)
}
};
var myOffset = {
left: function left() {
var totalOffset = position.my.offsetX + position.at.offsetX;
return totalOffset + targetOffset.left + (position.my.x === 'left' ? 0 : -1 * (position.my.x === 'center' ? _this.getOuterWidth(element) / 2 : _this.getOuterWidth(element)));
},
top: function top() {
var totalOffset = position.my.offsetY + position.at.offsetY;
return totalOffset + targetOffset.top + (position.my.y === 'top' ? 0 : -1 * (position.my.y === 'center' ? _this.getOuterHeight(element) / 2 : _this.getOuterHeight(element)));
}
};
var alignWithAt = {
count: {
x: 0,
y: 0
},
left: function left() {
var left = myOffset.left();
var scrollLeft = DomHandler.getWindowScrollLeft();
element.style.left = left + scrollLeft + 'px';
if (this.count.x === 2) {
element.style.left = scrollLeft + 'px';
this.count.x = 0;
} else if (left < 0) {
this.count.x++;
position.my.x = 'left';
position.at.x = 'right';
position.my.offsetX *= -1;
position.at.offsetX *= -1;
this.right();
}
},
right: function right() {
var left = myOffset.left() + DomHandler.getOuterWidth(target);
var scrollLeft = DomHandler.getWindowScrollLeft();
element.style.left = left + scrollLeft + 'px';
if (this.count.x === 2) {
element.style.left = viewport.width - DomHandler.getOuterWidth(element) + scrollLeft + 'px';
this.count.x = 0;
} else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
this.count.x++;
position.my.x = 'right';
position.at.x = 'left';
position.my.offsetX *= -1;
position.at.offsetX *= -1;
this.left();
}
},
top: function top() {
var top = myOffset.top();
var scrollTop = DomHandler.getWindowScrollTop();
element.style.top = top + scrollTop + 'px';
if (this.count.y === 2) {
element.style.left = scrollTop + 'px';
this.count.y = 0;
} else if (top < 0) {
this.count.y++;
position.my.y = 'top';
position.at.y = 'bottom';
position.my.offsetY *= -1;
position.at.offsetY *= -1;
this.bottom();
}
},
bottom: function bottom() {
var top = myOffset.top() + DomHandler.getOuterHeight(target);
var scrollTop = DomHandler.getWindowScrollTop();
element.style.top = top + scrollTop + 'px';
if (this.count.y === 2) {
element.style.left = viewport.height - DomHandler.getOuterHeight(element) + scrollTop + 'px';
this.count.y = 0;
} else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
this.count.y++;
position.my.y = 'bottom';
position.at.y = 'top';
position.my.offsetY *= -1;
position.at.offsetY *= -1;
this.top();
}
},
center: function center(axis) {
if (axis === 'y') {
var top = myOffset.top() + DomHandler.getOuterHeight(target) / 2;
element.style.top = top + DomHandler.getWindowScrollTop() + 'px';
if (top < 0) {
this.bottom();
} else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
this.top();
}
} else {
var left = myOffset.left() + DomHandler.getOuterWidth(target) / 2;
element.style.left = left + DomHandler.getWindowScrollLeft() + 'px';
if (left < 0) {
this.left();
} else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
this.right();
}
}
}
};
alignWithAt[position.at.x]('x');
alignWithAt[position.at.y]('y');
if (this.isFunction(callback)) {
callback(position);
}
}
}
}, {
key: "findCollisionPosition",
value: function findCollisionPosition(position) {
if (position) {
var isAxisY = position === 'top' || position === 'bottom';
var myXPosition = position === 'left' ? 'right' : 'left';
var myYPosition = position === 'top' ? 'bottom' : 'top';
if (isAxisY) {
return {
axis: 'y',
my: "center ".concat(myYPosition),
at: "center ".concat(position)
};
}
return {
axis: 'x',
my: "".concat(myXPosition, " center"),
at: "".concat(position, " center")
};
}
}
}, {
key: "getParents",
value: function getParents(element) {
var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
}
}, {
key: "getScrollableParents",
value: function getScrollableParents(element) {
var scrollableParents = [];
if (element) {
var parents = this.getParents(element);
var overflowRegex = /(auto|scroll)/;
var overflowCheck = function overflowCheck(node) {
var styleDeclaration = node ? getComputedStyle(node) : null;
return styleDeclaration && (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY')));
};
var _iterator = _createForOfIteratorHelper$e(parents),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var parent = _step.value;
var scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
if (scrollSelectors) {
var selectors = scrollSelectors.split(',');
var _iterator2 = _createForOfIteratorHelper$e(selectors),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var selector = _step2.value;
var el = this.findSingle(parent, selector);
if (el && overflowCheck(el)) {
scrollableParents.push(el);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
if (parent.nodeType === 1 && overflowCheck(parent)) {
scrollableParents.push(parent);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
return scrollableParents;
}
}, {
key: "getHiddenElementOuterHeight",
value: function getHiddenElementOuterHeight(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
var elementHeight = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementHeight;
}
return 0;
}
}, {
key: "getHiddenElementOuterWidth",
value: function getHiddenElementOuterWidth(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
var elementWidth = element.offsetWidth;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementWidth;
}
return 0;
}
}, {
key: "getHiddenElementDimensions",
value: function getHiddenElementDimensions(element) {
var dimensions = {};
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
dimensions.width = element.offsetWidth;
dimensions.height = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
}
return dimensions;
}
}, {
key: "fadeIn",
value: function fadeIn(element, duration) {
if (element) {
element.style.opacity = 0;
var last = +new Date();
var opacity = 0;
var tick = function tick() {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity;
last = +new Date();
if (+opacity < 1) {
window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick, 16);
}
};
tick();
}
}
}, {
key: "fadeOut",
value: function fadeOut(element, duration) {
if (element) {
var opacity = 1,
interval = 50,
gap = interval / duration;
var fading = setInterval(function () {
opacity -= gap;
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
}
element.style.opacity = opacity;
}, interval);
}
}
}, {
key: "getUserAgent",
value: function getUserAgent() {
return navigator.userAgent;
}
}, {
key: "isIOS",
value: function isIOS() {
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
}
}, {
key: "isAndroid",
value: function isAndroid() {
return /(android)/i.test(navigator.userAgent);
}
}, {
key: "isChrome",
value: function isChrome() {
return /(chrome)/i.test(navigator.userAgent);
}
}, {
key: "isTouchDevice",
value: function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}
}, {
key: "isFunction",
value: function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
}, {
key: "appendChild",
value: function appendChild(element, target) {
if (this.isElement(target)) target.appendChild(element);else if (target.el && target.el.nativeElement) target.el.nativeElement.appendChild(element);else throw new Error('Cannot append ' + target + ' to ' + element);
}
}, {
key: "removeChild",
value: function removeChild(element, target) {
if (this.isElement(target)) target.removeChild(element);else if (target.el && target.el.nativeElement) target.el.nativeElement.removeChild(element);else throw new Error('Cannot remove ' + element + ' from ' + target);
}
}, {
key: "isElement",
value: function isElement(obj) {
return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === 'object' ? obj instanceof HTMLElement : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
}, {
key: "scrollInView",
value: function scrollInView(container, item) {
var borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
var borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
var paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
var paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
var containerRect = container.getBoundingClientRect();
var itemRect = item.getBoundingClientRect();
var offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
var scroll = container.scrollTop;
var elementHeight = container.clientHeight;
var itemHeight = this.getOuterHeight(item);
if (offset < 0) {
container.scrollTop = scroll + offset;
} else if (offset + itemHeight > elementHeight) {
container.scrollTop = scroll + offset - elementHeight + itemHeight;
}
}
}, {
key: "clearSelection",
value: function clearSelection() {
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
window.getSelection().removeAllRanges();
}
} else if (document['selection'] && document['selection'].empty) {
try {
document['selection'].empty();
} catch (error) {
//ignore IE bug
}
}
}
}, {
key: "calculateScrollbarWidth",
value: function calculateScrollbarWidth(el) {
if (el) {
var style = getComputedStyle(el);
return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
} else {
if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
var scrollDiv = document.createElement('div');
scrollDiv.className = 'p-scrollbar-measure';
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
this.calculatedScrollbarWidth = scrollbarWidth;
return scrollbarWidth;
}
}
}, {
key: "getBrowser",
value: function getBrowser() {
if (!this.browser) {
var matched = this.resolveUserAgent();
this.browser = {};
if (matched.browser) {
this.browser[matched.browser] = true;
this.browser['version'] = matched.version;
}
if (this.browser['chrome']) {
this.browser['webkit'] = true;
} else if (this.browser['webkit']) {
this.browser['safari'] = true;
}
}
return this.browser;
}
}, {
key: "resolveUserAgent",
value: function resolveUserAgent() {
var ua = navigator.userAgent.toLowerCase();
var match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
return {
browser: match[1] || '',
version: match[2] || '0'
};
}
}, {
key: "isVisible",
value: function isVisible(element) {
// https://stackoverflow.com/a/59096915/502366 (in future use IntersectionObserver)
return element && (element.clientHeight !== 0 || element.getClientRects().length !== 0 || getComputedStyle(element).display !== 'none');
}
}, {
key: "isExist",
value: function isExist(element) {
return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
}
}, {
key: "hasDOM",
value: function hasDOM() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
}
}, {
key: "getFocusableElements",
value: function getFocusableElements(element) {
var selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var focusableElements = DomHandler.find(element, "button:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])".concat(selector, ",\n [href][clientHeight][clientWidth]:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n input:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n select:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n textarea:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n [tabIndex]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector, ",\n [contenteditable]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])").concat(selector));
var visibleFocusableElements = [];
var _iterator3 = _createForOfIteratorHelper$e(focusableElements),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var focusableElement = _step3.value;
if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') visibleFocusableElements.push(focusableElement);
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return visibleFocusableElements;
}
}, {
key: "getFirstFocusableElement",
value: function getFirstFocusableElement(element, selector) {
var focusableElements = DomHandler.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null;
}
}, {
key: "getLastFocusableElement",
value: function getLastFocusableElement(element, selector) {
var focusableElements = DomHandler.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
}
/**
* Focus an input element if it does not already have focus.
*
* @param {HTMLElement} el a HTML element
* @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
*/
}, {
key: "focus",
value: function focus(el, scrollTo) {
var preventScroll = scrollTo === undefined ? true : !scrollTo;
el && document.activeElement !== el && el.focus({
preventScroll: preventScroll
});
}
/**
* Focus the first focusable element if it does not already have focus.
*
* @param {HTMLElement} el a HTML element
* @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
* @return {HTMLElement | undefined} the first focusable HTML element found
*/
}, {
key: "focusFirstElement",
value: function focusFirstElement(el, scrollTo) {
if (!el) return;
var firstFocusableElement = DomHandler.getFirstFocusableElement(el);
firstFocusableElement && DomHandler.focus(firstFocusableElement, scrollTo);
return firstFocusableElement;
}
}, {
key: "getCursorOffset",
value: function getCursorOffset(el, prevText, nextText, currentText) {
if (el) {
var style = getComputedStyle(el);
var ghostDiv = document.createElement('div');
ghostDiv.style.position = 'absolute';
ghostDiv.style.top = '0px';
ghostDiv.style.left = '0px';
ghostDiv.style.visibility = 'hidden';
ghostDiv.style.pointerEvents = 'none';
ghostDiv.style.overflow = style.overflow;
ghostDiv.style.width = style.width;
ghostDiv.style.height = style.height;
ghostDiv.style.padding = style.padding;
ghostDiv.style.border = style.border;
ghostDiv.style.overflowWrap = style.overflowWrap;
ghostDiv.style.whiteSpace = style.whiteSpace;
ghostDiv.style.lineHeight = style.lineHeight;
ghostDiv.innerHTML = prevText.replace(/\r\n|\r|\n/g, '<br />');
var ghostSpan = document.createElement('span');
ghostSpan.textContent = currentText;
ghostDiv.appendChild(ghostSpan);
var text = document.createTextNode(nextText);
ghostDiv.appendChild(text);
document.body.appendChild(ghostDiv);
var offsetLeft = ghostSpan.offsetLeft,
offsetTop = ghostSpan.offsetTop,
clientHeight = ghostSpan.clientHeight;
document.body.removeChild(ghostDiv);
return {
left: Math.abs(offsetLeft - el.scrollLeft),
top: Math.abs(offsetTop - el.scrollTop) + clientHeight
};
}
return {
top: 'auto',
left: 'auto'
};
}
}, {
key: "invokeElementMethod",
value: function invokeElementMethod(element, methodName, args) {
element[methodName].apply(element, args);
}
}, {
key: "isClickable",
value: function isClickable(element) {
var targetNode = element.nodeName;
var parentNode = element.parentElement && element.parentElement.nodeName;
return targetNode === 'INPUT' || targetNode === 'TEXTAREA' || targetNode === 'BUTTON' || targetNode === 'A' || parentNode === 'INPUT' || parentNode === 'TEXTAREA' || parentNode === 'BUTTON' || parentNode === 'A' || this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') || this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton');
}
}, {
key: "applyStyle",
value: function applyStyle(element, style) {
if (typeof style === 'string') {
element.style.cssText = this.style;
} else {
for (var prop in this.style) {
element.style[prop] = style[prop];
}
}
}
}, {
key: "exportCSV",
value: function exportCSV(csv, filename) {
var blob = new Blob([csv], {
type: 'application/csv;charset=utf-8;'
});
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename + '.csv');
} else {
var isDownloaded = DomHandler.saveAs({
name: filename + '.csv',
src: URL.createObjectURL(blob)
});
if (!isDownloaded) {
csv = 'data:text/csv;charset=utf-8,' + csv;
window.open(encodeURI(csv));
}
}
}
}, {
key: "saveAs",
value: function saveAs(file) {
if (file) {
var link = document.createElement('a');
if (link.download !== undefined) {
var name = file.name,
src = file.src;
link.setAttribute('href', src);
link.setAttribute('download', name);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
return true;
}
}
return false;
}
}, {
key: "createInlineStyle",
value: function createInlineStyle(nonce) {
var styleElement = document.createElement('style');
try {
if (!nonce) {
nonce = process.env.REACT_APP_CSS_NONCE;
}
} catch (error) {
// NOOP
}
nonce && styleElement.setAttribute('nonce', nonce);
document.head.appendChild(styleElement);
return styleElement;
}
}, {
key: "removeInlineStyle",
value: function removeInlineStyle(styleElement) {
if (this.isExist(styleElement)) {
try {
document.head.removeChild(styleElement);
} catch (error) {
// style element may have already been removed in a fast refresh
}
styleElement = null;
}
return styleElement;
}
}, {
key: "getTargetElement",
value: function getTargetElement(target) {
if (!target) return null;
if (target === 'document') {
return document;
} else if (target === 'window') {
return window;
} else if (_typeof(target) === 'object' && target.hasOwnProperty('current')) {
return this.isExist(target.current) ? target.current : null;
} else {
var isFunction = function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
};
var element = isFunction(target) ? target() : target;
return element && element.nodeType === 9 || this.isExist(element) ? element : null;
}
}
/**
* Get the attribute names for an element and sorts them alpha for comparison
*/
}, {
key: "getAttributeNames",
value: function getAttributeNames(node) {
var index, rv, attrs;
rv = [];
attrs = node.attributes;
for (index = 0; index < attrs.length; ++index) {
rv.push(attrs[index].nodeName);
}
rv.sort();
return rv;
}
/**
* Compare two elements for equality. Even will compare if the style element
* is out of order for example:
*
* elem1 = style="color: red; font-size: 28px"
* elem2 = style="font-size: 28px; color: red"
*/
}, {
key: "isEqualElement",
value: function isEqualElement(elm1, elm2) {
var attrs1, attrs2, name, node1, node2;
// Compare attributes without order sensitivity
attrs1 = DomHandler.getAttributeNames(elm1);
attrs2 = DomHandler.getAttributeNames(elm2);
if (attrs1.join(',') !== attrs2.join(',')) {
// console.log("Found nodes with different sets of attributes; not equiv");
return false;
}
// ...and values
// unless you want to compare DOM0 event handlers
// (onclick="...")
for (var index = 0; index < attrs1.length; ++index) {
name = attrs1[index];
if (name === 'style') {
var astyle = elm1.style;
var bstyle = elm2.style;
var rexDigitsOnly = /^\d+$/;
for (var _i3 = 0, _Object$keys = Object.keys(astyle); _i3 < _Object$keys.length; _i3++) {
var key = _Object$keys[_i3];
if (!rexDigitsOnly.test(key) && astyle[key] !== bstyle[key]) {
// Not equivalent, stop
//console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
return false;
}
}
} else {
if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
// console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
return false;
}
}
}
// Walk the children
for (node1 = elm1.firstChild, node2 = elm2.firstChild; node1 && node2; node1 = node1.nextSibling, node2 = node2.nextSibling) {
if (node1.nodeType !== node2.nodeType) {
// display("Found nodes of different types; not equiv");
return false;
}
if (node1.nodeType === 1) {
// Element
if (!DomHandler.isEqualElement(node1, node2)) {
return false;
}
} else if (node1.nodeValue !== node2.nodeValue) {
// console.log("Found nodes with mis-matched nodeValues; not equiv");
return false;
}
}
if (node1 || node2) {
// One of the elements had more nodes than the other
// console.log("Found more children of one element than the other; not equivalent");
return false;
}
// Seem the same
return true;
}
}]);
return DomHandler;
}();
_defineProperty(DomHandler, "DATA_PROPS", ['data-']);
_defineProperty(DomHandler, "ARIA_PROPS", ['aria', 'focus-target']);
var ConnectedOverlayScrollHandler = /*#__PURE__*/function () {
function ConnectedOverlayScrollHandler(element) {
var listener = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
_classCallCheck(this, ConnectedOverlayScrollHandler);
this.element = element;
this.listener = listener;
}
_createClass(ConnectedOverlayScrollHandler, [{
key: "bindScrollListener",
value: function bindScrollListener() {
this.scrollableParents = DomHandler.getScrollableParents(this.element);
for (var i = 0; i < this.scrollableParents.length; i++) {
this.scrollableParents[i].addEventListener('scroll', this.listener);
}
}
}, {
key: "unbindScrollListener",
value: function unbindScrollListener() {
if (this.scrollableParents) {
for (var i = 0; i < this.scrollableParents.length; i++) {
this.scrollableParents[i].removeEventListener('scroll', this.listener);
}
}
}
}, {
key: "destroy",
value: function destroy() {
this.unbindScrollListener();
this.element = null;
this.listener = null;
this.scrollableParents = null;
}
}]);
return ConnectedOverlayScrollHandler;
}();
function EventBus() {
var allHandlers = new Map();
return {
on: function on(type, handler) {
var handlers = allHandlers.get(type);
if (!handlers) handlers = [handler];else handlers.push(handler);
allHandlers.set(type, handlers);
},
off: function off(type, handler) {
var handlers = allHandlers.get(type);
handlers && handlers.splice(handlers.indexOf(handler) >>> 0, 1);
},
emit: function emit(type, evt) {
var handlers = allHandlers.get(type);
handlers && handlers.slice().forEach(function (handler) {
return handler(evt);
});
}
};
}
function ownKeys$C(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$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function mask(el, options) {
var defaultOptions = {
mask: null,
slotChar: '_',
autoClear: true,
unmask: false,
readOnly: false,
onComplete: null,
onChange: null,
onFocus: null,
onBlur: null
};
options = _objectSpread$C(_objectSpread$C({}, defaultOptions), options);
var tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
var caret = function caret(first, last) {
var range, begin, end;
if (!el.offsetParent || el !== document.activeElement) {
return;
}
if (typeof first === 'number') {
begin = first;
end = typeof last === 'number' ? last : begin;
if (el.setSelectionRange) {
el.setSelectionRange(begin, end);
} else if (el['createTextRange']) {
range = el['createTextRange']();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
} else {
if (el.setSelectionRange) {
begin = el.selectionStart;
end = el.selectionEnd;
} else if (document['selection'] && document['selection'].createRange) {
range = document['selection'].createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return {
begin: begin,
end: end
};
}
};
var isCompleted = function isCompleted() {
for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
if (tests[i] && buffer[i] === getPlaceholder(i)) {
return false;
}
}
return true;
};
var getPlaceholder = function getPlaceholder(i) {
if (i < options.slotChar.length) {
return options.slotChar.charAt(i);
}
return options.slotChar.charAt(0);
};
var getValue = function getValue() {
return options.unmask ? getUnmaskedValue() : el && el.value;
};
var seekNext = function seekNext(pos) {
while (++pos < len && !tests[pos]);
return pos;
};
var seekPrev = function seekPrev(pos) {
while (--pos >= 0 && !tests[pos]);
return pos;
};
var shiftL = function shiftL(begin, end) {
var i, j;
if (begin < 0) {
return;
}
for (i = begin, j = seekNext(end); i < len; i++) {
if (tests[i]) {
if (j < len && tests[i].test(buffer[j])) {
buffer[i] = buffer[j];
buffer[j] = getPlaceholder(j);
} else {
break;
}
j = seekNext(j);
}
}
writeBuffer();
caret(Math.max(firstNonMaskPos, begin));
};
var shiftR = function shiftR(pos) {
var i, c, j, t;
for (i = pos, c = getPlaceholder(pos); i < len; i++) {
if (tests[i]) {
j = seekNext(i);
t = buffer[i];
buffer[i] = c;
if (j < len && tests[j].test(t)) {
c = t;
} else {
break;
}
}
}
};
var handleAndroidInput = function handleAndroidInput(e) {
var curVal = el.value;
var pos = caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests[pos.begin - 1]) pos.begin--;
if (pos.begin === 0) {
while (pos.begin < firstNonMaskPos && !tests[pos.begin]) pos.begin++;
}
caret(pos.begin, pos.begin);
} else {
checkVal(true);
while (pos.begin < len && !tests[pos.begin]) pos.begin++;
caret(pos.begin, pos.begin);
}
if (options.onComplete && isCompleted()) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var onBlur = function onBlur(e) {
checkVal();
options.onBlur && options.onBlur(e);
updateModel(e);
if (el.value !== focusText) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
}
};
var onKeyDown = function onKeyDown(e) {
if (options.readOnly) {
return;
}
var k = e.which || e.keyCode,
pos,
begin,
end;
oldVal = el.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
pos = caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
end = k === 46 ? seekNext(end) : end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);
updateModel(e);
e.preventDefault();
} else if (k === 13) {
// enter
onBlur(e);
updateModel(e);
} else if (k === 27) {
// escape
el.value = focusText;
caret(0, checkVal());
updateModel(e);
e.preventDefault();
}
};
var onKeyPress = function onKeyPress(e) {
if (options.readOnly) {
return;
}
var k = e.which || e.keyCode,
pos = caret(),
p,
c,
next,
completed;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end - 1);
}
p = seekNext(pos.begin - 1);
if (p < len) {
c = String.fromCharCode(k);
if (tests[p].test(c)) {
shiftR(p);
buffer[p] = c;
writeBuffer();
next = seekNext(p);
if (DomHandler.isAndroid()) {
//Path for CSP Violation on FireFox OS 1.1
var proxy = function proxy() {
caret(next);
};
setTimeout(proxy, 0);
} else {
caret(next);
}
if (pos.begin <= lastRequiredNonMaskPos) {
completed = isCompleted();
}
}
}
e.preventDefault();
}
updateModel(e);
if (options.onComplete && completed) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var clearBuffer = function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
}
}
};
var writeBuffer = function writeBuffer() {
el.value = buffer.join('');
};
var checkVal = function checkVal(allow) {
//try to place characters where they belong
var test = el.value,
lastMatch = -1,
i,
c,
pos;
for (i = 0, pos = 0; i < len; i++) {
if (tests[i]) {
buffer[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests[i].test(c)) {
buffer[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else {
if (buffer[i] === test.charAt(pos)) {
pos++;
}
if (i < partialPosition) {
lastMatch = i;
}
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
if (options.autoClear || buffer.join('') === defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if (el.value) el.value = '';
clearBuffer(0, len);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
el.value = el.value.substring(0, lastMatch + 1);
}
return partialPosition ? i : firstNonMaskPos;
};
var onFocus = function onFocus(e) {
if (options.readOnly) {
return;
}
clearTimeout(caretTimeoutId);
var pos;
focusText = el.value;
pos = checkVal();
caretTimeoutId = setTimeout(function () {
if (el !== document.activeElement) {
return;
}
writeBuffer();
if (pos === options.mask.replace('?', '').length) {
caret(0, pos);
} else {
caret(pos);
}
}, 10);
if (options.onFocus) {
options.onFocus(e);
}
};
var onInput = function onInput(event) {
if (androidChrome) handleAndroidInput(event);else handleInputChange(event);
};
var handleInputChange = function handleInputChange(e) {
if (options.readOnly) {
return;
}
var pos = checkVal(true);
caret(pos);
updateModel(e);
if (options.onComplete && isCompleted()) {
options.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var getUnmaskedValue = function getUnmaskedValue() {
var unmaskedBuffer = [];
for (var i = 0; i < buffer.length; i++) {
var c = buffer[i];
if (tests[i] && c !== getPlaceholder(i)) {
unmaskedBuffer.push(c);
}
}
return unmaskedBuffer.join('');
};
var updateModel = function updateModel(e) {
if (options.onChange) {
var val = getValue().replace(options.slotChar, '');
options.onChange({
originalEvent: e,
value: defaultBuffer !== val ? val : ''
});
}
};
var bindEvents = function bindEvents() {
el.addEventListener('focus', onFocus);
el.addEventListener('blur', onBlur);
el.addEventListener('keydown', onKeyDown);
el.addEventListener('keypress', onKeyPress);
el.addEventListener('input', onInput);
el.addEventListener('paste', handleInputChange);
};
var unbindEvents = function unbindEvents() {
el.removeEventListener('focus', onFocus);
el.removeEventListener('blur', onBlur);
el.removeEventListener('keydown', onKeyDown);
el.removeEventListener('keypress', onKeyPress);
el.removeEventListener('input', onInput);
el.removeEventListener('paste', handleInputChange);
};
var init = function init() {
tests = [];
partialPosition = options.mask.length;
len = options.mask.length;
firstNonMaskPos = null;
defs = {
9: '[0-9]',
a: '[A-Za-z]',
'*': '[A-Za-z0-9]'
};
androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
var maskTokens = options.mask.split('');
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c === '?') {
len--;
partialPosition = i;
} else if (defs[c]) {
tests.push(new RegExp(defs[c]));
if (firstNonMaskPos === null) {
firstNonMaskPos = tests.length - 1;
}
if (i < partialPosition) {
lastRequiredNonMaskPos = tests.length - 1;
}
} else {
tests.push(null);
}
}
buffer = [];
for (var _i = 0; _i < maskTokens.length; _i++) {
var _c = maskTokens[_i];
if (_c !== '?') {
if (defs[_c]) buffer.push(getPlaceholder(_i));else buffer.push(_c);
}
}
defaultBuffer = buffer.join('');
};
if (el && options.mask) {
init();
bindEvents();
}
return {
init: init,
bindEvents: bindEvents,
unbindEvents: unbindEvents,
updateModel: updateModel,
getValue: getValue
};
}
var ObjectUtils = /*#__PURE__*/function () {
function ObjectUtils() {
_classCallCheck(this, ObjectUtils);
}
_createClass(ObjectUtils, null, [{
key: "equals",
value: function equals(obj1, obj2, field) {
if (field && obj1 && _typeof(obj1) === 'object' && obj2 && _typeof(obj2) === 'object') return this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field);else return this.deepEquals(obj1, obj2);
}
}, {
key: "deepEquals",
value: function deepEquals(a, b) {
if (a === b) return true;
if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
var arrA = Array.isArray(a),
arrB = Array.isArray(b),
i,
length,
key;
if (arrA && arrB) {
length = a.length;
if (length !== b.length) return false;
for (i = length; i-- !== 0;) if (!this.deepEquals(a[i], b[i])) return false;
return true;
}
if (arrA !== arrB) return false;
var dateA = a instanceof Date,
dateB = b instanceof Date;
if (dateA !== dateB) return false;
if (dateA && dateB) return a.getTime() === b.getTime();
var regexpA = a instanceof RegExp,
regexpB = b instanceof RegExp;
if (regexpA !== regexpB) return false;
if (regexpA && regexpB) return a.toString() === b.toString();
var keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0;) {
key = keys[i];
if (!this.deepEquals(a[key], b[key])) return false;
}
return true;
}
/*eslint no-self-compare: "off"*/
return a !== a && b !== b;
}
}, {
key: "resolveFieldData",
value: function resolveFieldData(data, field) {
if (data && Object.keys(data).length && field) {
if (this.isFunction(field)) {
return field(data);
} else if (ObjectUtils.isNotEmpty(data[field])) {
return data[field];
} else if (field.indexOf('.') === -1) {
return data[field];
} else {
var fields = field.split('.');
var value = data;
for (var i = 0, len = fields.length; i < len; ++i) {
if (value == null) {
return null;
}
value = value[fields[i]];
}
return value;
}
} else {
return null;
}
}
}, {
key: "isFunction",
value: function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
}, {
key: "isLetter",
value: function isLetter(_char) {
return _char && (_char.toUpperCase() != _char.toLowerCase() || _char.codePointAt(0) > 127);
}
}, {
key: "findDiffKeys",
value: function findDiffKeys(obj1, obj2) {
if (!obj1 || !obj2) {
return {};
}
return Object.keys(obj1).filter(function (key) {
return !obj2.hasOwnProperty(key);
}).reduce(function (result, current) {
result[current] = obj1[current];
return result;
}, {});
}
/**
* Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
*
* @param {any} obj the JSON object to reduce
* @param {string[]} startsWiths the string(s) to check if the property starts with this key
* @returns the JSON object containing only the key/values that match the startsWith string
*/
}, {
key: "reduceKeys",
value: function reduceKeys(obj, startsWiths) {
var result = {};
if (!obj || !startsWiths || startsWiths.length === 0) {
return result;
}
Object.keys(obj).filter(function (key) {
return startsWiths.some(function (value) {
return key.startsWith(value);
});
}).forEach(function (key) {
result[key] = obj[key];
delete obj[key];
});
return result;
}
}, {
key: "reorderArray",
value: function reorderArray(value, from, to) {
if (value && from !== to) {
if (to >= value.length) {
to %= value.length;
from %= value.length;
}
value.splice(to, 0, value.splice(from, 1)[0]);
}
}
}, {
key: "findIndexInList",
value: function findIndexInList(value, list, dataKey) {
var _this = this;
if (list) {
return dataKey ? list.findIndex(function (item) {
return _this.equals(item, value, dataKey);
}) : list.findIndex(function (item) {
return item === value;
});
}
return -1;
}
}, {
key: "getJSXElement",
value: function getJSXElement(obj) {
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
params[_key - 1] = arguments[_key];
}
return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
}
}, {
key: "getProp",
value: function getProp(props) {
var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var value = props ? props[prop] : undefined;
return value === undefined ? defaultProps[prop] : value;
}
}, {
key: "getMergedProps",
value: function getMergedProps(props, defaultProps) {
return Object.assign({}, defaultProps, props);
}
}, {
key: "getDiffProps",
value: function getDiffProps(props, defaultProps) {
return this.findDiffKeys(props, defaultProps);
}
}, {
key: "getPropValue",
value: function getPropValue(obj) {
for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
params[_key2 - 1] = arguments[_key2];
}
var methodParams = params;
if (params && params.length === 1) {
methodParams = params[0];
}
return this.isFunction(obj) ? obj.apply(void 0, _toConsumableArray(methodParams)) : obj;
}
}, {
key: "getComponentProp",
value: function getComponentProp(component) {
var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined;
}
}, {
key: "getComponentProps",
value: function getComponentProps(component, defaultProps) {
return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined;
}
}, {
key: "getComponentDiffProps",
value: function getComponentDiffProps(component, defaultProps) {
return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined;
}
}, {
key: "isValidChild",
value: function isValidChild(child, type, validTypes) {
/* eslint-disable */
if (child) {
var childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
var isValid = childType === type;
try {
var messageTypes; if ("production" !== 'production' && !isValid) ;
} catch (error) {
// NOOP
}
return isValid;
}
return false;
/* eslint-enable */
}
}, {
key: "getRefElement",
value: function getRefElement(ref) {
if (ref) {
return _typeof(ref) === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
}
return null;
}
}, {
key: "combinedRefs",
value: function combinedRefs(innerRef, forwardRef) {
if (innerRef && forwardRef) {
if (typeof forwardRef === 'function') {
forwardRef(innerRef.current);
} else {
forwardRef.current = innerRef.current;
}
}
}
}, {
key: "removeAccents",
value: function removeAccents(str) {
if (str && str.search(/[\xC0-\xFF]/g) > -1) {
str = str.replace(/[\xC0-\xC5]/g, 'A').replace(/[\xC6]/g, 'AE').replace(/[\xC7]/g, 'C').replace(/[\xC8-\xCB]/g, 'E').replace(/[\xCC-\xCF]/g, 'I').replace(/[\xD0]/g, 'D').replace(/[\xD1]/g, 'N').replace(/[\xD2-\xD6\xD8]/g, 'O').replace(/[\xD9-\xDC]/g, 'U').replace(/[\xDD]/g, 'Y').replace(/[\xDE]/g, 'P').replace(/[\xE0-\xE5]/g, 'a').replace(/[\xE6]/g, 'ae').replace(/[\xE7]/g, 'c').replace(/[\xE8-\xEB]/g, 'e').replace(/[\xEC-\xEF]/g, 'i').replace(/[\xF1]/g, 'n').replace(/[\xF2-\xF6\xF8]/g, 'o').replace(/[\xF9-\xFC]/g, 'u').replace(/[\xFE]/g, 'p').replace(/[\xFD\xFF]/g, 'y');
}
return str;
}
}, {
key: "isEmpty",
value: function isEmpty(value) {
return value === null || value === undefined || value === '' || Array.isArray(value) && value.length === 0 || !(value instanceof Date) && _typeof(value) === 'object' && Object.keys(value).length === 0;
}
}, {
key: "isNotEmpty",
value: function isNotEmpty(value) {
return !this.isEmpty(value);
}
}, {
key: "sort",
value: function sort(value1, value2) {
var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var locale = arguments.length > 3 ? arguments[3] : undefined;
var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var result = ObjectUtils.compare(value1, value2, locale, order);
var finalSortOrder = order;
// nullSortOrder == 1 means Excel like sort nulls at bottom
if (ObjectUtils.isEmpty(value1) || ObjectUtils.isEmpty(value2)) {
finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
}
return finalSortOrder * result;
}
}, {
key: "compare",
value: function compare(value1, value2, locale) {
var order = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
var result = -1;
var emptyValue1 = ObjectUtils.isEmpty(value1);
var emptyValue2 = ObjectUtils.isEmpty(value2);
if (emptyValue1 && emptyValue2) result = 0;else if (emptyValue1) result = order;else if (emptyValue2) result = -order;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, locale, {
numeric: true
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return result;
}
}]);
return ObjectUtils;
}();
function ownKeys$B(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$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var IconUtils = /*#__PURE__*/function () {
function IconUtils() {
_classCallCheck(this, IconUtils);
}
_createClass(IconUtils, null, [{
key: "getJSXIcon",
value: function getJSXIcon(icon) {
var iconProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var content = null;
if (icon !== null) {
var iconType = _typeof(icon);
var className = classNames(iconProps.className, iconType === 'string' && icon);
content = /*#__PURE__*/React.createElement("span", _extends({}, iconProps, {
className: className
}));
if (iconType !== 'string') {
var defaultContentOptions = _objectSpread$B({
iconProps: iconProps,
element: content
}, options);
return ObjectUtils.getJSXElement(icon, defaultContentOptions);
}
}
return content;
}
}]);
return IconUtils;
}();
var lastId = 0;
function UniqueComponentId() {
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'pr_id_';
lastId++;
return "".concat(prefix).concat(lastId);
}
function handler() {
var zIndexes = [];
var generateZIndex = function generateZIndex(key, autoZIndex) {
var baseZIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 999;
var lastZIndex = getLastZIndex(key, autoZIndex, baseZIndex);
var newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
zIndexes.push({
key: key,
value: newZIndex
});
return newZIndex;
};
var revertZIndex = function revertZIndex(zIndex) {
zIndexes = zIndexes.filter(function (obj) {
return obj.value !== zIndex;
});
};
var getCurrentZIndex = function getCurrentZIndex(key, autoZIndex) {
return getLastZIndex(key, autoZIndex).value;
};
var getLastZIndex = function getLastZIndex(key, autoZIndex) {
var baseZIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return _toConsumableArray(zIndexes).reverse().find(function (obj) {
return autoZIndex ? true : obj.key === key;
}) || {
key: key,
value: baseZIndex
};
};
var getZIndex = function getZIndex(el) {
return el ? parseInt(el.style.zIndex, 10) || 0 : 0;
};
return {
get: getZIndex,
set: function set(key, el, autoZIndex, baseZIndex) {
if (el) {
el.style.zIndex = String(generateZIndex(key, autoZIndex, baseZIndex));
}
},
clear: function clear(el) {
if (el) {
revertZIndex(ZIndexUtils.get(el));
el.style.zIndex = '';
}
},
getCurrent: function getCurrent(key, autoZIndex) {
return getCurrentZIndex(key, autoZIndex);
}
};
}
var ZIndexUtils = handler();
function _createForOfIteratorHelper$d(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$d(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$d(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$d(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$d(o, minLen); }
function _arrayLikeToArray$d(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var FilterService = {
filter: function filter(value, fields, filterValue, filterMatchMode, filterLocale) {
var filteredItems = [];
if (!value) {
return filteredItems;
}
var _iterator = _createForOfIteratorHelper$d(value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
if (typeof item === 'string') {
if (this.filters[filterMatchMode](item, filterValue, filterLocale)) {
filteredItems.push(item);
continue;
}
} else {
var _iterator2 = _createForOfIteratorHelper$d(fields),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var field = _step2.value;
var fieldValue = ObjectUtils.resolveFieldData(item, field);
if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
filteredItems.push(item);
break;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return filteredItems;
},
filters: {
startsWith: function startsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.slice(0, filterValue.length) === filterValue;
},
contains: function contains(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) !== -1;
},
notContains: function notContains(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) === -1;
},
endsWith: function endsWith(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
var filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
var stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
},
equals: function equals(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
notEquals: function notEquals(value, filter, filterLocale) {
if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return true;
}
if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
"in": function _in(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) {
return true;
}
for (var i = 0; i < filter.length; i++) {
if (ObjectUtils.equals(value, filter[i])) {
return true;
}
}
return false;
},
between: function between(value, filter) {
if (filter == null || filter[0] == null || filter[1] == null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime) return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();else return filter[0] <= value && value <= filter[1];
},
lt: function lt(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) return value.getTime() < filter.getTime();else return value < filter;
},
lte: function lte(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) return value.getTime() <= filter.getTime();else return value <= filter;
},
gt: function gt(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) return value.getTime() > filter.getTime();else return value > filter;
},
gte: function gte(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
if (value.getTime && filter.getTime) return value.getTime() >= filter.getTime();else return value >= filter;
},
dateIs: function dateIs(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.toDateString() === filter.toDateString();
},
dateIsNot: function dateIsNot(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.toDateString() !== filter.toDateString();
},
dateBefore: function dateBefore(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.getTime() < filter.getTime();
},
dateAfter: function dateAfter(value, filter) {
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.getTime() > filter.getTime();
}
},
register: function register(rule, fn) {
this.filters[rule] = fn;
}
};
var PrimeReact$1 = /*#__PURE__*/_createClass(function PrimeReact() {
_classCallCheck(this, PrimeReact);
});
_defineProperty(PrimeReact$1, "ripple", false);
_defineProperty(PrimeReact$1, "inputStyle", 'outlined');
_defineProperty(PrimeReact$1, "locale", 'en');
_defineProperty(PrimeReact$1, "appendTo", null);
_defineProperty(PrimeReact$1, "cssTransition", true);
_defineProperty(PrimeReact$1, "autoZIndex", true);
_defineProperty(PrimeReact$1, "nonce", null);
_defineProperty(PrimeReact$1, "nullSortOrder", 1);
_defineProperty(PrimeReact$1, "zIndex", {
modal: 1100,
overlay: 1000,
menu: 1000,
tooltip: 1100,
toast: 1200
});
_defineProperty(PrimeReact$1, "filterMatchModeOptions", {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
});
_defineProperty(PrimeReact$1, "changeTheme", function (currentTheme, newTheme, linkElementId, callback) {
var _linkElement$parentNo;
var linkElement = document.getElementById(linkElementId);
var cloneLinkElement = linkElement.cloneNode(true);
var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
cloneLinkElement.setAttribute('id', linkElementId + '-clone');
cloneLinkElement.setAttribute('href', newThemeUrl);
cloneLinkElement.addEventListener('load', function () {
linkElement.remove();
cloneLinkElement.setAttribute('id', linkElementId);
if (callback) {
callback();
}
});
(_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 ? void 0 : _linkElement$parentNo.insertBefore(cloneLinkElement, linkElement.nextSibling);
});
function ownKeys$A(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$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var locales = {
en: {
startsWith: 'Starts with',
contains: 'Contains',
notContains: 'Not contains',
endsWith: 'Ends with',
equals: 'Equals',
notEquals: 'Not equals',
noFilter: 'No Filter',
filter: 'Filter',
lt: 'Less than',
lte: 'Less than or equal to',
gt: 'Greater than',
gte: 'Greater than or equal to',
dateIs: 'Date is',
dateIsNot: 'Date is not',
dateBefore: 'Date is before',
dateAfter: 'Date is after',
custom: 'Custom',
clear: 'Clear',
close: 'Close',
apply: 'Apply',
matchAll: 'Match All',
matchAny: 'Match Any',
addRule: 'Add Rule',
removeRule: 'Remove Rule',
accept: 'Yes',
reject: 'No',
choose: 'Choose',
upload: 'Upload',
cancel: 'Cancel',
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
weekHeader: 'Wk',
firstDayOfWeek: 0,
dateFormat: 'mm/dd/yy',
weak: 'Weak',
medium: 'Medium',
strong: 'Strong',
passwordPrompt: 'Enter a password',
emptyFilterMessage: 'No available options',
emptyMessage: 'No results found',
aria: {
trueLabel: 'True',
falseLabel: 'False',
nullLabel: 'Not Selected',
pageLabel: 'Page',
firstPageLabel: 'First Page',
lastPageLabel: 'Last Page',
nextPageLabel: 'Next Page',
previousPageLabel: 'Previous Page',
selectLabel: 'Select',
unselectLabel: 'Unselect',
expandLabel: 'Expand',
collapseLabel: 'Collapse'
}
}
};
function locale(locale) {
locale && (PrimeReact$1.locale = locale);
return {
locale: PrimeReact$1.locale,
options: locales[PrimeReact$1.locale]
};
}
function addLocale(locale, options) {
locales[locale] = _objectSpread$A(_objectSpread$A({}, locales['en']), options);
}
function updateLocaleOption(key, value, locale) {
localeOptions(locale)[key] = value;
}
function updateLocaleOptions(options, locale) {
var _locale = locale || PrimeReact$1.locale;
locales[_locale] = _objectSpread$A(_objectSpread$A({}, locales[_locale]), options);
}
function localeOption(key, locale) {
var _locale = locale || PrimeReact$1.locale;
try {
return localeOptions(_locale)[key];
} catch (error) {
throw new Error("The ".concat(key, " option is not found in the current locale('").concat(_locale, "')."));
}
}
function ariaLabel(key) {
var _locale = PrimeReact$1.locale;
try {
return localeOptions(_locale)['aria'][key];
} catch (error) {
throw new Error("The ".concat(key, " option is not found in the current locale('").concat(_locale, "')."));
}
}
function localeOptions(locale) {
var _locale = locale || PrimeReact$1.locale;
return locales[_locale];
}
var MessageSeverity = Object.freeze({
SUCCESS: 'success',
INFO: 'info',
WARN: 'warn',
ERROR: 'error'
});
var PrimeIcons = Object.freeze({
ALIGN_CENTER: 'pi pi-align-center',
ALIGN_JUSTIFY: 'pi pi-align-justify',
ALIGN_LEFT: 'pi pi-align-left',
ALIGN_RIGHT: 'pi pi-align-right',
AMAZON: 'pi pi-amazon',
ANDROID: 'pi pi-android',
ANGLE_DOUBLE_DOWN: 'pi pi-angle-double-down',
ANGLE_DOUBLE_LEFT: 'pi pi-angle-double-left',
ANGLE_DOUBLE_RIGHT: 'pi pi-angle-double-right',
ANGLE_DOUBLE_UP: 'pi pi-angle-double-up',
ANGLE_DOWN: 'pi pi-angle-down',
ANGLE_LEFT: 'pi pi-angle-left',
ANGLE_RIGHT: 'pi pi-angle-right',
ANGLE_UP: 'pi pi-angle-up',
APPLE: 'pi pi-apple',
ARROW_CIRCLE_DOWN: 'pi pi-arrow-circle-down',
ARROW_CIRCLE_LEFT: 'pi pi-arrow-circle-left',
ARROW_CIRCLE_RIGHT: 'pi pi-arrow-circle-right',
ARROW_CIRCLE_UP: 'pi pi-arrow-circle-up',
ARROW_DOWN: 'pi pi-arrow-down',
ARROW_DOWN_LEFT: 'pi pi-arrow-down-left',
ARROW_DOWN_RIGHT: 'pi pi-arrow-down-right',
ARROW_LEFT: 'pi pi-arrow-left',
ARROW_RIGHT: 'pi pi-arrow-right',
ARROW_UP: 'pi pi-arrow-up',
ARROW_UP_LEFT: 'pi pi-arrow-up-left',
ARROW_UP_RIGHT: 'pi pi-arrow-up-right',
ARROWS_H: 'pi pi-arrows-h',
ARROWS_V: 'pi pi-arrows-v',
AT: 'pi pi-at',
BACKWARD: 'pi pi-backward',
BAN: 'pi pi-ban',
BARS: 'pi pi-bars',
BELL: 'pi pi-bell',
BOLT: 'pi pi-bolt',
BOOK: 'pi pi-book',
BOOKMARK: 'pi pi-bookmark',
BOOKMARK_FILL: 'pi pi-bookmark-fill',
BOX: 'pi pi-box',
BRIEFCASE: 'pi pi-briefcase',
BUILDING: 'pi pi-building',
CALENDAR: 'pi pi-calendar',
CALENDAR_MINUS: 'pi pi-calendar-minus',
CALENDAR_PLUS: 'pi pi-calendar-plus',
CALENDAR_TIMES: 'pi pi-calendar-times',
CAMERA: 'pi pi-camera',
CAR: 'pi pi-car',
CARET_DOWN: 'pi pi-caret-down',
CARET_LEFT: 'pi pi-caret-left',
CARET_RIGHT: 'pi pi-caret-right',
CARET_UP: 'pi pi-caret-up',
CHART_BAR: 'pi pi-chart-bar',
CHART_LINE: 'pi pi-chart-line',
CHART_PIE: 'pi pi-chart-pie',
CHECK: 'pi pi-check',
CHECK_CIRCLE: 'pi pi-check-circle',
CHECK_SQUARE: 'pi pi-check-square',
CHEVRON_CIRCLE_DOWN: 'pi pi-chevron-circle-down',
CHEVRON_CIRCLE_LEFT: 'pi pi-chevron-circle-left',
CHEVRON_CIRCLE_RIGHT: 'pi pi-chevron-circle-right',
CHEVRON_CIRCLE_UP: 'pi pi-chevron-circle-up',
CHEVRON_DOWN: 'pi pi-chevron-down',
CHEVRON_LEFT: 'pi pi-chevron-left',
CHEVRON_RIGHT: 'pi pi-chevron-right',
CHEVRON_UP: 'pi pi-chevron-up',
CIRCLE: 'pi pi-circle',
CIRCLE_FILL: 'pi pi-circle-fill',
CLOCK: 'pi pi-clock',
CLONE: 'pi pi-clone',
CLOUD: 'pi pi-cloud',
CLOUD_DOWNLOAD: 'pi pi-cloud-download',
CLOUD_UPLOAD: 'pi pi-cloud-upload',
CODE: 'pi pi-code',
COG: 'pi pi-cog',
COMMENT: 'pi pi-comment',
COMMENTS: 'pi pi-comments',
COMPASS: 'pi pi-compass',
COPY: 'pi pi-copy',
CREDIT_CARD: 'pi pi-credit-card',
DATABASE: 'pi pi-database',
DESKTOP: 'pi pi-desktop',
DIRECTIONS: 'pi pi-directions',
DIRECTIONS_ALT: 'pi pi-directions-alt',
DISCORD: 'pi pi-discord',
DOLLAR: 'pi pi-dollar',
DOWNLOAD: 'pi pi-download',
EJECT: 'pi pi-eject',
ELLIPSIS_H: 'pi pi-ellipsis-h',
ELLIPSIS_V: 'pi pi-ellipsis-v',
ENVELOPE: 'pi pi-envelope',
EURO: 'pi pi-euro',
EXCLAMATION_CIRCLE: 'pi pi-exclamation-circle',
EXCLAMATION_TRIANGLE: 'pi pi-exclamation-triangle',
EXTERNAL_LINK: 'pi pi-external-link',
EYE: 'pi pi-eye',
EYE_SLASH: 'pi pi-eye-slash',
FACEBOOK: 'pi pi-facebook',
FAST_BACKWARD: 'pi pi-fast-backward',
FAST_FORWARD: 'pi pi-fast-forward',
FILE: 'pi pi-file',
FILE_EXCEL: 'pi pi-file-excel',
FILE_PDF: 'pi pi-file-pdf',
FILTER: 'pi pi-filter',
FILTER_FILL: 'pi pi-filter-fill',
FILTER_SLASH: 'pi pi-filter-slash',
FLAG: 'pi pi-flag',
FLAG_FILL: 'pi pi-flag-fill',
FOLDER: 'pi pi-folder',
FOLDER_OPEN: 'pi pi-folder-open',
FORWARD: 'pi pi-forward',
GITHUB: 'pi pi-github',
GLOBE: 'pi pi-globe',
GOOGLE: 'pi pi-google',
HASHTAG: 'pi pi-hashtag',
HEART: 'pi pi-heart',
HEART_FILL: 'pi pi-heart-fill',
HISTORY: 'pi pi-history',
HOME: 'pi pi-home',
ID_CARD: 'pi pi-id-card',
IMAGE: 'pi pi-image',
IMAGES: 'pi pi-images',
INBOX: 'pi pi-inbox',
INFO: 'pi pi-info',
INFO_CIRCLE: 'pi pi-info-circle',
INSTAGRAM: 'pi pi-instagram',
KEY: 'pi pi-key',
LINK: 'pi pi-link',
LINKEDIN: 'pi pi-linkedin',
LIST: 'pi pi-list',
LOCK: 'pi pi-lock',
LOCK_OPEN: 'pi pi-lock-open',
MAP: 'pi pi-map',
MAP_MARKER: 'pi pi-map-marker',
MICROSOFT: 'pi pi-microsoft',
MINUS: 'pi pi-minus',
MINUS_CIRCLE: 'pi pi-minus-circle',
MOBILE: 'pi pi-mobile',
MONEY_BILL: 'pi pi-money-bill',
MOON: 'pi pi-moon',
PALETTE: 'pi pi-palette',
PAPERCLIP: 'pi pi-paperclip',
PAUSE: 'pi pi-pause',
PAYPAL: 'pi pi-paypal',
PENCIL: 'pi pi-pencil',
PERCENTAGE: 'pi pi-percentage',
PHONE: 'pi pi-phone',
PLAY: 'pi pi-play',
PLUS: 'pi pi-plus',
PLUS_CIRCLE: 'pi pi-plus-circle',
POUND: 'pi pi-pound',
POWER_OFF: 'pi pi-power-off',
PRIME: 'pi pi-prime',
PRINT: 'pi pi-print',
QRCODE: 'pi pi-qrcode',
QUESTION: 'pi pi-question',
QUESTION_CIRCLE: 'pi pi-question-circle',
REDDIT: 'pi pi-reddit',
REFRESH: 'pi pi-refresh',
REPLAY: 'pi pi-replay',
REPLY: 'pi pi-reply',
SAVE: 'pi pi-save',
SEARCH: 'pi pi-search',
SEARCH_MINUS: 'pi pi-search-minus',
SEARCH_PLUS: 'pi pi-search-plus',
SEND: 'pi pi-send',
SERVER: 'pi pi-server',
SHARE_ALT: 'pi pi-share-alt',
SHIELD: 'pi pi-shield',
SHOPPING_BAG: 'pi pi-shopping-bag',
SHOPPING_CART: 'pi pi-shopping-cart',
SIGN_IN: 'pi pi-sign-in',
SIGN_OUT: 'pi pi-sign-out',
SITEMAP: 'pi pi-sitemap',
SLACK: 'pi pi-slack',
SLIDERS_H: 'pi pi-sliders-h',
SLIDERS_V: 'pi pi-sliders-v',
SORT: 'pi pi-sort',
SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-alt-down',
SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-alt-up',
SORT_ALT: 'pi pi-sort-alt',
SORT_ALT_SLASH: 'pi pi-sort-slash',
SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
SORT_DOWN: 'pi pi-sort-down',
SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-alt-down',
SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-alt-up',
SORT_UP: 'pi pi-sort-up',
SPINNER: 'pi pi-spinner',
STAR: 'pi pi-star',
STAR_FILL: 'pi pi-star-fill',
STEP_BACKWARD: 'pi pi-step-backward',
STEP_BACKWARD_ALT: 'pi pi-step-backward-alt',
STEP_FORWARD: 'pi pi-step-forward',
STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
STOP: 'pi pi-stop',
STOP_CIRCLE: 'pi pi-stop-circle',
SUN: 'pi pi-sun',
SYNC: 'pi pi-sync',
TABLE: 'pi pi-table',
TABLET: 'pi pi-tablet',
TAG: 'pi pi-tag',
TAGS: 'pi pi-tags',
TELEGRAM: 'pi pi-telegram',
TH_LARGE: 'pi pi-th-large',
THUMBS_DOWN: 'pi pi-thumbs-down',
THUMBS_UP: 'pi pi-thumbs-up',
TICKET: 'pi pi-ticket',
TIMES: 'pi pi-times',
TIMES_CIRCLE: 'pi pi-times-circle',
TRASH: 'pi pi-trash',
TWITTER: 'pi pi-twitter',
UNDO: 'pi pi-undo',
UNLOCK: 'pi pi-unlock',
UPLOAD: 'pi pi-upload',
USER: 'pi pi-user',
USER_EDIT: 'pi pi-user-edit',
USER_MINUS: 'pi pi-user-minus',
USER_PLUS: 'pi pi-user-plus',
USERS: 'pi pi-users',
VIDEO: 'pi pi-video',
VIMEO: 'pi pi-vimeo',
VOLUME_DOWN: 'pi pi-volume-down',
VOLUME_OFF: 'pi pi-volume-off',
VOLUME_UP: 'pi pi-volume-up',
WALLET: 'pi pi-wallet',
WHATSAPP: 'pi pi-whatsapp',
WIFI: 'pi pi-wifi',
WINDOW_MAXIMIZE: 'pi pi-window-maximize',
WINDOW_MINIMIZE: 'pi pi-window-minimize',
YOUTUBE: 'pi pi-youtube'
});
var SortOrder = Object.freeze({
DESC: -1,
UNSORTED: 0,
ASC: 1
});
var PrimeReact = PrimeReact$1;
var usePrevious = function usePrevious(newValue) {
var ref = React.useRef(undefined);
React.useEffect(function () {
ref.current = newValue;
});
return ref.current;
};
/* eslint-disable */
var useUnmountEffect = function useUnmountEffect(fn) {
return React.useEffect(function () {
return fn;
}, []);
};
/* eslint-enable */
/* eslint-disable */
var useEventListener = function useEventListener(_ref) {
var _ref$target = _ref.target,
target = _ref$target === void 0 ? 'document' : _ref$target,
type = _ref.type,
listener = _ref.listener,
options = _ref.options,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
var targetRef = React.useRef(null);
var listenerRef = React.useRef(null);
var prevOptions = usePrevious(options);
var bind = function bind() {
var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(bindOptions.target)) {
unbind();
(bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindOptions.target));
}
if (!listenerRef.current && targetRef.current) {
listenerRef.current = function (event) {
return listener && listener(event);
};
targetRef.current.addEventListener(type, listenerRef.current, options);
}
};
var unbind = function unbind() {
if (listenerRef.current) {
targetRef.current.removeEventListener(type, listenerRef.current, options);
listenerRef.current = null;
}
};
React.useEffect(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
} else {
unbind();
targetRef.current = null;
}
}, [target, when]);
React.useEffect(function () {
if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
unbind();
when && bind();
}
}, [listener, options]);
useUnmountEffect(function () {
unbind();
});
return [bind, unbind];
};
/* eslint-enable */
var useClickOutside = function useClickOutside(ref, callback) {
var isOutsideClicked = function isOutsideClicked(event) {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
var _useEventListener = useEventListener({
type: 'mousedown',
listener: isOutsideClicked
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindMouseDownListener = _useEventListener2[0],
unbindMouseDownListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'touchstart',
listener: isOutsideClicked
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindTouchStartListener = _useEventListener4[0],
unbindTouchStartListener = _useEventListener4[1];
React.useEffect(function () {
if (!ref.current) {
return;
}
bindMouseDownListener();
bindTouchStartListener();
return function () {
unbindMouseDownListener();
unbindTouchStartListener();
};
});
return [ref, callback];
};
var useCounter = function useCounter() {
var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
step: 1
};
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
count = _React$useState2[0],
setCount = _React$useState2[1];
var increment = function increment() {
if (options.max && count >= options.max) {
return;
}
setCount(count + options.step);
};
var decrement = function decrement() {
if (options.min || options.min === 0 && count <= options.min) {
return null;
}
setCount(count - options.step);
};
var reset = function reset() {
setCount(0);
};
return {
count: count,
increment: increment,
decrement: decrement,
reset: reset
};
};
/* eslint-disable */
var useTimeout = function useTimeout(fn) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var when = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var timeout = React.useRef(null);
var savedCallback = React.useRef(null);
var clear = React.useCallback(function () {
return clearTimeout(timeout.current);
}, [timeout.current]);
React.useEffect(function () {
savedCallback.current = fn;
});
React.useEffect(function () {
function callback() {
savedCallback.current();
}
if (when) {
timeout.current = setTimeout(callback, delay);
return clear;
} else {
clear();
}
}, [delay, when]);
useUnmountEffect(function () {
clear();
});
return [clear];
};
/* eslint-enable */
var useDebounce = function useDebounce(initialValue, delay) {
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = React.useState(initialValue),
_React$useState4 = _slicedToArray(_React$useState3, 2),
debouncedValue = _React$useState4[0],
setDebouncedValue = _React$useState4[1];
useTimeout(function () {
setDebouncedValue(inputValue);
}, delay, inputValue !== debouncedValue);
return [inputValue, debouncedValue, setInputValue];
};
var TYPE_MAP = {
ico: 'image/x-icon',
png: 'image/png',
svg: 'image/svg+xml',
gif: 'image/gif'
};
var useFavicon = function useFavicon() {
var newIcon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var rel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'shortcut icon';
React.useLayoutEffect(function () {
if (newIcon) {
var linkElements = document.querySelectorAll("link[rel*='icon']");
linkElements.forEach(function (linkEl) {
document.head.removeChild(linkEl);
});
var link = document.createElement('link');
link.setAttribute('type', TYPE_MAP[newIcon.split('.').pop()]);
link.setAttribute('rel', rel);
link.setAttribute('href', newIcon);
document.head.appendChild(link);
}
}, [newIcon, rel]);
};
var useIntersectionObserver = function useIntersectionObserver(ref) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isElementVisible = _React$useState2[0],
setIsElementVisible = _React$useState2[1];
React.useEffect(function () {
if (!ref.current) return;
var observer = new IntersectionObserver(function (_ref) {
var _ref2 = _slicedToArray(_ref, 1),
entry = _ref2[0];
setIsElementVisible(entry.isIntersecting);
}, options);
observer.observe(ref.current);
return function () {
observer.disconnect();
};
}, [options, ref]);
return isElementVisible;
};
/* eslint-disable */
var useInterval = function useInterval(fn) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var when = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var timeout = React.useRef(null);
var savedCallback = React.useRef(null);
var clear = React.useCallback(function () {
return clearInterval(timeout.current);
}, [timeout.current]);
React.useEffect(function () {
savedCallback.current = fn;
});
React.useEffect(function () {
function callback() {
savedCallback.current();
}
if (when) {
timeout.current = setInterval(callback, delay);
return clear;
} else {
clear();
}
}, [delay, when]);
useUnmountEffect(function () {
clear();
});
return [clear];
};
/* eslint-enable */
var useMatchMedia = function useMatchMedia(query) {
var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
matches = _React$useState2[0],
setMatches = _React$useState2[1];
var matchMedia = React.useRef(null);
var handleChange = function handleChange(e) {
return setMatches(e.matches);
};
var bind = function bind() {
return matchMedia.current && matchMedia.current.addEventListener('change', handleChange);
};
var unbind = function unbind() {
return matchMedia.current && matchMedia.current.removeEventListener('change', handleChange) && (matchMedia.current = null);
};
React.useEffect(function () {
if (when) {
matchMedia.current = window.matchMedia(query);
setMatches(matchMedia.current.matches);
bind();
}
return unbind;
}, [query, when]);
return matches;
};
/* eslint-enable */
/* eslint-disable */
var useMountEffect = function useMountEffect(fn) {
return React.useEffect(fn, []);
};
/* eslint-enable */
function ownKeys$z(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$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var useMouse = function useMouse() {
var _React$useState = React.useState({
x: 0,
y: 0
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
position = _React$useState2[0],
setPosition = _React$useState2[1];
var ref = React.useRef(null);
var handleMouseMove = React.useCallback(function (event) {
var x, y;
if (ref.current) {
var rect = event.currentTarget.getBoundingClientRect();
x = event.pageX - rect.left - (window.pageXOffset || window.scrollX);
y = event.pageY - rect.top - (window.pageYOffset || window.scrollY);
} else {
x = event.clientX;
y = event.clientY;
}
setPosition({
x: Math.max(0, Math.round(x)),
y: Math.max(0, Math.round(y))
});
}, []);
var _useEventListener = useEventListener({
target: ref,
type: 'mousemove',
listener: handleMouseMove
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindMouseMoveEventListener = _useEventListener2[0],
unbindMouseMoveEventListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mousemove',
listener: handleMouseMove
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMoveEventListener = _useEventListener4[0],
unbindDocumentMoveEventListener = _useEventListener4[1];
var reset = function reset() {
return setPosition({
x: 0,
y: 0
});
};
React.useEffect(function () {
bindMouseMoveEventListener();
if (!ref.current) {
bindDocumentMoveEventListener();
}
return function () {
unbindMouseMoveEventListener();
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!ref.current) {
unbindDocumentMoveEventListener();
}
};
}, [bindDocumentMoveEventListener, bindMouseMoveEventListener, unbindDocumentMoveEventListener, unbindMouseMoveEventListener]);
return _objectSpread$z(_objectSpread$z({
ref: ref
}, position), {}, {
reset: reset
});
};
function ownKeys$y(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$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function useMove(_ref) {
var _ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? 'both' : _ref$mode,
_ref$initialValue = _ref.initialValue,
initialValue = _ref$initialValue === void 0 ? {
x: 0,
y: 0
} : _ref$initialValue;
var _React$useState = React.useState(initialValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
positions = _React$useState2[0],
setPositions = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
active = _React$useState4[0],
setActive = _React$useState4[1];
var isMounted = React.useRef(false);
var isSliding = React.useRef(false);
var ref = React.useRef(null);
var onMouseMove = function onMouseMove(event) {
return updateMousePosition({
x: event.clientX,
y: event.clientY
});
};
var handlePositionChange = function handlePositionChange(_ref2) {
var clampedX = _ref2.clampedX,
clampedY = _ref2.clampedY;
if (mode === 'vertical') {
setPositions({
y: 1 - clampedY
});
} else if (mode === 'horizontal') {
setPositions({
x: clampedX
});
} else if (mode === 'both') {
setPositions({
x: clampedX,
y: clampedY
});
}
};
var onMouseDown = function onMouseDown(event) {
startScrubbing();
event.preventDefault();
onMouseMove(event);
};
var stopScrubbing = function stopScrubbing() {
if (isSliding.current && isMounted.current) {
isSliding.current = false;
setActive(false);
unbindListeners();
}
};
var onTouchMove = function onTouchMove(event) {
if (event.cancelable) {
event.preventDefault();
}
updateMousePosition({
x: event.changedTouches[0].clientX,
y: event.changedTouches[0].clientY
});
};
var onTouchStart = function onTouchStart(event) {
if (event.cancelable) {
event.preventDefault();
}
startScrubbing();
onTouchMove(event);
};
var _useEventListener = useEventListener({
type: 'mousemove',
listener: onMouseMove
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: stopScrubbing
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'touchmove',
listener: onTouchMove
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentTouchMoveListener = _useEventListener6[0],
unbindDocumentTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'touchend',
listener: stopScrubbing
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentTouchEndListener = _useEventListener8[0],
unbindDocumentTouchEndListener = _useEventListener8[1];
var _useEventListener9 = useEventListener({
target: ref,
type: 'mousedown',
listener: onMouseDown
}),
_useEventListener10 = _slicedToArray(_useEventListener9, 2),
bindMouseDownListener = _useEventListener10[0],
unbindMouseDownListener = _useEventListener10[1];
var _useEventListener11 = useEventListener({
target: ref,
type: 'touchstart',
listener: onTouchStart,
options: {
passive: false
}
}),
_useEventListener12 = _slicedToArray(_useEventListener11, 2),
bindTouchStartListener = _useEventListener12[0],
unbindTouchStartListener = _useEventListener12[1];
var clamp = function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
};
var clampPositions = function clampPositions(_ref3) {
var x = _ref3.x,
y = _ref3.y;
return {
clampedX: clamp(x, 0, 1),
clampedY: clamp(y, 0, 1)
};
};
var bindListeners = function bindListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
bindDocumentTouchMoveListener();
bindDocumentTouchEndListener();
};
var unbindListeners = function unbindListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
unbindDocumentTouchMoveListener();
unbindDocumentTouchEndListener();
};
var reset = function reset() {
setPositions(initialValue);
};
React.useEffect(function () {
isMounted.current = true;
}, []);
var startScrubbing = function startScrubbing() {
if (!isSliding.current && isMounted.current) {
isSliding.current = true;
setActive(true);
bindListeners();
}
};
var updateMousePosition = function updateMousePosition(_ref4) {
var x = _ref4.x,
y = _ref4.y;
if (isSliding.current) {
var rect = ref.current.getBoundingClientRect();
var _clampPositions = clampPositions({
x: (x - rect.left) / rect.width,
y: (y - rect.top) / rect.height
}),
clampedX = _clampPositions.clampedX,
clampedY = _clampPositions.clampedY;
handlePositionChange({
clampedX: clampedX,
clampedY: clampedY
});
}
};
React.useEffect(function () {
if (ref.current) {
bindMouseDownListener();
bindTouchStartListener();
}
return function () {
if (ref.current) {
unbindMouseDownListener();
unbindTouchStartListener();
}
};
}, [bindMouseDownListener, bindTouchStartListener, positions, unbindMouseDownListener, unbindTouchStartListener]);
return _objectSpread$y(_objectSpread$y({
ref: ref
}, positions), {}, {
active: active,
reset: reset
});
}
/* eslint-disable */
var useOverlayScrollListener = function useOverlayScrollListener(_ref) {
var target = _ref.target,
listener = _ref.listener,
options = _ref.options,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
var targetRef = React.useRef(null);
var listenerRef = React.useRef(null);
var scrollableParents = React.useRef([]);
var prevOptions = usePrevious(options);
var bind = function bind() {
var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(bindOptions.target)) {
unbind();
(bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindOptions.target));
}
if (!listenerRef.current && targetRef.current) {
var nodes = scrollableParents.current = DomHandler.getScrollableParents(targetRef.current);
listenerRef.current = function (event) {
return listener && listener(event);
};
nodes.forEach(function (node) {
return node.addEventListener('scroll', listenerRef.current, options);
});
}
};
var unbind = function unbind() {
if (listenerRef.current) {
var nodes = scrollableParents.current;
nodes.forEach(function (node) {
return node.removeEventListener('scroll', listenerRef.current, options);
});
listenerRef.current = null;
}
};
React.useEffect(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
} else {
unbind();
targetRef.current = null;
}
}, [target, when]);
React.useEffect(function () {
if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
unbind();
when && bind();
}
}, [listener, options]);
useUnmountEffect(function () {
unbind();
});
return [bind, unbind];
};
/* eslint-enable */
var useResizeListener = function useResizeListener(_ref) {
var listener = _ref.listener,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
return useEventListener({
target: 'window',
type: 'resize',
listener: listener,
when: when
});
};
var useOverlayListener = function useOverlayListener(_ref) {
var target = _ref.target,
overlay = _ref.overlay,
_listener = _ref.listener,
_ref$when = _ref.when,
when = _ref$when === void 0 ? true : _ref$when;
var targetRef = React.useRef(null);
var overlayRef = React.useRef(null);
/**
* The parameters of the 'listener' method in the following event handlers;
* @param {Event} event A click event of the document.
* @param {string} options.type The custom type to detect event.
* @param {boolean} options.valid It is controlled by PrimeReact. It is determined whether it is valid or not according to some custom validation.
*/
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
_listener && _listener(event, {
type: 'outside',
valid: event.which !== 3 && isOutsideClicked(event)
});
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useResizeListener = useResizeListener({
listener: function listener(event) {
_listener && _listener(event, {
type: 'resize',
valid: !DomHandler.isTouchDevice()
});
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindWindowResizeListener = _useResizeListener2[0],
unbindWindowResizeListener = _useResizeListener2[1];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'orientationchange',
listener: function listener(event) {
_listener && _listener(event, {
type: 'orientationchange',
valid: true
});
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindWindowOrientationChangeListener = _useEventListener4[0],
unbindWindowOrientationChangeListener = _useEventListener4[1];
var _useOverlayScrollList = useOverlayScrollListener({
target: target,
listener: function listener(event) {
_listener && _listener(event, {
type: 'scroll',
valid: true
});
}
}),
_useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
bindOverlayScrollListener = _useOverlayScrollList2[0],
unbindOverlayScrollListener = _useOverlayScrollList2[1];
var isOutsideClicked = function isOutsideClicked(event) {
return targetRef.current && !(targetRef.current.isSameNode(event.target) || targetRef.current.contains(event.target) || overlayRef.current && overlayRef.current.contains(event.target));
};
var bind = function bind() {
bindDocumentClickListener();
bindWindowResizeListener();
bindWindowOrientationChangeListener();
bindOverlayScrollListener();
};
var unbind = function unbind() {
unbindDocumentClickListener();
unbindWindowResizeListener();
unbindWindowOrientationChangeListener();
unbindOverlayScrollListener();
};
React.useEffect(function () {
if (when) {
targetRef.current = DomHandler.getTargetElement(target);
overlayRef.current = DomHandler.getTargetElement(overlay);
} else {
unbind();
targetRef.current = overlayRef.current = null;
}
}, [target, overlay, when]);
React.useEffect(function () {
unbind();
}, [when]);
useUnmountEffect(function () {
unbind();
});
return [bind, unbind];
};
/* eslint-enable */
/**
* Hook to wrap around useState that stores the value in the browser local/session storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in local/session storage
* @param {string} storage either 'local' or 'session' for what type of storage
* @returns a stateful value, and a function to update it.
*/
var useStorage = function useStorage(initialValue, key) {
var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
// Since the local storage API isn't available in server-rendering environments,
// we check that typeof window !== 'undefined' to make SSR and SSG work properly.
var storageAvailable = typeof window !== 'undefined';
// subscribe to window storage event so changes in one tab to a stored value
// are properly reflected in all tabs
var _useEventListener = useEventListener({
target: 'window',
type: 'storage',
listener: function listener(event) {
var area = storage === 'local' ? window.localStorage : window.sessionStorage;
if (event.storageArea === area && event.key === key) {
setStoredValue(event.newValue || undefined);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindWindowStorageListener = _useEventListener2[0],
unbindWindowStorageListener = _useEventListener2[1];
var _React$useState = React.useState(undefined),
_React$useState2 = _slicedToArray(_React$useState, 2),
storedValue = _React$useState2[0],
setStoredValue = _React$useState2[1];
var setValue = function setValue(value) {
try {
// Allow value to be a function so we have same API as useState
var valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (storageAvailable) {
var serializedValue = JSON.stringify(valueToStore);
storage === 'local' ? window.localStorage.setItem(key, serializedValue) : window.sessionStorage.setItem(key, serializedValue);
}
} catch (error) {
throw new Error("PrimeReact useStorage: Failed to serialize the value at key: ".concat(key));
}
};
React.useEffect(function () {
if (!storageAvailable) {
setStoredValue(initialValue);
}
try {
var item = storage === 'local' ? window.localStorage.getItem(key) : window.sessionStorage.getItem(key);
setStoredValue(item ? JSON.parse(item) : initialValue);
} catch (error) {
// If error also return initialValue
setStoredValue(initialValue);
}
bindWindowStorageListener();
return function () {
return unbindWindowStorageListener();
};
}, []);
return [storedValue, setValue];
};
/**
* Hook to wrap around useState that stores the value in the browser local storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in local storage
* @returns a stateful value, and a function to update it.
*/
var useLocalStorage = function useLocalStorage(initialValue, key) {
return useStorage(initialValue, key, 'local');
};
/**
* Hook to wrap around useState that stores the value in the browser session storage.
*
* @param {any} initialValue the initial value to store
* @param {string} key the key to store the value in session storage
* @returns a stateful value, and a function to update it.
*/
var useSessionStorage = function useSessionStorage(initialValue, key) {
return useStorage(initialValue, key, 'session');
};
/* eslint-enable */
/* eslint-disable */
var useUpdateEffect = function useUpdateEffect(fn, deps) {
var mounted = React.useRef(false);
return React.useEffect(function () {
if (!mounted.current) {
mounted.current = true;
return;
}
return fn && fn();
}, deps);
};
/* eslint-enable */
var CSSTransitionBase = {
defaultProps: {
__TYPE: 'CSSTransition',
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CSSTransitionBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CSSTransitionBase.defaultProps);
}
};
function ownKeys$x(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$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var CSSTransition = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CSSTransitionBase.getProps(inProps);
var disabled = props.disabled || props.options && props.options.disabled || !PrimeReact.cssTransition;
var onEnter = function onEnter(node, isAppearing) {
props.onEnter && props.onEnter(node, isAppearing); // component
props.options && props.options.onEnter && props.options.onEnter(node, isAppearing); // user option
};
var onEntering = function onEntering(node, isAppearing) {
props.onEntering && props.onEntering(node, isAppearing); // component
props.options && props.options.onEntering && props.options.onEntering(node, isAppearing); // user option
};
var onEntered = function onEntered(node, isAppearing) {
props.onEntered && props.onEntered(node, isAppearing); // component
props.options && props.options.onEntered && props.options.onEntered(node, isAppearing); // user option
};
var onExit = function onExit(node) {
props.onExit && props.onExit(node); // component
props.options && props.options.onExit && props.options.onExit(node); // user option
};
var onExiting = function onExiting(node) {
props.onExiting && props.onExiting(node); // component
props.options && props.options.onExiting && props.options.onExiting(node); // user option
};
var onExited = function onExited(node) {
props.onExited && props.onExited(node); // component
props.options && props.options.onExited && props.options.onExited(node); // user option
};
useUpdateEffect(function () {
if (disabled) {
// no animation
var node = ObjectUtils.getRefElement(props.nodeRef);
if (props["in"]) {
onEnter(node, true);
onEntering(node, true);
onEntered(node, true);
} else {
onExit(node);
onExiting(node);
onExited(node);
}
}
}, [props["in"]]);
if (disabled) {
return props["in"] ? props.children : null;
} else {
var immutableProps = {
nodeRef: props.nodeRef,
"in": props["in"],
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
};
var mutableProps = {
classNames: props.classNames,
timeout: props.timeout,
unmountOnExit: props.unmountOnExit
};
var mergedProps = _objectSpread$x(_objectSpread$x(_objectSpread$x({}, mutableProps), props.options || {}), immutableProps);
return /*#__PURE__*/React.createElement(CSSTransition$1, mergedProps, props.children);
}
});
CSSTransition.displayName = 'CSSTransition';
var AccordionBase = {
defaultProps: {
__TYPE: 'Accordion',
id: null,
activeIndex: null,
className: null,
style: null,
multiple: false,
expandIcon: 'pi pi-chevron-right',
collapseIcon: 'pi pi-chevron-down',
transitionOptions: null,
onTabOpen: null,
onTabClose: null,
onTabChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, AccordionBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, AccordionBase.defaultProps);
}
};
var AccordionTabBase = {
defaultProps: {
__TYPE: 'AccordionTab',
className: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
style: null,
tabIndex: 0,
children: undefined
},
getCProp: function getCProp(tab, name) {
return ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps);
},
getCProps: function getCProps(tab) {
return ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
}
};
function ownKeys$w(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$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var AccordionTab = function AccordionTab() {};
var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = AccordionBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React.useRef(null);
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var getTabProp = function getTabProp(tab, name) {
return AccordionTabBase.getCProp(tab, name);
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
if (!getTabProp(tab, 'disabled')) {
var selected = isSelected(index);
var newActiveIndex = null;
if (props.multiple) {
var indexes = activeIndex || [];
newActiveIndex = selected ? indexes.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(indexes), [index]);
} else {
newActiveIndex = selected ? null : index;
}
var callback = selected ? props.onTabClose : props.onTabOpen;
callback && callback({
originalEvent: event,
index: index
});
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: newActiveIndex
});
} else {
setActiveIndexState(newActiveIndex);
}
}
event.preventDefault();
};
var isSelected = function isSelected(index) {
return props.multiple ? activeIndex && activeIndex.some(function (i) {
return i === index;
}) : activeIndex === index;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
if (!idState) {
return null;
}
var createTabHeader = function createTabHeader(tab, selected, index) {
var style = _objectSpread$w(_objectSpread$w({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'headerStyle') || {});
var className = classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
}, getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'));
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
var header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : /*#__PURE__*/React.createElement("span", {
className: "p-accordion-header-text"
}, getTabProp(tab, 'header'));
var icon = IconUtils.getJSXIcon(selected ? props.collapseIcon : props.expandIcon, {
className: 'p-accordion-toggle-icon'
}, {
props: props,
selected: selected
});
var label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
return /*#__PURE__*/React.createElement("div", {
className: className,
style: style
}, /*#__PURE__*/React.createElement("a", {
href: '#' + ariaControls,
id: headerId,
className: "p-accordion-header-link",
"aria-controls": ariaControls,
role: "tab",
"aria-expanded": selected,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
tabIndex: tabIndex,
"aria-label": label
}, icon, header));
};
var createTabContent = function createTabContent(tab, selected, index) {
var style = _objectSpread$w(_objectSpread$w({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
var className = classNames('p-toggleable-content', getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'));
var contentId = idState + '_content_' + index;
var ariaLabelledby = idState + '_header_' + index;
var contentRef = /*#__PURE__*/React.createRef();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: contentRef,
classNames: "p-toggleable-content",
timeout: {
enter: 1000,
exit: 450
},
"in": selected,
unmountOnExit: true,
options: props.transitionOptions
}, /*#__PURE__*/React.createElement("div", {
ref: contentRef,
id: contentId,
className: className,
style: style,
role: "region",
"aria-labelledby": ariaLabelledby
}, /*#__PURE__*/React.createElement("div", {
className: "p-accordion-content"
}, getTabProp(tab, 'children'))));
};
var createTab = function createTab(tab, index) {
if (ObjectUtils.isValidChild(tab, 'AccordionTab')) {
var key = idState + '_' + index;
var selected = isSelected(index);
var _otherProps = AccordionTabBase.getCOtherProps(tab);
var tabHeader = createTabHeader(tab, selected, index);
var tabContent = createTabContent(tab, selected, index);
var tabClassName = classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});
return /*#__PURE__*/React.createElement("div", _extends({
key: key,
className: tabClassName
}, _otherProps), tabHeader, tabContent);
}
return null;
};
var createTabs = function createTabs() {
return React.Children.map(props.children, createTab);
};
var otherProps = AccordionBase.getOtherProps(props);
var className = classNames('p-accordion p-component', props.className);
var tabs = createTabs();
return /*#__PURE__*/React.createElement("div", _extends({
id: idState,
ref: elementRef,
className: className,
style: props.style
}, otherProps), tabs);
});
AccordionTab.displayName = 'AccordionTab';
Accordion.displayName = 'Accordion';
var Ripple = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function () {
var inkRef = React.useRef(null);
var targetRef = React.useRef(null);
var getTarget = function getTarget() {
return inkRef.current && inkRef.current.parentElement;
};
var bindEvents = function bindEvents() {
if (targetRef.current) {
targetRef.current.addEventListener('mousedown', onMouseDown);
DomHandler.isTouchDevice() && targetRef.current.addEventListener('touchstart', onTouchStart);
}
};
var unbindEvents = function unbindEvents() {
if (targetRef.current) {
targetRef.current.removeEventListener('mousedown', onMouseDown);
DomHandler.isTouchDevice() && targetRef.current.removeEventListener('touchstart', onTouchStart);
}
};
var onTouchStart = function onTouchStart(event) {
var offset = DomHandler.getOffset(targetRef.current);
var offsetX = event.targetTouches[0].pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
var offsetY = event.targetTouches[0].pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
activateRipple(offsetX, offsetY);
};
var onMouseDown = function onMouseDown(event) {
if (DomHandler.isTouchDevice()) {
// already started ripple with onTouchStart
return;
}
var offset = DomHandler.getOffset(targetRef.current);
var offsetX = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
var offsetY = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
activateRipple(offsetX, offsetY);
};
var activateRipple = function activateRipple(offsetX, offsetY) {
if (!inkRef.current || getComputedStyle(inkRef.current, null).display === 'none') {
return;
}
DomHandler.removeClass(inkRef.current, 'p-ink-active');
if (!DomHandler.getHeight(inkRef.current) && !DomHandler.getWidth(inkRef.current)) {
var d = Math.max(DomHandler.getOuterWidth(targetRef.current), DomHandler.getOuterHeight(targetRef.current));
inkRef.current.style.height = d + 'px';
inkRef.current.style.width = d + 'px';
}
inkRef.current.style.top = offsetY + 'px';
inkRef.current.style.left = offsetX + 'px';
DomHandler.addClass(inkRef.current, 'p-ink-active');
};
var onAnimationEnd = function onAnimationEnd(event) {
DomHandler.removeClass(event.currentTarget, 'p-ink-active');
};
useMountEffect(function () {
if (inkRef.current) {
targetRef.current = getTarget();
bindEvents();
}
});
useUpdateEffect(function () {
if (inkRef.current && !targetRef.current) {
targetRef.current = getTarget();
bindEvents();
}
});
useUnmountEffect(function () {
if (inkRef.current) {
targetRef.current = null;
unbindEvents();
}
});
return PrimeReact.ripple ? /*#__PURE__*/React.createElement("span", {
role: "presentation",
ref: inkRef,
className: "p-ink",
onAnimationEnd: onAnimationEnd
}) : null;
}));
Ripple.displayName = 'Ripple';
var PortalBase = {
defaultProps: {
__TYPE: 'Portal',
element: null,
appendTo: null,
visible: false,
onMounted: null,
onUnmounted: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PortalBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PortalBase.defaultProps);
}
};
var Portal = /*#__PURE__*/React.memo(function (inProps) {
var props = PortalBase.getProps(inProps);
var _React$useState = React.useState(props.visible && DomHandler.hasDOM()),
_React$useState2 = _slicedToArray(_React$useState, 2),
mountedState = _React$useState2[0],
setMountedState = _React$useState2[1];
useMountEffect(function () {
if (DomHandler.hasDOM() && !mountedState) {
setMountedState(true);
props.onMounted && props.onMounted();
}
});
useUpdateEffect(function () {
props.onMounted && props.onMounted();
}, [mountedState]);
useUnmountEffect(function () {
props.onUnmounted && props.onUnmounted();
});
var element = props.element || props.children;
if (element && mountedState) {
var appendTo = props.appendTo || PrimeReact.appendTo || document.body;
return appendTo === 'self' ? element : /*#__PURE__*/ReactDOM.createPortal(element, appendTo);
}
return null;
});
Portal.displayName = 'Portal';
var TooltipBase = {
defaultProps: {
__TYPE: 'Tooltip',
appendTo: null,
at: null,
autoHide: true,
autoZIndex: true,
baseZIndex: 0,
className: null,
content: null,
disabled: false,
event: null,
hideDelay: 0,
hideEvent: 'mouseleave',
id: null,
mouseTrack: false,
mouseTrackLeft: 5,
mouseTrackTop: 5,
my: null,
onBeforeHide: null,
onBeforeShow: null,
onHide: null,
onShow: null,
position: 'right',
showDelay: 0,
showEvent: 'mouseenter',
showOnDisabled: false,
style: null,
target: null,
updateDelay: 0,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TooltipBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TooltipBase.defaultProps);
}
};
var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TooltipBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.position),
_React$useState4 = _slicedToArray(_React$useState3, 2),
positionState = _React$useState4[0],
setPositionState = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
classNameState = _React$useState6[0],
setClassNameState = _React$useState6[1];
var elementRef = React.useRef(null);
var textRef = React.useRef(null);
var currentTargetRef = React.useRef(null);
var containerSize = React.useRef(null);
var allowHide = React.useRef(true);
var timeouts = React.useRef({});
var currentMouseEvent = React.useRef(null);
var _useResizeListener = useResizeListener({
listener: function listener(event) {
!DomHandler.isTouchDevice() && hide(event);
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindWindowResizeListener = _useResizeListener2[0],
unbindWindowResizeListener = _useResizeListener2[1];
var _useOverlayScrollList = useOverlayScrollListener({
target: currentTargetRef.current,
listener: function listener(event) {
hide(event);
},
when: visibleState
}),
_useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
bindOverlayScrollListener = _useOverlayScrollList2[0],
unbindOverlayScrollListener = _useOverlayScrollList2[1];
var isTargetContentEmpty = function isTargetContentEmpty(target) {
return !(props.content || getTargetOption(target, 'tooltip'));
};
var isContentEmpty = function isContentEmpty(target) {
return !(props.content || getTargetOption(target, 'tooltip') || props.children);
};
var isMouseTrack = function isMouseTrack(target) {
return getTargetOption(target, 'mousetrack') || props.mouseTrack;
};
var isDisabled = function isDisabled(target) {
return getTargetOption(target, 'disabled') === 'true' || hasTargetOption(target, 'disabled') || props.disabled;
};
var isShowOnDisabled = function isShowOnDisabled(target) {
return getTargetOption(target, 'showondisabled') || props.showOnDisabled;
};
var isAutoHide = function isAutoHide() {
return getTargetOption(currentTargetRef.current, 'autohide') || props.autoHide;
};
var getTargetOption = function getTargetOption(target, option) {
return hasTargetOption(target, "data-pr-".concat(option)) ? target.getAttribute("data-pr-".concat(option)) : null;
};
var hasTargetOption = function hasTargetOption(target, option) {
return target && target.hasAttribute(option);
};
var getEvents = function getEvents(target) {
var showEvents = [getTargetOption(target, 'showevent') || props.showEvent];
var hideEvents = [getTargetOption(target, 'hideevent') || props.hideEvent];
if (isMouseTrack(target)) {
showEvents = ['mousemove'];
hideEvents = ['mouseleave'];
} else {
var event = getTargetOption(target, 'event') || props.event;
if (event === 'focus') {
showEvents = ['focus'];
hideEvents = ['blur'];
}
if (event === 'both') {
showEvents = ['focus', 'mouseenter'];
hideEvents = ['blur', 'mouseleave'];
}
}
return {
showEvents: showEvents,
hideEvents: hideEvents
};
};
var getPosition = function getPosition(target) {
return getTargetOption(target, 'position') || positionState;
};
var getMouseTrackPosition = function getMouseTrackPosition(target) {
var top = getTargetOption(target, 'mousetracktop') || props.mouseTrackTop;
var left = getTargetOption(target, 'mousetrackleft') || props.mouseTrackLeft;
return {
top: top,
left: left
};
};
var updateText = function updateText(target, callback) {
if (textRef.current) {
var content = getTargetOption(target, 'tooltip') || props.content;
if (content) {
textRef.current.innerHTML = ''; // remove children
textRef.current.appendChild(document.createTextNode(content));
callback();
} else if (props.children) {
callback();
}
}
};
var updateTooltipState = function updateTooltipState(position) {
updateText(currentTargetRef.current, function () {
var _currentMouseEvent$cu = currentMouseEvent.current,
x = _currentMouseEvent$cu.pageX,
y = _currentMouseEvent$cu.pageY;
if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) {
ZIndexUtils.set('tooltip', elementRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['tooltip']);
}
elementRef.current.style.left = '';
elementRef.current.style.top = '';
// GitHub #2695 disable pointer events when autohiding
if (isAutoHide()) {
elementRef.current.style.pointerEvents = 'none';
}
if ((isMouseTrack(currentTargetRef.current) || position == 'mouse') && !containerSize.current) {
containerSize.current = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
};
}
align(currentTargetRef.current, {
x: x,
y: y
}, position);
});
};
var show = function show(e) {
currentTargetRef.current = e.currentTarget;
var disabled = isDisabled(currentTargetRef.current);
var empty = isContentEmpty(isShowOnDisabled(currentTargetRef.current) && disabled ? currentTargetRef.current.firstChild : currentTargetRef.current);
if (empty || disabled) {
return;
}
currentMouseEvent.current = e;
if (visibleState) {
applyDelay('updateDelay', updateTooltipState);
} else {
// #2653 give the callback a chance to return false and not continue with display
var success = sendCallback(props.onBeforeShow, {
originalEvent: e,
target: currentTargetRef.current
});
if (success) {
applyDelay('showDelay', function () {
setVisibleState(true);
sendCallback(props.onShow, {
originalEvent: e,
target: currentTargetRef.current
});
});
}
}
};
var hide = function hide(e) {
clearTimeouts();
if (visibleState) {
var success = sendCallback(props.onBeforeHide, {
originalEvent: e,
target: currentTargetRef.current
});
if (success) {
applyDelay('hideDelay', function () {
if (!isAutoHide() && allowHide.current === false) {
return;
}
ZIndexUtils.clear(elementRef.current);
DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
setVisibleState(false);
sendCallback(props.onHide, {
originalEvent: e,
target: currentTargetRef.current
});
});
}
}
};
var align = function align(target, coordinate, position) {
var left = 0,
top = 0,
currentPosition = position || positionState;
if ((isMouseTrack(target) || currentPosition == 'mouse') && coordinate) {
var _containerSize = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
};
left = coordinate.x;
top = coordinate.y;
var _getMouseTrackPositio = getMouseTrackPosition(target),
mouseTrackTop = _getMouseTrackPositio.top,
mouseTrackLeft = _getMouseTrackPositio.left;
switch (currentPosition) {
case 'left':
left -= _containerSize.width + mouseTrackLeft;
top -= _containerSize.height / 2 - mouseTrackTop;
break;
case 'right':
case 'mouse':
left += mouseTrackLeft;
top -= _containerSize.height / 2 - mouseTrackTop;
break;
case 'top':
left -= _containerSize.width / 2 - mouseTrackLeft;
top -= _containerSize.height + mouseTrackTop;
break;
case 'bottom':
left -= _containerSize.width / 2 - mouseTrackLeft;
top += mouseTrackTop;
break;
}
if (left <= 0 || containerSize.current.width > _containerSize.width) {
elementRef.current.style.left = '0px';
elementRef.current.style.right = window.innerWidth - _containerSize.width - left + 'px';
} else {
elementRef.current.style.right = '';
elementRef.current.style.left = left + 'px';
}
elementRef.current.style.top = top + 'px';
DomHandler.addClass(elementRef.current, 'p-tooltip-active');
} else {
var pos = DomHandler.findCollisionPosition(currentPosition);
var my = getTargetOption(target, 'my') || props.my || pos.my;
var at = getTargetOption(target, 'at') || props.at || pos.at;
elementRef.current.style.padding = '0px';
DomHandler.flipfitCollision(elementRef.current, target, my, at, function (calculatedPosition) {
var _calculatedPosition$a = calculatedPosition.at,
atX = _calculatedPosition$a.x,
atY = _calculatedPosition$a.y;
var myX = calculatedPosition.my.x;
var newPosition = props.at ? atX !== 'center' && atX !== myX ? atX : atY : calculatedPosition.at["".concat(pos.axis)];
elementRef.current.style.padding = '';
setPositionState(newPosition);
updateContainerPosition(newPosition);
DomHandler.addClass(elementRef.current, 'p-tooltip-active');
});
}
};
var updateContainerPosition = function updateContainerPosition(position) {
if (elementRef.current) {
var style = getComputedStyle(elementRef.current);
if (position === 'left') elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';else if (position === 'top') elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
}
};
var onMouseEnter = function onMouseEnter() {
if (!isAutoHide()) {
allowHide.current = false;
}
};
var onMouseLeave = function onMouseLeave(e) {
if (!isAutoHide()) {
allowHide.current = true;
hide(e);
}
};
var bindTargetEvent = function bindTargetEvent(target) {
if (target) {
var _getEvents = getEvents(target),
showEvents = _getEvents.showEvents,
hideEvents = _getEvents.hideEvents;
var currentTarget = getTarget(target);
showEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.addEventListener(event, show);
});
hideEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.addEventListener(event, hide);
});
}
};
var unbindTargetEvent = function unbindTargetEvent(target) {
if (target) {
var _getEvents2 = getEvents(target),
showEvents = _getEvents2.showEvents,
hideEvents = _getEvents2.hideEvents;
var currentTarget = getTarget(target);
showEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.removeEventListener(event, show);
});
hideEvents.forEach(function (event) {
return currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.removeEventListener(event, hide);
});
}
};
var applyDelay = function applyDelay(delayProp, callback) {
clearTimeouts();
var delay = getTargetOption(currentTargetRef.current, delayProp.toLowerCase()) || props[delayProp];
!!delay ? timeouts.current["".concat(delayProp)] = setTimeout(function () {
return callback();
}, delay) : callback();
};
var sendCallback = function sendCallback(callback) {
if (callback) {
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
params[_key - 1] = arguments[_key];
}
var result = callback.apply(void 0, params);
if (result === undefined) {
result = true;
}
return result;
}
return true;
};
var clearTimeouts = function clearTimeouts() {
Object.values(timeouts.current).forEach(function (t) {
return clearTimeout(t);
});
};
var getTarget = function getTarget(target) {
if (target) {
if (isShowOnDisabled(target)) {
if (!target.hasWrapper) {
var wrapper = document.createElement('span');
DomHandler.addClass(wrapper, 'p-tooltip-target-wrapper');
target.parentNode.insertBefore(wrapper, target);
wrapper.appendChild(target);
target.hasWrapper = true;
return wrapper;
} else {
return target.parentElement;
}
} else if (target.hasWrapper) {
var _target$parentElement;
(_target$parentElement = target.parentElement).replaceWith.apply(_target$parentElement, _toConsumableArray(target.parentElement.childNodes));
delete target.hasWrapper;
}
return target;
}
return null;
};
var updateTargetEvents = function updateTargetEvents(target) {
unloadTargetEvents(target);
loadTargetEvents(target);
};
var loadTargetEvents = function loadTargetEvents(target) {
setTargetEventOperations(target || props.target, bindTargetEvent);
};
var unloadTargetEvents = function unloadTargetEvents(target) {
setTargetEventOperations(target || props.target, unbindTargetEvent);
};
var setTargetEventOperations = function setTargetEventOperations(target, operation) {
target = ObjectUtils.getRefElement(target);
if (target) {
if (DomHandler.isElement(target)) {
operation(target);
} else {
var setEvent = function setEvent(target) {
var element = DomHandler.find(document, target);
element.forEach(function (el) {
operation(el);
});
};
if (target instanceof Array) {
target.forEach(function (t) {
setEvent(t);
});
} else {
setEvent(target);
}
}
}
};
useMountEffect(function () {
loadTargetEvents();
if (visibleState && currentTargetRef.current && isDisabled(currentTargetRef.current)) {
hide();
}
});
useUpdateEffect(function () {
loadTargetEvents();
return function () {
unloadTargetEvents();
};
}, [show, hide, props.target]);
useUpdateEffect(function () {
if (visibleState) {
var position = getPosition(currentTargetRef.current);
var classname = getTargetOption(currentTargetRef.current, 'classname');
setPositionState(position);
setClassNameState(classname);
updateTooltipState(position);
bindWindowResizeListener();
bindOverlayScrollListener();
} else {
setPositionState(props.position);
setClassNameState('');
currentTargetRef.current = null;
containerSize.current = null;
allowHide.current = true;
}
return function () {
unbindWindowResizeListener();
unbindOverlayScrollListener();
};
}, [visibleState]);
useUpdateEffect(function () {
if (visibleState) {
applyDelay('updateDelay', function () {
updateText(currentTargetRef.current, function () {
align(currentTargetRef.current);
});
});
}
}, [props.content]);
useUnmountEffect(function () {
clearTimeouts();
unloadTargetEvents();
ZIndexUtils.clear(elementRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
updateTargetEvents: updateTargetEvents,
loadTargetEvents: loadTargetEvents,
unloadTargetEvents: unloadTargetEvents,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
},
getTarget: function getTarget() {
return currentTargetRef.current;
}
};
});
var createElement = function createElement() {
var otherProps = TooltipBase.getOtherProps(props);
var tooltipClassName = classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), props.className, classNameState);
var empty = isTargetContentEmpty(currentTargetRef.current);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: tooltipClassName,
style: props.style,
role: "tooltip",
"aria-hidden": visibleState
}, otherProps, {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}), /*#__PURE__*/React.createElement("div", {
className: "p-tooltip-arrow"
}), /*#__PURE__*/React.createElement("div", {
ref: textRef,
className: "p-tooltip-text"
}, empty && props.children));
};
if (visibleState) {
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo,
visible: true
});
}
return null;
}));
Tooltip.displayName = 'Tooltip';
var ButtonBase = {
defaultProps: {
__TYPE: 'Button',
label: null,
icon: null,
iconPos: 'left',
badge: null,
severity: null,
rounded: false,
raised: false,
outlined: false,
text: false,
link: false,
badgeClassName: null,
tooltip: null,
size: null,
tooltipOptions: null,
disabled: false,
loading: false,
loadingIcon: 'pi pi-spinner pi-spin',
visible: true,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
}
};
var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames2;
var props = ButtonBase.getProps(inProps);
var elementRef = React.useRef(ref);
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
var createIcon = function createIcon() {
var icon = props.loading ? props.loadingIcon : props.icon;
var className = classNames('p-button-icon p-c', _defineProperty({
'p-button-loading-icon': props.loading
}, "p-button-icon-".concat(props.iconPos), props.label));
return IconUtils.getJSXIcon(icon, {
className: className
}, {
props: props
});
};
var createLabel = function createLabel() {
if (props.label) {
return /*#__PURE__*/React.createElement("span", {
className: "p-button-label p-c"
}, props.label);
}
return !props.children && !props.label && /*#__PURE__*/React.createElement("span", {
className: "p-button-label p-c",
dangerouslySetInnerHTML: {
__html: ' '
}
});
};
var createBadge = function createBadge() {
if (props.badge) {
var badgeClassName = classNames('p-badge', props.badgeClassName);
return /*#__PURE__*/React.createElement("span", {
className: badgeClassName
}, props.badge);
}
return null;
};
var disabled = props.disabled || props.loading;
var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
var otherProps = ButtonBase.getOtherProps(props);
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var className = classNames('p-button p-component', props.className, (_classNames2 = {
'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
var icon = createIcon();
var label = createLabel();
var badge = createBadge();
var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
ref: elementRef,
"aria-label": defaultAriaLabel
}, otherProps, {
className: className,
disabled: disabled
}), icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
Button.displayName = 'Button';
var KeyFilter = {
/* eslint-disable */
DEFAULT_MASKS: {
pint: /[\d]/,
"int": /[\d\-]/,
pnum: /[\d\.]/,
money: /[\d\.\s,]/,
num: /[\d\-\.]/,
hex: /[0-9a-f]/i,
email: /[a-z0-9_\.\-@]/i,
alpha: /[a-z_]/i,
alphanum: /[a-z0-9_]/i
},
/* eslint-enable */getRegex: function getRegex(keyfilter) {
return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
},
onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
if (validateOnly) {
return;
}
if (e.ctrlKey || e.altKey) {
return;
}
var isPrintableKey = e.key.length === 1;
if (!isPrintableKey) {
return;
}
var regex = this.getRegex(keyfilter);
if (!regex.test(e.key)) {
e.preventDefault();
}
},
onPaste: function onPaste(e, keyfilter, validateOnly) {
if (validateOnly) {
return;
}
var regex = this.getRegex(keyfilter);
var clipboard = e.clipboardData.getData('text');
// loop over each letter pasted and if any fail prevent the paste
_toConsumableArray(clipboard).forEach(function (c) {
if (!regex.test(c)) {
e.preventDefault();
return false;
}
});
},
validate: function validate(e, keyfilter) {
var value = e.target.value,
validatePattern = true;
var regex = this.getRegex(keyfilter);
if (value && !regex.test(value)) {
validatePattern = false;
}
return validatePattern;
}
};
var InputTextBase = {
defaultProps: {
__TYPE: 'InputText',
keyfilter: null,
validateOnly: false,
tooltip: null,
tooltipOptions: null,
onInput: null,
onKeyDown: null,
onPaste: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InputTextBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InputTextBase.defaultProps);
}
};
var InputText = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InputTextBase.getProps(inProps);
var elementRef = React.useRef(ref);
var onKeyDown = function onKeyDown(event) {
props.onKeyDown && props.onKeyDown(event);
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
}
};
var onInput = function onInput(event) {
var validatePattern = true;
if (props.keyfilter && props.validateOnly) {
validatePattern = KeyFilter.validate(event, props.keyfilter);
}
props.onInput && props.onInput(event, validatePattern);
if (!props.onChange) {
var target = event.target;
ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
}
};
var onPaste = function onPaste(event) {
props.onPaste && props.onPaste(event);
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
}
};
var currentValue = elementRef.current && elementRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputTextBase.getOtherProps(props);
var className = classNames('p-inputtext p-component', {
'p-disabled': props.disabled,
'p-filled': isFilled
}, props.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
ref: elementRef
}, otherProps, {
className: className,
onInput: onInput,
onKeyDown: onKeyDown,
onPaste: onPaste
})), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
InputText.displayName = 'InputText';
var OverlayService = EventBus();
var AutoCompleteBase = {
defaultProps: {
__TYPE: 'AutoComplete',
id: null,
appendTo: null,
autoFocus: false,
autoHighlight: false,
className: null,
completeMethod: null,
delay: 300,
disabled: false,
dropdown: false,
dropdownAriaLabel: null,
dropdownAutoFocus: true,
dropdownIcon: 'pi pi-chevron-down',
dropdownMode: 'blank',
emptyMessage: null,
field: null,
forceSelection: false,
inputClassName: null,
inputId: null,
inputRef: null,
inputStyle: null,
itemTemplate: null,
maxLength: null,
minLength: 1,
multiple: false,
name: null,
onBlur: null,
onChange: null,
onClear: null,
onClick: null,
onContextMenu: null,
onDblClick: null,
onDropdownClick: null,
onFocus: null,
onHide: null,
onKeyPress: null,
onKeyUp: null,
onMouseDown: null,
onSelect: null,
onShow: null,
onUnselect: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
panelClassName: null,
panelStyle: null,
placeholder: null,
readOnly: false,
removeIcon: 'pi pi-times-circle',
scrollHeight: '200px',
selectedItemTemplate: null,
selectionLimit: null,
showEmptyMessage: false,
size: null,
style: null,
suggestions: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
type: 'text',
value: null,
virtualScrollerOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, AutoCompleteBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, AutoCompleteBase.defaultProps);
}
};
var VirtualScrollerBase = {
defaultProps: {
__TYPE: 'VirtualScroller',
id: null,
style: null,
className: null,
tabIndex: 0,
items: null,
itemSize: 0,
scrollHeight: null,
scrollWidth: null,
orientation: 'vertical',
step: 0,
numToleratedItems: null,
delay: 0,
resizeDelay: 10,
appendOnly: false,
inline: false,
lazy: false,
disabled: false,
loaderDisabled: false,
columns: null,
loading: undefined,
autoSize: false,
showSpacer: true,
showLoader: false,
loadingTemplate: null,
loaderIconTemplate: null,
itemTemplate: null,
contentTemplate: null,
onScroll: null,
onScrollIndexChange: null,
onLazyLoad: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, VirtualScrollerBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, VirtualScrollerBase.defaultProps);
}
};
function ownKeys$v(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$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = VirtualScrollerBase.getProps(inProps);
var prevProps = usePrevious(inProps) || {};
var vertical = props.orientation === 'vertical';
var horizontal = props.orientation === 'horizontal';
var both = props.orientation === 'both';
var _React$useState = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
lastState = _React$useState4[0],
setLastState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
pageState = _React$useState6[0],
setPageState = _React$useState6[1];
var _React$useState7 = React.useState(both ? {
rows: 0,
cols: 0
} : 0),
_React$useState8 = _slicedToArray(_React$useState7, 2),
numItemsInViewportState = _React$useState8[0],
setNumItemsInViewportState = _React$useState8[1];
var _React$useState9 = React.useState(props.numToleratedItems),
_React$useState10 = _slicedToArray(_React$useState9, 2),
numToleratedItemsState = _React$useState10[0],
setNumToleratedItemsState = _React$useState10[1];
var _React$useState11 = React.useState(props.loading || false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
loadingState = _React$useState12[0],
setLoadingState = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
loaderArrState = _React$useState14[0],
setLoaderArrState = _React$useState14[1];
var elementRef = React.useRef(null);
var _contentRef = React.useRef(null);
var _spacerRef = React.useRef(null);
var _stickyRef = React.useRef(null);
var lastScrollPos = React.useRef(both ? {
top: 0,
left: 0
} : 0);
var scrollTimeout = React.useRef(null);
var resizeTimeout = React.useRef(null);
var contentStyle = React.useRef({});
var spacerStyle = React.useRef({});
var defaultWidth = React.useRef(null);
var defaultHeight = React.useRef(null);
var defaultContentWidth = React.useRef(null);
var defaultContentHeight = React.useRef(null);
var isItemRangeChanged = React.useRef(false);
var lazyLoadState = React.useRef(null);
var _useResizeListener = useResizeListener({
listener: function listener(event) {
return onResize();
},
when: !props.disabled
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var _useEventListener = useEventListener({
target: 'window',
type: 'orientationchange',
listener: function listener(event) {
return onResize();
},
when: !props.disabled
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindOrientationChangeListener = _useEventListener2[0];
var getElementRef = function getElementRef() {
return elementRef;
};
var getPageByFirst = function getPageByFirst(first) {
return Math.floor((first + numToleratedItemsState * 4) / (props.step || 1));
};
var setContentElement = function setContentElement(element) {
_contentRef.current = element || _contentRef.current || DomHandler.findSingle(elementRef.current, '.p-virtualscroller-content');
};
var isPageChanged = function isPageChanged(first) {
return props.step ? pageState !== getPageByFirst(first) : true;
};
var scrollTo = function scrollTo(options) {
lastScrollPos.current = both ? {
top: 0,
left: 0
} : 0;
elementRef.current && elementRef.current.scrollTo(options);
};
var scrollToIndex = function scrollToIndex(index) {
var behavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
var _calculateNumItems = calculateNumItems(),
numToleratedItems = _calculateNumItems.numToleratedItems;
var contentPos = getContentPosition();
var calculateFirst = function calculateFirst() {
var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _numT = arguments.length > 1 ? arguments[1] : undefined;
return _index <= _numT ? 0 : _index;
};
var calculateCoord = function calculateCoord(_first, _size, _cpos) {
return _first * _size + _cpos;
};
var scrollToItem = function scrollToItem() {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return scrollTo({
left: left,
top: top,
behavior: behavior
});
};
var newFirst = both ? {
rows: 0,
cols: 0
} : 0;
var isRangeChanged = false;
if (both) {
newFirst = {
rows: calculateFirst(index[0], numToleratedItems[0]),
cols: calculateFirst(index[1], numToleratedItems[1])
};
scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1], contentPos.left), calculateCoord(newFirst.rows, props.itemSize[0], contentPos.top));
isRangeChanged = firstState.rows !== newFirst.rows || firstState.cols !== newFirst.cols;
} else {
newFirst = calculateFirst(index, numToleratedItems);
horizontal ? scrollToItem(calculateCoord(newFirst, props.itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(newFirst, props.itemSize, contentPos.top));
isRangeChanged = firstState !== newFirst;
}
isItemRangeChanged.current = isRangeChanged;
setFirstState(newFirst);
};
var scrollInView = function scrollInView(index, to) {
var behavior = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
if (to) {
var _getRenderedRange = getRenderedRange(),
first = _getRenderedRange.first,
viewport = _getRenderedRange.viewport;
var scrollToItem = function scrollToItem() {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return scrollTo({
left: left,
top: top,
behavior: behavior
});
};
var isToStart = to === 'to-start';
var isToEnd = to === 'to-end';
if (isToStart) {
if (both) {
if (viewport.first.rows - first.rows > index[0]) {
scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows - 1) * props.itemSize[0]);
} else if (viewport.first.cols - first.cols > index[1]) {
scrollToItem((viewport.first.cols - 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
}
} else {
if (viewport.first - first > index) {
var pos = (viewport.first - 1) * props.itemSize;
horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
}
}
} else if (isToEnd) {
if (both) {
if (viewport.last.rows - first.rows <= index[0] + 1) {
scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows + 1) * props.itemSize[0]);
} else if (viewport.last.cols - first.cols <= index[1] + 1) {
scrollToItem((viewport.first.cols + 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
}
} else {
if (viewport.last - first <= index + 1) {
var _pos2 = (viewport.first + 1) * props.itemSize;
horizontal ? scrollToItem(_pos2, 0) : scrollToItem(0, _pos2);
}
}
}
} else {
scrollToIndex(index, behavior);
}
};
var getRows = function getRows() {
return loadingState ? props.loaderDisabled ? loaderArrState : [] : loadedItems();
};
var getColumns = function getColumns() {
if (props.columns && both || horizontal) {
return loadingState && props.loaderDisabled ? both ? loaderArrState[0] : loaderArrState : props.columns.slice(both ? firstState.cols : firstState, both ? lastState.cols : lastState);
}
return props.columns;
};
var getRenderedRange = function getRenderedRange() {
var calculateFirstInViewport = function calculateFirstInViewport(_pos, _size) {
return Math.floor(_pos / (_size || _pos));
};
var firstInViewport = firstState;
var lastInViewport = 0;
if (elementRef.current) {
var _elementRef$current = elementRef.current,
scrollTop = _elementRef$current.scrollTop,
scrollLeft = _elementRef$current.scrollLeft;
if (both) {
firstInViewport = {
rows: calculateFirstInViewport(scrollTop, props.itemSize[0]),
cols: calculateFirstInViewport(scrollLeft, props.itemSize[1])
};
lastInViewport = {
rows: firstInViewport.rows + numItemsInViewportState.rows,
cols: firstInViewport.cols + numItemsInViewportState.cols
};
} else {
var scrollPos = horizontal ? scrollLeft : scrollTop;
firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
lastInViewport = firstInViewport + numItemsInViewportState;
}
}
return {
first: firstState,
last: lastState,
viewport: {
first: firstInViewport,
last: lastInViewport
}
};
};
var calculateNumItems = function calculateNumItems() {
var contentPos = getContentPosition();
var contentWidth = elementRef.current ? elementRef.current.offsetWidth - contentPos.left : 0;
var contentHeight = elementRef.current ? elementRef.current.offsetHeight - contentPos.top : 0;
var calculateNumItemsInViewport = function calculateNumItemsInViewport(_contentSize, _itemSize) {
return Math.ceil(_contentSize / (_itemSize || _contentSize));
};
var calculateNumToleratedItems = function calculateNumToleratedItems(_numItems) {
return Math.ceil(_numItems / 2);
};
var numItemsInViewport = both ? {
rows: calculateNumItemsInViewport(contentHeight, props.itemSize[0]),
cols: calculateNumItemsInViewport(contentWidth, props.itemSize[1])
} : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, props.itemSize);
var numToleratedItems = numToleratedItemsState || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
return {
numItemsInViewport: numItemsInViewport,
numToleratedItems: numToleratedItems
};
};
var calculateOptions = function calculateOptions() {
var _calculateNumItems2 = calculateNumItems(),
numItemsInViewport = _calculateNumItems2.numItemsInViewport,
numToleratedItems = _calculateNumItems2.numToleratedItems;
var calculateLast = function calculateLast(_first, _num, _numT) {
var _isCols = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
return getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
};
var last = both ? {
rows: calculateLast(firstState.rows, numItemsInViewport.rows, numToleratedItems[0]),
cols: calculateLast(firstState.cols, numItemsInViewport.cols, numToleratedItems[1], true)
} : calculateLast(firstState, numItemsInViewport, numToleratedItems);
setNumItemsInViewportState(numItemsInViewport);
setNumToleratedItemsState(numToleratedItems);
setLastState(last);
if (props.showLoader) {
setLoaderArrState(both ? Array.from({
length: numItemsInViewport.rows
}).map(function () {
return Array.from({
length: numItemsInViewport.cols
});
}) : Array.from({
length: numItemsInViewport
}));
}
if (props.lazy) {
Promise.resolve().then(function () {
lazyLoadState.current = {
first: props.step ? both ? {
rows: 0,
cols: firstState.cols
} : 0 : firstState,
last: Math.min(props.step ? props.step : last, props.items.length)
};
props.onLazyLoad && props.onLazyLoad(lazyLoadState.current);
});
}
};
var calculateAutoSize = function calculateAutoSize(loading) {
if (props.autoSize && !loading) {
Promise.resolve().then(function () {
if (_contentRef.current) {
_contentRef.current.style.minHeight = _contentRef.current.style.minWidth = 'auto';
_contentRef.current.style.position = 'relative';
elementRef.current.style.contain = 'none';
/*const [contentWidth, contentHeight] = [DomHandler.getWidth(contentRef.current), DomHandler.getHeight(contentRef.current)];
contentWidth !== defaultContentWidth.current && (elementRef.current.style.width = '');
contentHeight !== defaultContentHeight.current && (elementRef.current.style.height = '');*/
var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
width = _ref[0],
height = _ref[1];
(both || horizontal) && (elementRef.current.style.width = (width < defaultWidth.current ? width : props.scrollWidth || defaultWidth.current) + 'px');
(both || vertical) && (elementRef.current.style.height = (height < defaultHeight.current ? height : props.scrollHeight || defaultHeight.current) + 'px');
_contentRef.current.style.minHeight = _contentRef.current.style.minWidth = '';
_contentRef.current.style.position = '';
elementRef.current.style.contain = '';
}
});
}
};
var getLast = function getLast() {
var last = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var isCols = arguments.length > 1 ? arguments[1] : undefined;
return props.items ? Math.min(isCols ? (props.columns || props.items[0]).length : props.items.length, last) : 0;
};
var getContentPosition = function getContentPosition() {
if (_contentRef.current) {
var style = getComputedStyle(_contentRef.current);
var left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
var right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
var top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
var bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
return {
left: left,
right: right,
top: top,
bottom: bottom,
x: left + right,
y: top + bottom
};
}
return {
left: 0,
right: 0,
top: 0,
bottom: 0,
x: 0,
y: 0
};
};
var setSize = function setSize() {
if (elementRef.current) {
var parentElement = elementRef.current.parentElement;
var width = props.scrollWidth || "".concat(elementRef.current.offsetWidth || parentElement.offsetWidth, "px");
var height = props.scrollHeight || "".concat(elementRef.current.offsetHeight || parentElement.offsetHeight, "px");
var setProp = function setProp(_name, _value) {
return elementRef.current.style[_name] = _value;
};
if (both || horizontal) {
setProp('height', height);
setProp('width', width);
} else {
setProp('height', height);
}
}
};
var setSpacerSize = function setSpacerSize() {
var items = props.items;
if (items) {
var contentPos = getContentPosition();
var setProp = function setProp(_name, _value, _size) {
var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
return spacerStyle.current = _objectSpread$v(_objectSpread$v({}, spacerStyle.current), _defineProperty({}, "".concat(_name), (_value || []).length * _size + _cpos + 'px'));
};
if (both) {
setProp('height', items, props.itemSize[0], contentPos.y);
setProp('width', props.columns || items[1], props.itemSize[1], contentPos.x);
} else {
horizontal ? setProp('width', props.columns || items, props.itemSize, contentPos.x) : setProp('height', items, props.itemSize, contentPos.y);
}
}
};
var setContentPosition = function setContentPosition(pos) {
if (_contentRef.current && !props.appendOnly) {
var first = pos ? pos.first : firstState;
var calculateTranslateVal = function calculateTranslateVal(_first, _size) {
return _first * _size;
};
var setTransform = function setTransform() {
var _x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var _y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
_stickyRef.current && (_stickyRef.current.style.top = "-".concat(_y, "px"));
contentStyle.current = _objectSpread$v(_objectSpread$v({}, contentStyle.current), {
transform: "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)")
});
};
if (both) {
setTransform(calculateTranslateVal(first.cols, props.itemSize[1]), calculateTranslateVal(first.rows, props.itemSize[0]));
} else {
var translateVal = calculateTranslateVal(first, props.itemSize);
horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
}
}
};
var onScrollPositionChange = function onScrollPositionChange(event) {
var target = event.target;
var contentPos = getContentPosition();
var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
return _pos ? _pos > _cpos ? _pos - _cpos : _pos : 0;
};
var calculateCurrentIndex = function calculateCurrentIndex(_pos, _size) {
return Math.floor(_pos / (_size || _pos));
};
var calculateTriggerIndex = function calculateTriggerIndex(_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
};
var calculateFirst = function calculateFirst(_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
if (_currentIndex <= _numT) return 0;else return Math.max(0, _isScrollDownOrRight ? _currentIndex < _triggerIndex ? _first : _currentIndex - _numT : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
};
var calculateLast = function calculateLast(_currentIndex, _first, _last, _num, _numT, _isCols) {
var lastValue = _first + _num + 2 * _numT;
if (_currentIndex >= _numT) {
lastValue += _numT + 1;
}
return getLast(lastValue, _isCols);
};
var scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
var scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
var newFirst = both ? {
rows: 0,
cols: 0
} : 0;
var newLast = lastState;
var isRangeChanged = false;
var newScrollPos = lastScrollPos.current;
if (both) {
var isScrollDown = lastScrollPos.current.top <= scrollTop;
var isScrollRight = lastScrollPos.current.left <= scrollLeft;
if (!props.appendOnly || props.appendOnly && (isScrollDown || isScrollRight)) {
var currentIndex = {
rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
};
var triggerIndex = {
rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
};
newFirst = {
rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
};
newLast = {
rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
};
isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols || isItemRangeChanged.current;
newScrollPos = {
top: scrollTop,
left: scrollLeft
};
}
} else {
var scrollPos = horizontal ? scrollLeft : scrollTop;
var isScrollDownOrRight = lastScrollPos.current <= scrollPos;
if (!props.appendOnly || props.appendOnly && isScrollDownOrRight) {
var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
isRangeChanged = newFirst !== firstState || newLast !== lastState || isItemRangeChanged.current;
newScrollPos = scrollPos;
}
}
return {
first: newFirst,
last: newLast,
isRangeChanged: isRangeChanged,
scrollPos: newScrollPos
};
};
var onScrollChange = function onScrollChange(event) {
var _onScrollPositionChan = onScrollPositionChange(event),
first = _onScrollPositionChan.first,
last = _onScrollPositionChan.last,
isRangeChanged = _onScrollPositionChan.isRangeChanged,
scrollPos = _onScrollPositionChan.scrollPos;
if (isRangeChanged) {
var newState = {
first: first,
last: last
};
setContentPosition(newState);
setFirstState(first);
setLastState(last);
lastScrollPos.current = scrollPos;
props.onScrollIndexChange && props.onScrollIndexChange(newState);
if (props.lazy && isPageChanged(first)) {
var newLazyLoadState = {
first: props.step ? Math.min(getPageByFirst(first) * props.step, props.items.length - props.step) : first,
last: Math.min(props.step ? (getPageByFirst(first) + 1) * props.step : last, props.items.length)
};
var isLazyStateChanged = !lazyLoadState.current || lazyLoadState.current.first !== newLazyLoadState.first || lazyLoadState.current.last !== newLazyLoadState.last;
isLazyStateChanged && props.onLazyLoad && props.onLazyLoad(newLazyLoadState);
lazyLoadState.current = newLazyLoadState;
}
}
};
var onScroll = function onScroll(event) {
props.onScroll && props.onScroll(event);
if (props.delay) {
if (scrollTimeout.current) {
clearTimeout(scrollTimeout.current);
}
if (isPageChanged(firstState)) {
if (!loadingState && props.showLoader) {
var _onScrollPositionChan2 = onScrollPositionChange(event),
isRangeChanged = _onScrollPositionChan2.isRangeChanged;
var changed = isRangeChanged || (props.step ? isPageChanged(firstState) : false);
changed && setLoadingState(true);
}
scrollTimeout.current = setTimeout(function () {
onScrollChange(event);
if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
setLoadingState(false);
setPageState(getPageByFirst(firstState));
}
}, props.delay);
}
} else {
onScrollChange(event);
}
};
var onResize = function onResize() {
if (resizeTimeout.current) {
clearTimeout(resizeTimeout.current);
}
resizeTimeout.current = setTimeout(function () {
if (elementRef.current) {
var _ref2 = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
width = _ref2[0],
height = _ref2[1];
var isDiffWidth = width !== defaultWidth.current,
isDiffHeight = height !== defaultHeight.current;
var reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
if (reinit) {
setNumToleratedItemsState(props.numToleratedItems);
defaultWidth.current = width;
defaultHeight.current = height;
defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
}
}
}, props.resizeDelay);
};
var getOptions = function getOptions(renderedIndex) {
var count = (props.items || []).length;
var index = both ? firstState.rows + renderedIndex : firstState + renderedIndex;
return {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
even: index % 2 === 0,
odd: index % 2 !== 0,
props: props
};
};
var loaderOptions = function loaderOptions(index, extOptions) {
var count = loaderArrState.length;
return _objectSpread$v({
index: index,
count: count,
first: index === 0,
last: index === count - 1,
even: index % 2 === 0,
odd: index % 2 !== 0,
props: props
}, extOptions);
};
var loadedItems = function loadedItems() {
var items = props.items;
if (items && !loadingState) {
if (both) return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map(function (item) {
return props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols);
});else if (horizontal && props.columns) return items;else return items.slice(props.appendOnly ? 0 : firstState, lastState);
}
return [];
};
var viewInit = function viewInit() {
if (elementRef.current && DomHandler.isVisible(elementRef.current)) {
setContentElement(_contentRef.current);
init();
bindWindowResizeListener();
bindOrientationChangeListener();
defaultWidth.current = DomHandler.getWidth(elementRef.current);
defaultHeight.current = DomHandler.getHeight(elementRef.current);
defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
}
};
var init = function init() {
if (!props.disabled) {
setSize();
calculateOptions();
setSpacerSize();
}
};
useMountEffect(function () {
viewInit();
});
useUpdateEffect(function () {
init();
}, [props.itemSize, props.scrollHeight, props.scrollWidth]);
useUpdateEffect(function () {
if (props.numToleratedItems !== numToleratedItemsState) {
setNumToleratedItemsState(props.numToleratedItems);
}
}, [props.numToleratedItems]);
useUpdateEffect(function () {
if (props.numToleratedItems === numToleratedItemsState) {
init(); // reinit after resizing
}
}, [numToleratedItemsState]);
useUpdateEffect(function () {
if (!prevProps.items || prevProps.items.length !== (props.items || []).length) {
init();
}
var loading = loadingState;
if (props.lazy && prevProps.loading !== props.loading && props.loading !== loadingState) {
setLoadingState(props.loading);
loading = props.loading;
}
calculateAutoSize(loading);
});
useUpdateEffect(function () {
lastScrollPos.current = both ? {
top: 0,
left: 0
} : 0;
}, [props.orientation]);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElementRef: getElementRef,
scrollTo: scrollTo,
scrollToIndex: scrollToIndex,
scrollInView: scrollInView,
getRenderedRange: getRenderedRange
};
});
var createLoaderItem = function createLoaderItem(index) {
var extOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var options = loaderOptions(index, extOptions);
var content = ObjectUtils.getJSXElement(props.loadingTemplate, options);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, content);
};
var createLoader = function createLoader() {
if (!props.loaderDisabled && props.showLoader && loadingState) {
var className = classNames('p-virtualscroller-loader', {
'p-component-overlay': !props.loadingTemplate
});
var content = /*#__PURE__*/React.createElement("i", {
className: "p-virtualscroller-loading-icon pi pi-spinner pi-spin"
});
if (props.loadingTemplate) {
content = loaderArrState.map(function (_, index) {
return createLoaderItem(index, both && {
numCols: numItemsInViewportState.cols
});
});
} else if (props.loaderIconTemplate) {
var defaultContentOptions = {
className: 'p-virtualscroller-loading-icon',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: className
}, content);
}
return null;
};
var createSpacer = function createSpacer() {
if (props.showSpacer) {
return /*#__PURE__*/React.createElement("div", {
ref: _spacerRef,
style: spacerStyle.current,
className: "p-virtualscroller-spacer"
});
}
return null;
};
var createItem = function createItem(item, index) {
var options = getOptions(index);
var content = ObjectUtils.getJSXElement(props.itemTemplate, item, options);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: options.index
}, content);
};
var createItems = function createItems() {
var items = loadedItems();
return items.map(createItem);
};
var createContent = function createContent() {
var items = createItems();
var className = classNames('p-virtualscroller-content', {
'p-virtualscroller-loading': loadingState
});
var content = /*#__PURE__*/React.createElement("div", {
ref: _contentRef,
style: contentStyle.current,
className: className
}, items);
if (props.contentTemplate) {
var defaultOptions = {
style: contentStyle.current,
className: className,
spacerStyle: spacerStyle.current,
contentRef: function contentRef(el) {
return _contentRef.current = ObjectUtils.getRefElement(el);
},
spacerRef: function spacerRef(el) {
return _spacerRef.current = ObjectUtils.getRefElement(el);
},
stickyRef: function stickyRef(el) {
return _stickyRef.current = ObjectUtils.getRefElement(el);
},
items: loadedItems(),
getItemOptions: function getItemOptions(index) {
return getOptions(index);
},
children: items,
element: content,
props: props,
loading: loadingState,
getLoaderOptions: function getLoaderOptions(index, ext) {
return loaderOptions(index, ext);
},
loadingTemplate: props.loadingTemplate,
itemSize: props.itemSize,
rows: getRows(),
columns: getColumns(),
vertical: vertical,
horizontal: horizontal,
both: both
};
return ObjectUtils.getJSXElement(props.contentTemplate, defaultOptions);
}
return content;
};
if (props.disabled) {
var content = ObjectUtils.getJSXElement(props.contentTemplate, {
items: props.items,
rows: props.items,
columns: props.columns
});
return /*#__PURE__*/React.createElement(React.Fragment, null, props.children, content);
} else {
var otherProps = VirtualScrollerBase.getOtherProps(props);
var className = classNames('p-virtualscroller', {
'p-virtualscroller-inline': props.inline,
'p-virtualscroller-both p-both-scroll': both,
'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
}, props.className);
var loader = createLoader();
var _content = createContent();
var spacer = createSpacer();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
tabIndex: props.tabIndex,
style: props.style
}, otherProps, {
onScroll: onScroll
}), _content, spacer, loader);
}
}));
VirtualScroller.displayName = 'VirtualScroller';
function ownKeys$u(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$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var createGroupChildren = function createGroupChildren(optionGroup, i, style) {
var groupChildren = props.getOptionGroupChildren(optionGroup);
return groupChildren.map(function (item, j) {
var key = i + '_' + j;
var selected = props.selectedItem === item;
var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, j) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
var className = classNames('p-autocomplete-item', {
'p-disabled': item.disabled
});
return /*#__PURE__*/React.createElement("li", {
key: key,
role: "option",
"aria-selected": selected,
className: className,
style: style,
onClick: function onClick(e) {
return props.onItemClick(e, item);
},
"data-group": i,
"data-index": j
}, content, /*#__PURE__*/React.createElement(Ripple, null));
});
};
var createItem = function createItem(suggestion, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (props.optionGroupLabel) {
var content = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, suggestion, index) : props.getOptionGroupLabel(suggestion);
var childrenContent = createGroupChildren(suggestion, index, style);
var key = index + '_' + getOptionGroupRenderKey(suggestion);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", {
className: "p-autocomplete-item-group",
style: style
}, content), childrenContent);
} else {
var _content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
var className = classNames('p-autocomplete-item', {
'p-disabled': suggestion.disabled
});
return /*#__PURE__*/React.createElement("li", {
key: index,
role: "option",
"aria-selected": props.selectedItem === suggestion,
className: className,
style: style,
onClick: function onClick(e) {
return props.onItemClick(e, suggestion);
}
}, _content, /*#__PURE__*/React.createElement(Ripple, null));
}
};
var createItems = function createItems() {
return props.suggestions ? props.suggestions.map(createItem) : null;
};
var createContent = function createContent() {
if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
var emptyMessage = props.emptyMessage || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("ul", {
className: "p-autocomplete-items"
}, /*#__PURE__*/React.createElement("li", {
className: "p-autocomplete-item"
}, emptyMessage));
}
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions), {
style: _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
autoSize: true,
items: props.suggestions,
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var className = classNames('p-autocomplete-items', options.className);
return /*#__PURE__*/React.createElement("ul", {
ref: options.contentRef,
style: options.style,
className: className,
role: "listbox",
id: props.listId
}, options.children);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: props.virtualScrollerRef
}, virtualScrollerProps));
} else {
var items = createItems();
return /*#__PURE__*/React.createElement("ul", {
className: "p-autocomplete-items",
role: "listbox",
id: props.listId
}, items);
}
};
var createElement = function createElement() {
var className = classNames('p-autocomplete-panel p-component', props.panelClassName, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var style = _objectSpread$u({
maxHeight: props.scrollHeight
}, props.panelStyle || {});
var content = createContent();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntering: props.onEntering,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: style,
onClick: props.onClick
}, content));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
AutoCompletePanel.displayName = 'AutoCompletePanel';
var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = AutoCompleteBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
searchingState = _React$useState4[0],
setSearchingState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedState = _React$useState6[0],
setFocusedState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
overlayVisibleState = _React$useState8[0],
setOverlayVisibleState = _React$useState8[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var multiContainerRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var timeout = React.useRef(null);
var selectedItem = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? !isInputClicked(event) && hide() : hide();
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var isInputClicked = function isInputClicked(event) {
return props.multiple ? event.target === multiContainerRef.current || multiContainerRef.current.contains(event.target) : event.target === inputRef.current;
};
var onInputChange = function onInputChange(event) {
//Cancel the search request if user types within the timeout
if (timeout.current) {
clearTimeout(timeout.current);
}
var query = event.target.value;
if (!props.multiple) {
updateModel(event, query);
}
if (ObjectUtils.isEmpty(query)) {
hide();
props.onClear && props.onClear(event);
} else {
if (query.length >= props.minLength) {
timeout.current = setTimeout(function () {
search(event, query, 'input');
}, props.delay);
} else {
hide();
}
}
};
var search = function search(event, query, source) {
//allow empty string but not undefined or null
if (query === undefined || query === null) {
return;
}
//do not search blank values on input change
if (source === 'input' && query.trim().length === 0) {
return;
}
if (props.completeMethod) {
setSearchingState(true);
props.completeMethod({
originalEvent: event,
query: query
});
}
};
var selectItem = function selectItem(event, option, preventInputFocus) {
if (props.multiple) {
inputRef.current.value = '';
if (!isSelected(option)) {
// allows empty value/selectionlimit and within sectionlimit
if (!props.value || !props.selectionLimit || props.value.length < props.selectionLimit) {
var newValue = props.value ? [].concat(_toConsumableArray(props.value), [option]) : [option];
updateModel(event, newValue);
}
}
} else {
updateInputField(option);
updateModel(event, option);
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: option
});
}
if (!preventInputFocus) {
DomHandler.focus(inputRef.current);
hide();
}
};
var updateModel = function updateModel(event, value) {
// #2176 only call change if value actually changed
if (selectedItem && ObjectUtils.deepEquals(selectedItem.current, value)) {
return;
}
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: idState,
value: value
}
});
}
selectedItem.current = value;
};
var formatValue = function formatValue(value) {
if (value) {
if (typeof value === 'string') {
return value;
} else if (props.selectedItemTemplate) {
var resolvedFieldData = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
return resolvedFieldData ? resolvedFieldData : value;
} else if (props.field) {
var _resolvedFieldData = ObjectUtils.resolveFieldData(value, props.field);
return _resolvedFieldData !== null && _resolvedFieldData !== undefined ? _resolvedFieldData : value;
} else {
return value;
}
}
return '';
};
var updateInputField = function updateInputField(value) {
inputRef.current.value = formatValue(value);
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
setSearchingState(false);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
};
var onOverlayEntering = function onOverlayEntering() {
if (props.autoHighlight && props.suggestions && props.suggestions.length) {
var element = getScrollableElement().firstChild.firstChild;
DomHandler.addClass(element, 'p-highlight');
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
var target = props.multiple ? multiContainerRef.current : inputRef.current;
DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || PrimeReact.appendTo);
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onDropdownClick = function onDropdownClick(event) {
if (props.dropdownAutoFocus) {
DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
}
if (props.dropdownMode === 'blank') search(event, '', 'dropdown');else if (props.dropdownMode === 'current') search(event, inputRef.current.value, 'dropdown');
if (props.onDropdownClick) {
props.onDropdownClick({
originalEvent: event,
query: inputRef.current.value
});
}
};
var removeItem = function removeItem(event, index) {
var removedValue = props.value[index];
var newValue = props.value.filter(function (_, i) {
return index !== i;
});
updateModel(event, newValue);
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
value: removedValue
});
}
};
var onInputKeyDown = function onInputKeyDown(event) {
if (overlayVisibleState) {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
switch (event.which) {
//down
case 40:
if (highlightItem) {
var nextElement = findNextItem(highlightItem);
if (nextElement) {
DomHandler.addClass(nextElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(getScrollableElement(), nextElement);
}
} else {
highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
highlightItem = findNextItem(highlightItem);
}
if (highlightItem) {
DomHandler.addClass(highlightItem, 'p-highlight');
}
}
event.preventDefault();
break;
//up
case 38:
if (highlightItem) {
var previousElement = findPrevItem(highlightItem);
if (previousElement) {
DomHandler.addClass(previousElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(getScrollableElement(), previousElement);
}
}
event.preventDefault();
break;
//enter
case 13:
if (highlightItem) {
selectHighlightItem(event, highlightItem);
hide();
event.preventDefault();
}
break;
//escape
case 27:
hide();
event.preventDefault();
break;
//tab
case 9:
if (highlightItem) {
selectHighlightItem(event, highlightItem);
}
hide();
break;
}
}
if (props.multiple) {
switch (event.which) {
//backspace
case 8:
if (props.value && props.value.length && !inputRef.current.value) {
var removedValue = props.value[props.value.length - 1];
var newValue = props.value.slice(0, -1);
updateModel(event, newValue);
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
value: removedValue
});
}
}
break;
}
}
};
var selectHighlightItem = function selectHighlightItem(event, item) {
if (props.optionGroupLabel) {
var optionGroup = props.suggestions[item.dataset.group];
selectItem(event, getOptionGroupChildren(optionGroup)[item.dataset.index]);
} else {
selectItem(event, props.suggestions[DomHandler.index(item)]);
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? findPrevItem(prevItem) : prevItem : null;
};
var onInputFocus = function onInputFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var forceItemSelection = function forceItemSelection(event) {
var inputValue = event.target.value.trim();
var item = (props.suggestions || []).find(function (it) {
var value = props.field ? ObjectUtils.resolveFieldData(it, props.field) : it;
return value && inputValue === value.trim();
});
if (item) {
selectItem(event, item, true);
} else {
inputRef.current.value = '';
updateModel(event, null);
props.onClear && props.onClear(event);
}
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (props.forceSelection) {
forceItemSelection(event);
}
props.onBlur && props.onBlur(event);
};
var onMultiContainerClick = function onMultiContainerClick(event) {
DomHandler.focus(inputRef.current);
props.onClick && props.onClick(event);
};
var onMultiInputFocus = function onMultiInputFocus(event) {
onInputFocus(event);
DomHandler.addClass(multiContainerRef.current, 'p-focus');
};
var onMultiInputBlur = function onMultiInputBlur(event) {
onInputBlur(event);
DomHandler.removeClass(multiContainerRef.current, 'p-focus');
};
var isSelected = function isSelected(val) {
return props.value ? props.value.some(function (v) {
return ObjectUtils.equals(v, val);
}) : false;
};
var getScrollableElement = function getScrollableElement() {
return virtualScrollerRef.current ? overlayRef.current.firstChild : overlayRef.current;
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
useUpdateEffect(function () {
if (searchingState) {
ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide();
setSearchingState(false);
}
}, [props.suggestions]);
useUpdateEffect(function () {
if (inputRef.current && !props.multiple) {
updateInputField(props.value);
}
if (overlayVisibleState) {
alignOverlay();
}
});
useUnmountEffect(function () {
if (timeout.current) {
clearTimeout(timeout.current);
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
search: search,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
var createSimpleAutoComplete = function createSimpleAutoComplete() {
var value = formatValue(props.value);
var ariaControls = overlayVisibleState ? idState + '_list' : null;
var className = classNames('p-autocomplete-input', props.inputClassName, {
'p-autocomplete-dd-input': props.dropdown
});
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: inputRef,
id: props.inputId,
type: props.type,
name: props.name,
defaultValue: value,
role: "combobox",
"aria-autocomplete": "list",
"aria-controls": ariaControls,
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState,
className: className,
style: props.inputStyle,
autoComplete: "off",
readOnly: props.readOnly,
disabled: props.disabled,
placeholder: props.placeholder,
size: props.size,
maxLength: props.maxLength,
tabIndex: props.tabIndex,
onBlur: onInputBlur,
onFocus: onInputFocus,
onChange: onInputChange,
onMouseDown: props.onMouseDown,
onKeyUp: props.onKeyUp,
onKeyDown: onInputKeyDown,
onKeyPress: props.onKeyPress,
onContextMenu: props.onContextMenu,
onClick: props.onClick,
onDoubleClick: props.onDblClick
}, ariaProps));
};
var createChips = function createChips() {
if (ObjectUtils.isNotEmpty(props.value)) {
return props.value.map(function (val, index) {
var key = index + 'multi-item';
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-autocomplete-token p-highlight"
}, /*#__PURE__*/React.createElement("span", {
className: "p-autocomplete-token-label"
}, formatValue(val)), !props.disabled && IconUtils.getJSXIcon(props.removeIcon, {
className: 'p-autocomplete-token-icon',
onClick: function onClick(e) {
return removeItem(e, index);
}
}, {
props: props
}));
});
}
return null;
};
var createMultiInput = function createMultiInput() {
var ariaControls = overlayVisibleState ? idState + '_list' : null;
return /*#__PURE__*/React.createElement("li", {
className: "p-autocomplete-input-token"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: props.type,
disabled: props.disabled,
placeholder: props.placeholder,
role: "combobox",
"aria-autocomplete": "list",
"aria-controls": ariaControls,
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState,
autoComplete: "off",
readOnly: props.readOnly,
tabIndex: props.tabIndex,
onChange: onInputChange,
id: props.inputId,
name: props.name,
style: props.inputStyle,
className: props.inputClassName,
maxLength: props.maxLength,
onKeyUp: props.onKeyUp,
onKeyDown: onInputKeyDown,
onKeyPress: props.onKeyPress,
onFocus: onMultiInputFocus,
onBlur: onMultiInputBlur
}, ariaProps)));
};
var createMultipleAutoComplete = function createMultipleAutoComplete() {
var className = classNames('p-autocomplete-multiple-container p-component p-inputtext', {
'p-disabled': props.disabled
});
var tokens = createChips();
var input = createMultiInput();
return /*#__PURE__*/React.createElement("ul", {
ref: multiContainerRef,
className: className,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown,
onClick: onMultiContainerClick,
onDoubleClick: props.onDblClick
}, tokens, input);
};
var createDropdown = function createDropdown() {
if (props.dropdown) {
var ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
return /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.dropdownIcon,
className: "p-autocomplete-dropdown",
disabled: props.disabled,
onClick: onDropdownClick,
"aria-label": ariaLabel
});
}
return null;
};
var createLoader = function createLoader() {
if (searchingState) {
return /*#__PURE__*/React.createElement("i", {
className: "p-autocomplete-loader pi pi-spinner pi-spin"
});
}
return null;
};
var createInput = function createInput() {
return props.multiple ? createMultipleAutoComplete() : createSimpleAutoComplete();
};
var listId = idState + '_list';
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = AutoCompleteBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-autocomplete p-component p-inputwrapper', {
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState
}, props.className);
var loader = createLoader();
var input = createInput();
var dropdown = createDropdown();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
id: idState,
style: props.style,
className: className
}, otherProps), input, loader, dropdown, /*#__PURE__*/React.createElement(AutoCompletePanel, _extends({
ref: overlayRef,
virtualScrollerRef: virtualScrollerRef
}, props, {
listId: listId,
onItemClick: selectItem,
selectedItem: selectedItem,
onClick: onPanelClick,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupChildren: getOptionGroupChildren,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntering: onOverlayEntering,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
AutoComplete.displayName = 'AutoComplete';
var AvatarBase = {
defaultProps: {
__TYPE: 'Avatar',
className: null,
icon: null,
image: null,
imageAlt: 'avatar',
imageFallback: 'default',
label: null,
onImageError: null,
shape: 'square',
size: 'normal',
style: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, AvatarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, AvatarBase.defaultProps);
}
};
var Avatar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = AvatarBase.getProps(inProps);
var elementRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
imageFailed = _React$useState2[0],
setImageFailed = _React$useState2[1];
var createContent = function createContent() {
if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
return /*#__PURE__*/React.createElement("img", {
src: props.image,
alt: props.imageAlt,
onError: onImageError
});
} else if (props.label) {
return /*#__PURE__*/React.createElement("span", {
className: "p-avatar-text"
}, props.label);
} else if (props.icon) {
return IconUtils.getJSXIcon(props.icon, {
className: 'p-avatar-icon'
}, {
props: props
});
}
return null;
};
var onImageError = function onImageError(event) {
if (props.imageFallback === 'default') {
if (!props.onImageError) {
// fallback to label or icon
setImageFailed(true);
event.target.src = null;
}
} else {
// try fallback as an image
event.target.src = props.imageFallback;
}
props.onImageError && props.onImageError(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = AvatarBase.getOtherProps(props);
var containerClassName = classNames('p-avatar p-component', {
'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !imageFailed,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
}, props.className);
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: containerClassName,
style: props.style
}, otherProps), content, props.children);
});
Avatar.displayName = 'Avatar';
var AvatarGroupBase = {
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, AvatarGroupBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, AvatarGroupBase.defaultProps);
}
};
var AvatarGroup = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = AvatarGroupBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = AvatarGroupBase.getOtherProps(props);
var className = classNames('p-avatar-group p-component', props.className);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps), props.children);
});
AvatarGroup.displayName = 'AvatarGroup';
var BadgeBase = {
defaultProps: {
__TYPE: 'Badge',
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, BadgeBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, BadgeBase.defaultProps);
}
};
var Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = BadgeBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = BadgeBase.getOtherProps(props);
var className = classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null), props.className);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps), props.value);
}));
Badge.displayName = 'Badge';
var BlockUIBase = {
defaultProps: {
__TYPE: 'BlockUI',
autoZIndex: true,
baseZIndex: 0,
blocked: false,
className: null,
containerClassName: null,
containerStyle: null,
fullScreen: false,
id: null,
onBlocked: null,
onUnblocked: null,
style: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, BlockUIBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, BlockUIBase.defaultProps);
}
};
var BlockUI = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = BlockUIBase.getProps(inProps);
var _React$useState = React.useState(props.blocked),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var elementRef = React.useRef(null);
var maskRef = React.useRef(null);
var block = function block() {
setVisibleState(true);
};
var unblock = function unblock() {
var callback = function callback() {
setVisibleState(false);
props.fullScreen && DomHandler.removeClass(document.body, 'p-overflow-hidden');
props.onUnblocked && props.onUnblocked();
};
if (maskRef.current) {
DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
maskRef.current.addEventListener('animationend', function () {
ZIndexUtils.clear(maskRef.current);
callback();
});
} else {
callback();
}
};
var onPortalMounted = function onPortalMounted() {
if (props.fullScreen) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur();
}
if (props.autoZIndex) {
var key = props.fullScreen ? 'modal' : 'overlay';
ZIndexUtils.set(key, maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex[key]);
}
props.onBlocked && props.onBlocked();
};
useMountEffect(function () {
visibleState && block();
});
useUpdateEffect(function () {
props.blocked ? block() : unblock();
}, [props.blocked]);
useUnmountEffect(function () {
if (props.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
block: block,
unblock: unblock,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createMask = function createMask() {
if (visibleState) {
var appendTo = props.fullScreen ? document.body : 'self';
var _className = classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
}, props.className);
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null;
var _mask = /*#__PURE__*/React.createElement("div", {
ref: maskRef,
className: _className,
style: props.style
}, content);
return /*#__PURE__*/React.createElement(Portal, {
element: _mask,
appendTo: appendTo,
onMounted: onPortalMounted
});
}
return null;
};
var otherProps = BlockUIBase.getOtherProps(props);
var mask = createMask();
var className = classNames('p-blockui-container', props.containerClassName);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.containerStyle
}, otherProps), props.children, mask);
});
BlockUI.displayName = 'BlockUI';
var BreadCrumbBase = {
defaultProps: {
__TYPE: 'BreadCrumb',
id: null,
model: null,
home: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, BreadCrumbBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, BreadCrumbBase.defaultProps);
}
};
var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = BreadCrumbBase.getProps(inProps);
var elementRef = React.useRef(null);
var itemClick = function itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
};
var createHome = function createHome() {
var home = props.home;
if (home) {
if (home.visible === false) {
return null;
}
var _icon = home.icon,
target = home.target,
url = home.url,
disabled = home.disabled,
style = home.style,
_className = home.className,
template = home.template;
var _className2 = classNames('p-breadcrumb-home', {
'p-disabled': disabled
}, _className);
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
className: "p-menuitem-link",
"aria-disabled": disabled,
target: target,
onClick: function onClick(event) {
return itemClick(event, home);
}
}, icon);
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, home);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
className: _className2,
style: style
}, content);
}
return null;
};
var createSeparator = function createSeparator() {
return /*#__PURE__*/React.createElement("li", {
className: "p-breadcrumb-chevron pi pi-chevron-right"
});
};
var createMenuitem = function createMenuitem(item) {
if (item.visible === false) {
return null;
}
var className = classNames(item.className, {
'p-disabled': item.disabled
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: "p-menuitem-link",
target: item.target,
onClick: function onClick(event) {
return itemClick(event, item);
},
"aria-disabled": item.disabled
}, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
className: className,
style: item.style
}, content);
};
var createMenuitems = function createMenuitems() {
if (props.model) {
var _items = props.model.map(function (item, index) {
if (item.visible === false) {
return null;
}
var menuitem = createMenuitem(item);
var separator = index === props.model.length - 1 ? null : createSeparator();
var key = item.label + '_' + index;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, menuitem, separator);
});
return _items;
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = BreadCrumbBase.getOtherProps(props);
var className = classNames('p-breadcrumb p-component', props.className);
var home = createHome();
var items = createMenuitems();
var separator = createSeparator();
return /*#__PURE__*/React.createElement("nav", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style,
"aria-label": "Breadcrumb"
}, otherProps), /*#__PURE__*/React.createElement("ul", null, home, separator, items));
}));
BreadCrumb.displayName = 'BreadCrumb';
var CalendarBase = {
defaultProps: {
__TYPE: 'Calendar',
appendTo: null,
ariaLabelledBy: null,
autoZIndex: true,
baseZIndex: 0,
className: null,
clearButtonClassName: 'p-button-secondary',
dateFormat: null,
dateTemplate: null,
decadeTemplate: null,
disabled: false,
disabledDates: null,
disabledDays: null,
footerTemplate: null,
formatDateTime: null,
headerTemplate: null,
hideOnDateTimeSelect: false,
hourFormat: '24',
icon: 'pi pi-calendar',
iconPos: 'right',
id: null,
inline: false,
inputClassName: null,
inputId: null,
inputMode: 'none',
inputRef: null,
inputStyle: null,
keepInvalid: false,
locale: null,
mask: null,
maxDate: null,
maxDateCount: null,
minDate: null,
monthNavigator: false,
monthNavigatorTemplate: null,
name: null,
numberOfMonths: 1,
onBlur: null,
onChange: null,
onClearButtonClick: null,
onFocus: null,
onHide: null,
onInput: null,
onMonthChange: null,
onSelect: null,
onShow: null,
onTodayButtonClick: null,
onViewDateChange: null,
onVisibleChange: null,
panelClassName: null,
panelStyle: null,
parseDateTime: null,
placeholder: null,
readOnlyInput: false,
required: false,
selectOtherMonths: false,
selectionMode: 'single',
shortYearCutoff: '+10',
showButtonBar: false,
showIcon: false,
showMillisec: false,
showMinMaxRange: false,
showOnFocus: true,
showOtherMonths: true,
showSeconds: false,
showTime: false,
showWeek: false,
stepHour: 1,
stepMillisec: 1,
stepMinute: 1,
stepSecond: 1,
style: null,
tabIndex: null,
timeOnly: false,
todayButtonClassName: 'p-button-secondary',
tooltip: null,
tooltipOptions: null,
touchUI: false,
transitionOptions: null,
value: null,
view: 'date',
viewDate: null,
visible: false,
yearNavigator: false,
yearNavigatorTemplate: null,
yearRange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CalendarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CalendarBase.defaultProps);
}
};
var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var createElement = function createElement() {
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: props.className,
style: props.style,
onClick: props.onClick,
onMouseUp: props.onMouseUp
}, props.children));
};
var element = createElement();
return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
CalendarPanel.displayName = 'CalendarPanel';
function _createForOfIteratorHelper$c(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$c(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$c(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$c(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$c(o, minLen); }
function _arrayLikeToArray$c(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames;
var props = CalendarBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
viewDateState = _React$useState6[0],
setViewDateState = _React$useState6[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var navigation = React.useRef(null);
var ignoreFocusFunctionality = React.useRef(false);
var isKeydown = React.useRef(false);
var timePickerTimer = React.useRef(null);
var viewStateChanged = React.useRef(false);
var touchUIMask = React.useRef(null);
var overlayEventListener = React.useRef(null);
var touchUIMaskClickListener = React.useRef(null);
var isOverlayClicked = React.useRef(false);
var ignoreMaskChange = React.useRef(false);
var _React$useState7 = React.useState('date'),
_React$useState8 = _slicedToArray(_React$useState7, 2),
currentView = _React$useState8[0],
setCurrentView = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
currentMonth = _React$useState10[0],
setCurrentMonth = _React$useState10[1];
var _React$useState11 = React.useState(null),
_React$useState12 = _slicedToArray(_React$useState11, 2),
currentYear = _React$useState12[0],
setCurrentYear = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
yearOptions = _React$useState14[0],
setYearOptions = _React$useState14[1];
var previousValue = usePrevious(props.value);
var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
var attributeSelector = UniqueComponentId();
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? !isOverlayClicked.current && !isNavIconClicked(event.target) && hide('outside') : hide();
}
isOverlayClicked.current = false;
},
when: !(props.touchUI || props.inline) && visible
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var getDateFormat = function getDateFormat() {
return props.dateFormat || localeOption('dateFormat', props.locale);
};
var onInputFocus = function onInputFocus(event) {
if (ignoreFocusFunctionality.current) {
setFocusedState(true);
ignoreFocusFunctionality.current = false;
} else {
if (props.showOnFocus && !visible) {
show();
}
setFocusedState(true);
props.onFocus && props.onFocus(event);
}
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
!props.keepInvalid && updateInputfield(props.value);
props.onBlur && props.onBlur(event);
};
var onInputKeyDown = function onInputKeyDown(event) {
isKeydown.current = true;
switch (event.which) {
//escape
case 27:
{
hide();
break;
}
//tab
case 9:
{
visible && trapFocus(event);
props.touchUI && disableModality();
break;
}
}
};
var onUserInput = function onUserInput(event) {
// IE 11 Workaround for input placeholder
if (!isKeydown.current) {
return;
}
isKeydown.current = false;
updateValueOnInput(event, event.target.value);
props.onInput && props.onInput(event);
};
var updateValueOnInput = function updateValueOnInput(event, rawValue) {
try {
var value = parseValueFromString(rawValue);
if (isValidSelection(value)) {
updateModel(event, value);
updateViewDate(event, value.length ? value[0] : value);
}
} catch (err) {
//invalid date
var _value = props.keepInvalid ? rawValue : null;
updateModel(event, _value);
}
};
var reFocusInputField = function reFocusInputField() {
if (!props.inline && inputRef.current) {
ignoreFocusFunctionality.current = true;
DomHandler.focus(inputRef.current);
}
};
var isValidSelection = function isValidSelection(value) {
var isValid = true;
if (isSingleSelection()) {
if (!(isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && isSelectableTime(value))) {
isValid = false;
}
} else if (value.every(function (v) {
return isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && isSelectableTime(v);
})) {
if (isRangeSelection()) {
isValid = value.length > 1 && value[1] > value[0] ? true : false;
}
}
return isValid;
};
var onButtonClick = function onButtonClick() {
visible ? hide() : show();
};
var onPrevButtonClick = function onPrevButtonClick(event) {
navigation.current = {
backward: true,
button: true
};
navBackward(event);
};
var onNextButtonClick = function onNextButtonClick(event) {
navigation.current = {
backward: false,
button: true
};
navForward(event);
};
var onContainerButtonKeydown = function onContainerButtonKeydown(event) {
switch (event.which) {
//tab
case 9:
trapFocus(event);
break;
//escape
case 27:
hide(null, reFocusInputField);
event.preventDefault();
break;
}
};
var trapFocus = function trapFocus(event) {
event.preventDefault();
var focusableElements = DomHandler.getFocusableElements(overlayRef.current);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
} else {
var focusedIndex = focusableElements.indexOf(document.activeElement);
if (event.shiftKey) {
if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();else focusableElements[focusedIndex - 1].focus();
} else {
if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();else focusableElements[focusedIndex + 1].focus();
}
}
}
};
var updateFocus = function updateFocus() {
if (navigation.current) {
if (navigation.current.button) {
initFocusableCell();
if (navigation.current.backward) DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();else DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
} else {
var cell;
if (navigation.current.backward) {
var cells = DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
cell = cells[cells.length - 1];
} else {
cell = DomHandler.findSingle(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
}
if (cell) {
cell.tabIndex = '0';
cell.focus();
}
}
navigation.current = null;
} else {
initFocusableCell();
}
};
var initFocusableCell = function initFocusableCell() {
var cell;
if (props.view === 'month') {
var cells = DomHandler.find(overlayRef.current, '.p-monthpicker .p-monthpicker-month');
var selectedCell = DomHandler.findSingle(overlayRef.current, '.p-monthpicker .p-monthpicker-month.p-highlight');
cells.forEach(function (cell) {
return cell.tabIndex = -1;
});
cell = selectedCell || cells[0];
} else {
cell = DomHandler.findSingle(overlayRef.current, 'span.p-highlight');
if (!cell) {
var todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
cell = todayCell || DomHandler.findSingle(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
}
}
if (cell) {
cell.tabIndex = '0';
}
};
var navBackward = function navBackward(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var newViewDate = new Date(getViewDate().getTime());
newViewDate.setDate(1);
if (currentView === 'date') {
if (newViewDate.getMonth() === 0) {
newViewDate.setMonth(11);
newViewDate.setFullYear(decrementYear());
setCurrentMonth(11);
} else {
newViewDate.setMonth(newViewDate.getMonth() - 1);
setCurrentMonth(function (prevState) {
return prevState - 1;
});
}
} else if (currentView === 'month') {
var newYear = newViewDate.getFullYear() - 1;
if (props.yearNavigator) {
var minYear = parseInt(props.yearRange.split(':')[0], 10);
if (newYear < minYear) {
newYear = minYear;
}
}
newViewDate.setFullYear(newYear);
}
if (currentView === 'month') {
newViewDate.setFullYear(decrementYear());
} else if (currentView === 'year') {
newViewDate.setFullYear(decrementDecade());
}
updateViewDate(event, newViewDate);
event.preventDefault();
};
var navForward = function navForward(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var newViewDate = new Date(getViewDate().getTime());
newViewDate.setDate(1);
if (currentView === 'date') {
if (newViewDate.getMonth() === 11) {
newViewDate.setMonth(0);
newViewDate.setFullYear(incrementYear());
setCurrentMonth(0);
} else {
newViewDate.setMonth(newViewDate.getMonth() + 1);
setCurrentMonth(function (prevState) {
return prevState + 1;
});
}
} else if (currentView === 'month') {
var newYear = newViewDate.getFullYear() + 1;
if (props.yearNavigator) {
var maxYear = parseInt(props.yearRange.split(':')[1], 10);
if (newYear > maxYear) {
newYear = maxYear;
}
}
newViewDate.setFullYear(newYear);
}
if (currentView === 'month') {
newViewDate.setFullYear(incrementYear());
} else if (currentView === 'year') {
newViewDate.setFullYear(incrementDecade());
}
updateViewDate(event, newViewDate);
event.preventDefault();
};
var populateYearOptions = function populateYearOptions(start, end) {
var _yearOptions = [];
for (var i = start; i <= end; i++) {
yearOptions.push(i);
}
setYearOptions(_yearOptions);
};
var decrementYear = function decrementYear() {
var _currentYear = currentYear - 1;
setCurrentYear(_currentYear);
if (props.yearNavigator && _currentYear < yearOptions[0]) {
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
}
return _currentYear;
};
var incrementYear = function incrementYear() {
var _currentYear = currentYear + 1;
setCurrentYear(_currentYear);
if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
}
return _currentYear;
};
var onMonthDropdownChange = function onMonthDropdownChange(event, value) {
var currentViewDate = getViewDate();
var newViewDate = new Date(currentViewDate.getTime());
newViewDate.setMonth(parseInt(value, 10));
updateViewDate(event, newViewDate);
};
var onYearDropdownChange = function onYearDropdownChange(event, value) {
var currentViewDate = getViewDate();
var newViewDate = new Date(currentViewDate.getTime());
newViewDate.setFullYear(parseInt(value, 10));
updateViewDate(event, newViewDate);
};
var onTodayButtonClick = function onTodayButtonClick(event) {
var today = new Date();
var dateMeta = {
day: today.getDate(),
month: today.getMonth(),
year: today.getFullYear(),
today: true,
selectable: true
};
var timeMeta = {
hours: today.getHours(),
minutes: today.getMinutes(),
seconds: today.getSeconds(),
milliseconds: today.getMilliseconds()
};
updateViewDate(event, today);
onDateSelect(event, dateMeta, timeMeta);
props.onTodayButtonClick && props.onTodayButtonClick(event);
};
var onClearButtonClick = function onClearButtonClick(event) {
updateModel(event, null);
updateInputfield(null);
hide();
props.onClearButtonClick && props.onClearButtonClick(event);
};
var onPanelClick = function onPanelClick(event) {
if (!props.inline) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var onPanelMouseUp = function onPanelMouseUp(event) {
onPanelClick(event);
};
var onTimePickerElementMouseDown = function onTimePickerElementMouseDown(event, type, direction) {
if (!props.disabled) {
repeat(event, null, type, direction);
event.preventDefault();
}
};
var onTimePickerElementMouseUp = function onTimePickerElementMouseUp() {
if (!props.disabled) {
clearTimePickerTimer();
}
};
var onTimePickerElementMouseLeave = function onTimePickerElementMouseLeave() {
if (!props.disabled) {
clearTimePickerTimer();
}
};
var repeat = function repeat(event, interval, type, direction) {
clearTimePickerTimer();
timePickerTimer.current = setTimeout(function () {
repeat(event, 100, type, direction);
}, interval || 500);
switch (type) {
case 0:
if (direction === 1) incrementHour(event);else decrementHour(event);
break;
case 1:
if (direction === 1) incrementMinute(event);else decrementMinute(event);
break;
case 2:
if (direction === 1) incrementSecond(event);else decrementSecond(event);
break;
case 3:
if (direction === 1) incrementMilliSecond(event);else decrementMilliSecond(event);
break;
}
};
var clearTimePickerTimer = function clearTimePickerTimer() {
if (timePickerTimer.current) {
clearTimeout(timePickerTimer.current);
}
};
var incrementHour = function incrementHour(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour + props.stepHour;
newHour = newHour >= 24 ? newHour - 24 : newHour;
if (validateHour(newHour, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getHours() === newHour) {
if (props.maxDate.getMinutes() < currentTime.getMinutes()) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else if (props.maxDate.getMinutes() === currentTime.getMinutes()) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementHour = function decrementHour(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour - props.stepHour;
newHour = newHour < 0 ? newHour + 24 : newHour;
if (validateHour(newHour, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getHours() === newHour) {
if (props.minDate.getMinutes() > currentTime.getMinutes()) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else if (props.minDate.getMinutes() === currentTime.getMinutes()) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var doStepMinute = function doStepMinute(currentMinute, step) {
if (props.stepMinute <= 1) {
return step ? currentMinute + step : currentMinute;
}
if (!step) {
step = props.stepMinute;
if (currentMinute % step === 0) {
return currentMinute;
}
}
return Math.floor((currentMinute + step) / step) * step;
};
var incrementMinute = function incrementMinute(event) {
var currentTime = getCurrentDateTime();
var currentMinute = currentTime.getMinutes();
var newMinute = doStepMinute(currentMinute, props.stepMinute);
newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
if (validateMinute(newMinute, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getMinutes() === newMinute) {
if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementMinute = function decrementMinute(event) {
var currentTime = getCurrentDateTime();
var currentMinute = currentTime.getMinutes();
var newMinute = doStepMinute(currentMinute, -props.stepMinute);
newMinute = newMinute < 0 ? newMinute + 60 : newMinute;
if (validateMinute(newMinute, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getMinutes() === newMinute) {
if (props.minDate.getSeconds() > currentTime.getSeconds()) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), props.minDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var incrementSecond = function incrementSecond(event) {
var currentTime = getCurrentDateTime();
var currentSecond = currentTime.getSeconds();
var newSecond = currentSecond + props.stepSecond;
newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
if (validateSecond(newSecond, currentTime)) {
if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getSeconds() === newSecond) {
if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.maxDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var decrementSecond = function decrementSecond(event) {
var currentTime = getCurrentDateTime();
var currentSecond = currentTime.getSeconds();
var newSecond = currentSecond - props.stepSecond;
newSecond = newSecond < 0 ? newSecond + 60 : newSecond;
if (validateSecond(newSecond, currentTime)) {
if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getSeconds() === newSecond) {
if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.minDate.getMilliseconds());
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
} else {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
}
}
event.preventDefault();
};
var incrementMilliSecond = function incrementMilliSecond(event) {
var currentTime = getCurrentDateTime();
var currentMillisecond = currentTime.getMilliseconds();
var newMillisecond = currentMillisecond + props.stepMillisec;
newMillisecond = newMillisecond > 999 ? newMillisecond - 1000 : newMillisecond;
if (validateMillisecond(newMillisecond, currentTime)) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
}
event.preventDefault();
};
var decrementMilliSecond = function decrementMilliSecond(event) {
var currentTime = getCurrentDateTime();
var currentMillisecond = currentTime.getMilliseconds();
var newMillisecond = currentMillisecond - props.stepMillisec;
newMillisecond = newMillisecond < 0 ? newMillisecond + 999 : newMillisecond;
if (validateMillisecond(newMillisecond, currentTime)) {
updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
}
event.preventDefault();
};
var toggleAmPm = function toggleAmPm(event) {
var currentTime = getCurrentDateTime();
var currentHour = currentTime.getHours();
var newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
if (validateHour(convertTo24Hour(newHour, !(currentHour > 11)), currentTime)) {
updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
}
event.preventDefault();
};
var getViewDate = function getViewDate(date) {
var propValue = props.value;
var viewDate = date || (props.onViewDateChange ? props.viewDate : viewDateState);
if (Array.isArray(propValue)) {
propValue = propValue[0];
}
return viewDate && isValidDate(viewDate) ? viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
};
var getCurrentDateTime = function getCurrentDateTime() {
if (isSingleSelection()) {
return props.value && props.value instanceof Date ? props.value : getViewDate();
} else if (isMultipleSelection()) {
if (props.value && props.value.length) {
return props.value[props.value.length - 1];
}
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = props.value[0];
var endDate = props.value[1];
return endDate || startDate;
}
}
return new Date();
};
var isValidDate = function isValidDate(date) {
return date instanceof Date && !isNaN(date);
};
var convertTo24Hour = function convertTo24Hour(hour, pm) {
if (props.hourFormat == '12') {
return hour === 12 ? pm ? 12 : 0 : pm ? hour + 12 : hour;
}
return hour;
};
var validateHour = function validateHour(hour, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (props.minDate.getHours() > hour) {
valid = false;
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (props.maxDate.getHours() < hour) {
valid = false;
}
}
return valid;
};
var validateMinute = function validateMinute(minute, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours()) {
if (props.minDate.getMinutes() > minute) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours()) {
if (props.maxDate.getMinutes() < minute) {
valid = false;
}
}
}
return valid;
};
var validateSecond = function validateSecond(second, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours() && value.getMinutes() === props.minDate.getMinutes()) {
if (props.minDate.getSeconds() > second) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours() && value.getMinutes() === props.maxDate.getMinutes()) {
if (props.maxDate.getSeconds() < second) {
valid = false;
}
}
}
return valid;
};
var validateMillisecond = function validateMillisecond(millisecond, value) {
var valid = true;
var valueDateString = value ? value.toDateString() : null;
if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
if (value.getHours() === props.minDate.getHours() && value.getSeconds() === props.minDate.getSeconds() && value.getMinutes() === props.minDate.getMinutes()) {
if (props.minDate.getMilliseconds() > millisecond) {
valid = false;
}
}
}
if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
if (value.getHours() === props.maxDate.getHours() && value.getSeconds() === props.maxDate.getSeconds() && value.getMinutes() === props.maxDate.getMinutes()) {
if (props.maxDate.getMilliseconds() < millisecond) {
valid = false;
}
}
}
return valid;
};
var validateDate = function validateDate(value) {
if (props.yearNavigator) {
var viewYear = value.getFullYear();
var minRangeYear = props.yearRange ? parseInt(props.yearRange.split(':')[0], 10) : null;
var maxRangeYear = props.yearRange ? parseInt(props.yearRange.split(':')[1], 10) : null;
var minYear = props.minDate && minRangeYear != null ? Math.max(props.minDate.getFullYear(), minRangeYear) : props.minDate || minRangeYear;
var maxYear = props.maxDate && maxRangeYear != null ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : props.maxDate || maxRangeYear;
if (minYear && minYear > viewYear) {
viewYear = minYear;
}
if (maxYear && maxYear < viewYear) {
viewYear = maxYear;
}
value.setFullYear(viewYear);
}
if (props.monthNavigator && props.view !== 'month') {
var viewMonth = value.getMonth();
var viewMonthWithMinMax = parseInt(isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString() || isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString() || viewMonth);
value.setMonth(viewMonthWithMinMax);
}
};
var updateTime = function updateTime(event, hour, minute, second, millisecond) {
var newDateTime = getCurrentDateTime();
newDateTime.setHours(hour);
newDateTime.setMinutes(minute);
newDateTime.setSeconds(second);
newDateTime.setMilliseconds(millisecond);
if (isMultipleSelection()) {
if (props.value && props.value.length) {
var value = _toConsumableArray(props.value);
value[value.length - 1] = newDateTime;
newDateTime = value;
} else {
newDateTime = [newDateTime];
}
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = props.value[0];
var endDate = props.value[1];
newDateTime = endDate ? [startDate, newDateTime] : [newDateTime, null];
} else {
newDateTime = [newDateTime, null];
}
}
updateModel(event, newDateTime);
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: newDateTime
});
}
updateInputfield(newDateTime);
};
var updateViewDate = function updateViewDate(event, value) {
validateDate(value);
if (props.onViewDateChange) {
props.onViewDateChange({
originalEvent: event,
value: value
});
} else {
viewStateChanged.current = true;
setViewDateState(value);
}
setCurrentMonth(value.getMonth());
setCurrentYear(value.getFullYear());
};
var setNavigationState = function setNavigationState(newViewDate) {
if (!props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
return;
}
var navPrev = DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev');
var navNext = DomHandler.findSingle(overlayRef.current, '.p-datepicker-next');
if (props.disabled) {
DomHandler.addClass(navPrev, 'p-disabled');
DomHandler.addClass(navNext, 'p-disabled');
return;
}
// previous (check first day of month at 00:00:00)
if (props.minDate) {
var firstDayOfMonth = new Date(newViewDate.getTime());
if (firstDayOfMonth.getMonth() === 0) {
firstDayOfMonth.setMonth(11, 1);
firstDayOfMonth.setFullYear(firstDayOfMonth.getFullYear() - 1);
} else {
firstDayOfMonth.setMonth(firstDayOfMonth.getMonth() - 1, 1);
}
firstDayOfMonth.setHours(0);
firstDayOfMonth.setMinutes(0);
firstDayOfMonth.setSeconds(0);
if (props.minDate > firstDayOfMonth) {
DomHandler.addClass(navPrev, 'p-disabled');
} else {
DomHandler.removeClass(navPrev, 'p-disabled');
}
}
// next (check last day of month at 11:59:59)
if (props.maxDate) {
var lastDayOfMonth = new Date(newViewDate.getTime());
if (lastDayOfMonth.getMonth() === 11) {
lastDayOfMonth.setMonth(0, 1);
lastDayOfMonth.setFullYear(lastDayOfMonth.getFullYear() + 1);
} else {
lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1, 1);
}
lastDayOfMonth.setHours(0);
lastDayOfMonth.setMinutes(0);
lastDayOfMonth.setSeconds(0);
lastDayOfMonth.setSeconds(-1);
if (props.maxDate < lastDayOfMonth) {
DomHandler.addClass(navNext, 'p-disabled');
} else {
DomHandler.removeClass(navNext, 'p-disabled');
}
}
};
var onDateCellKeydown = function onDateCellKeydown(event, date, groupIndex) {
var cellContent = event.currentTarget;
var cell = cellContent.parentElement;
switch (event.which) {
//down arrow
case 40:
{
cellContent.tabIndex = '-1';
var cellIndex = DomHandler.index(cell);
var nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
var focusCell = nextRow.children[cellIndex].children[0];
if (DomHandler.hasClass(focusCell, 'p-disabled')) {
navigation.current = {
backward: false
};
navForward(event);
} else {
nextRow.children[cellIndex].children[0].tabIndex = '0';
nextRow.children[cellIndex].children[0].focus();
}
} else {
navigation.current = {
backward: false
};
navForward(event);
}
event.preventDefault();
break;
}
//up arrow
case 38:
{
cellContent.tabIndex = '-1';
var _cellIndex = DomHandler.index(cell);
var prevRow = cell.parentElement.previousElementSibling;
if (prevRow) {
var _focusCell = prevRow.children[_cellIndex].children[0];
if (DomHandler.hasClass(_focusCell, 'p-disabled')) {
navigation.current = {
backward: true
};
navBackward(event);
} else {
_focusCell.tabIndex = '0';
_focusCell.focus();
}
} else {
navigation.current = {
backward: true
};
navBackward(event);
}
event.preventDefault();
break;
}
//left arrow
case 37:
{
cellContent.tabIndex = '-1';
var prevCell = cell.previousElementSibling;
if (prevCell) {
var _focusCell2 = prevCell.children[0];
if (DomHandler.hasClass(_focusCell2, 'p-disabled')) {
navigateToMonth(true, groupIndex, event);
} else {
_focusCell2.tabIndex = '0';
_focusCell2.focus();
}
} else {
navigateToMonth(true, groupIndex, event);
}
event.preventDefault();
break;
}
//right arrow
case 39:
{
cellContent.tabIndex = '-1';
var nextCell = cell.nextElementSibling;
if (nextCell) {
var _focusCell3 = nextCell.children[0];
if (DomHandler.hasClass(_focusCell3, 'p-disabled')) {
navigateToMonth(false, groupIndex, event);
} else {
_focusCell3.tabIndex = '0';
_focusCell3.focus();
}
} else {
navigateToMonth(false, groupIndex, event);
}
event.preventDefault();
break;
}
//enter
case 13:
{
onDateSelect(event, date);
event.preventDefault();
break;
}
//escape
case 27:
{
hide(null, reFocusInputField);
event.preventDefault();
break;
}
//tab
case 9:
{
trapFocus(event);
break;
}
}
};
var navigateToMonth = function navigateToMonth(prev, groupIndex, event) {
if (prev) {
if (props.numberOfMonths === 1 || groupIndex === 0) {
navigation.current = {
backward: true
};
navBackward(event);
} else {
var prevMonthContainer = overlayRef.current.children[groupIndex - 1];
var cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
var focusCell = cells[cells.length - 1];
focusCell.tabIndex = '0';
focusCell.focus();
}
} else {
if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
navigation.current = {
backward: false
};
navForward(event);
} else {
var nextMonthContainer = overlayRef.current.children[groupIndex + 1];
var _focusCell4 = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
_focusCell4.tabIndex = '0';
_focusCell4.focus();
}
}
};
var onDateSelect = function onDateSelect(event, dateMeta, timeMeta) {
if (props.disabled || !dateMeta.selectable) {
event.preventDefault();
return;
}
DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(function (cell) {
return cell.tabIndex = -1;
});
event.currentTarget.focus();
if (isMultipleSelection()) {
if (isSelected(dateMeta)) {
var value = props.value.filter(function (date, i) {
return !isDateEquals(date, dateMeta);
});
updateModel(event, value);
updateInputfield(value);
} else if (!props.maxDateCount || !props.value || props.maxDateCount > props.value.length) {
selectDate(event, dateMeta, timeMeta);
}
} else {
selectDate(event, dateMeta, timeMeta);
}
if (!props.inline && isSingleSelection() && (!props.showTime || props.hideOnDateTimeSelect)) {
setTimeout(function () {
hide('dateselect');
}, 100);
if (touchUIMask.current) {
disableModality();
}
}
event.preventDefault();
};
var selectTime = function selectTime(date, timeMeta) {
if (props.showTime) {
var hours, minutes, seconds, milliseconds;
if (timeMeta) {
hours = timeMeta.hours;
minutes = timeMeta.minutes;
seconds = timeMeta.seconds;
milliseconds = timeMeta.milliseconds;
} else {
var time = getCurrentDateTime();
var _ref2 = [time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()];
hours = _ref2[0];
minutes = _ref2[1];
seconds = _ref2[2];
milliseconds = _ref2[3];
}
date.setHours(hours);
date.setMinutes(minutes);
date.setSeconds(seconds);
date.setMilliseconds(milliseconds);
}
};
var selectDate = function selectDate(event, dateMeta, timeMeta) {
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
selectTime(date, timeMeta);
if (props.minDate && props.minDate > date) {
date = props.minDate;
}
if (props.maxDate && props.maxDate < date) {
date = props.maxDate;
}
var selectedValues = date;
if (isSingleSelection()) {
updateModel(event, date);
} else if (isMultipleSelection()) {
selectedValues = props.value ? [].concat(_toConsumableArray(props.value), [date]) : [date];
updateModel(event, selectedValues);
} else if (isRangeSelection()) {
if (props.value && props.value.length) {
var startDate = props.value[0];
var endDate = props.value[1];
if (!endDate) {
if (date.getTime() >= startDate.getTime()) {
endDate = date;
} else {
endDate = startDate;
startDate = date;
}
} else {
startDate = date;
endDate = null;
}
selectedValues = [startDate, endDate];
updateModel(event, selectedValues);
} else {
selectedValues = [date, null];
updateModel(event, selectedValues);
}
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
value: date
});
}
updateInputfield(selectedValues);
};
var decrementDecade = function decrementDecade() {
var _currentYear = currentYear - 10;
setCurrentYear(_currentYear);
return _currentYear;
};
var incrementDecade = function incrementDecade() {
var _currentYear = currentYear + 10;
setCurrentYear(_currentYear);
return _currentYear;
};
var switchToMonthView = function switchToMonthView(event) {
setCurrentView('month');
event.preventDefault();
};
var switchToYearView = function switchToYearView(event) {
setCurrentView('year');
event.preventDefault();
};
var onMonthSelect = function onMonthSelect(event, month) {
if (props.view === 'month') {
onDateSelect(event, {
year: currentYear,
month: month,
day: 1,
selectable: true
});
event.preventDefault();
} else {
setCurrentMonth(month);
createMonthsMeta(month, currentYear);
var currentDate = new Date(getCurrentDateTime().getTime());
currentDate.setDate(1); // #2948 always set to 1st of month
currentDate.setMonth(month);
currentDate.setYear(currentYear);
setViewDateState(currentDate);
setCurrentView('date');
props.onMonthChange && props.onMonthChange({
month: month + 1,
year: currentYear
});
}
};
var onYearSelect = function onYearSelect(event, year) {
if (props.view === 'year') {
onDateSelect(event, {
year: year,
month: 0,
day: 1,
selectable: true
});
} else {
setCurrentYear(year);
setCurrentView('month');
props.onMonthChange && props.onMonthChange({
month: currentMonth + 1,
year: year
});
}
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
var newValue = value && value instanceof Date ? new Date(value.getTime()) : value;
viewStateChanged.current = true;
props.onChange({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var show = function show(type) {
if (props.onVisibleChange) {
props.onVisibleChange({
visible: true,
type: type
});
} else {
setOverlayVisibleState(true);
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e)) {
isOverlayClicked.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var hide = function hide(type, callback) {
var _hideCallback = function _hideCallback() {
viewStateChanged.current = false;
ignoreFocusFunctionality.current = false;
isOverlayClicked.current = false;
callback && callback();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
};
props.touchUI && disableModality();
if (props.onVisibleChange) {
props.onVisibleChange({
visible: false,
type: type,
callback: _hideCallback
});
} else {
setOverlayVisibleState(false);
_hideCallback();
}
};
var onOverlayEnter = function onOverlayEnter() {
if (props.autoZIndex) {
var key = props.touchUI ? 'modal' : 'overlay';
ZIndexUtils.set(key, overlayRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex[key]);
}
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var appendDisabled = function appendDisabled() {
return props.appendTo === 'self' || props.inline;
};
var alignOverlay = function alignOverlay() {
if (props.touchUI) {
enableModality();
} else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact.appendTo);
if (appendDisabled()) {
DomHandler.relativePosition(overlayRef.current, inputRef.current);
} else {
if (currentView === 'date') {
overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
overlayRef.current.style.minWidth = DomHandler.getOuterWidth(inputRef.current) + 'px';
} else {
overlayRef.current.style.width = DomHandler.getOuterWidth(inputRef.current) + 'px';
}
DomHandler.absolutePosition(overlayRef.current, inputRef.current);
}
}
};
var enableModality = function enableModality() {
if (!touchUIMask.current) {
touchUIMask.current = document.createElement('div');
touchUIMask.current.style.zIndex = String(ZIndexUtils.get(overlayRef.current) - 1);
DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
touchUIMaskClickListener.current = function () {
disableModality();
hide();
};
touchUIMask.current.addEventListener('click', touchUIMaskClickListener.current);
document.body.appendChild(touchUIMask.current);
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
};
var disableModality = function disableModality() {
if (touchUIMask.current) {
DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
touchUIMask.current.addEventListener('animationend', function () {
destroyMask();
});
}
};
var destroyMask = function destroyMask() {
if (touchUIMask.current) {
touchUIMask.current.removeEventListener('click', touchUIMaskClickListener.current);
touchUIMaskClickListener.current = null;
document.body.removeChild(touchUIMask.current);
touchUIMask.current = null;
}
var bodyChildren = document.body.children;
var hasBlockerMasks;
for (var i = 0; i < bodyChildren.length; i++) {
var bodyChild = bodyChildren[i];
if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
hasBlockerMasks = true;
break;
}
}
if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || isNavIconClicked(event.target) || elementRef.current.contains(event.target) || overlayRef.current && overlayRef.current.contains(event.target));
};
var isNavIconClicked = function isNavIconClicked(target) {
return DomHandler.hasClass(target, 'p-datepicker-prev') || DomHandler.hasClass(target, 'p-datepicker-prev-icon') || DomHandler.hasClass(target, 'p-datepicker-next') || DomHandler.hasClass(target, 'p-datepicker-next-icon');
};
var getFirstDayOfMonthIndex = function getFirstDayOfMonthIndex(month, year) {
var day = new Date();
day.setDate(1);
day.setMonth(month);
day.setFullYear(year);
var dayIndex = day.getDay() + getSundayIndex();
return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
};
var getDaysCountInMonth = function getDaysCountInMonth(month, year) {
return 32 - daylightSavingAdjust(new Date(year, month, 32)).getDate();
};
var getDaysCountInPrevMonth = function getDaysCountInPrevMonth(month, year) {
var prev = getPreviousMonthAndYear(month, year);
return getDaysCountInMonth(prev.month, prev.year);
};
var daylightSavingAdjust = function daylightSavingAdjust(date) {
if (!date) {
return null;
}
date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
return date;
};
var getPreviousMonthAndYear = function getPreviousMonthAndYear(month, year) {
var m, y;
if (month === 0) {
m = 11;
y = year - 1;
} else {
m = month - 1;
y = year;
}
return {
month: m,
year: y
};
};
var getNextMonthAndYear = function getNextMonthAndYear(month, year) {
var m, y;
if (month === 11) {
m = 0;
y = year + 1;
} else {
m = month + 1;
y = year;
}
return {
month: m,
year: y
};
};
var getSundayIndex = function getSundayIndex() {
var firstDayOfWeek = localeOption('firstDayOfWeek', props.locale);
return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
};
var createWeekDaysMeta = function createWeekDaysMeta() {
var weekDays = [];
var _localeOptions = localeOptions(props.locale),
dayIndex = _localeOptions.firstDayOfWeek,
dayNamesMin = _localeOptions.dayNamesMin;
for (var i = 0; i < 7; i++) {
weekDays.push(dayNamesMin[dayIndex]);
dayIndex = dayIndex === 6 ? 0 : ++dayIndex;
}
return weekDays;
};
var createMonthsMeta = function createMonthsMeta(month, year) {
var months = [];
for (var i = 0; i < props.numberOfMonths; i++) {
var m = month + i;
var y = year;
if (m > 11) {
m = m % 11 - 1;
y = year + 1;
}
months.push(createMonthMeta(m, y));
}
return months;
};
var createMonthMeta = function createMonthMeta(month, year) {
var dates = [];
var firstDay = getFirstDayOfMonthIndex(month, year);
var daysLength = getDaysCountInMonth(month, year);
var prevMonthDaysLength = getDaysCountInPrevMonth(month, year);
var dayNo = 1;
var today = new Date();
var weekNumbers = [];
var monthRows = Math.ceil((daysLength + firstDay) / 7);
for (var i = 0; i < monthRows; i++) {
var week = [];
if (i === 0) {
for (var j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
var prev = getPreviousMonthAndYear(month, year);
week.push({
day: j,
month: prev.month,
year: prev.year,
otherMonth: true,
today: isToday(today, j, prev.month, prev.year),
selectable: isSelectable(j, prev.month, prev.year, true)
});
}
var remainingDaysLength = 7 - week.length;
for (var _j = 0; _j < remainingDaysLength; _j++) {
week.push({
day: dayNo,
month: month,
year: year,
today: isToday(today, dayNo, month, year),
selectable: isSelectable(dayNo, month, year, false)
});
dayNo++;
}
} else {
for (var _j2 = 0; _j2 < 7; _j2++) {
if (dayNo > daysLength) {
var next = getNextMonthAndYear(month, year);
week.push({
day: dayNo - daysLength,
month: next.month,
year: next.year,
otherMonth: true,
today: isToday(today, dayNo - daysLength, next.month, next.year),
selectable: isSelectable(dayNo - daysLength, next.month, next.year, true)
});
} else {
week.push({
day: dayNo,
month: month,
year: year,
today: isToday(today, dayNo, month, year),
selectable: isSelectable(dayNo, month, year, false)
});
}
dayNo++;
}
}
if (props.showWeek) {
weekNumbers.push(getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
}
dates.push(week);
}
return {
month: month,
year: year,
dates: dates,
weekNumbers: weekNumbers
};
};
var getWeekNumber = function getWeekNumber(date) {
var checkDate = new Date(date.getTime());
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
var time = checkDate.getTime();
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
};
var isSelectable = function isSelectable(day, month, year, otherMonth) {
var validMin = true;
var validMax = true;
var validDate = true;
var validDay = true;
var validMonth = true;
if (props.minDate) {
if (props.minDate.getFullYear() > year) {
validMin = false;
} else if (props.minDate.getFullYear() === year) {
if (props.minDate.getMonth() > month) {
validMin = false;
} else if (props.minDate.getMonth() === month) {
if (day > 0 && props.minDate.getDate() > day) {
validMin = false;
}
}
}
}
if (props.maxDate) {
if (props.maxDate.getFullYear() < year) {
validMax = false;
} else if (props.maxDate.getFullYear() === year) {
if (props.maxDate.getMonth() < month) {
validMax = false;
} else if (props.maxDate.getMonth() === month) {
if (day > 0 && props.maxDate.getDate() < day) {
validMax = false;
}
}
}
}
if (props.disabledDates) {
validDate = !isDateDisabled(day, month, year);
}
if (props.disabledDays) {
validDay = !isDayDisabled(day, month, year);
}
if (props.selectOtherMonths === false && otherMonth) {
validMonth = false;
}
return validMin && validMax && validDate && validDay && validMonth;
};
var isSelectableTime = function isSelectableTime(value) {
var validMin = true;
var validMax = true;
if (props.minDate && props.minDate.toDateString() === value.toDateString()) {
if (props.minDate.getHours() > value.getHours()) {
validMin = false;
} else if (props.minDate.getHours() === value.getHours()) {
if (props.minDate.getMinutes() > value.getMinutes()) {
validMin = false;
} else if (props.minDate.getMinutes() === value.getMinutes()) {
if (props.minDate.getSeconds() > value.getSeconds()) {
validMin = false;
} else if (props.minDate.getSeconds() === value.getSeconds()) {
if (props.minDate.getMilliseconds() > value.getMilliseconds()) {
validMin = false;
}
}
}
}
}
if (props.maxDate && props.maxDate.toDateString() === value.toDateString()) {
if (props.maxDate.getHours() < value.getHours()) {
validMax = false;
} else if (props.maxDate.getHours() === value.getHours()) {
if (props.maxDate.getMinutes() < value.getMinutes()) {
validMax = false;
} else if (props.maxDate.getMinutes() === value.getMinutes()) {
if (props.maxDate.getSeconds() < value.getSeconds()) {
validMax = false;
} else if (props.maxDate.getSeconds() === value.getSeconds()) {
if (props.maxDate.getMilliseconds() < value.getMilliseconds()) {
validMax = false;
}
}
}
}
}
return validMin && validMax;
};
var isSelected = function isSelected(dateMeta) {
if (props.value) {
if (isSingleSelection()) {
return isDateEquals(props.value, dateMeta);
} else if (isMultipleSelection()) {
var selected = false;
var _iterator = _createForOfIteratorHelper$c(props.value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var date = _step.value;
selected = isDateEquals(date, dateMeta);
if (selected) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return selected;
} else if (isRangeSelection()) {
if (props.value[1]) return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);else {
return isDateEquals(props.value[0], dateMeta);
}
}
} else {
return false;
}
};
var isComparable = function isComparable() {
return props.value != null && typeof props.value !== 'string';
};
var isMonthSelected = function isMonthSelected(month) {
if (isComparable()) {
var value = isRangeSelection() ? props.value[0] : props.value;
return !isMultipleSelection() ? value.getMonth() === month && value.getFullYear() === currentYear : false;
}
return false;
};
var isYearSelected = function isYearSelected(year) {
if (isComparable()) {
var value = isRangeSelection() ? props.value[0] : props.value;
return !isMultipleSelection() && isComparable() ? value.getFullYear() === year : false;
}
return false;
};
var switchViewButtonDisabled = function switchViewButtonDisabled() {
return props.numberOfMonths > 1 || props.disabled;
};
var isDateEquals = function isDateEquals(value, dateMeta) {
if (value && value instanceof Date) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;else return false;
};
var isDateBetween = function isDateBetween(start, end, dateMeta) {
var between = false;
if (start && end) {
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
}
return between;
};
var isSingleSelection = function isSingleSelection() {
return props.selectionMode === 'single';
};
var isRangeSelection = function isRangeSelection() {
return props.selectionMode === 'range';
};
var isMultipleSelection = function isMultipleSelection() {
return props.selectionMode === 'multiple';
};
var isToday = function isToday(today, day, month, year) {
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
};
var isDateDisabled = function isDateDisabled(day, month, year) {
return props.disabledDates ? props.disabledDates.some(function (d) {
return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
}) : false;
};
var isDayDisabled = function isDayDisabled(day, month, year) {
if (props.disabledDays) {
var weekday = new Date(year, month, day);
var weekdayNumber = weekday.getDay();
return props.disabledDays.indexOf(weekdayNumber) !== -1;
}
return false;
};
var updateInputfield = function updateInputfield(value) {
if (!inputRef.current) {
return;
}
var formattedValue = '';
if (value) {
try {
if (isSingleSelection()) {
formattedValue = isValidDate(value) ? formatDateTime(value) : props.keepInvalid ? value : '';
} else if (isMultipleSelection()) {
for (var i = 0; i < value.length; i++) {
var selectedValue = value[i];
var dateAsString = isValidDate(selectedValue) ? formatDateTime(selectedValue) : '';
formattedValue += dateAsString;
if (i !== value.length - 1) {
formattedValue += ', ';
}
}
} else if (isRangeSelection()) {
if (value && value.length) {
var startDate = value[0];
var endDate = value[1];
formattedValue = isValidDate(startDate) ? formatDateTime(startDate) : '';
if (endDate) {
formattedValue += isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '';
}
}
}
} catch (err) {
formattedValue = value;
}
}
inputRef.current.value = formattedValue;
};
var formatDateTime = function formatDateTime(date) {
if (props.formatDateTime) {
return props.formatDateTime(date);
}
var formattedValue = null;
if (date) {
if (props.timeOnly) {
formattedValue = formatTime(date);
} else {
formattedValue = formatDate(date, getDateFormat());
if (props.showTime) {
formattedValue += ' ' + formatTime(date);
}
}
}
return formattedValue;
};
var formatDate = function formatDate(date, format) {
if (!date) {
return '';
}
var iFormat;
var lookAhead = function lookAhead(match) {
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
if (matches) {
iFormat++;
}
return matches;
},
formatNumber = function formatNumber(match, value, len) {
var num = '' + value;
if (lookAhead(match)) {
while (num.length < len) {
num = '0' + num;
}
}
return num;
},
formatName = function formatName(match, value, shortNames, longNames) {
return lookAhead(match) ? longNames[value] : shortNames[value];
};
var output = '';
var literal = false;
var _localeOptions2 = localeOptions(props.locale),
dayNamesShort = _localeOptions2.dayNamesShort,
dayNames = _localeOptions2.dayNames,
monthNamesShort = _localeOptions2.monthNamesShort,
monthNames = _localeOptions2.monthNames;
if (date) {
for (iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
literal = false;
} else {
output += format.charAt(iFormat);
}
} else {
switch (format.charAt(iFormat)) {
case 'd':
output += formatNumber('d', date.getDate(), 2);
break;
case 'D':
output += formatName('D', date.getDay(), dayNamesShort, dayNames);
break;
case 'o':
output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
break;
case 'm':
output += formatNumber('m', date.getMonth() + 1, 2);
break;
case 'M':
output += formatName('M', date.getMonth(), monthNamesShort, monthNames);
break;
case 'y':
output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + date.getFullYear() % 100;
break;
case '@':
output += date.getTime();
break;
case '!':
output += date.getTime() * 10000 + ticksTo1970;
break;
case "'":
if (lookAhead("'")) {
output += "'";
} else {
literal = true;
}
break;
default:
output += format.charAt(iFormat);
}
}
}
}
return output;
};
var formatTime = function formatTime(date) {
if (!date) {
return '';
}
var output = '';
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
if (props.hourFormat === '12' && hours > 11 && hours !== 12) {
hours -= 12;
}
if (props.hourFormat === '12') {
output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
} else {
output += hours < 10 ? '0' + hours : hours;
}
output += ':';
output += minutes < 10 ? '0' + minutes : minutes;
if (props.showSeconds) {
output += ':';
output += seconds < 10 ? '0' + seconds : seconds;
}
if (props.showMillisec) {
output += '.';
output += milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds;
}
if (props.hourFormat === '12') {
output += date.getHours() > 11 ? ' PM' : ' AM';
}
return output;
};
var parseValueFromString = function parseValueFromString(text) {
if (!text || text.trim().length === 0) {
return null;
}
var value;
if (isSingleSelection()) {
value = parseDateTime(text);
} else if (isMultipleSelection()) {
var tokens = text.split(',');
value = [];
var _iterator2 = _createForOfIteratorHelper$c(tokens),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var token = _step2.value;
value.push(parseDateTime(token.trim()));
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
} else if (isRangeSelection()) {
var _tokens = text.split(' - ');
value = [];
for (var i = 0; i < _tokens.length; i++) {
value[i] = parseDateTime(_tokens[i].trim());
}
}
return value;
};
var parseDateTime = function parseDateTime(text) {
if (props.parseDateTime) {
return props.parseDateTime(text);
}
var date;
var parts = text.split(' ');
if (props.timeOnly) {
date = new Date();
populateTime(date, parts[0], parts[1]);
} else {
if (props.showTime) {
date = parseDate(parts[0], getDateFormat());
populateTime(date, parts[1], parts[2]);
} else {
date = parseDate(text, getDateFormat());
}
}
return date;
};
var populateTime = function populateTime(value, timeString, ampm) {
if (props.hourFormat === '12' && ampm !== 'PM' && ampm !== 'AM') {
throw new Error('Invalid Time');
}
var time = parseTime(timeString, ampm);
value.setHours(time.hour);
value.setMinutes(time.minute);
value.setSeconds(time.second);
value.setMilliseconds(time.millisecond);
};
var parseTime = function parseTime(value, ampm) {
value = props.showMillisec ? value.replace('.', ':') : value;
var tokens = value.split(':');
var validTokenLength = props.showSeconds ? 3 : 2;
validTokenLength = props.showMillisec ? validTokenLength + 1 : validTokenLength;
if (tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 || props.showSeconds && tokens[2].length !== 2 || props.showMillisec && tokens[3].length !== 3) {
throw new Error('Invalid time');
}
var h = parseInt(tokens[0], 10);
var m = parseInt(tokens[1], 10);
var s = props.showSeconds ? parseInt(tokens[2], 10) : null;
var ms = props.showMillisec ? parseInt(tokens[3], 10) : null;
if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || props.hourFormat === '12' && h > 12 || props.showSeconds && (isNaN(s) || s > 59) || props.showMillisec && (isNaN(s) || s > 1000)) {
throw new Error('Invalid time');
} else {
if (props.hourFormat === '12' && h !== 12 && ampm === 'PM') {
h += 12;
}
return {
hour: h,
minute: m,
second: s,
millisecond: ms
};
}
};
// Ported from jquery-ui datepicker parseDate
var parseDate = function parseDate(value, format) {
if (format == null || value == null) {
throw new Error('Invalid arguments');
}
value = _typeof(value) === 'object' ? value.toString() : value + '';
if (value === '') {
return null;
}
var iFormat,
dim,
extra,
iValue = 0,
shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(props.shortYearCutoff, 10),
year = -1,
month = -1,
day = -1,
doy = -1,
literal = false,
date,
lookAhead = function lookAhead(match) {
var matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
if (matches) {
iFormat++;
}
return matches;
},
getNumber = function getNumber(match) {
var isDoubled = lookAhead(match),
size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
minSize = match === 'y' ? size : 1,
digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
num = value.substring(iValue).match(digits);
if (!num) {
throw new Error('Missing number at position ' + iValue);
}
iValue += num[0].length;
return parseInt(num[0], 10);
},
getName = function getName(match, shortNames, longNames) {
var index = -1;
var arr = lookAhead(match) ? longNames : shortNames;
var names = [];
for (var i = 0; i < arr.length; i++) {
names.push([i, arr[i]]);
}
names.sort(function (a, b) {
return -(a[1].length - b[1].length);
});
for (var _i = 0; _i < names.length; _i++) {
var name = names[_i][1];
if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
index = names[_i][0];
iValue += name.length;
break;
}
}
if (index !== -1) {
return index + 1;
} else {
throw new Error('Unknown name at position ' + iValue);
}
},
checkLiteral = function checkLiteral() {
if (value.charAt(iValue) !== format.charAt(iFormat)) {
throw new Error('Unexpected literal at position ' + iValue);
}
iValue++;
};
if (props.view === 'month') {
day = 1;
}
var _localeOptions3 = localeOptions(props.locale),
dayNamesShort = _localeOptions3.dayNamesShort,
dayNames = _localeOptions3.dayNames,
monthNamesShort = _localeOptions3.monthNamesShort,
monthNames = _localeOptions3.monthNames;
for (iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
literal = false;
} else {
checkLiteral();
}
} else {
switch (format.charAt(iFormat)) {
case 'd':
day = getNumber('d');
break;
case 'D':
getName('D', dayNamesShort, dayNames);
break;
case 'o':
doy = getNumber('o');
break;
case 'm':
month = getNumber('m');
break;
case 'M':
month = getName('M', monthNamesShort, monthNames);
break;
case 'y':
year = getNumber('y');
break;
case '@':
date = new Date(getNumber('@'));
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case '!':
date = new Date((getNumber('!') - ticksTo1970) / 10000);
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
break;
case "'":
if (lookAhead("'")) {
checkLiteral();
} else {
literal = true;
}
break;
default:
checkLiteral();
}
}
}
if (iValue < value.length) {
extra = value.substr(iValue);
if (!/^\s+/.test(extra)) {
throw new Error('Extra/unparsed characters found in date: ' + extra);
}
}
if (year === -1) {
year = new Date().getFullYear();
} else if (year < 100) {
year += new Date().getFullYear() - new Date().getFullYear() % 100 + (year <= shortYearCutoff ? 0 : -100);
}
if (doy > -1) {
month = 1;
day = doy;
do {
dim = getDaysCountInMonth(year, month - 1);
if (day <= dim) {
break;
}
month++;
day -= dim;
} while (true);
}
date = daylightSavingAdjust(new Date(year, month - 1, day));
if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
throw new Error('Invalid date'); // E.g. 31/02/00
}
return date;
};
var isInMinYear = function isInMinYear(viewDate) {
return props.minDate && props.minDate.getFullYear() === viewDate.getFullYear();
};
var isInMaxYear = function isInMaxYear(viewDate) {
return props.maxDate && props.maxDate.getFullYear() === viewDate.getFullYear();
};
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
var unbindMaskEvents = null;
var viewDate = getViewDate(props.viewDate);
validateDate(viewDate);
setViewDateState(viewDate);
setCurrentMonth(viewDate.getMonth());
setCurrentYear(viewDate.getFullYear());
setCurrentView(props.view);
if (props.inline) {
overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
if (!props.disabled) {
initFocusableCell();
if (props.numberOfMonths === 1) {
overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
}
}
} else if (props.mask) {
unbindMaskEvents = mask(inputRef.current, {
mask: props.mask,
readOnly: props.readOnlyInput || props.disabled,
onChange: function onChange(e) {
!ignoreMaskChange.current && updateValueOnInput(e.originalEvent, e.value);
ignoreMaskChange.current = false;
},
onBlur: function onBlur() {
ignoreMaskChange.current = true;
}
}).unbindEvents;
}
if (props.value) {
updateInputfield(props.value);
setValue(props.value);
}
return function () {
props.mask && unbindMaskEvents && unbindMaskEvents();
};
});
useUpdateEffect(function () {
setCurrentView(props.view);
}, [props.view]);
useUpdateEffect(function () {
if (!props.onViewDateChange && !viewStateChanged.current) {
setValue(props.value);
}
}, [props.onViewDateChange, props.value]);
useUpdateEffect(function () {
var newDate = props.value;
if (previousValue !== newDate) {
updateInputfield(newDate);
// #3516 view date not updated when value set programatically
if (!visible && newDate) {
var viewDate = newDate;
if (isMultipleSelection()) {
if (newDate.length) {
viewDate = newDate[newDate.length - 1];
}
} else if (isRangeSelection()) {
if (newDate.length) {
var startDate = newDate[0];
var endDate = newDate[1];
viewDate = endDate || startDate;
}
}
if (viewDate instanceof Date) {
validateDate(viewDate);
setViewDateState(viewDate);
setCurrentMonth(viewDate.getMonth());
setCurrentYear(viewDate.getFullYear());
}
}
}
}, [props.value, visible]);
useUpdateEffect(function () {
updateInputfield(props.value);
}, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec]);
useUpdateEffect(function () {
if (overlayRef.current) {
setNavigationState(viewDateState);
updateFocus();
}
});
useUnmountEffect(function () {
if (touchUIMask.current) {
disableModality();
touchUIMask.current = null;
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getCurrentDateTime: getCurrentDateTime,
getViewDate: getViewDate,
updateViewDate: updateViewDate,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
var setValue = function setValue(propValue) {
if (Array.isArray(propValue)) {
propValue = propValue[0];
}
var prevPropValue = previousValue;
if (Array.isArray(prevPropValue)) {
prevPropValue = prevPropValue[0];
}
if (!prevPropValue && propValue || propValue && propValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
var viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
validateDate(viewDate);
setViewDateState(viewDate);
viewStateChanged.current = true;
}
};
var createBackwardNavigator = function createBackwardNavigator(isVisible) {
var navigatorProps = isVisible ? {
onClick: onPrevButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
} : {
style: {
visibility: 'hidden'
}
};
return /*#__PURE__*/React.createElement("button", _extends({
type: "button",
className: "p-datepicker-prev"
}, navigatorProps), /*#__PURE__*/React.createElement("span", {
className: "p-datepicker-prev-icon pi pi-chevron-left"
}), /*#__PURE__*/React.createElement(Ripple, null));
};
var createForwardNavigator = function createForwardNavigator(isVisible) {
var navigatorProps = isVisible ? {
onClick: onNextButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
} : {
style: {
visibility: 'hidden'
}
};
return /*#__PURE__*/React.createElement("button", _extends({
type: "button",
className: "p-datepicker-next"
}, navigatorProps), /*#__PURE__*/React.createElement("span", {
className: "p-datepicker-next-icon pi pi-chevron-right"
}), /*#__PURE__*/React.createElement(Ripple, null));
};
var createTitleMonthElement = function createTitleMonthElement(month) {
var monthNames = localeOption('monthNames', props.locale);
if (props.monthNavigator && props.view !== 'month') {
var viewDate = getViewDate();
var viewMonth = viewDate.getMonth();
var displayedMonthOptions = monthNames.map(function (month, index) {
return (!isInMinYear(viewDate) || index >= props.minDate.getMonth()) && (!isInMaxYear(viewDate) || index <= props.maxDate.getMonth()) ? {
label: month,
value: index,
index: index
} : null;
}).filter(function (option) {
return !!option;
});
var displayedMonthNames = displayedMonthOptions.map(function (option) {
return option.label;
});
var _content = /*#__PURE__*/React.createElement("select", {
className: "p-datepicker-month",
onChange: function onChange(e) {
return onMonthDropdownChange(e, e.target.value);
},
value: viewMonth
}, displayedMonthOptions.map(function (option) {
return /*#__PURE__*/React.createElement("option", {
key: option.label,
value: option.value
}, option.label);
}));
if (props.monthNavigatorTemplate) {
var defaultContentOptions = {
onChange: onMonthDropdownChange,
className: 'p-datepicker-month',
value: viewMonth,
names: displayedMonthNames,
options: displayedMonthOptions,
element: _content,
props: props
};
return ObjectUtils.getJSXElement(props.monthNavigatorTemplate, defaultContentOptions);
}
return _content;
}
return currentView === 'date' && /*#__PURE__*/React.createElement("button", {
className: "p-datepicker-month p-link",
onClick: switchToMonthView,
disabled: switchViewButtonDisabled()
}, monthNames[month]);
};
var createTitleYearElement = function createTitleYearElement(metaYear) {
if (props.yearNavigator) {
var _yearOptions2 = [];
var years = props.yearRange.split(':');
var yearStart = parseInt(years[0], 10);
var yearEnd = parseInt(years[1], 10);
for (var i = yearStart; i <= yearEnd; i++) {
_yearOptions2.push(i);
}
var viewDate = getViewDate();
var viewYear = viewDate.getFullYear();
var displayedYearNames = _yearOptions2.filter(function (year) {
return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
});
var _content2 = /*#__PURE__*/React.createElement("select", {
className: "p-datepicker-year",
onChange: function onChange(e) {
return onYearDropdownChange(e, e.target.value);
},
value: viewYear
}, displayedYearNames.map(function (year) {
return /*#__PURE__*/React.createElement("option", {
key: year,
value: year
}, year);
}));
if (props.yearNavigatorTemplate) {
var options = displayedYearNames.map(function (name, i) {
return {
label: name,
value: name,
index: i
};
});
var defaultContentOptions = {
onChange: onYearDropdownChange,
className: 'p-datepicker-year',
value: viewYear,
names: displayedYearNames,
options: options,
element: _content2,
props: props
};
return ObjectUtils.getJSXElement(props.yearNavigatorTemplate, defaultContentOptions);
}
return _content2;
}
var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
return currentView !== 'year' && /*#__PURE__*/React.createElement("button", {
className: "p-datepicker-year p-link",
onClick: switchToYearView,
disabled: switchViewButtonDisabled()
}, displayYear);
};
var createTitleDecadeElement = function createTitleDecadeElement() {
var years = yearPickerValues();
if (currentView === 'year') {
return /*#__PURE__*/React.createElement("span", {
className: "p-datepicker-decade"
}, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React.createElement("span", null, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
}
return null;
};
var createTitle = function createTitle(monthMetaData) {
var month = createTitleMonthElement(monthMetaData.month);
var year = createTitleYearElement(monthMetaData.year);
var decade = createTitleDecadeElement();
return /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-title"
}, month, year, decade);
};
var createDayNames = function createDayNames(weekDays) {
var dayNames = weekDays.map(function (weekDay, index) {
return /*#__PURE__*/React.createElement("th", {
key: "".concat(weekDay, "-").concat(index),
scope: "col"
}, /*#__PURE__*/React.createElement("span", null, weekDay));
});
if (props.showWeek) {
var weekHeader = /*#__PURE__*/React.createElement("th", {
scope: "col",
key: "wn",
className: "p-datepicker-weekheader p-disabled"
}, /*#__PURE__*/React.createElement("span", null, localeOption('weekHeader', props.locale)));
return [weekHeader].concat(_toConsumableArray(dayNames));
}
return dayNames;
};
var createDateCellContent = function createDateCellContent(date, className, groupIndex) {
var content = props.dateTemplate ? props.dateTemplate(date) : date.day;
return /*#__PURE__*/React.createElement("span", {
className: className,
onClick: function onClick(e) {
return onDateSelect(e, date);
},
onKeyDown: function onKeyDown(e) {
return onDateCellKeydown(e, date, groupIndex);
}
}, content, /*#__PURE__*/React.createElement(Ripple, null));
};
var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
var week = weekDates.map(function (date) {
var selected = isSelected(date);
var cellClassName = classNames({
'p-datepicker-other-month': date.otherMonth,
'p-datepicker-today': date.today
});
var dateClassName = classNames({
'p-highlight': selected,
'p-disabled': !date.selectable
});
var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
return /*#__PURE__*/React.createElement("td", {
key: date.day,
className: cellClassName
}, content);
});
if (props.showWeek) {
var weekNumberCell = /*#__PURE__*/React.createElement("td", {
key: 'wn' + weekNumber,
className: "p-datepicker-weeknumber"
}, /*#__PURE__*/React.createElement("span", {
className: "p-disabled"
}, weekNumber));
return [weekNumberCell].concat(_toConsumableArray(week));
}
return week;
};
var createDates = function createDates(monthMetaData, groupIndex) {
return monthMetaData.dates.map(function (weekDates, index) {
return /*#__PURE__*/React.createElement("tr", {
key: index
}, createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
});
};
var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
var dayNames = createDayNames(weekDays);
var dates = createDates(monthMetaData, groupIndex);
return currentView === 'date' && /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-calendar-container"
}, /*#__PURE__*/React.createElement("table", {
className: "p-datepicker-calendar"
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, dayNames)), /*#__PURE__*/React.createElement("tbody", null, dates)));
};
var createMonth = function createMonth(monthMetaData, index) {
var weekDays = createWeekDaysMeta();
var backwardNavigator = createBackwardNavigator(index === 0);
var forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
var title = createTitle(monthMetaData);
var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
var header = props.headerTemplate ? props.headerTemplate() : null;
return /*#__PURE__*/React.createElement("div", {
key: monthMetaData.month,
className: "p-datepicker-group"
}, /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-header"
}, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
};
var createMonths = function createMonths(monthsMetaData) {
var groups = monthsMetaData.map(createMonth);
return /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-group-container"
}, groups);
};
var createDateView = function createDateView() {
var viewDate = getViewDate();
var monthsMetaData = createMonthsMeta(viewDate.getMonth(), viewDate.getFullYear());
var months = createMonths(monthsMetaData);
return months;
};
var monthPickerValues = function monthPickerValues() {
var monthPickerValues = [];
var monthNamesShort = localeOption('monthNamesShort', props.locale);
for (var i = 0; i <= 11; i++) {
monthPickerValues.push(monthNamesShort[i]);
}
return monthPickerValues;
};
var yearPickerValues = function yearPickerValues() {
var yearPickerValues = [];
var base = currentYear - currentYear % 10;
for (var i = 0; i < 10; i++) {
yearPickerValues.push(base + i);
}
return yearPickerValues;
};
var createMonthYearView = function createMonthYearView() {
var backwardNavigator = createBackwardNavigator(true);
var forwardNavigator = createForwardNavigator(true);
var yearElement = createTitleYearElement(getViewDate().getFullYear());
var decade = createTitleDecadeElement();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-group-container"
}, /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-group"
}, /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-header"
}, backwardNavigator, /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-title"
}, yearElement, decade), forwardNavigator))));
};
var createDatePicker = function createDatePicker() {
if (!props.timeOnly) {
if (props.view === 'date') {
return createDateView();
} else {
return createMonthYearView();
}
}
return null;
};
var createHourPicker = function createHourPicker() {
var currentTime = getCurrentDateTime();
var minute = doStepMinute(currentTime.getMinutes());
var hour = currentTime.getHours();
// #3770 account for step minutes rolling to next hour
hour = minute > 59 ? hour + 1 : hour;
if (props.hourFormat === '12') {
if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
}
var hourDisplay = hour < 10 ? '0' + hour : hour;
return /*#__PURE__*/React.createElement("div", {
className: "p-hour-picker"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 0, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-up"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, hourDisplay), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 0, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-down"
}), /*#__PURE__*/React.createElement(Ripple, null)));
};
var createMinutePicker = function createMinutePicker() {
var currentTime = getCurrentDateTime();
var minute = doStepMinute(currentTime.getMinutes());
minute = minute > 59 ? minute - 60 : minute;
var minuteDisplay = minute < 10 ? '0' + minute : minute;
return /*#__PURE__*/React.createElement("div", {
className: "p-minute-picker"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 1, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-up"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, minuteDisplay), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 1, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-down"
}), /*#__PURE__*/React.createElement(Ripple, null)));
};
var createSecondPicker = function createSecondPicker() {
if (props.showSeconds) {
var currentTime = getCurrentDateTime();
var second = currentTime.getSeconds();
var secondDisplay = second < 10 ? '0' + second : second;
return /*#__PURE__*/React.createElement("div", {
className: "p-second-picker"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 2, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-up"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, secondDisplay), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 2, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-down"
}), /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createMiliSecondPicker = function createMiliSecondPicker() {
if (props.showMillisec) {
var currentTime = getCurrentDateTime();
var millisecond = currentTime.getMilliseconds();
var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
return /*#__PURE__*/React.createElement("div", {
className: "p-millisecond-picker"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 3, 1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-up"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, millisecondDisplay), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onMouseDown: function onMouseDown(e) {
return onTimePickerElementMouseDown(e, 3, -1);
},
onMouseUp: onTimePickerElementMouseUp,
onMouseLeave: onTimePickerElementMouseLeave,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
}
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-down"
}), /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createAmPmPicker = function createAmPmPicker() {
if (props.hourFormat === '12') {
var currentTime = getCurrentDateTime();
var hour = currentTime.getHours();
var display = hour > 11 ? 'PM' : 'AM';
return /*#__PURE__*/React.createElement("div", {
className: "p-ampm-picker"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onClick: toggleAmPm
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-up"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("span", null, display), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onClick: toggleAmPm
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-down"
}), /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createSeparator = function createSeparator(separator) {
return /*#__PURE__*/React.createElement("div", {
className: "p-separator"
}, /*#__PURE__*/React.createElement("span", null, separator));
};
var createTimePicker = function createTimePicker() {
if ((props.showTime || props.timeOnly) && currentView === 'date') {
return /*#__PURE__*/React.createElement("div", {
className: "p-timepicker"
}, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
}
return null;
};
var createInputElement = function createInputElement() {
if (!props.inline) {
return /*#__PURE__*/React.createElement(InputText, {
ref: inputRef,
id: props.inputId,
name: props.name,
type: "text",
className: props.inputClassName,
style: props.inputStyle,
readOnly: props.readOnlyInput,
disabled: props.disabled,
required: props.required,
autoComplete: "off",
placeholder: props.placeholder,
tabIndex: props.tabIndex,
onInput: onUserInput,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
"aria-labelledby": props.ariaLabelledBy,
inputMode: props.inputMode,
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions
});
}
return null;
};
var createButton = function createButton() {
if (props.showIcon) {
return /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: props.icon,
onClick: onButtonClick,
tabIndex: "-1",
disabled: props.disabled,
className: "p-datepicker-trigger"
});
}
return null;
};
var createContent = function createContent() {
var input = createInputElement();
var button = createButton();
if (props.iconPos === 'left') {
return /*#__PURE__*/React.createElement(React.Fragment, null, button, input);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, input, button);
};
var createButtonBar = function createButtonBar() {
if (props.showButtonBar) {
var todayClassName = classNames('p-button-text', props.todayButtonClassName);
var clearClassName = classNames('p-button-text', props.clearButtonClassName);
var _localeOptions4 = localeOptions(props.locale),
today = _localeOptions4.today,
clear = _localeOptions4.clear;
return /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-buttonbar"
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
label: today,
onClick: onTodayButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
},
className: todayClassName
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
label: clear,
onClick: onClearButtonClick,
onKeyDown: function onKeyDown(e) {
return onContainerButtonKeydown(e);
},
className: clearClassName
}));
}
return null;
};
var createFooter = function createFooter() {
if (props.footerTemplate) {
var _content3 = props.footerTemplate();
return /*#__PURE__*/React.createElement("div", {
className: "p-datepicker-footer"
}, _content3);
}
return null;
};
var createMonthPicker = function createMonthPicker() {
if (currentView === 'month') {
return /*#__PURE__*/React.createElement("div", {
className: "p-monthpicker"
}, monthPickerValues().map(function (m, i) {
return /*#__PURE__*/React.createElement("span", {
onClick: function onClick(event) {
return onMonthSelect(event, i);
},
key: "month".concat(i + 1),
className: classNames('p-monthpicker-month', {
'p-highlight': isMonthSelected(i),
'p-disabled': !isSelectable(0, i, currentYear)
})
}, m);
}));
}
return null;
};
var createYearPicker = function createYearPicker() {
if (currentView === 'year') {
return /*#__PURE__*/React.createElement("div", {
className: "p-yearpicker"
}, yearPickerValues().map(function (y, i) {
return /*#__PURE__*/React.createElement("span", {
onClick: function onClick(event) {
return onYearSelect(event, y);
},
key: "year".concat(i + 1),
className: classNames('p-yearpicker-year', {
'p-highlight': isYearSelected(y),
'p-disabled': !(isSelectable(0, 0, y) || isSelectable(30, 11, y))
})
}, y);
}));
}
return null;
};
var otherProps = CalendarBase.getOtherProps(props);
var className = classNames('p-calendar p-component p-inputwrapper', props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', props.value || DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', focusedState), _classNames));
var panelClassName = classNames('p-datepicker p-component', props.panelClassName, {
'p-datepicker-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': currentView === 'month',
'p-datepicker-touch-ui': props.touchUI,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var content = createContent();
var datePicker = createDatePicker();
var timePicker = createTimePicker();
var buttonBar = createButtonBar();
var footer = createFooter();
var monthPicker = createMonthPicker();
var yearPicker = createYearPicker();
return /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), content, /*#__PURE__*/React.createElement(CalendarPanel, {
ref: overlayRef,
className: panelClassName,
style: props.panelStyle,
appendTo: props.appendTo,
inline: props.inline,
onClick: onPanelClick,
onMouseUp: onPanelMouseUp,
"in": visible,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
transitionOptions: props.transitionOptions
}, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
}));
Calendar.displayName = 'Calendar';
var CardBase = {
defaultProps: {
__TYPE: 'Card',
id: null,
header: null,
footer: null,
title: null,
subTitle: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CardBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CardBase.defaultProps);
}
};
var Card = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CardBase.getProps(inProps);
var elementRef = React.useRef(ref);
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-card-header"
}, ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createBody = function createBody() {
var title = props.title && /*#__PURE__*/React.createElement("div", {
className: "p-card-title"
}, ObjectUtils.getJSXElement(props.title, props));
var subTitle = props.subTitle && /*#__PURE__*/React.createElement("div", {
className: "p-card-subtitle"
}, ObjectUtils.getJSXElement(props.subTitle, props));
var children = props.children && /*#__PURE__*/React.createElement("div", {
className: "p-card-content"
}, props.children);
var footer = props.footer && /*#__PURE__*/React.createElement("div", {
className: "p-card-footer"
}, ObjectUtils.getJSXElement(props.footer, props));
return /*#__PURE__*/React.createElement("div", {
className: "p-card-body"
}, title, subTitle, children, footer);
};
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var otherProps = CardBase.getOtherProps(props);
var className = classNames('p-card p-component', props.className);
var header = createHeader();
var body = createBody();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), header, body);
});
Card.displayName = 'Card';
var CarouselBase = {
defaultProps: {
__TYPE: 'Carousel',
id: null,
value: null,
page: 0,
header: null,
footer: null,
style: null,
className: null,
itemTemplate: null,
circular: false,
showIndicators: true,
showNavigators: true,
autoplayInterval: 0,
numVisible: 1,
numScroll: 1,
responsiveOptions: null,
orientation: 'horizontal',
verticalViewPortHeight: '300px',
contentClassName: null,
containerClassName: null,
indicatorsContentClassName: null,
onPageChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CarouselBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CarouselBase.defaultProps);
}
};
var CarouselItem = /*#__PURE__*/React.memo(function (props) {
var content = props.template(props.item);
var className = classNames(props.className, 'p-carousel-item', {
'p-carousel-item-active': props.active,
'p-carousel-item-start': props.start,
'p-carousel-item-end': props.end
});
return /*#__PURE__*/React.createElement("div", {
className: className
}, content);
});
var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CarouselBase.getProps(inProps);
var _React$useState = React.useState(props.numVisible),
_React$useState2 = _slicedToArray(_React$useState, 2),
numVisibleState = _React$useState2[0],
setNumVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.numScroll),
_React$useState4 = _slicedToArray(_React$useState3, 2),
numScrollState = _React$useState4[0],
setNumScrollState = _React$useState4[1];
var _React$useState5 = React.useState(props.page * props.numScroll * -1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
totalShiftedItemsState = _React$useState6[0],
setTotalShiftedItemsState = _React$useState6[1];
var _React$useState7 = React.useState(props.page),
_React$useState8 = _slicedToArray(_React$useState7, 2),
pageState = _React$useState8[0],
setPageState = _React$useState8[1];
var elementRef = React.useRef(null);
var itemsContainerRef = React.useRef(null);
var remainingItems = React.useRef(0);
var allowAutoplay = React.useRef(!!props.autoplayInterval);
var attributeSelector = React.useRef('');
var swipeThreshold = React.useRef(20);
var startPos = React.useRef(null);
var interval = React.useRef(null);
var carouselStyle = React.useRef(null);
var isRemainingItemsAdded = React.useRef(false);
var responsiveOptions = React.useRef(null);
var prevNumScroll = usePrevious(numScrollState);
var prevNumVisible = usePrevious(numVisibleState);
var prevValue = usePrevious(props.value);
var prevPage = usePrevious(props.page);
var isVertical = props.orientation === 'vertical';
var circular = props.circular || !!props.autoplayInterval;
var isCircular = circular && props.value && props.value.length >= numVisibleState;
var currentPage = props.onPageChange ? props.page : pageState;
var totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
var isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
var _useResizeListener = useResizeListener({
listener: function listener() {
calculatePosition();
},
when: props.responsiveOptions
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var step = function step(dir, page) {
var totalShiftedItems = totalShiftedItemsState;
if (page != null) {
totalShiftedItems = numScrollState * page * -1;
if (isCircular) {
totalShiftedItems -= numVisibleState;
}
isRemainingItemsAdded.current = false;
} else {
totalShiftedItems += numScrollState * dir;
if (isRemainingItemsAdded.current) {
totalShiftedItems += remainingItems.current - numScrollState * dir;
isRemainingItemsAdded.current = false;
}
var originalShiftedItems = isCircular ? totalShiftedItems + numVisibleState : totalShiftedItems;
page = Math.abs(Math.floor(originalShiftedItems / numScrollState));
}
if (isCircular && pageState === totalIndicators - 1 && dir === -1) {
totalShiftedItems = -1 * (props.value.length + numVisibleState);
page = 0;
} else if (isCircular && pageState === 0 && dir === 1) {
totalShiftedItems = 0;
page = totalIndicators - 1;
} else if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems += remainingItems.current * -1 - numScrollState * dir;
isRemainingItemsAdded.current = true;
}
if (itemsContainerRef.current) {
DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
changePosition(totalShiftedItems);
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
if (props.onPageChange) {
setTotalShiftedItemsState(totalShiftedItems);
props.onPageChange({
page: page
});
} else {
setPageState(page);
setTotalShiftedItemsState(totalShiftedItems);
}
};
var calculatePosition = function calculatePosition() {
if (itemsContainerRef.current && responsiveOptions.current) {
var windowWidth = window.innerWidth;
var matchedResponsiveData = {
numVisible: props.numVisible,
numScroll: props.numScroll
};
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (numScrollState !== matchedResponsiveData.numScroll) {
var page = Math.floor(currentPage * numScrollState / matchedResponsiveData.numScroll);
var totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
if (isCircular) {
totalShiftedItems -= matchedResponsiveData.numVisible;
}
setTotalShiftedItemsState(totalShiftedItems);
setNumScrollState(matchedResponsiveData.numScroll);
if (props.onPageChange) {
props.onPageChange({
page: page
});
} else {
setPageState(page);
}
}
if (numVisibleState !== matchedResponsiveData.numVisible) {
setNumVisibleState(matchedResponsiveData.numVisible);
}
}
};
var navBackward = function navBackward(e, page) {
if (circular || currentPage !== 0) {
step(1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e, page) {
if (circular || currentPage < totalIndicators - 1) {
step(-1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var onDotClick = function onDotClick(e, page) {
if (page > currentPage) {
navForward(e, page);
} else if (page < currentPage) {
navBackward(e, page);
}
};
var onTransitionEnd = function onTransitionEnd(e) {
if (itemsContainerRef.current && e.propertyName === 'transform') {
DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = '';
if ((pageState === 0 || pageState === totalIndicators - 1) && isCircular) {
changePosition(totalShiftedItemsState);
}
}
};
var onTouchStart = function onTouchStart(e) {
var touchobj = e.changedTouches[0];
startPos.current = {
x: touchobj.pageX,
y: touchobj.pageY
};
};
var onTouchMove = function onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
};
var onTouchEnd = function onTouchEnd(e) {
var touchobj = e.changedTouches[0];
if (isVertical) {
changePageOnTouch(e, touchobj.pageY - startPos.current.y);
} else {
changePageOnTouch(e, touchobj.pageX - startPos.current.x);
}
};
var changePageOnTouch = function changePageOnTouch(e, diff) {
if (Math.abs(diff) > swipeThreshold) {
if (diff < 0) {
// left
navForward(e);
} else {
// right
navBackward(e);
}
}
};
var startAutoplay = function startAutoplay() {
interval.current = setInterval(function () {
if (pageState === totalIndicators - 1) {
step(-1, 0);
} else {
step(-1, pageState + 1);
}
}, props.autoplayInterval);
};
var stopAutoplay = function stopAutoplay() {
if (interval.current) {
clearInterval(interval.current);
}
};
var createStyle = function createStyle() {
if (!carouselStyle.current) {
carouselStyle.current = DomHandler.createInlineStyle(PrimeReact.nonce);
}
var innerHTML = "\n .p-carousel[".concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / numVisibleState, "%\n }\n ");
if (props.responsiveOptions) {
responsiveOptions.current = _toConsumableArray(props.responsiveOptions);
responsiveOptions.current.sort(function (data1, data2) {
var value1 = data1.breakpoint;
var value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, PrimeReact.locale, PrimeReact.nullSortOrder);
});
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
innerHTML += "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-carousel[").concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
}
}
carouselStyle.current.innerHTML = innerHTML;
};
var changePosition = function changePosition(totalShiftedItems) {
if (itemsContainerRef.current) {
itemsContainerRef.current.style.transform = isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (elementRef.current) {
attributeSelector.current = UniqueComponentId();
elementRef.current.setAttribute(attributeSelector.current, '');
}
createStyle();
calculatePosition();
changePosition(totalShiftedItemsState);
bindWindowResizeListener();
});
useUpdateEffect(function () {
var stateChanged = false;
var totalShiftedItems = totalShiftedItemsState;
if (props.autoplayInterval) {
stopAutoplay();
}
if (prevNumScroll !== numScrollState || prevNumVisible !== numVisibleState || props.value && prevValue && prevValue.length !== props.value.length) {
remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
var page = currentPage;
if (totalIndicators !== 0 && page >= totalIndicators) {
page = totalIndicators - 1;
if (props.onPageChange) {
props.onPageChange({
page: page
});
} else {
setPageState(page);
}
stateChanged = true;
}
totalShiftedItems = page * numScrollState * -1;
if (isCircular) {
totalShiftedItems -= numVisibleState;
}
if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems += -1 * remainingItems.current + numScrollState;
isRemainingItemsAdded.current = true;
} else {
isRemainingItemsAdded.current = false;
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
changePosition(totalShiftedItems);
}
if (isCircular) {
if (pageState === 0) {
totalShiftedItems = -1 * numVisibleState;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * props.value.length;
if (remainingItems.current > 0) {
isRemainingItemsAdded.current = true;
}
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
}
if (prevPage !== props.page) {
if (props.page > prevPage && props.page <= totalIndicators - 1) {
step(-1, props.page);
} else if (props.page < prevPage) {
step(1, props.page);
}
}
if (!stateChanged && isAutoplay) {
startAutoplay();
}
});
useUnmountEffect(function () {
if (props.autoplayInterval) {
stopAutoplay();
}
});
var createItems = function createItems() {
if (props.value && props.value.length) {
var clonedItemsForStarting = null;
var clonedItemsForFinishing = null;
if (isCircular) {
var clonedElements = null;
clonedElements = props.value.slice(-1 * numVisibleState);
clonedItemsForStarting = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState * -1 === props.value.length + numVisibleState;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_scloned';
return /*#__PURE__*/React.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end
});
});
clonedElements = props.value.slice(0, numVisibleState);
clonedItemsForFinishing = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState === 0;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_fcloned';
return /*#__PURE__*/React.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end
});
});
}
var items = props.value.map(function (item, index) {
var firstIndex = isCircular ? -1 * (totalShiftedItemsState + numVisibleState) : totalShiftedItemsState * -1;
var lastIndex = firstIndex + numVisibleState - 1;
var isActive = firstIndex <= index && lastIndex >= index;
var start = firstIndex === index;
var end = lastIndex === index;
return /*#__PURE__*/React.createElement(CarouselItem, {
key: index,
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end
});
});
return /*#__PURE__*/React.createElement(React.Fragment, null, clonedItemsForStarting, items, clonedItemsForFinishing);
}
};
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-carousel-header"
}, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
return /*#__PURE__*/React.createElement("div", {
className: "p-carousel-footer"
}, props.footer);
}
return null;
};
var createContent = function createContent() {
var items = createItems();
var height = isVertical ? props.verticalViewPortHeight : 'auto';
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var className = classNames('p-carousel-container', props.containerClassName);
return /*#__PURE__*/React.createElement("div", {
className: className
}, backwardNavigator, /*#__PURE__*/React.createElement("div", {
className: "p-carousel-items-content",
style: {
height: height
},
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, /*#__PURE__*/React.createElement("div", {
ref: itemsContainerRef,
className: "p-carousel-items-container",
onTransitionEnd: onTransitionEnd
}, items)), forwardNavigator);
};
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && currentPage === 0;
var _className = classNames('p-carousel-prev p-link', {
'p-disabled': isDisabled
});
var iconClassName = classNames('p-carousel-prev-icon pi', {
'pi-chevron-left': !isVertical,
'pi-chevron-up': isVertical
});
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: _className,
onClick: navBackward,
disabled: isDisabled,
"aria-label": ariaLabel('previousPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
var _className2 = classNames('p-carousel-next p-link', {
'p-disabled': isDisabled
});
var iconClassName = classNames('p-carousel-next-icon pi', {
'pi-chevron-right': !isVertical,
'pi-chevron-down': isVertical
});
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: _className2,
onClick: navForward,
disabled: isDisabled,
"aria-label": ariaLabel('nextPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createIndicator = function createIndicator(index) {
var isActive = currentPage === index;
var key = 'carousel-indicator-' + index;
var className = classNames('p-carousel-indicator', {
'p-highlight': isActive
});
return /*#__PURE__*/React.createElement("li", {
key: key,
className: className
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-link",
onClick: function onClick(e) {
return onDotClick(e, index);
},
"aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(index + 1)
}, /*#__PURE__*/React.createElement(Ripple, null)));
};
var createIndicators = function createIndicators() {
if (props.showIndicators) {
var _className3 = classNames('p-carousel-indicators p-reset', props.indicatorsContentClassName);
var _indicators = [];
for (var i = 0; i < totalIndicators; i++) {
_indicators.push(createIndicator(i));
}
return /*#__PURE__*/React.createElement("ul", {
className: _className3
}, _indicators);
}
return null;
};
var otherProps = CarouselBase.getOtherProps(props);
var className = classNames('p-carousel p-component', {
'p-carousel-vertical': isVertical,
'p-carousel-horizontal': !isVertical
}, props.className);
var contentClassName = classNames('p-carousel-content', props.contentClassName);
var content = createContent();
var indicators = createIndicators();
var header = createHeader();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), header, /*#__PURE__*/React.createElement("div", {
className: contentClassName
}, content, indicators), footer);
}));
CarouselItem.displayName = 'CarouselItem';
Carousel.displayName = 'Carousel';
var CascadeSelectBase = {
defaultProps: {
__TYPE: 'CascadeSelect',
id: null,
inputRef: null,
style: null,
className: null,
value: null,
name: null,
options: null,
optionLabel: null,
optionValue: null,
optionGroupLabel: null,
optionGroupChildren: null,
placeholder: null,
itemTemplate: null,
disabled: false,
dataKey: null,
breakpoint: undefined,
inputId: null,
tabIndex: null,
ariaLabelledBy: null,
appendTo: null,
transitionOptions: null,
dropdownIcon: 'pi pi-chevron-down',
scrollHeight: '400px',
onChange: null,
onGroupChange: null,
onBeforeShow: null,
onBeforeHide: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CascadeSelectBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CascadeSelectBase.defaultProps);
}
};
var CascadeSelectSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeOptionState = _React$useState2[0],
setActiveOptionState = _React$useState2[1];
var elementRef = React.useRef(null);
var position = function position() {
var parentItem = elementRef.current.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(element);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
elementRef.current.style.left = '-100%';
}
};
var onOptionSelect = function onOptionSelect(event) {
props.onOptionSelect && props.onOptionSelect(event);
};
var _onKeyDown = function onKeyDown(event, option) {
var listItem = event.currentTarget.parentElement;
switch (event.key) {
case 'Down':
case 'ArrowDown':
var nextItem = findNextItem(listItem);
if (nextItem) {
nextItem.children[0].focus();
}
break;
case 'Up':
case 'ArrowUp':
var prevItem = findPrevItem(listItem);
if (prevItem) {
prevItem.children[0].focus();
}
break;
case 'Right':
case 'ArrowRight':
if (isOptionGroup(option)) {
if (activeOptionState === option) {
listItem.children[1].children[0].children[0].focus();
} else {
setActiveOptionState(option);
}
}
break;
case 'Left':
case 'ArrowLeft':
setActiveOptionState(null);
var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
if (parentList) {
parentList.focus();
}
break;
case 'Enter':
onOptionClick(event, option);
break;
case 'Tab':
case 'Escape':
if (props.onPanelHide) {
props.onPanelHide();
event.preventDefault();
}
break;
}
event.preventDefault();
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? findPrevItem(prevItem) : prevItem : null;
};
var onOptionClick = function onOptionClick(event, option) {
if (isOptionGroup(option)) {
setActiveOptionState(function (prevActiveOption) {
return prevActiveOption === option ? null : option;
});
if (props.onOptionGroupSelect) {
props.onOptionGroupSelect({
originalEvent: event,
value: option
});
}
} else {
if (props.onOptionSelect) {
props.onOptionSelect({
originalEvent: event,
value: getOptionValue(option)
});
}
}
};
var onOptionGroupSelect = function onOptionGroupSelect(event) {
props.onOptionGroupSelect && props.onOptionGroupSelect(event);
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : null;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[props.level]);
};
var isOptionGroup = function isOptionGroup(option) {
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[props.level]);
};
var getOptionLabelToRender = function getOptionLabelToRender(option) {
return isOptionGroup(option) ? getOptionGroupLabel(option) : getOptionLabel(option);
};
useMountEffect(function () {
if (props.selectionPath && props.options && !props.dirty) {
var activeOption = props.options.find(function (o) {
return props.selectionPath.includes(o);
});
activeOption && setActiveOptionState(activeOption);
}
if (!props.root) {
position();
}
});
useUpdateEffect(function () {
setActiveOptionState(null);
}, [props.parentActive]);
var createSubmenu = function createSubmenu(option) {
if (isOptionGroup(option) && activeOptionState === option) {
var options = getOptionGroupChildren(option);
var parentActive = activeOptionState === option;
var level = props.level + 1;
return /*#__PURE__*/React.createElement(CascadeSelectSub, {
options: options,
className: "p-cascadeselect-sublist",
selectionPath: props.selectionPath,
optionLabel: props.optionLabel,
optionValue: props.optionValue,
level: level,
onOptionSelect: onOptionSelect,
onOptionGroupSelect: onOptionGroupSelect,
parentActive: parentActive,
optionGroupLabel: props.optionGroupLabel,
optionGroupChildren: props.optionGroupChildren,
dirty: props.dirty,
template: props.template,
onPanelHide: props.onPanelHide
});
}
return null;
};
var createOption = function createOption(option, index) {
var className = classNames('p-cascadeselect-item', {
'p-cascadeselect-item-group': isOptionGroup(option),
'p-cascadeselect-item-active p-highlight': activeOptionState === option
}, option.className);
var submenu = createSubmenu(option);
var content = props.template ? ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : /*#__PURE__*/React.createElement("span", {
className: "p-cascadeselect-item-text"
}, getOptionLabelToRender(option));
var optionGroup = isOptionGroup(option) && /*#__PURE__*/React.createElement("span", {
className: "p-cascadeselect-group-icon pi pi-angle-right"
});
var key = getOptionLabelToRender(option) + '_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: className,
style: option.style,
role: "none"
}, /*#__PURE__*/React.createElement("div", {
className: "p-cascadeselect-item-content",
onClick: function onClick(event) {
return onOptionClick(event, option);
},
tabIndex: 0,
onKeyDown: function onKeyDown(event) {
return _onKeyDown(event, option);
}
}, content, optionGroup, /*#__PURE__*/React.createElement(Ripple, null)), submenu);
};
var createMenu = function createMenu() {
return props.options ? props.options.map(createOption) : null;
};
var className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var submenu = createMenu();
return /*#__PURE__*/React.createElement("ul", {
ref: elementRef,
className: className,
role: "listbox",
"aria-orientation": "horizontal"
}, submenu);
});
function _createForOfIteratorHelper$b(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$b(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$b(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$b(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$b(o, minLen); }
function _arrayLikeToArray$b(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CascadeSelectBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
attributeSelectorState = _React$useState6[0],
setAttributeSelectorState = _React$useState6[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(null);
var labelRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var dirty = React.useRef(false);
var selectionPath = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onOptionSelect = function onOptionSelect(event) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: event.value
});
}
updateSelectionPath();
hide();
DomHandler.focus(inputRef.current);
};
var onOptionGroupSelect = function onOptionGroupSelect(event) {
dirty.current = true;
props.onGroupChange && props.onGroupChange(event);
};
var getOptionLabel = function getOptionLabel(option) {
var label = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
return label || option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup, level) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[level]);
};
var isOptionGroup = function isOptionGroup(option, level) {
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[level]);
};
var updateSelectionPath = function updateSelectionPath() {
var path;
if (props.value != null && props.options) {
var _iterator = _createForOfIteratorHelper$b(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var option = _step.value;
path = findModelOptionInGroup(option, 0);
if (path) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
selectionPath.current = path;
};
var findModelOptionInGroup = function findModelOptionInGroup(option, level) {
if (isOptionGroup(option, level)) {
var selectedOption;
var _iterator2 = _createForOfIteratorHelper$b(getOptionGroupChildren(option, level)),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var childOption = _step2.value;
selectedOption = findModelOptionInGroup(childOption, level + 1);
if (selectedOption) {
selectedOption.unshift(option);
return selectedOption;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
} else if (ObjectUtils.equals(props.value, getOptionValue(option), props.dataKey)) {
return [option];
}
return null;
};
var onClick = function onClick(event) {
if (props.disabled) {
return;
}
if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
DomHandler.focus(inputRef.current);
overlayVisibleState ? hide() : show();
}
};
var onInputFocus = function onInputFocus() {
setFocusedState(true);
};
var onInputBlur = function onInputBlur() {
setFocusedState(false);
};
var onInputKeyDown = function onInputKeyDown(event) {
switch (event.which) {
//down
case 40:
if (overlayVisibleState) {
DomHandler.findSingle(overlayRef.current, '.p-cascadeselect-item').children[0].focus();
} else if (event.altKey && props.options && props.options.length) {
show();
}
event.preventDefault();
break;
//space
case 32:
overlayVisibleState ? hide() : show();
event.preventDefault();
break;
//tab
case 9:
hide();
break;
}
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var show = function show() {
props.onBeforeShow && props.onBeforeShow();
setOverlayVisibleState(true);
};
var hide = function hide() {
props.onBeforeHide && props.onBeforeHide();
setOverlayVisibleState(false);
DomHandler.focus(inputRef.current);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
if (attributeSelectorState && props.breakpoint) {
overlayRef.current.setAttribute(attributeSelectorState + '_panel', '');
createStyle();
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
dirty.current = false;
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
destroyStyle();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var selector = "".concat(attributeSelectorState, "_panel");
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-items-wrapper > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist {\n position: relative;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-item-active > .p-cascadeselect-sublist {\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-group-icon:before {\n content: \"\\e930\";\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getLabel: function getLabel() {
return labelRef.current;
},
focus: function focus() {
return DomHandler.focus(inputRef.current);
}
};
});
useMountEffect(function () {
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
}
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
updateSelectionPath();
}, [props.value]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createKeyboardHelper = function createKeyboardHelper() {
var value = props.value ? getOptionLabel(props.value) : undefined;
return /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: "text",
id: props.inputId,
name: props.name,
defaultValue: value,
readOnly: true,
disabled: props.disabled,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
tabIndex: props.tabIndex,
"aria-haspopup": "listbox"
}, ariaProps)));
};
var createLabel = function createLabel() {
var label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel';
var labelClassName = classNames('p-cascadeselect-label ', {
'p-placeholder': label === props.placeholder,
'p-cascadeselect-label-empty': !props.value && label === 'p-emptylabel'
});
return /*#__PURE__*/React.createElement("span", {
ref: labelRef,
className: labelClassName
}, label);
};
var createDropdownIcon = function createDropdownIcon() {
var iconClassName = classNames('p-cascadeselect-trigger-icon', props.dropdownIcon);
return /*#__PURE__*/React.createElement("div", {
className: "p-cascadeselect-trigger",
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}));
};
var createOverlay = function createOverlay() {
var overlay = /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-connected-overlay",
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, /*#__PURE__*/React.createElement("div", {
ref: overlayRef,
className: "p-cascadeselect-panel p-component",
onClick: onPanelClick
}, /*#__PURE__*/React.createElement("div", {
className: "p-cascadeselect-items-wrapper"
}, /*#__PURE__*/React.createElement(CascadeSelectSub, {
options: props.options,
selectionPath: selectionPath.current,
className: 'p-cascadeselect-items',
optionLabel: props.optionLabel,
optionValue: props.optionValue,
level: 0,
optionGroupLabel: props.optionGroupLabel,
optionGroupChildren: props.optionGroupChildren,
onOptionSelect: onOptionSelect,
onOptionGroupSelect: onOptionGroupSelect,
root: true,
template: props.itemTemplate,
onPanelHide: hide
}))));
return /*#__PURE__*/React.createElement(Portal, {
element: overlay,
appendTo: props.appendTo
});
};
var createElement = function createElement() {
var className = classNames('p-cascadeselect p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState || overlayVisibleState
}, props.className);
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var dropdownIcon = createDropdownIcon();
var overlay = createOverlay();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), keyboardHelper, labelElement, dropdownIcon, overlay);
};
var otherProps = CascadeSelectBase.getOtherProps(props);
ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var element = createElement();
return element;
}));
CascadeSelect.displayName = 'CascadeSelect';
var ChartBase = {
defaultProps: {
__TYPE: 'Chart',
id: null,
type: null,
data: null,
options: null,
plugins: null,
width: null,
height: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ChartBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ChartBase.defaultProps);
}
};
// GitHub #3059 wrapper if loaded by script tag
var ChartJS = function () {
try {
return Chart;
} catch (_unused) {
return null;
}
}();
var PrimeReactChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ChartBase.getProps(inProps);
var elementRef = React.useRef(null);
var chartRef = React.useRef(null);
var canvasRef = React.useRef(null);
var initChart = function initChart() {
destroyChart();
var configuration = {
type: props.type,
data: props.data,
options: props.options,
plugins: props.plugins
};
if (ChartJS) {
// GitHub #3059 loaded by script only
chartRef.current = new ChartJS(canvasRef.current, configuration);
} else {
import('chart.js/auto').then(function (module) {
destroyChart();
// In case that the Chart component has been unmounted during asynchronous loading of ChartJS,
// the canvasRef will not be available anymore, and no Chart should be created.
if (!canvasRef.current) {
return;
}
if (module) {
if (module["default"]) {
// WebPack
chartRef.current = new module["default"](canvasRef.current, configuration);
} else {
// ParcelJS
chartRef.current = new module(canvasRef.current, configuration);
}
}
});
}
};
var destroyChart = function destroyChart() {
if (chartRef.current) {
chartRef.current.destroy();
chartRef.current = null;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getCanvas: function getCanvas() {
return canvasRef.current;
},
getChart: function getChart() {
return chartRef.current;
},
getBase64Image: function getBase64Image() {
return chartRef.current.toBase64Image();
},
getElement: function getElement() {
return elementRef.current;
},
generateLegend: function generateLegend() {
return chartRef.current && chartRef.current.generateLegend();
},
refresh: function refresh() {
return chartRef.current && chartRef.current.update();
}
};
});
React.useEffect(function () {
initChart();
});
useUnmountEffect(function () {
destroyChart();
});
var otherProps = ChartBase.getOtherProps(props);
var className = classNames('p-chart', props.className);
var style = Object.assign({
width: props.width,
height: props.height
}, props.style);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
style: style,
className: className
}, otherProps), /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
width: props.width,
height: props.height
}));
}), function (prevProps, nextProps) {
return prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type;
});
PrimeReactChart.displayName = 'Chart';
var CheckboxBase = {
defaultProps: {
__TYPE: 'Checkbox',
id: null,
inputRef: null,
inputId: null,
value: null,
name: null,
checked: false,
trueValue: true,
falseValue: false,
style: null,
className: null,
disabled: false,
required: false,
readOnly: false,
tabIndex: null,
icon: 'pi pi-check',
tooltip: null,
tooltipOptions: null,
onChange: null,
onMouseDown: null,
onContextMenu: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CheckboxBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CheckboxBase.defaultProps);
}
};
var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = CheckboxBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var onClick = function onClick(event) {
if (!props.disabled && !props.readOnly && props.onChange) {
var _checked = isChecked();
var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement;
var isInputToggled = event.target === inputRef.current;
var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
if (isInputToggled || isCheckboxToggled) {
var value = _checked ? props.falseValue : props.trueValue;
props.onChange({
originalEvent: event,
value: props.value,
checked: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
type: 'checkbox',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
});
}
DomHandler.focus(inputRef.current);
event.preventDefault();
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Space' || event.key === ' ') {
// event.key is for Android support
onClick(event);
}
};
var isChecked = function isChecked() {
return props.checked === props.trueValue;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
inputRef.current.checked = isChecked();
}, [props.checked, props.trueValue]);
var checked = isChecked();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = CheckboxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-checkbox p-component', {
'p-checkbox-checked': checked,
'p-checkbox-disabled': props.disabled,
'p-checkbox-focused': focusedState
}, props.className);
var boxClass = classNames('p-checkbox-box', {
'p-highlight': checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
var icon = IconUtils.getJSXIcon(checked ? props.icon : '', {
className: 'p-checkbox-icon p-c'
}, {
props: props,
checked: checked
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown
}), /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: "checkbox",
id: props.inputId,
name: props.name,
tabIndex: props.tabIndex,
defaultChecked: checked,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
disabled: props.disabled,
readOnly: props.readOnly,
required: props.required
}, ariaProps))), /*#__PURE__*/React.createElement("div", {
className: boxClass
}, icon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
Checkbox.displayName = 'Checkbox';
var ChipBase = {
defaultProps: {
__TYPE: 'Chip',
label: null,
icon: null,
image: null,
removable: false,
removeIcon: 'pi pi-times-circle',
className: null,
style: null,
template: null,
imageAlt: 'chip',
onImageError: null,
onRemove: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ChipBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ChipBase.defaultProps);
}
};
var Chip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ChipBase.getProps(inProps);
var elementRef = React.useRef(null);
var _React$useState = React.useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var onKeyDown = function onKeyDown(event) {
if (event.keyCode === 13) {
// enter
close(event);
}
};
var close = function close(event) {
setVisibleState(false);
if (props.onRemove) {
props.onRemove(event);
}
};
var createContent = function createContent() {
var content = [];
if (props.image) {
content.push( /*#__PURE__*/React.createElement("img", {
key: "image",
src: props.image,
alt: props.imageAlt,
onError: props.onImageError
}));
} else if (props.icon) {
content.push(IconUtils.getJSXIcon(props.icon, {
key: 'icon',
className: 'p-chip-icon'
}, {
props: props
}));
}
if (props.label) {
content.push( /*#__PURE__*/React.createElement("span", {
key: "label",
className: "p-chip-text"
}, props.label));
}
if (props.removable) {
content.push(IconUtils.getJSXIcon(props.removeIcon, {
key: 'removeIcon',
tabIndex: 0,
className: 'p-chip-remove-icon',
onClick: close,
onKeyDown: onKeyDown
}, {
props: props
}));
}
return content;
};
var createElement = function createElement() {
var otherProps = ChipBase.getOtherProps(props);
var className = classNames('p-chip p-component', {
'p-chip-image': props.image != null
}, props.className);
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps), content);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return visibleState && createElement();
}));
Chip.displayName = 'Chip';
var ChipsBase = {
defaultProps: {
__TYPE: 'Chips',
id: null,
inputRef: null,
inputId: null,
name: null,
placeholder: null,
value: null,
max: null,
disabled: null,
readOnly: false,
removable: true,
style: null,
className: null,
tooltip: null,
tooltipOptions: null,
ariaLabelledBy: null,
separator: null,
allowDuplicate: true,
itemTemplate: null,
keyfilter: null,
addOnBlur: null,
onAdd: null,
onRemove: null,
onChange: null,
onFocus: null,
onBlur: null,
onKeyDown: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ChipsBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ChipsBase.defaultProps);
}
};
var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ChipsBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var removeItem = function removeItem(event, index) {
if (props.disabled && props.readOnly) {
return;
}
var values = _toConsumableArray(props.value);
var removedItem = values.splice(index, 1);
if (!isRemovable(removedItem, index)) {
return;
}
if (props.onRemove) {
props.onRemove({
originalEvent: event,
value: removedItem
});
}
if (props.onChange) {
props.onChange({
originalEvent: event,
value: values,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: values
}
});
}
};
var addItem = function addItem(event, item, preventDefault) {
if (item && item.trim().length) {
var values = props.value ? _toConsumableArray(props.value) : [];
if (props.allowDuplicate || values.indexOf(item) === -1) {
var allowAddition = true;
if (props.onAdd) {
allowAddition = props.onAdd({
originalEvent: event,
value: item
});
}
if (allowAddition !== false) {
values.push(item);
}
}
updateInput(event, values, preventDefault);
}
};
var onWrapperClick = function onWrapperClick() {
DomHandler.focus(inputRef.current);
};
var onKeyDown = function onKeyDown(event) {
var inputValue = event.target.value;
var values = props.value || [];
props.onKeyDown && props.onKeyDown(event);
// do not continue if the user defined keydown wants to prevent
if (event.defaultPrevented) {
return;
}
switch (event.key) {
case 'Backspace':
if (inputRef.current.value.length === 0 && values.length > 0) {
removeItem(event, values.length - 1);
}
break;
case 'Enter':
if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
addItem(event, inputValue, true);
}
break;
default:
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter);
}
if (isMaxedOut()) {
event.preventDefault();
} else if (props.separator === ',') {
// GitHub #3885 Android Opera gives strange code 229 for comma
if (event.key === props.separator || DomHandler.isAndroid() && event.which === 229) {
addItem(event, inputValue, true);
}
}
break;
}
};
var updateInput = function updateInput(event, items, preventDefault) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: items,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: items
}
});
}
inputRef.current.value = '';
preventDefault && event.preventDefault();
};
var onPaste = function onPaste(event) {
if (props.separator) {
var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter);
}
if (pastedData) {
var values = props.value || [];
var pastedValues = pastedData.split(props.separator);
pastedValues = pastedValues.filter(function (val) {
return (props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length;
});
values = [].concat(_toConsumableArray(values), _toConsumableArray(pastedValues));
updateInput(event, values, true);
}
}
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
if (props.addOnBlur) {
var inputValue = event.target.value;
var values = props.value || [];
if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
addItem(event, inputValue, true);
}
}
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var isMaxedOut = function isMaxedOut() {
return props.max && props.value && props.max === props.value.length;
};
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, currentValue]);
var isRemovable = function isRemovable(value, index) {
return ObjectUtils.getPropValue(props.removable, {
value: value,
index: index,
props: props
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
var createRemoveIcon = function createRemoveIcon(value, index) {
if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
return /*#__PURE__*/React.createElement("span", {
className: "p-chips-token-icon pi pi-times-circle",
onClick: function onClick(event) {
return removeItem(event, index);
}
});
}
return null;
};
var createItem = function createItem(value, index) {
var content = props.itemTemplate ? props.itemTemplate(value) : value;
var label = /*#__PURE__*/React.createElement("span", {
className: "p-chips-token-label"
}, content);
var icon = createRemoveIcon(value, index);
return /*#__PURE__*/React.createElement("li", {
key: index,
className: "p-chips-token p-highlight"
}, label, icon);
};
var createInput = function createInput() {
return /*#__PURE__*/React.createElement("li", {
className: "p-chips-input-token"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
id: props.inputId,
placeholder: props.placeholder,
type: "text",
name: props.name,
disabled: props.disabled || isMaxedOut(),
onKeyDown: onKeyDown,
onPaste: onPaste,
onFocus: onFocus,
onBlur: onBlur,
readOnly: props.readOnly
}, ariaProps)));
};
var createItems = function createItems() {
return props.value ? props.value.map(createItem) : null;
};
var createList = function createList() {
var className = classNames('p-inputtext p-chips-multiple-container', {
'p-disabled': props.disabled,
'p-focus': focusedState
});
var items = createItems();
var input = createInput();
return /*#__PURE__*/React.createElement("ul", {
ref: listRef,
className: className,
onClick: onWrapperClick
}, items, input);
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = ChipsBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-chips p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState
}, props.className);
var list = createList();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), list), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: inputRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
Chips.displayName = 'Chips';
var ColorPickerBase = {
defaultProps: {
__TYPE: 'ColorPicker',
appendTo: null,
className: null,
defaultColor: 'ff0000',
disabled: false,
format: 'hex',
id: null,
inline: false,
inputId: null,
inputRef: null,
onChange: null,
onHide: null,
onShow: null,
panelClassName: null,
panelStyle: null,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
value: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ColorPickerBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ColorPickerBase.defaultProps);
}
};
var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var createElement = function createElement() {
var className = classNames('p-colorpicker-panel', props.panelClassName, {
'p-colorpicker-overlay-panel': !props.inline,
'p-disabled': props.disabled,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: props.panelStyle,
onClick: props.onClick
}, props.children));
};
var element = createElement();
return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
ColorPickerPanel.displayName = 'ColorPickerPanel';
var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ColorPickerBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var colorSelectorRef = React.useRef(null);
var colorHandleRef = React.useRef(null);
var hueHandleRef = React.useRef(null);
var hueViewRef = React.useRef(null);
var hueDragging = React.useRef(false);
var hsbValue = React.useRef(null);
var colorDragging = React.useRef(false);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
colorDragging.current && pickColor(event);
hueDragging.current && pickHue(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener() {
colorDragging.current = hueDragging.current = false;
DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var onPanelClick = function onPanelClick(event) {
if (!props.inline) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var onHueMousedown = function onHueMousedown(event) {
if (props.disabled) {
return;
}
bindDragListeners();
onHueDragStart(event);
};
var onHueDragStart = function onHueDragStart(event) {
if (props.disabled) {
return;
}
hueDragging.current = true;
pickHue(event);
DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
};
var pickHue = function pickHue(event) {
var top = hueViewRef.current.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
hsbValue.current = validateHSB({
h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150),
s: 100,
b: 100
});
updateColorSelector();
updateHue();
updateModel();
};
var onColorMousedown = function onColorMousedown(event) {
if (props.disabled) {
return;
}
bindDragListeners();
onColorDragStart(event);
};
var onColorDragStart = function onColorDragStart(event) {
if (props.disabled) {
return;
}
colorDragging.current = true;
pickColor(event);
DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
event.preventDefault();
};
var onDrag = function onDrag(event) {
if (colorDragging.current) {
pickColor(event);
event.preventDefault();
}
if (hueDragging.current) {
pickHue(event);
event.preventDefault();
}
};
var onDragEnd = function onDragEnd() {
colorDragging.current = false;
hueDragging.current = false;
DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
unbindDragListeners();
};
var bindDragListeners = function bindDragListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindDragListeners = function unbindDragListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var pickColor = function pickColor(event) {
var rect = colorSelectorRef.current.getBoundingClientRect();
var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
var left = rect.left + document.body.scrollLeft;
var saturation = Math.floor(100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left)) / 150);
var brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150);
hsbValue.current = validateHSB({
h: hsbValue.current.h,
s: saturation,
b: brightness
});
updateColorHandle();
updateInput();
updateModel();
};
var updateModel = function updateModel() {
switch (props.format) {
case 'hex':
onChange(HSBtoHEX(hsbValue.current));
break;
case 'rgb':
onChange(HSBtoRGB(hsbValue.current));
break;
case 'hsb':
onChange(hsbValue.current);
break;
}
};
var toHSB = function toHSB(value) {
var hsb;
if (value) {
switch (props.format) {
case 'hex':
hsb = HEXtoHSB(value);
break;
case 'rgb':
hsb = RGBtoHSB(value);
break;
case 'hsb':
hsb = value;
break;
}
} else {
hsb = HEXtoHSB(props.defaultColor);
}
return hsb;
};
var updateHSBValue = function updateHSBValue(value) {
hsbValue.current = toHSB(value);
};
var onChange = function onChange(value) {
if (props.onChange) {
props.onChange({
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var updateColorSelector = function updateColorSelector() {
if (colorSelectorRef.current) {
var newHsbValue = validateHSB({
h: hsbValue.current.h,
s: 100,
b: 100
});
colorSelectorRef.current.style.backgroundColor = '#' + HSBtoHEX(newHsbValue);
}
};
var updateColorHandle = function updateColorHandle() {
if (colorHandleRef.current) {
colorHandleRef.current.style.left = Math.floor(150 * hsbValue.current.s / 100) + 'px';
colorHandleRef.current.style.top = Math.floor(150 * (100 - hsbValue.current.b) / 100) + 'px';
}
};
var updateHue = function updateHue() {
if (hueHandleRef.current) {
hueHandleRef.current.style.top = Math.floor(150 - 150 * hsbValue.current.h / 360) + 'px';
}
};
var updateInput = function updateInput() {
if (inputRef.current) {
inputRef.current.style.backgroundColor = '#' + HSBtoHEX(hsbValue.current);
}
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var onInputClick = function onInputClick() {
togglePanel();
};
var togglePanel = function togglePanel() {
overlayVisibleState ? hide() : show();
};
var onInputKeydown = function onInputKeydown(event) {
switch (event.which) {
//space
case 32:
togglePanel();
event.preventDefault();
break;
//escape and tab
case 27:
case 9:
hide();
break;
}
};
var validateHSB = function validateHSB(hsb) {
return {
h: Math.min(360, Math.max(0, hsb.h)),
s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b))
};
};
var HEXtoRGB = function HEXtoRGB(hex) {
var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
return {
r: hexValue >> 16,
g: (hexValue & 0x00ff00) >> 8,
b: hexValue & 0x0000ff
};
};
var HEXtoHSB = function HEXtoHSB(hex) {
return RGBtoHSB(HEXtoRGB(hex));
};
var RGBtoHSB = function RGBtoHSB(rgb) {
var hsb = {
h: 0,
s: 0,
b: 0
};
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
hsb.s = max !== 0 ? 255 * delta / max : 0;
if (hsb.s !== 0) {
if (rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g === max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60;
if (hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
};
var HSBtoRGB = function HSBtoRGB(hsb) {
var rgb = {
r: null,
g: null,
b: null
};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s === 0) {
rgb = {
r: v,
g: v,
b: v
};
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h === 360) h = 0;
if (h < 60) {
rgb.r = t1;
rgb.b = t2;
rgb.g = t2 + t3;
} else if (h < 120) {
rgb.g = t1;
rgb.b = t2;
rgb.r = t1 - t3;
} else if (h < 180) {
rgb.g = t1;
rgb.r = t2;
rgb.b = t2 + t3;
} else if (h < 240) {
rgb.b = t1;
rgb.r = t2;
rgb.g = t1 - t3;
} else if (h < 300) {
rgb.b = t1;
rgb.g = t2;
rgb.r = t2 + t3;
} else if (h < 360) {
rgb.r = t1;
rgb.g = t2;
rgb.b = t1 - t3;
} else {
rgb.r = 0;
rgb.g = 0;
rgb.b = 0;
}
}
return {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
};
};
var RGBtoHEX = function RGBtoHEX(rgb) {
var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
for (var key in hex) {
if (hex[key].length === 1) {
hex[key] = '0' + hex[key];
}
}
return hex.join('');
};
var HSBtoHEX = function HSBtoHEX(hsb) {
return RGBtoHEX(HSBtoRGB(hsb));
};
var updateUI = function updateUI() {
updateHue();
updateColorHandle();
updateInput();
updateColorSelector();
};
var alignOverlay = function alignOverlay() {
if (inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
updateHSBValue(props.value);
updateUI();
});
useUpdateEffect(function () {
if (!colorDragging.current && !hueDragging.current) {
updateHSBValue(props.value);
}
}, [props.value]);
useUpdateEffect(function () {
updateUI();
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createColorSelector = function createColorSelector() {
return /*#__PURE__*/React.createElement("div", {
ref: colorSelectorRef,
className: "p-colorpicker-color-selector",
onMouseDown: onColorMousedown,
onTouchStart: onColorDragStart,
onTouchMove: onDrag,
onTouchEnd: onDragEnd
}, /*#__PURE__*/React.createElement("div", {
className: "p-colorpicker-color"
}, /*#__PURE__*/React.createElement("div", {
ref: colorHandleRef,
className: "p-colorpicker-color-handle"
})));
};
var createHue = function createHue() {
return /*#__PURE__*/React.createElement("div", {
ref: hueViewRef,
className: "p-colorpicker-hue",
onMouseDown: onHueMousedown,
onTouchStart: onHueDragStart,
onTouchMove: onDrag,
onTouchEnd: onDragEnd
}, /*#__PURE__*/React.createElement("div", {
ref: hueHandleRef,
className: "p-colorpicker-hue-handle"
}));
};
var createContent = function createContent() {
var colorSelector = createColorSelector();
var hue = createHue();
return /*#__PURE__*/React.createElement("div", {
className: "p-colorpicker-content"
}, colorSelector, hue);
};
var createInput = function createInput() {
if (!props.inline) {
var inputClassName = classNames('p-colorpicker-preview p-inputtext', {
'p-disabled': props.disabled
});
var inputProps = ColorPickerBase.getOtherProps(props);
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: "text",
className: inputClassName,
readOnly: true,
id: props.inputId,
tabIndex: props.tabIndex,
disabled: props.disabled,
onClick: onInputClick,
onKeyDown: onInputKeydown
}, inputProps));
}
return null;
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = ColorPickerBase.getOtherProps(props);
var className = classNames('p-colorpicker p-component', {
'p-colorpicker-overlay': !props.inline
}, props.className);
var content = createContent();
var input = createInput();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
style: props.style,
className: className
}, otherProps), input, /*#__PURE__*/React.createElement(ColorPickerPanel, {
ref: overlayRef,
appendTo: props.appendTo,
inline: props.inline,
disabled: props.disabled,
panelStyle: props.panelStyle,
panelClassName: props.panelClassName,
onClick: onPanelClick,
"in": props.inline || overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
transitionOptions: props.transitionOptions
}, content)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
ColorPicker.displayName = 'ColorPicker';
var Column = function Column() {};
Column.displayName = 'Column';
var ColumnGroup = function ColumnGroup() {};
ColumnGroup.displayName = 'ColumnGroup';
var DialogBase = {
defaultProps: {
__TYPE: 'Dialog',
appendTo: null,
ariaCloseIconLabel: null,
baseZIndex: 0,
blockScroll: false,
breakpoints: null,
className: null,
closable: true,
closeOnEscape: true,
contentClassName: null,
contentStyle: null,
dismissableMask: false,
draggable: true,
focusOnShow: true,
footer: null,
header: null,
headerClassName: null,
headerStyle: null,
icons: null,
id: null,
keepInViewport: true,
maskClassName: null,
maskStyle: null,
maximizable: false,
maximized: false,
minX: 0,
minY: 0,
modal: true,
onClick: null,
onDrag: null,
onDragEnd: null,
onDragStart: null,
onHide: null,
onMaskClick: null,
onMaximize: null,
onResize: null,
onResizeEnd: null,
onResizeStart: null,
onShow: null,
position: 'center',
resizable: true,
rtl: false,
showHeader: true,
style: null,
transitionOptions: null,
visible: false,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DialogBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DialogBase.defaultProps);
}
};
var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DialogBase.getProps(inProps);
var uniqueId = props.id ? props.id : UniqueComponentId();
var _React$useState = React.useState(uniqueId),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0];
_React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
maskVisibleState = _React$useState4[0],
setMaskVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
visibleState = _React$useState6[0],
setVisibleState = _React$useState6[1];
var _React$useState7 = React.useState(props.maximized),
_React$useState8 = _slicedToArray(_React$useState7, 2),
maximizedState = _React$useState8[0],
setMaximizedState = _React$useState8[1];
var dialogRef = React.useRef(null);
var maskRef = React.useRef(null);
var contentRef = React.useRef(null);
var headerRef = React.useRef(null);
var footerRef = React.useRef(null);
var closeRef = React.useRef(null);
var dragging = React.useRef(false);
var resizing = React.useRef(false);
var lastPageX = React.useRef(null);
var lastPageY = React.useRef(null);
var styleElement = React.useRef(null);
var attributeSelector = React.useRef(uniqueId);
var maximized = props.onMaximize ? props.maximized : maximizedState;
var _useEventListener = useEventListener({
type: 'keydown',
listener: function listener(event) {
return onKeyDown(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentKeyDownListener = _useEventListener2[0],
unbindDocumentKeyDownListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mousemove',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onResize(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentResizeListener = _useEventListener4[0],
unbindDocumentResizeListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'mouseup',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onResizeEnd(event);
}
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentResizeEndListener = _useEventListener6[0],
unbindDocumentResizEndListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'mousemove',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentDragListener = _useEventListener8[0],
unbindDocumentDragListener = _useEventListener8[1];
var _useEventListener9 = useEventListener({
type: 'mouseup',
target: function target() {
return window.document;
},
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener10 = _slicedToArray(_useEventListener9, 2),
bindDocumentDragEndListener = _useEventListener10[0],
unbindDocumentDragEndListener = _useEventListener10[1];
var onClose = function onClose(event) {
props.onHide();
event.preventDefault();
};
var focus = function focus() {
var activeElement = document.activeElement;
var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
if (!isActiveElementInDialog && props.closable && props.showHeader) {
closeRef.current.focus();
}
};
var onMaskClick = function onMaskClick(event) {
if (props.dismissableMask && props.modal && maskRef.current === event.target) {
onClose(event);
}
props.onMaskClick && props.onMaskClick(event);
};
var toggleMaximize = function toggleMaximize(event) {
if (props.onMaximize) {
props.onMaximize({
originalEvent: event,
maximized: !maximized
});
} else {
setMaximizedState(function (prevMaximized) {
return !prevMaximized;
});
}
event.preventDefault();
};
var onKeyDown = function onKeyDown(event) {
var currentTarget = event.currentTarget;
if (!currentTarget || !currentTarget.primeDialogParams) {
return;
}
var params = currentTarget.primeDialogParams;
var paramLength = params.length;
var dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined;
if (dialogId !== idState) {
return;
}
var dialog = document.getElementById(dialogId);
if (props.closable && props.closeOnEscape && event.key === 'Escape') {
onClose(event);
event.stopImmediatePropagation();
params.splice(paramLength - 1, 1);
} else if (event.key === 'Tab') {
event.preventDefault();
var focusableElements = DomHandler.getFocusableElements(dialog);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
} else {
var focusedIndex = focusableElements.indexOf(document.activeElement);
if (event.shiftKey) {
if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();else focusableElements[focusedIndex - 1].focus();
} else {
if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();else focusableElements[focusedIndex + 1].focus();
}
}
}
}
};
var onDragStart = function onDragStart(event) {
if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
return;
}
if (props.draggable) {
dragging.current = true;
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
dialogRef.current.style.margin = '0';
DomHandler.addClass(document.body, 'p-unselectable-text');
props.onDragStart && props.onDragStart(event);
}
};
var onDrag = function onDrag(event) {
if (dragging.current) {
var width = DomHandler.getOuterWidth(dialogRef.current);
var height = DomHandler.getOuterHeight(dialogRef.current);
var deltaX = event.pageX - lastPageX.current;
var deltaY = event.pageY - lastPageY.current;
var offset = dialogRef.current.getBoundingClientRect();
var leftPos = offset.left + deltaX;
var topPos = offset.top + deltaY;
var viewport = DomHandler.getViewport();
dialogRef.current.style.position = 'fixed';
if (props.keepInViewport) {
if (leftPos >= props.minX && leftPos + width < viewport.width) {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos + 'px';
}
if (topPos >= props.minY && topPos + height < viewport.height) {
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos + 'px';
}
} else {
lastPageX.current = event.pageX;
dialogRef.current.style.left = leftPos + 'px';
lastPageY.current = event.pageY;
dialogRef.current.style.top = topPos + 'px';
}
props.onDrag && props.onDrag(event);
}
};
var onDragEnd = function onDragEnd(event) {
if (dragging.current) {
dragging.current = false;
DomHandler.removeClass(document.body, 'p-unselectable-text');
props.onDragEnd && props.onDragEnd(event);
}
};
var onResizeStart = function onResizeStart(event) {
if (props.resizable) {
resizing.current = true;
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
DomHandler.addClass(document.body, 'p-unselectable-text');
props.onResizeStart && props.onResizeStart(event);
}
};
var convertToPx = function convertToPx(value, property, viewport) {
!viewport && (viewport = DomHandler.getViewport());
var val = parseInt(value);
if (/^(\d+|(\.\d+))(\.\d+)?%$/.test(value)) {
return val * (viewport[property] / 100);
}
return val;
};
var onResize = function onResize(event) {
if (resizing.current) {
var deltaX = event.pageX - lastPageX.current;
var deltaY = event.pageY - lastPageY.current;
var width = DomHandler.getOuterWidth(dialogRef.current);
var height = DomHandler.getOuterHeight(dialogRef.current);
var offset = dialogRef.current.getBoundingClientRect();
var viewport = DomHandler.getViewport();
var hasBeenDragged = !parseInt(dialogRef.current.style.top) || !parseInt(dialogRef.current.style.left);
var minWidth = convertToPx(dialogRef.current.style.minWidth, 'width', viewport);
var minHeight = convertToPx(dialogRef.current.style.minHeight, 'height', viewport);
var newWidth = width + deltaX;
var newHeight = height + deltaY;
if (hasBeenDragged) {
newWidth += deltaX;
newHeight += deltaY;
}
if ((!minWidth || newWidth > minWidth) && offset.left + newWidth < viewport.width) {
dialogRef.current.style.width = newWidth + 'px';
}
if ((!minHeight || newHeight > minHeight) && offset.top + newHeight < viewport.height) {
dialogRef.current.style.height = newHeight + 'px';
}
lastPageX.current = event.pageX;
lastPageY.current = event.pageY;
props.onResize && props.onResize(event);
}
};
var onResizeEnd = function onResizeEnd(event) {
if (resizing.current) {
resizing.current = false;
DomHandler.removeClass(document.body, 'p-unselectable-text');
props.onResizeEnd && props.onResizeEnd(event);
}
};
var resetPosition = function resetPosition() {
dialogRef.current.style.position = '';
dialogRef.current.style.left = '';
dialogRef.current.style.top = '';
dialogRef.current.style.margin = '';
};
var getPositionClass = function getPositionClass() {
var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
var pos = positions.find(function (item) {
return item === props.position || item.replace('-', '') === props.position;
});
return pos ? "p-dialog-".concat(pos) : '';
};
var onEnter = function onEnter() {
dialogRef.current.setAttribute(attributeSelector.current, '');
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
if (props.focusOnShow) {
focus();
}
enableDocumentSettings();
};
var onExiting = function onExiting() {
if (props.modal) {
DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
}
if (props.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
};
var onExited = function onExited() {
dragging.current = false;
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
disableDocumentSettings();
};
var enableDocumentSettings = function enableDocumentSettings() {
bindGlobalListeners();
if (props.blockScroll || props.maximizable && maximized) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
};
var disableDocumentSettings = function disableDocumentSettings() {
unbindGlobalListeners();
var isMaximized = props.maximizable && maximized;
if (props.modal) {
var hasBlockScroll = document.primeDialogParams && document.primeDialogParams.some(function (param) {
return param.hasBlockScroll;
});
if (hasBlockScroll || isMaximized) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
} else if (props.blockScroll || isMaximized) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
};
var bindGlobalListeners = function bindGlobalListeners() {
if (props.draggable) {
bindDocumentDragListener();
bindDocumentDragEndListener();
}
if (props.resizable) {
bindDocumentResizeListener();
bindDocumentResizeEndListener();
}
bindDocumentKeyDownListener();
var newParam = {
id: idState,
hasBlockScroll: props.blockScroll
};
document.primeDialogParams = document.primeDialogParams ? [].concat(_toConsumableArray(document.primeDialogParams), [newParam]) : [newParam];
};
var unbindGlobalListeners = function unbindGlobalListeners() {
unbindDocumentDragListener();
unbindDocumentDragEndListener();
unbindDocumentResizeListener();
unbindDocumentResizEndListener();
unbindDocumentKeyDownListener();
document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter(function (param) {
return param.id !== idState;
});
};
var createStyle = function createStyle() {
styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var innerHTML = '';
for (var breakpoint in props.breakpoints) {
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-dialog[").concat(attributeSelector.current, "] {\n width: ").concat(props.breakpoints[breakpoint], " !important;\n }\n }\n ");
}
styleElement.current.innerHTML = innerHTML;
};
var changeScrollOnMaximizable = function changeScrollOnMaximizable() {
if (!props.blockScroll) {
var funcName = maximized ? 'addClass' : 'removeClass';
DomHandler[funcName](document.body, 'p-overflow-hidden');
}
};
useMountEffect(function () {
if (props.visible) {
setMaskVisibleState(true);
}
if (props.breakpoints) {
createStyle();
}
});
useUpdateEffect(function () {
if (props.visible && !maskVisibleState) {
setMaskVisibleState(true);
}
if (props.visible !== visibleState && maskVisibleState) {
setVisibleState(props.visible);
}
});
useUpdateEffect(function () {
if (maskVisibleState) {
ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']);
setVisibleState(true);
}
}, [maskVisibleState]);
useUpdateEffect(function () {
changeScrollOnMaximizable();
}, [props.maximized, maximizedState]);
useUnmountEffect(function () {
disableDocumentSettings();
DomHandler.removeInlineStyle(styleElement.current);
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
resetPosition: resetPosition,
getElement: function getElement() {
return dialogRef.current;
},
getMask: function getMask() {
return maskRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getHeader: function getHeader() {
return headerRef.current;
},
getFooter: function getFooter() {
return footerRef.current;
},
getCloseButton: function getCloseButton() {
return closeRef.current;
}
};
});
var createCloseIcon = function createCloseIcon() {
if (props.closable) {
var ariaLabel = props.ariaCloseIconLabel || localeOption('close');
return /*#__PURE__*/React.createElement("button", {
ref: closeRef,
type: "button",
className: "p-dialog-header-icon p-dialog-header-close p-link",
"aria-label": ariaLabel,
onClick: onClose
}, /*#__PURE__*/React.createElement("span", {
className: "p-dialog-header-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createMaximizeIcon = function createMaximizeIcon() {
var iconClassName = classNames('p-dialog-header-maximize-icon pi', {
'pi-window-maximize': !maximized,
'pi-window-minimize': maximized
});
if (props.maximizable) {
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-dialog-header-icon p-dialog-header-maximize p-link",
onClick: toggleMaximize
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createHeader = function createHeader() {
if (props.showHeader) {
var closeIcon = createCloseIcon();
var maximizeIcon = createMaximizeIcon();
var icons = ObjectUtils.getJSXElement(props.icons, props);
var header = ObjectUtils.getJSXElement(props.header, props);
var headerId = idState + '_header';
var headerClassName = classNames('p-dialog-header', props.headerClassName);
return /*#__PURE__*/React.createElement("div", {
ref: headerRef,
style: props.headerStyle,
className: headerClassName,
onMouseDown: onDragStart
}, /*#__PURE__*/React.createElement("div", {
id: headerId,
className: "p-dialog-title"
}, header), /*#__PURE__*/React.createElement("div", {
className: "p-dialog-header-icons"
}, icons, maximizeIcon, closeIcon));
}
return null;
};
var createContent = function createContent() {
var className = classNames('p-dialog-content', props.contentClassName);
var contentId = idState + '_content';
return /*#__PURE__*/React.createElement("div", {
id: contentId,
ref: contentRef,
className: className,
style: props.contentStyle
}, props.children);
};
var createFooter = function createFooter() {
var footer = ObjectUtils.getJSXElement(props.footer, props);
return footer && /*#__PURE__*/React.createElement("div", {
ref: footerRef,
className: "p-dialog-footer"
}, footer);
};
var createResizer = function createResizer() {
if (props.resizable) {
return /*#__PURE__*/React.createElement("span", {
className: "p-resizable-handle",
style: {
zIndex: 90
},
onMouseDown: onResizeStart
});
}
return null;
};
var createElement = function createElement() {
var otherProps = DialogBase.getOtherProps(props);
var className = classNames('p-dialog p-component', props.className, {
'p-dialog-rtl': props.rtl,
'p-dialog-maximized': maximized,
'p-dialog-default': !maximized,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var maskClassName = classNames('p-dialog-mask', getPositionClass(), {
'p-component-overlay p-component-overlay-enter': props.modal,
'p-dialog-visible': maskVisibleState,
'p-dialog-draggable': props.draggable,
'p-dialog-resizable': props.resizable
}, props.maskClassName);
var header = createHeader();
var content = createContent();
var footer = createFooter();
var resizer = createResizer();
var headerId = idState + '_header';
var contentId = idState + '_content';
var transitionTimeout = {
enter: props.position === 'center' ? 150 : 300,
exit: props.position === 'center' ? 150 : 300
};
return /*#__PURE__*/React.createElement("div", {
ref: maskRef,
style: props.maskStyle,
className: maskClassName,
onClick: onMaskClick
}, /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: dialogRef,
classNames: "p-dialog",
timeout: transitionTimeout,
"in": visibleState,
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExiting: onExiting,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: dialogRef,
id: idState,
className: className,
style: props.style,
onClick: props.onClick,
role: "dialog"
}, otherProps, {
"aria-labelledby": headerId,
"aria-describedby": contentId,
"aria-modal": props.modal
}), header, content, footer, resizer)));
};
var createDialog = function createDialog() {
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo,
visible: true
});
};
return maskVisibleState && createDialog();
});
Dialog.displayName = 'Dialog';
var ConfirmDialogBase = {
defaultProps: {
__TYPE: 'ConfirmDialog',
tagKey: undefined,
visible: undefined,
message: null,
rejectLabel: null,
acceptLabel: null,
icon: null,
rejectIcon: null,
acceptIcon: null,
rejectClassName: null,
acceptClassName: null,
className: null,
appendTo: null,
footer: null,
breakpoints: null,
onHide: null,
accept: null,
reject: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ConfirmDialogBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ConfirmDialogBase.defaultProps);
}
};
function ownKeys$t(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$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var confirmDialog = function confirmDialog() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
props = _objectSpread$t(_objectSpread$t({}, props), {
visible: props.visible === undefined ? true : props.visible
});
props.visible && OverlayService.emit('confirm-dialog', props);
var show = function show() {
var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
OverlayService.emit('confirm-dialog', _objectSpread$t(_objectSpread$t(_objectSpread$t({}, props), updatedProps), {
visible: true
}));
};
var hide = function hide() {
OverlayService.emit('confirm-dialog', {
visible: false
});
};
return {
show: show,
hide: hide
};
};
var ConfirmDialog = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ConfirmDialogBase.getProps(inProps);
var _React$useState = React.useState(props.visible),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
reshowState = _React$useState4[0],
setReshowState = _React$useState4[1];
var confirmProps = React.useRef(null);
var getCurrentProps = function getCurrentProps() {
return confirmProps.current || props;
};
var getPropValue = function getPropValue(key) {
return (confirmProps.current || props)[key];
};
var callbackFromProp = function callbackFromProp(key) {
for (var _len = arguments.length, param = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
param[_key - 1] = arguments[_key];
}
return ObjectUtils.getPropValue(getPropValue(key), param);
};
var acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
var rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
var accept = function accept() {
callbackFromProp('accept');
hide('accept');
};
var reject = function reject() {
callbackFromProp('reject');
hide('reject');
};
var show = function show() {
setVisibleState(true);
};
var hide = function hide() {
var result = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cancel';
setVisibleState(false);
callbackFromProp('onHide', result);
};
var confirm = function confirm(updatedProps) {
if (updatedProps.tagKey === props.tagKey) {
var isVisibleChanged = visibleState !== updatedProps.visible;
var targetChanged = getPropValue('target') !== updatedProps.target;
if (targetChanged && !props.target) {
hide();
confirmProps.current = updatedProps;
setReshowState(true);
} else if (isVisibleChanged) {
confirmProps.current = updatedProps;
updatedProps.visible ? show() : hide();
}
}
};
React.useEffect(function () {
props.visible ? show() : hide();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.visible]);
React.useEffect(function () {
if (!props.target && !props.message) {
OverlayService.on('confirm-dialog', confirm);
}
return function () {
OverlayService.off('confirm-dialog', confirm);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.target]);
useUpdateEffect(function () {
reshowState && show();
}, [reshowState]);
useUnmountEffect(function () {
OverlayService.off('confirm-dialog', confirm);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
confirm: confirm
};
});
var createFooter = function createFooter() {
var acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
var rejectClassName = classNames('p-confirm-dialog-reject', {
'p-button-text': !getPropValue('rejectClassName')
}, getPropValue('rejectClassName'));
var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
label: rejectLabel,
icon: getPropValue('rejectIcon'),
className: rejectClassName,
onClick: reject
}), /*#__PURE__*/React.createElement(Button, {
label: acceptLabel,
icon: getPropValue('acceptIcon'),
className: acceptClassName,
onClick: accept,
autoFocus: true
}));
if (getPropValue('footer')) {
var defaultContentOptions = {
accept: accept,
reject: reject,
acceptClassName: acceptClassName,
rejectClassName: rejectClassName,
acceptLabel: acceptLabel,
rejectLabel: rejectLabel,
element: content,
props: getCurrentProps()
};
return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
}
return content;
};
var createElement = function createElement() {
var currentProps = getCurrentProps();
var className = classNames('p-confirm-dialog', getPropValue('className'));
var otherProps = ConfirmDialogBase.getOtherProps(currentProps);
var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
var icon = IconUtils.getJSXIcon(getPropValue('icon'), {
className: 'p-confirm-dialog-icon'
}, {
props: currentProps
});
var footer = createFooter();
return /*#__PURE__*/React.createElement(Dialog, _extends({
visible: visibleState
}, otherProps, {
className: className,
footer: footer,
onHide: hide,
breakpoints: getPropValue('breakpoints')
}), icon, /*#__PURE__*/React.createElement("span", {
className: "p-confirm-dialog-message"
}, message));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: getPropValue('appendTo')
});
}));
ConfirmDialog.displayName = 'ConfirmDialog';
var ConfirmPopupBase = {
defaultProps: {
__TYPE: 'ConfirmPopup',
tagKey: undefined,
target: null,
visible: false,
message: null,
rejectLabel: null,
acceptLabel: null,
icon: null,
rejectIcon: null,
acceptIcon: null,
rejectClassName: null,
acceptClassName: null,
className: null,
style: null,
appendTo: null,
dismissable: true,
footer: null,
onShow: null,
onHide: null,
accept: null,
reject: null,
transitionOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ConfirmPopupBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ConfirmPopupBase.defaultProps);
}
};
function ownKeys$s(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$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var confirmPopup = function confirmPopup() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
props = _objectSpread$s(_objectSpread$s({}, props), {
visible: props.visible === undefined ? true : props.visible
});
props.visible && OverlayService.emit('confirm-popup', props);
var show = function show() {
var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
OverlayService.emit('confirm-popup', _objectSpread$s(_objectSpread$s(_objectSpread$s({}, props), updatedProps), {
visible: true
}));
};
var hide = function hide() {
OverlayService.emit('confirm-popup', {
visible: false
});
};
return {
show: show,
hide: hide
};
};
var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ConfirmPopupBase.getProps(inProps);
var _React$useState = React.useState(props.visible),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
reshowState = _React$useState4[0],
setReshowState = _React$useState4[1];
var overlayRef = React.useRef(null);
var acceptBtnRef = React.useRef(null);
var isPanelClicked = React.useRef(false);
var overlayEventListener = React.useRef(null);
var confirmProps = React.useRef(null);
var getCurrentProps = function getCurrentProps() {
return confirmProps.current || props;
};
var getPropValue = function getPropValue(key) {
return (confirmProps.current || props)[key];
};
var callbackFromProp = function callbackFromProp(key) {
for (var _len = arguments.length, param = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
param[_key - 1] = arguments[_key];
}
return ObjectUtils.getPropValue(getPropValue(key), param);
};
var acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
var rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
var _useOverlayListener = useOverlayListener({
target: getPropValue('target'),
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? props.dismissable && !isPanelClicked.current && hide('hide') : hide('hide');
}
isPanelClicked.current = false;
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
isPanelClicked.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: getPropValue('target')
});
};
var accept = function accept() {
callbackFromProp('accept');
hide('accept');
};
var reject = function reject() {
callbackFromProp('reject');
hide('reject');
};
var show = function show() {
setVisibleState(true);
setReshowState(false);
overlayEventListener.current = function (e) {
!isOutsideClicked(e.target) && (isPanelClicked.current = true);
};
OverlayService.on('overlay-click', overlayEventListener.current);
};
var hide = function hide(result) {
setVisibleState(false);
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
if (result) {
callbackFromProp('onHide', result);
}
};
var onEnter = function onEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
align();
};
var onEntered = function onEntered() {
bindOverlayListener();
if (acceptBtnRef.current) {
acceptBtnRef.current.focus();
}
callbackFromProp('onShow');
};
var onExit = function onExit() {
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(overlayRef.current);
isPanelClicked.current = false;
};
var align = function align() {
if (getPropValue('target')) {
DomHandler.absolutePosition(overlayRef.current, getPropValue('target'));
var containerOffset = DomHandler.getOffset(overlayRef.current);
var targetOffset = DomHandler.getOffset(getPropValue('target'));
var arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
if (containerOffset.top < targetOffset.top) {
DomHandler.addClass(overlayRef.current, 'p-confirm-popup-flipped');
}
}
};
var isOutsideClicked = function isOutsideClicked(target) {
return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var confirm = function confirm(updatedProps) {
if (updatedProps.tagKey === props.tagKey) {
var isVisibleChanged = visibleState !== updatedProps.visible;
var targetChanged = getPropValue('target') !== updatedProps.target;
if (targetChanged && !props.target) {
hide();
confirmProps.current = updatedProps;
setReshowState(true);
} else if (isVisibleChanged) {
confirmProps.current = updatedProps;
updatedProps.visible ? show() : hide();
}
}
};
React.useEffect(function () {
props.visible ? show() : hide();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.visible]);
React.useEffect(function () {
if (!props.target && !props.message) {
OverlayService.on('confirm-popup', confirm);
}
return function () {
OverlayService.off('confirm-popup', confirm);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.target]);
useUpdateEffect(function () {
reshowState && show();
}, [reshowState]);
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
OverlayService.off('confirm-popup', confirm);
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
confirm: confirm
};
});
var createContent = function createContent() {
var currentProps = getCurrentProps();
var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
var icon = IconUtils.getJSXIcon(getPropValue('icon'), {
className: 'p-confirm-popup-icon'
}, {
props: currentProps
});
return /*#__PURE__*/React.createElement("div", {
className: "p-confirm-popup-content"
}, icon, /*#__PURE__*/React.createElement("span", {
className: "p-confirm-popup-message"
}, message));
};
var createFooter = function createFooter() {
var acceptClassName = classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName'));
var rejectClassName = classNames('p-confirm-popup-reject p-button-sm', {
'p-button-text': !getPropValue('rejectClassName')
}, getPropValue('rejectClassName'));
var content = /*#__PURE__*/React.createElement("div", {
className: "p-confirm-popup-footer"
}, /*#__PURE__*/React.createElement(Button, {
label: rejectLabel,
icon: getPropValue('rejectIcon'),
className: rejectClassName,
onClick: reject
}), /*#__PURE__*/React.createElement(Button, {
ref: acceptBtnRef,
label: acceptLabel,
icon: getPropValue('acceptIcon'),
className: acceptClassName,
onClick: accept
}));
if (getPropValue('footer')) {
var defaultContentOptions = {
accept: accept,
reject: reject,
className: 'p-confirm-popup-footer',
acceptClassName: acceptClassName,
rejectClassName: rejectClassName,
acceptLabel: acceptLabel,
rejectLabel: rejectLabel,
element: content,
props: getCurrentProps()
};
return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
}
return content;
};
var createElement = function createElement() {
var otherProps = ConfirmPopupBase.getOtherProps(props);
var className = classNames('p-confirm-popup p-component', getPropValue('className'), {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var content = createContent();
var footer = createFooter();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-connected-overlay",
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: getPropValue('transitionOptions'),
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: overlayRef,
id: getPropValue('id'),
className: className,
style: getPropValue('style')
}, otherProps, {
onClick: onPanelClick
}), content, footer));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: getPropValue('appendTo'),
visible: getPropValue('visible')
});
}));
ConfirmPopup.displayName = 'ConfirmPopup';
var ContextMenuBase = {
defaultProps: {
__TYPE: 'ContextMenu',
id: null,
model: null,
style: null,
className: null,
global: false,
autoZIndex: true,
baseZIndex: 0,
breakpoint: undefined,
scrollHeight: '400px',
appendTo: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ContextMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ContextMenuBase.defaultProps);
}
};
var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var submenuRef = React.useRef(null);
var active = props.root || !props.resetMenu;
if (props.resetMenu === true && activeItemState !== null) {
setActiveItemState(null);
}
var onItemMouseEnter = function onItemMouseEnter(event, item) {
if (item.disabled || props.isMobileMode) {
event.preventDefault();
return;
}
setActiveItemState(item);
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.isMobileMode && item.items) {
if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
}
if (!item.items) {
props.onLeafClick(event);
}
};
var position = function position() {
if (!props.isMobileMode) {
var parentItem = submenuRef.current.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - DomHandler.getWindowScrollTop();
if (top > viewport.height) {
submenuRef.current.style.top = viewport.height - top + 'px';
} else {
submenuRef.current.style.top = '0px';
}
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
submenuRef.current.style.left = -1 * sublistWidth + 'px';
} else {
submenuRef.current.style.left = itemOuterWidth + 'px';
}
}
};
var onEnter = function onEnter() {
position();
};
useUpdateEffect(function () {
active && position();
});
var createSeparator = function createSeparator(index) {
return /*#__PURE__*/React.createElement("li", {
key: 'separator_' + index,
className: "p-menu-separator",
role: "separator"
});
};
var createSubmenu = function createSubmenu(item) {
if (item.items) {
return /*#__PURE__*/React.createElement(ContextMenuSub, {
menuProps: props.menuProps,
model: item.items,
resetMenu: item !== activeItemState,
onLeafClick: props.onLeafClick,
isMobileMode: props.isMobileMode
});
}
return null;
};
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
var active = activeItemState === item;
var key = item.label + '_' + index;
var className = classNames('p-menuitem', {
'p-menuitem-active': active
}, item.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props.menuProps
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var submenu = createSubmenu(item);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: linkClassName,
target: item.target,
onClick: function onClick(event) {
return onItemClick(event, item);
},
role: "menuitem",
"aria-haspopup": item.items != null,
"aria-disabled": item.disabled
}, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
role: "none",
id: item.id,
className: className,
style: item.style,
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, item);
}
}, content, submenu);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var className = classNames({
'p-submenu-list': !props.root
});
var submenu = createMenu();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: submenuRef,
classNames: "p-contextmenusub",
"in": active,
timeout: {
enter: 0,
exit: 0
},
unmountOnExit: true,
onEnter: onEnter
}, /*#__PURE__*/React.createElement("ul", {
ref: submenuRef,
className: className
}, submenu));
});
ContextMenuSub.displayName = 'ContextMenuSub';
var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ContextMenuBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
reshowState = _React$useState4[0],
setReshowState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
resetMenuState = _React$useState6[0],
setResetMenuState = _React$useState6[1];
var _React$useState7 = React.useState(null),
_React$useState8 = _slicedToArray(_React$useState7, 2),
attributeSelectorState = _React$useState8[0],
setAttributeSelectorState = _React$useState8[1];
var menuRef = React.useRef(null);
var currentEvent = React.useRef(null);
var styleElementRef = React.useRef(null);
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (isOutsideClicked(event) && event.button !== 2) {
hide(event);
setResetMenuState(true);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'contextmenu',
listener: function listener(event) {
show(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 1),
bindDocumentContextMenuListener = _useEventListener4[0];
var _useResizeListener = useResizeListener({
listener: function listener(event) {
if (visibleState && !DomHandler.isTouchDevice()) {
hide(event);
}
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 2),
bindDocumentResizeListener = _useResizeListener2[0],
unbindDocumentResizeListener = _useResizeListener2[1];
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-contextmenu[").concat(selector, "] > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-contextmenu[").concat(selector, "] .p-submenu-list {\n position: relative;\n }\n\n .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n content: \"\\e930\";\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
var onMenuClick = function onMenuClick() {
setResetMenuState(false);
};
var onMenuMouseEnter = function onMenuMouseEnter() {
setResetMenuState(false);
};
var show = function show(event) {
event.stopPropagation();
event.preventDefault();
currentEvent.current = event;
if (visibleState) {
setReshowState(true);
} else {
setVisibleState(true);
props.onShow && props.onShow(currentEvent.current);
}
};
var hide = function hide(event) {
currentEvent.current = event;
setVisibleState(false);
setReshowState(false);
props.onHide && props.onHide(currentEvent.current);
};
var onEnter = function onEnter() {
if (props.autoZIndex) {
ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
}
position(currentEvent.current);
if (attributeSelectorState && props.breakpoint) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
};
var onEntered = function onEntered() {
bindDocumentListeners();
};
var onExit = function onExit() {
unbindDocumentListeners();
ZIndexUtils.clear(menuRef.current);
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
destroyStyle();
};
var position = function position(event) {
if (event) {
var left = event.pageX + 1;
var top = event.pageY + 1;
var width = menuRef.current.offsetParent ? menuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(menuRef.current);
var height = menuRef.current.offsetParent ? menuRef.current.offsetHeight : DomHandler.getHiddenElementOuterHeight(menuRef.current);
var viewport = DomHandler.getViewport();
//flip
if (left + width - document.body.scrollLeft > viewport.width) {
left -= width;
}
//flip
if (top + height - document.body.scrollTop > viewport.height) {
top -= height;
}
//fit
if (left < document.body.scrollLeft) {
left = document.body.scrollLeft;
}
//fit
if (top < document.body.scrollTop) {
top = document.body.scrollTop;
}
menuRef.current.style.left = left + 'px';
menuRef.current.style.top = top + 'px';
}
};
var onLeafClick = function onLeafClick(event) {
setResetMenuState(true);
hide(event);
event.stopPropagation();
};
var isOutsideClicked = function isOutsideClicked(event) {
return menuRef && menuRef.current && !(menuRef.current.isSameNode(event.target) || menuRef.current.contains(event.target));
};
var bindDocumentListeners = function bindDocumentListeners() {
bindDocumentResizeListener();
bindDocumentClickListener();
};
var unbindDocumentListeners = function unbindDocumentListeners() {
unbindDocumentResizeListener();
unbindDocumentClickListener();
};
useMountEffect(function () {
if (props.global) {
bindDocumentContextMenuListener();
}
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (attributeSelectorState && menuRef.current) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (visibleState) {
setVisibleState(false);
setReshowState(false);
setResetMenuState(true);
} else if (!reshowState && !visibleState && resetMenuState) {
show(currentEvent.current);
}
}, [reshowState]);
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return menuRef.current;
}
};
});
var createContextMenu = function createContextMenu() {
var otherProps = ContextMenuBase.getOtherProps(props);
var className = classNames('p-contextmenu p-component', props.className, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: menuRef,
classNames: "p-contextmenu",
"in": visibleState,
timeout: {
enter: 250,
exit: 0
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: menuRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onMenuClick,
onMouseEnter: onMenuMouseEnter
}), /*#__PURE__*/React.createElement(ContextMenuSub, {
menuProps: props,
model: props.model,
root: true,
resetMenu: resetMenuState,
onLeafClick: onLeafClick,
isMobileMode: isMobileMode
})));
};
var element = createContextMenu();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
ContextMenu.displayName = 'ContextMenu';
var DataScrollerBase = {
defaultProps: {
__TYPE: 'DataScroller',
id: null,
value: null,
rows: 0,
inline: false,
scrollHeight: null,
loader: false,
buffer: 0.9,
style: null,
className: null,
onLazyLoad: null,
emptyMessage: null,
itemTemplate: null,
header: null,
footer: null,
lazy: false,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DataScrollerBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DataScrollerBase.defaultProps);
}
};
var DataScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DataScrollerBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
dataToRenderState = _React$useState2[0],
setDataToRenderState = _React$useState2[1];
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var value = React.useRef(props.value);
var dataToRender = React.useRef([]);
var first = React.useRef(0);
var scrollFunction = React.useRef(null);
var handleDataChange = function handleDataChange() {
if (props.lazy) {
dataToRender.current = value.current;
setDataToRenderState(_toConsumableArray(dataToRender.current));
} else {
load();
}
};
var load = function load() {
if (props.lazy) {
if (props.onLazyLoad) {
props.onLazyLoad(createLazyLoadMetadata());
}
first.current += props.rows;
} else {
if (value.current) {
for (var i = first.current; i < first.current + props.rows; i++) {
if (i >= value.current.length) {
break;
}
dataToRender.current.push(value.current[i]);
}
if (value.current.length !== 0) {
first.current += props.rows;
}
setDataToRenderState(_toConsumableArray(dataToRender.current));
}
}
};
var reset = function reset() {
first.current = 0;
dataToRender.current = [];
setDataToRenderState(_toConsumableArray(dataToRender.current));
load();
};
var createLazyLoadMetadata = function createLazyLoadMetadata() {
return {
first: first.current,
rows: props.rows
};
};
var bindScrollListener = function bindScrollListener() {
if (props.inline) {
scrollFunction.current = function () {
var scrollTop = contentRef.current.scrollTop,
scrollHeight = contentRef.current.scrollHeight,
viewportHeight = contentRef.current.clientHeight;
if (scrollTop >= scrollHeight * props.buffer - viewportHeight) {
load();
}
};
contentRef.current.addEventListener('scroll', scrollFunction.current);
} else {
scrollFunction.current = function () {
var docBody = document.body,
docElement = document.documentElement,
scrollTop = window.pageYOffset || document.documentElement.scrollTop,
winHeight = docElement.clientHeight,
docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
if (scrollTop >= docHeight * props.buffer - winHeight) {
load();
}
};
window.addEventListener('scroll', scrollFunction.current);
}
};
var unbindScrollListener = function unbindScrollListener() {
if (scrollFunction.current) {
if (props.inline && contentRef.current) {
contentRef.current.removeEventListener('scroll', scrollFunction.current);
} else if (!props.loader) {
window.removeEventListener('scroll', scrollFunction.current);
}
}
scrollFunction.current = null;
};
useMountEffect(function () {
load();
if (!props.loader) {
bindScrollListener();
}
});
useUpdateEffect(function () {
if (props.value) {
value.current = props.value;
if (!props.lazy) {
first.current = 0;
}
dataToRender.current = [];
handleDataChange();
}
}, [props.value]);
useUpdateEffect(function () {
if (props.loader) {
unbindScrollListener();
}
}, [props.loader]);
useUnmountEffect(function () {
if (scrollFunction.current) {
unbindScrollListener();
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
load: load,
reset: reset,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-datascroller-header"
}, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
return /*#__PURE__*/React.createElement("div", {
className: "p-datascroller-footer"
}, props.footer);
}
return null;
};
var createItem = function createItem(_value, index) {
var content = props.itemTemplate ? props.itemTemplate(_value) : _value;
return /*#__PURE__*/React.createElement("li", {
key: index + '_datascrollitem'
}, content);
};
var createEmptyMessage = function createEmptyMessage() {
var content = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("li", null, content);
};
var createContent = function createContent() {
var content = ObjectUtils.isNotEmpty(dataToRenderState) ? dataToRenderState.map(createItem) : createEmptyMessage();
return /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: "p-datascroller-content",
style: {
maxHeight: props.scrollHeight
}
}, /*#__PURE__*/React.createElement("ul", {
className: "p-datascroller-list"
}, content));
};
var otherProps = DataScrollerBase.getOtherProps(props);
var className = classNames('p-datascroller p-component', props.className, {
'p-datascroller-inline': props.inline
});
var header = createHeader();
var footer = createFooter();
var content = createContent();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className
}, otherProps), header, content, footer);
}));
DataScroller.displayName = 'DataScroller';
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 ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
},
getCProps: function getCProps(column) {
return ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
},
getCOtherProps: function getCOtherProps(column) {
return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
}
};
var PaginatorBase = {
defaultProps: {
__TYPE: 'Paginator',
totalRecords: 0,
rows: 0,
first: 0,
pageLinkSize: 5,
rowsPerPageOptions: null,
alwaysShow: true,
style: null,
className: null,
template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
onPageChange: null,
leftContent: null,
rightContent: null,
dropdownAppendTo: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PaginatorBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PaginatorBase.defaultProps);
}
};
var CurrentPageReportBase = {
defaultProps: {
__TYPE: 'CurrentPageReport',
pageCount: null,
page: null,
first: null,
rows: null,
totalRecords: null,
reportTemplate: '({currentPage} of {totalPages})',
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, CurrentPageReportBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, CurrentPageReportBase.defaultProps);
}
};
var FirstPageLinkBase = {
defaultProps: {
__TYPE: 'FirstPageLink',
disabled: false,
onClick: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, FirstPageLinkBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, FirstPageLinkBase.defaultProps);
}
};
var JumpToPageInputBase = {
defaultProps: {
__TYPE: 'JumpToPageInput',
page: null,
rows: null,
pageCount: null,
disabled: false,
template: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, JumpToPageInputBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, JumpToPageInputBase.defaultProps);
}
};
var LastPageLinkBase = {
defaultProps: {
__TYPE: 'LastPageLink',
disabled: false,
onClick: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, LastPageLinkBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, LastPageLinkBase.defaultProps);
}
};
var NextPageLinkBase = {
defaultProps: {
__TYPE: 'NextPageLink',
disabled: false,
onClick: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, NextPageLinkBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, NextPageLinkBase.defaultProps);
}
};
var PageLinksBase = {
defaultProps: {
__TYPE: 'PageLinks',
value: null,
page: null,
rows: null,
pageCount: null,
links: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PageLinksBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PageLinksBase.defaultProps);
}
};
var PrevPageLinkBase = {
defaultProps: {
__TYPE: 'PrevPageLink',
disabled: false,
onClick: null,
template: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PrevPageLinkBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PrevPageLinkBase.defaultProps);
}
};
var RowsPerPageDropdownBase = {
defaultProps: {
__TYPE: 'RowsPerPageDropdown',
options: null,
value: null,
page: null,
pageCount: null,
totalRecords: 0,
appendTo: null,
onChange: null,
template: null,
disabled: false,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, RowsPerPageDropdownBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, RowsPerPageDropdownBase.defaultProps);
}
};
function ownKeys$r(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$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var CurrentPageReport = /*#__PURE__*/React.memo(function (inProps) {
var props = CurrentPageReportBase.getProps(inProps);
var report = {
currentPage: props.page + 1,
totalPages: props.pageCount,
first: Math.min(props.first + 1, props.totalRecords),
last: Math.min(props.first + props.rows, props.totalRecords),
rows: props.rows,
totalRecords: props.totalRecords
};
var text = props.reportTemplate.replace('{currentPage}', report.currentPage).replace('{totalPages}', report.totalPages).replace('{first}', report.first).replace('{last}', report.last).replace('{rows}', report.rows).replace('{totalRecords}', report.totalRecords);
var element = /*#__PURE__*/React.createElement("span", {
className: "p-paginator-current"
}, text);
if (props.template) {
var defaultOptions = _objectSpread$r(_objectSpread$r({}, report), {
className: 'p-paginator-current',
element: element,
props: props
});
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
CurrentPageReport.displayName = 'CurrentPageReport';
var FirstPageLink = /*#__PURE__*/React.memo(function (inProps) {
var props = FirstPageLinkBase.getProps(inProps);
var className = classNames('p-paginator-first p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon pi pi-angle-double-left';
var element = /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onClick: props.onClick,
disabled: props.disabled,
"aria-label": ariaLabel('firstPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
FirstPageLink.displayName = 'FirstPageLink';
var InputNumberBase = {
defaultProps: {
__TYPE: 'InputNumber',
allowEmpty: true,
ariaLabelledBy: null,
autoFocus: false,
buttonLayout: 'stacked',
className: null,
currency: undefined,
currencyDisplay: undefined,
decrementButtonClassName: null,
decrementButtonIcon: 'pi pi-angle-down',
disabled: false,
format: true,
id: null,
incrementButtonClassName: null,
incrementButtonIcon: 'pi pi-angle-up',
inputClassName: null,
inputId: null,
inputMode: null,
inputRef: null,
inputStyle: null,
locale: undefined,
localeMatcher: undefined,
max: null,
maxFractionDigits: undefined,
maxLength: null,
min: null,
minFractionDigits: undefined,
mode: 'decimal',
name: null,
onBlur: null,
onChange: null,
onFocus: null,
onKeyDown: null,
onValueChange: null,
pattern: null,
placeholder: null,
prefix: null,
readOnly: false,
required: false,
showButtons: false,
size: null,
step: 1,
style: null,
suffix: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
type: 'text',
useGrouping: true,
value: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InputNumberBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InputNumberBase.defaultProps);
}
};
function ownKeys$q(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$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InputNumberBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(null);
var timer = React.useRef(null);
var lastValue = React.useRef(null);
var numberFormat = React.useRef(null);
var groupChar = React.useRef(null);
var prefixChar = React.useRef(null);
var suffixChar = React.useRef(null);
var isSpecialChar = React.useRef(null);
var _numeral = React.useRef(null);
var _group = React.useRef(null);
var _minusSign = React.useRef(null);
var _currency = React.useRef(null);
var _decimal = React.useRef(null);
var _suffix = React.useRef(null);
var _prefix = React.useRef(null);
var _index = React.useRef(null);
var stacked = props.showButtons && props.buttonLayout === 'stacked';
var horizontal = props.showButtons && props.buttonLayout === 'horizontal';
var vertical = props.showButtons && props.buttonLayout === 'vertical';
var inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits ? 'numeric' : 'decimal');
var getOptions = function getOptions() {
return {
localeMatcher: props.localeMatcher,
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay,
useGrouping: props.useGrouping,
minimumFractionDigits: props.minFractionDigits,
maximumFractionDigits: props.maxFractionDigits
};
};
var constructParser = function constructParser() {
numberFormat.current = new Intl.NumberFormat(props.locale, getOptions());
var numerals = _toConsumableArray(new Intl.NumberFormat(props.locale, {
useGrouping: false
}).format(9876543210)).reverse();
var index = new Map(numerals.map(function (d, i) {
return [d, i];
}));
_numeral.current = new RegExp("[".concat(numerals.join(''), "]"), 'g');
_group.current = getGroupingExpression();
_minusSign.current = getMinusSignExpression();
_currency.current = getCurrencyExpression();
_decimal.current = getDecimalExpression();
_suffix.current = getSuffixExpression();
_prefix.current = getPrefixExpression();
_index.current = function (d) {
return index.get(d);
};
};
var escapeRegExp = function escapeRegExp(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
};
var getDecimalExpression = function getDecimalExpression() {
var formatter = new Intl.NumberFormat(props.locale, _objectSpread$q(_objectSpread$q({}, getOptions()), {}, {
useGrouping: false
}));
return new RegExp("[".concat(formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, ''), "]"), 'g');
};
var getGroupingExpression = function getGroupingExpression() {
var formatter = new Intl.NumberFormat(props.locale, {
useGrouping: true
});
groupChar.current = formatter.format(1000000).trim().replace(_numeral.current, '').charAt(0);
return new RegExp("[".concat(groupChar.current, "]"), 'g');
};
var getMinusSignExpression = function getMinusSignExpression() {
var formatter = new Intl.NumberFormat(props.locale, {
useGrouping: false
});
return new RegExp("[".concat(formatter.format(-1).trim().replace(_numeral.current, ''), "]"), 'g');
};
var getCurrencyExpression = function getCurrencyExpression() {
if (props.currency) {
var formatter = new Intl.NumberFormat(props.locale, {
style: 'currency',
currency: props.currency,
currencyDisplay: props.currencyDisplay,
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
return new RegExp("[".concat(formatter.format(1).replace(/\s/g, '').replace(_numeral.current, '').replace(_group.current, ''), "]"), 'g');
}
return new RegExp("[]", 'g');
};
var getPrefixExpression = function getPrefixExpression() {
if (props.prefix) {
prefixChar.current = props.prefix;
} else {
var formatter = new Intl.NumberFormat(props.locale, {
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay
});
prefixChar.current = formatter.format(1).split('1')[0];
}
return new RegExp("".concat(escapeRegExp(prefixChar.current || '')), 'g');
};
var getSuffixExpression = function getSuffixExpression() {
if (props.suffix) {
suffixChar.current = props.suffix;
} else {
var formatter = new Intl.NumberFormat(props.locale, {
style: props.mode,
currency: props.currency,
currencyDisplay: props.currencyDisplay,
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
suffixChar.current = formatter.format(1).split('1')[1];
}
return new RegExp("".concat(escapeRegExp(suffixChar.current || '')), 'g');
};
var formatValue = function formatValue(value) {
if (value != null) {
if (value === '-') {
// Minus sign
return value;
}
if (props.format) {
var formatter = new Intl.NumberFormat(props.locale, getOptions());
var _formattedValue = formatter.format(value);
if (props.prefix) {
_formattedValue = props.prefix + _formattedValue;
}
if (props.suffix) {
_formattedValue = _formattedValue + props.suffix;
}
return _formattedValue;
}
return value.toString();
}
return '';
};
var parseValue = function parseValue(text) {
var filteredText = text.replace(_suffix.current, '').replace(_prefix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '').replace(_group.current, '').replace(_minusSign.current, '-').replace(_decimal.current, '.').replace(_numeral.current, _index.current);
if (filteredText) {
if (filteredText === '-')
// Minus sign
return filteredText;
var parsedValue = +filteredText;
return isNaN(parsedValue) ? null : parsedValue;
}
return null;
};
var repeat = function repeat(event, interval, dir) {
var i = interval || 500;
clearTimer();
timer.current = setTimeout(function () {
repeat(event, 40, dir);
}, i);
spin(event, dir);
};
var spin = function spin(event, dir) {
if (inputRef.current) {
var step = props.step * dir;
var currentValue = parseValue(inputRef.current.value) || 0;
var newValue = validateValue(currentValue + step);
if (props.maxLength && props.maxLength < formatValue(newValue).length) {
return;
}
// #3913 onChange should be called before onValueChange
handleOnChange(event, currentValue, newValue);
// touch devices trigger the keyboard to display because of setSelectionRange
!DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
updateModel(event, newValue);
}
};
var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
if (!props.disabled && !props.readOnly) {
props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
repeat(event, null, 1);
event.preventDefault();
}
};
var onUpButtonMouseUp = function onUpButtonMouseUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonMouseLeave = function onUpButtonMouseLeave() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonKeyUp = function onUpButtonKeyUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onUpButtonKeyDown = function onUpButtonKeyDown(event) {
if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
repeat(event, null, 1);
}
};
var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
if (!props.disabled && !props.readOnly) {
props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
repeat(event, null, -1);
event.preventDefault();
}
};
var onDownButtonMouseUp = function onDownButtonMouseUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonMouseLeave = function onDownButtonMouseLeave() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonKeyUp = function onDownButtonKeyUp() {
if (!props.disabled && !props.readOnly) {
clearTimer();
}
};
var onDownButtonKeyDown = function onDownButtonKeyDown(event) {
if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
repeat(event, null, -1);
}
};
var onInput = function onInput(event) {
if (props.disabled || props.readOnly) {
return;
}
if (isSpecialChar.current) {
event.target.value = lastValue.current;
}
isSpecialChar.current = false;
};
var onInputKeyDown = function onInputKeyDown(event) {
if (props.disabled || props.readOnly) {
return;
}
lastValue.current = event.target.value;
if (event.shiftKey || event.altKey) {
isSpecialChar.current = true;
return;
}
var selectionStart = event.target.selectionStart;
var selectionEnd = event.target.selectionEnd;
var inputValue = event.target.value;
var newValueStr = null;
if (event.altKey) {
event.preventDefault();
}
switch (event.which) {
//up
case 38:
spin(event, 1);
event.preventDefault();
break;
//down
case 40:
spin(event, -1);
event.preventDefault();
break;
//left
case 37:
if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
event.preventDefault();
}
break;
//right
case 39:
if (!isNumeralChar(inputValue.charAt(selectionStart))) {
event.preventDefault();
}
break;
//enter and tab
case 13:
case 9:
newValueStr = validateValue(parseValue(inputValue));
inputRef.current.value = formatValue(newValueStr);
inputRef.current.setAttribute('aria-valuenow', newValueStr);
updateModel(event, newValueStr);
break;
//backspace
case 8:
event.preventDefault();
if (selectionStart === selectionEnd) {
var deleteChar = inputValue.charAt(selectionStart - 1);
var _getDecimalCharIndexe = getDecimalCharIndexes(inputValue),
decimalCharIndex = _getDecimalCharIndexe.decimalCharIndex,
decimalCharIndexWithoutPrefix = _getDecimalCharIndexe.decimalCharIndexWithoutPrefix;
if (isNumeralChar(deleteChar)) {
var decimalLength = getDecimalLength(inputValue);
if (_group.current.test(deleteChar)) {
_group.current.lastIndex = 0;
newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
} else if (_decimal.current.test(deleteChar)) {
_decimal.current.lastIndex = 0;
if (decimalLength) {
inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
} else {
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
}
} else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
var insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
} else if (decimalCharIndexWithoutPrefix === 1) {
newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
} else {
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
}
}
updateValue(event, newValueStr, null, 'delete-single');
} else {
newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
updateValue(event, newValueStr, null, 'delete-range');
}
break;
// del
case 46:
event.preventDefault();
if (selectionStart === selectionEnd) {
var _deleteChar = inputValue.charAt(selectionStart);
var _getDecimalCharIndexe2 = getDecimalCharIndexes(inputValue),
_decimalCharIndex = _getDecimalCharIndexe2.decimalCharIndex,
_decimalCharIndexWithoutPrefix = _getDecimalCharIndexe2.decimalCharIndexWithoutPrefix;
if (isNumeralChar(_deleteChar)) {
var _decimalLength = getDecimalLength(inputValue);
if (_group.current.test(_deleteChar)) {
_group.current.lastIndex = 0;
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
} else if (_decimal.current.test(_deleteChar)) {
_decimal.current.lastIndex = 0;
if (_decimalLength) {
inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
} else {
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
}
} else if (_decimalCharIndex > 0 && selectionStart > _decimalCharIndex) {
var _insertedText = isDecimalMode() && (props.minFractionDigits || 0) < _decimalLength ? '' : '0';
newValueStr = inputValue.slice(0, selectionStart) + _insertedText + inputValue.slice(selectionStart + 1);
} else if (_decimalCharIndexWithoutPrefix === 1) {
newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
} else {
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
}
}
updateValue(event, newValueStr, null, 'delete-back-single');
} else {
newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
updateValue(event, newValueStr, null, 'delete-range');
}
break;
}
if (props.onKeyDown) {
props.onKeyDown(event);
}
};
var onInputKeyPress = function onInputKeyPress(event) {
if (props.disabled || props.readOnly) {
return;
}
var code = event.which || event.keyCode;
if (code !== 13) {
// to submit a form
event.preventDefault();
}
var _char = String.fromCharCode(code);
var _isDecimalSign = isDecimalSign(_char);
var _isMinusSign = isMinusSign(_char);
if (48 <= code && code <= 57 || _isMinusSign || _isDecimalSign) {
insert(event, _char, {
isDecimalSign: _isDecimalSign,
isMinusSign: _isMinusSign
});
}
};
var onPaste = function onPaste(event) {
event.preventDefault();
if (props.disabled || props.readOnly) {
return;
}
var data = (event.clipboardData || window['clipboardData']).getData('Text');
if (data) {
var filteredData = parseValue(data);
if (filteredData != null) {
insert(event, filteredData.toString());
}
}
};
var allowMinusSign = function allowMinusSign() {
return props.min === null || props.min < 0;
};
var isMinusSign = function isMinusSign(_char2) {
if (_minusSign.current.test(_char2) || _char2 === '-') {
_minusSign.current.lastIndex = 0;
return true;
}
return false;
};
var isDecimalSign = function isDecimalSign(_char3) {
if (_decimal.current.test(_char3)) {
_decimal.current.lastIndex = 0;
return true;
}
return false;
};
var isDecimalMode = function isDecimalMode() {
return props.mode === 'decimal';
};
var getDecimalCharIndexes = function getDecimalCharIndexes(val) {
var decimalCharIndex = val.search(_decimal.current);
_decimal.current.lastIndex = 0;
var filteredVal = val.replace(_prefix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '');
var decimalCharIndexWithoutPrefix = filteredVal.search(_decimal.current);
_decimal.current.lastIndex = 0;
return {
decimalCharIndex: decimalCharIndex,
decimalCharIndexWithoutPrefix: decimalCharIndexWithoutPrefix
};
};
var getCharIndexes = function getCharIndexes(val) {
var decimalCharIndex = val.search(_decimal.current);
_decimal.current.lastIndex = 0;
var minusCharIndex = val.search(_minusSign.current);
_minusSign.current.lastIndex = 0;
var suffixCharIndex = val.search(_suffix.current);
_suffix.current.lastIndex = 0;
var currencyCharIndex = val.search(_currency.current);
_currency.current.lastIndex = 0;
return {
decimalCharIndex: decimalCharIndex,
minusCharIndex: minusCharIndex,
suffixCharIndex: suffixCharIndex,
currencyCharIndex: currencyCharIndex
};
};
var insert = function insert(event, text) {
var sign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
isDecimalSign: false,
isMinusSign: false
};
var minusCharIndexOnText = text.search(_minusSign.current);
_minusSign.current.lastIndex = 0;
if (!allowMinusSign() && minusCharIndexOnText !== -1) {
return;
}
var selectionStart = inputRef.current.selectionStart;
var selectionEnd = inputRef.current.selectionEnd;
var inputValue = inputRef.current.value.trim();
var _getCharIndexes = getCharIndexes(inputValue),
decimalCharIndex = _getCharIndexes.decimalCharIndex,
minusCharIndex = _getCharIndexes.minusCharIndex,
suffixCharIndex = _getCharIndexes.suffixCharIndex,
currencyCharIndex = _getCharIndexes.currencyCharIndex;
var newValueStr;
if (sign.isMinusSign) {
if (selectionStart === 0) {
newValueStr = inputValue;
if (minusCharIndex === -1 || selectionEnd !== 0) {
newValueStr = insertText(inputValue, text, 0, selectionEnd);
}
updateValue(event, newValueStr, text, 'insert');
}
} else if (sign.isDecimalSign) {
if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
updateValue(event, inputValue, text, 'insert');
} else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, 'insert');
} else if (decimalCharIndex === -1 && props.maxFractionDigits) {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, 'insert');
}
} else {
var maxFractionDigits = numberFormat.current.resolvedOptions().maximumFractionDigits;
var operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
var charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
updateValue(event, newValueStr, text, operation);
}
} else {
newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
updateValue(event, newValueStr, text, operation);
}
}
};
var insertText = function insertText(value, text, start, end) {
var textSplit = text === '.' ? text : text.split('.');
if (textSplit.length === 2) {
var decimalCharIndex = value.slice(start, end).search(_decimal.current);
_decimal.current.lastIndex = 0;
return decimalCharIndex > 0 ? value.slice(0, start) + formatValue(text) + value.slice(end) : value || formatValue(text);
} else if (end - start === value.length) {
return formatValue(text);
} else if (start === 0) {
var suffix = ObjectUtils.isLetter(value[end]) ? end - 1 : end;
return text + value.slice(suffix);
} else if (end === value.length) {
return value.slice(0, start) + text;
} else {
return value.slice(0, start) + text + value.slice(end);
}
};
var deleteRange = function deleteRange(value, start, end) {
var newValueStr;
if (end - start === value.length) newValueStr = '';else if (start === 0) newValueStr = value.slice(end);else if (end === value.length) newValueStr = value.slice(0, start);else newValueStr = value.slice(0, start) + value.slice(end);
return newValueStr;
};
var initCursor = function initCursor() {
var selectionStart = inputRef.current.selectionStart;
var inputValue = inputRef.current.value;
var valueLength = inputValue.length;
var index = null;
// remove prefix
var prefixLength = (prefixChar.current || '').length;
inputValue = inputValue.replace(_prefix.current, '');
selectionStart = selectionStart - prefixLength;
var _char4 = inputValue.charAt(selectionStart);
if (isNumeralChar(_char4)) {
return selectionStart + prefixLength;
}
//left
var i = selectionStart - 1;
while (i >= 0) {
_char4 = inputValue.charAt(i);
if (isNumeralChar(_char4)) {
index = i + prefixLength;
break;
} else {
i--;
}
}
if (index !== null) {
inputRef.current.setSelectionRange(index + 1, index + 1);
} else {
i = selectionStart;
while (i < valueLength) {
_char4 = inputValue.charAt(i);
if (isNumeralChar(_char4)) {
index = i + prefixLength;
break;
} else {
i++;
}
}
if (index !== null) {
inputRef.current.setSelectionRange(index, index);
}
}
return index || 0;
};
var onInputClick = function onInputClick() {
initCursor();
};
var isNumeralChar = function isNumeralChar(_char5) {
if (_char5.length === 1 && (_numeral.current.test(_char5) || _decimal.current.test(_char5) || _group.current.test(_char5) || _minusSign.current.test(_char5))) {
resetRegex();
return true;
} else {
return false;
}
};
var resetRegex = function resetRegex() {
_numeral.current.lastIndex = 0;
_decimal.current.lastIndex = 0;
_group.current.lastIndex = 0;
_minusSign.current.lastIndex = 0;
};
var updateValue = function updateValue(event, valueStr, insertedValueStr, operation) {
var currentValue = inputRef.current.value;
var newValue = null;
if (valueStr != null) {
newValue = evaluateEmpty(parseValue(valueStr));
updateInput(newValue, insertedValueStr, operation, valueStr);
handleOnChange(event, currentValue, newValue);
}
};
var evaluateEmpty = function evaluateEmpty(newValue) {
return !newValue && !props.allowEmpty ? props.min || 0 : newValue;
};
var handleOnChange = function handleOnChange(event, currentValue, newValue) {
if (props.onChange && isValueChanged(currentValue, newValue)) {
props.onChange({
originalEvent: event,
value: newValue
});
}
};
var isValueChanged = function isValueChanged(currentValue, newValue) {
if (newValue === null && currentValue !== null) {
return true;
}
if (newValue != null) {
var parsedCurrentValue = typeof currentValue === 'string' ? parseValue(currentValue) : currentValue;
return newValue !== parsedCurrentValue;
}
return false;
};
var validateValue = function validateValue(value) {
if (value === '-') {
return null;
}
return validateValueByLimit(value);
};
var validateValueByLimit = function validateValueByLimit(value) {
if (ObjectUtils.isEmpty(value)) {
return null;
}
if (props.min !== null && value < props.min) {
return props.min;
}
if (props.max !== null && value > props.max) {
return props.max;
}
return value;
};
var updateInput = function updateInput(value, insertedValueStr, operation, valueStr) {
insertedValueStr = insertedValueStr || '';
var inputEl = inputRef.current;
var inputValue = inputEl.value;
var newValue = formatValue(value);
var currentLength = inputValue.length;
if (newValue !== valueStr) {
newValue = concatValues(newValue, valueStr);
}
if (currentLength === 0) {
inputEl.value = newValue;
inputEl.setSelectionRange(0, 0);
var index = initCursor();
var selectionEnd = index + insertedValueStr.length;
inputEl.setSelectionRange(selectionEnd, selectionEnd);
} else {
var selectionStart = inputEl.selectionStart;
var _selectionEnd = inputEl.selectionEnd;
if (props.maxLength && props.maxLength < newValue.length) {
return;
}
inputEl.value = newValue;
var newLength = newValue.length;
if (operation === 'range-insert') {
var startValue = parseValue((inputValue || '').slice(0, selectionStart));
var startValueStr = startValue !== null ? startValue.toString() : '';
var startExpr = startValueStr.split('').join("(".concat(groupChar.current, ")?"));
var sRegex = new RegExp(startExpr, 'g');
sRegex.test(newValue);
var tExpr = insertedValueStr.split('').join("(".concat(groupChar.current, ")?"));
var tRegex = new RegExp(tExpr, 'g');
tRegex.test(newValue.slice(sRegex.lastIndex));
_selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
} else if (newLength === currentLength) {
if (operation === 'insert' || operation === 'delete-back-single') inputEl.setSelectionRange(_selectionEnd + 1, _selectionEnd + 1);else if (operation === 'delete-single') inputEl.setSelectionRange(_selectionEnd - 1, _selectionEnd - 1);else if (operation === 'delete-range' || operation === 'spin') inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
} else if (operation === 'delete-back-single') {
var prevChar = inputValue.charAt(_selectionEnd - 1);
var nextChar = inputValue.charAt(_selectionEnd);
var diff = currentLength - newLength;
var isGroupChar = _group.current.test(nextChar);
if (isGroupChar && diff === 1) {
_selectionEnd += 1;
} else if (!isGroupChar && isNumeralChar(prevChar)) {
_selectionEnd += -1 * diff + 1;
}
_group.current.lastIndex = 0;
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
} else if (inputValue === '-' && operation === 'insert') {
inputEl.setSelectionRange(0, 0);
var _index2 = initCursor();
var _selectionEnd2 = _index2 + insertedValueStr.length + 1;
inputEl.setSelectionRange(_selectionEnd2, _selectionEnd2);
} else {
_selectionEnd = _selectionEnd + (newLength - currentLength);
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
}
}
inputEl.setAttribute('aria-valuenow', value);
};
var updateInputValue = function updateInputValue(newValue) {
newValue = evaluateEmpty(newValue);
var inputEl = inputRef.current;
var value = inputEl.value;
var _formattedValue = formattedValue(newValue);
if (value !== _formattedValue) {
inputEl.value = _formattedValue;
inputEl.setAttribute('aria-valuenow', newValue);
}
};
var formattedValue = function formattedValue(val) {
return formatValue(evaluateEmpty(val));
};
var concatValues = function concatValues(val1, val2) {
if (val1 && val2) {
var decimalCharIndex = val2.search(_decimal.current);
_decimal.current.lastIndex = 0;
return decimalCharIndex !== -1 ? val1.split(_decimal.current)[0] + val2.slice(decimalCharIndex) : val1;
}
return val1;
};
var getDecimalLength = function getDecimalLength(value) {
if (value) {
var valueSplit = value.split(_decimal.current);
if (valueSplit.length === 2) {
return valueSplit[1].replace(_suffix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '').length;
}
}
return 0;
};
var updateModel = function updateModel(event, value) {
if (props.onValueChange) {
props.onValueChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onInputFocus = function onInputFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
if ((props.suffix || props.currency || props.prefix) && inputRef.current) {
// GitHub #1866 Cursor must be placed before/after symbol or arrow keys don't work
var selectionEnd = initCursor();
inputRef.current.setSelectionRange(selectionEnd, selectionEnd);
}
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (inputRef.current) {
var currentValue = inputRef.current.value;
if (isValueChanged(currentValue, props.value)) {
var newValue = validateValue(parseValue(currentValue));
updateInputValue(newValue);
updateModel(event, newValue);
}
}
props.onBlur && props.onBlur(event);
};
var clearTimer = function clearTimer() {
if (timer.current) {
clearInterval(timer.current);
}
};
var changeValue = function changeValue() {
updateInputValue(validateValueByLimit(props.value));
var newValue = validateValue(props.value);
if (props.value !== null && props.value !== newValue) {
updateModel(null, newValue);
}
};
var getFormatter = function getFormatter() {
return numberFormat.current;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getFormatter: getFormatter,
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
constructParser();
var newValue = validateValue(props.value);
if (props.value !== null && props.value !== newValue) {
updateModel(null, newValue);
}
});
useUpdateEffect(function () {
constructParser();
changeValue();
}, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
useUpdateEffect(function () {
changeValue();
}, [props.value]);
var createInputElement = function createInputElement() {
var className = classNames('p-inputnumber-input', props.inputClassName);
var valueToRender = formattedValue(props.value);
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: inputRef,
id: props.inputId,
style: props.inputStyle,
role: "spinbutton",
className: className,
defaultValue: valueToRender,
type: props.type,
size: props.size,
tabIndex: props.tabIndex,
inputMode: inputMode,
maxLength: props.maxLength,
disabled: props.disabled,
required: props.required,
pattern: props.pattern,
placeholder: props.placeholder,
readOnly: props.readOnly,
name: props.name,
autoFocus: props.autoFocus,
onKeyDown: onInputKeyDown,
onKeyPress: onInputKeyPress,
onInput: onInput,
onClick: onInputClick,
onBlur: onInputBlur,
onFocus: onInputFocus,
onPaste: onPaste,
min: props.min,
max: props.max,
"aria-valuemin": props.min,
"aria-valuemax": props.max,
"aria-valuenow": props.value
}, ariaProps, dataProps));
};
var createUpButton = function createUpButton() {
var className = classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
'p-disabled': props.disabled
}, props.incrementButtonClassName);
var icon = classNames('p-button-icon', props.incrementButtonIcon);
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onPointerLeave: onUpButtonMouseLeave,
onPointerDown: onUpButtonMouseDown,
onPointerUp: onUpButtonMouseUp,
onKeyDown: onUpButtonKeyDown,
onKeyUp: onUpButtonKeyUp,
disabled: props.disabled,
tabIndex: -1
}, /*#__PURE__*/React.createElement("span", {
className: icon
}), /*#__PURE__*/React.createElement(Ripple, null));
};
var createDownButton = function createDownButton() {
var className = classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
'p-disabled': props.disabled
}, props.decrementButtonClassName);
var icon = classNames('p-button-icon', props.decrementButtonIcon);
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onPointerLeave: onDownButtonMouseLeave,
onPointerDown: onDownButtonMouseDown,
onPointerUp: onDownButtonMouseUp,
onKeyDown: onDownButtonKeyDown,
onKeyUp: onDownButtonKeyUp,
disabled: props.disabled,
tabIndex: -1
}, /*#__PURE__*/React.createElement("span", {
className: icon
}), /*#__PURE__*/React.createElement(Ripple, null));
};
var createButtonGroup = function createButtonGroup() {
var upButton = props.showButtons && createUpButton();
var downButton = props.showButtons && createDownButton();
if (stacked) {
return /*#__PURE__*/React.createElement("span", {
className: "p-inputnumber-button-group"
}, upButton, downButton);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, upButton, downButton);
};
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputNumberBase.getOtherProps(props);
var dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-inputnumber p-component p-inputwrapper', {
'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
'p-inputwrapper-focus': focusedState,
'p-inputnumber-buttons-stacked': stacked,
'p-inputnumber-buttons-horizontal': horizontal,
'p-inputnumber-buttons-vertical': vertical
}, props.className);
var inputElement = createInputElement();
var buttonGroup = createButtonGroup();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), inputElement, buttonGroup), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
InputNumber.displayName = 'InputNumber';
var JumpToPageInput = /*#__PURE__*/React.memo(function (inProps) {
var props = JumpToPageInputBase.getProps(inProps);
var onChange = function onChange(event) {
if (props.onChange) {
props.onChange(props.rows * (event.value - 1), props.rows);
}
};
var value = props.pageCount > 0 ? props.page + 1 : 0;
var element = /*#__PURE__*/React.createElement(InputNumber, {
value: value,
onChange: onChange,
className: "p-paginator-page-input",
disabled: props.disabled
});
if (props.template) {
var defaultOptions = {
value: value,
onChange: onChange,
disabled: props.disabled,
className: 'p-paginator-page-input',
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
JumpToPageInput.displayName = 'JumpToPageInput';
var LastPageLink = /*#__PURE__*/React.memo(function (inProps) {
var props = LastPageLinkBase.getProps(inProps);
var className = classNames('p-paginator-last p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon pi pi-angle-double-right';
var element = /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onClick: props.onClick,
disabled: props.disabled,
"aria-label": ariaLabel('lastPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
LastPageLink.displayName = 'LastPageLink';
var NextPageLink = /*#__PURE__*/React.memo(function (inProps) {
var props = NextPageLinkBase.getProps(inProps);
var className = classNames('p-paginator-next p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon pi pi-angle-right';
var element = /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onClick: props.onClick,
disabled: props.disabled,
"aria-label": ariaLabel('nextPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
NextPageLink.displayName = 'NextPageLink';
var PageLinks = /*#__PURE__*/React.memo(function (inProps) {
var props = PageLinksBase.getProps(inProps);
var onPageLinkClick = function onPageLinkClick(event, pageLink) {
if (props.onClick) {
props.onClick({
originalEvent: event,
value: pageLink
});
}
event.preventDefault();
};
var elements;
if (props.value) {
var startPageInView = props.value[0];
var endPageInView = props.value[props.value.length - 1];
elements = props.value.map(function (pageLink) {
var className = classNames('p-paginator-page p-paginator-element p-link', {
'p-paginator-page-start': pageLink === startPageInView,
'p-paginator-page-end': pageLink === endPageInView,
'p-highlight': pageLink - 1 === props.page
});
var element = /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onClick: function onClick(e) {
return onPageLinkClick(e, pageLink);
},
"aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(pageLink + 1)
}, pageLink, /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: function onClick(e) {
return onPageLinkClick(e, pageLink);
},
className: className,
view: {
startPage: startPageInView - 1,
endPage: endPageInView - 1
},
page: pageLink - 1,
currentPage: props.page,
totalPages: props.pageCount,
element: element,
props: props
};
element = ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, {
key: pageLink
}, element);
});
}
return /*#__PURE__*/React.createElement("span", {
className: "p-paginator-pages"
}, elements);
});
PageLinks.displayName = 'PageLinks';
var PrevPageLink = /*#__PURE__*/React.memo(function (inProps) {
var props = PrevPageLinkBase.getProps(inProps);
var className = classNames('p-paginator-prev p-paginator-element p-link', {
'p-disabled': props.disabled
});
var iconClassName = 'p-paginator-icon pi pi-angle-left';
var element = /*#__PURE__*/React.createElement("button", {
type: "button",
className: className,
onClick: props.onClick,
disabled: props.disabled,
"aria-label": ariaLabel('previousPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
if (props.template) {
var defaultOptions = {
onClick: props.onClick,
className: className,
iconClassName: iconClassName,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
PrevPageLink.displayName = 'PrevPageLink';
var DropdownBase = {
defaultProps: {
__TYPE: 'Dropdown',
appendTo: null,
ariaLabel: null,
ariaLabelledBy: null,
autoFocus: false,
className: null,
clearIcon: 'pi pi-times',
dataKey: null,
disabled: false,
dropdownIcon: 'pi pi-chevron-down',
editable: false,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterInputAutoFocus: true,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
focusInputRef: null,
id: null,
inputId: null,
inputRef: null,
itemTemplate: null,
maxLength: null,
name: null,
onBlur: null,
onChange: null,
onContextMenu: null,
onFilter: null,
onFocus: null,
onHide: null,
onMouseDown: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
panelClassName: null,
panelStyle: null,
placeholder: null,
required: false,
resetFilterOnHide: false,
scrollHeight: '200px',
showClear: false,
showFilterClear: false,
showOnFocus: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
value: null,
valueTemplate: null,
virtualScrollerOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DropdownBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DropdownBase.defaultProps);
}
};
var DropdownItem = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: props.option
});
}
};
var className = classNames('p-dropdown-item', {
'p-highlight': props.selected,
'p-disabled': props.disabled,
'p-dropdown-item-empty': !props.label || props.label.length === 0
}, props.option && props.option.className);
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
return /*#__PURE__*/React.createElement("li", {
className: className,
style: props.style,
onClick: onClick,
"aria-label": props.label,
key: props.label,
role: "option",
"aria-selected": props.selected
}, content, /*#__PURE__*/React.createElement(Ripple, null));
});
DropdownItem.displayName = 'DropdownItem';
function ownKeys$p(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$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var virtualScrollerRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var onEnter = function onEnter() {
props.onEnter(function () {
if (virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && props.filterInputAutoFocus) {
DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
props.onFilterInputChange && props.onFilterInputChange(event);
};
var createGroupChildren = function createGroupChildren(optionGroup, style) {
var groupChildren = props.getOptionGroupChildren(optionGroup);
return groupChildren.map(function (option, j) {
var optionLabel = props.getOptionLabel(option);
var optionKey = j + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
return /*#__PURE__*/React.createElement(DropdownItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: props.isSelected(option),
disabled: disabled,
onClick: props.onOptionClick
});
});
};
var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
return /*#__PURE__*/React.createElement("li", {
className: "p-dropdown-empty-message"
}, message);
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (props.optionGroupLabel) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var groupChildrenContent = createGroupChildren(option, style);
var key = index + '_' + props.getOptionGroupRenderKey(option);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", {
className: "p-dropdown-item-group",
style: style
}, groupContent), groupChildrenContent);
} else {
var optionLabel = props.getOptionLabel(option);
var optionKey = index + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
return /*#__PURE__*/React.createElement(DropdownItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: props.isSelected(option),
disabled: disabled,
onClick: props.onOptionClick
});
}
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
} else if (props.hasFilter) {
return createEmptyMessage(props.emptyFilterMessage, true);
}
return createEmptyMessage(props.emptyMessage);
};
var createFilterClearIcon = function createFilterClearIcon() {
if (props.showFilterClear && props.filterValue) {
var ariaLabel = localeOption('clear');
return /*#__PURE__*/React.createElement("i", {
className: "p-dropdown-filter-clear-icon pi pi-times",
"aria-label": ariaLabel,
onClick: function onClick() {
return props.onFilterClearIconClick(function () {
return DomHandler.focus(filterInputRef.current);
});
}
});
}
return null;
};
var createFilter = function createFilter() {
if (props.filter) {
var clearIcon = createFilterClearIcon();
var containerClassName = classNames('p-dropdown-filter-container', {
'p-dropdown-clearable-filter': !!clearIcon
});
var content = /*#__PURE__*/React.createElement("div", {
className: containerClassName
}, /*#__PURE__*/React.createElement("input", {
ref: filterInputRef,
type: "text",
autoComplete: "off",
className: "p-dropdown-filter p-inputtext p-component",
placeholder: props.filterPlaceholder,
onKeyDown: props.onFilterInputKeyDown,
onChange: onFilterInputChange,
value: props.filterValue
}), clearIcon, /*#__PURE__*/React.createElement("i", {
className: "p-dropdown-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: containerClassName,
element: content,
filterOptions: filterOptions,
filterInputKeyDown: props.onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
clearIcon: clearIcon,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-dropdown-header"
}, content);
}
return null;
};
var createContent = function createContent() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions), {
style: _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
items: props.visibleOptions,
autoSize: true,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$p(_objectSpread$p({}, event), {
filter: props.filterValue
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var className = classNames('p-dropdown-items', options.className);
var content = isEmptyFilter ? createEmptyMessage() : options.children;
return /*#__PURE__*/React.createElement("ul", {
ref: options.contentRef,
style: options.style,
className: className,
role: "listbox"
}, content);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps));
} else {
var items = createItems();
return /*#__PURE__*/React.createElement("div", {
className: "p-dropdown-items-wrapper",
style: {
maxHeight: props.scrollHeight || 'auto'
}
}, /*#__PURE__*/React.createElement("ul", {
className: "p-dropdown-items",
role: "listbox"
}, items));
}
};
var createElement = function createElement() {
var className = classNames('p-dropdown-panel p-component', props.panelClassName, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var filter = createFilter();
var content = createContent();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntering: props.onEntering,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: props.panelStyle,
onClick: props.onClick
}, filter, content));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
DropdownPanel.displayName = 'DropdownPanel';
function ownKeys$o(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$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createForOfIteratorHelper$a(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$a(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$a(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$a(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$a(o, minLen); }
function _arrayLikeToArray$a(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DropdownBase.getProps(inProps);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
filterState = _React$useState2[0],
setFilterState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedState = _React$useState4[0],
setFocusedState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
overlayVisibleState = _React$useState6[0],
setOverlayVisibleState = _React$useState6[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var focusInputRef = React.useRef(props.focusInputRef);
var searchTimeout = React.useRef(null);
var searchValue = React.useRef(null);
var currentSearchChar = React.useRef(null);
var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
var hasFilter = ObjectUtils.isNotEmpty(filterState);
var appendTo = props.appendTo || PrimeReact.appendTo;
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? !isClearClicked(event) && hide() : hide();
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var getVisibleOptions = function getVisibleOptions() {
if (hasFilter && !isLazy) {
var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator = _createForOfIteratorHelper$a(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optgroup = _step.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$o(_objectSpread$o({}, optgroup), {
items: filteredSubOptions
}));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return filteredGroups;
} else {
return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
} else {
return props.options;
}
};
var isClearClicked = function isClearClicked(event) {
return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
};
var onClick = function onClick(event) {
if (props.disabled) {
return;
}
props.onClick && props.onClick(event);
// do not continue if the user defined click wants to prevent it
if (event.defaultPrevented) {
return;
}
if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
return;
} else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
DomHandler.focus(focusInputRef.current);
overlayVisibleState ? hide() : show();
}
};
var onInputFocus = function onInputFocus(event) {
if (props.showOnFocus && !overlayVisibleState) {
show();
}
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (props.onBlur) {
setTimeout(function () {
var currentValue = inputRef.current ? inputRef.current.value : undefined;
props.onBlur({
originalEvent: event.originalEvent,
value: currentValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: currentValue
}
});
}, 200);
}
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onInputKeyDown = function onInputKeyDown(event) {
switch (event.which) {
//down
case 40:
onDownKey(event);
break;
//up
case 38:
onUpKey(event);
break;
//space and enter
case 32:
case 13:
overlayVisibleState ? hide() : show();
event.preventDefault();
break;
//escape and tab
case 27:
case 9:
hide();
break;
default:
search(event);
break;
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
switch (event.which) {
//down
case 40:
onDownKey(event);
break;
//up
case 38:
onUpKey(event);
break;
//enter and escape
case 13:
case 27:
hide();
event.preventDefault();
break;
}
};
var onUpKey = function onUpKey(event) {
if (visibleOptions) {
var prevOption = findPrevOption(getSelectedOptionIndex());
if (prevOption) {
selectItem({
originalEvent: event,
option: prevOption
});
}
}
event.preventDefault();
};
var onDownKey = function onDownKey(event) {
if (visibleOptions) {
if (!overlayVisibleState && event.altKey) {
show();
} else {
var nextOption = findNextOption(getSelectedOptionIndex());
if (nextOption) {
selectItem({
originalEvent: event,
option: nextOption
});
}
}
}
event.preventDefault();
};
var findNextOption = function findNextOption(index) {
if (props.optionGroupLabel) {
var groupIndex = index === -1 ? 0 : index.group;
var optionIndex = index === -1 ? -1 : index.option;
var option = findNextOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
if (option) return option;else if (groupIndex + 1 !== visibleOptions.length) return findNextOption({
group: groupIndex + 1,
option: -1
});else return null;
}
return findNextOptionInList(visibleOptions, index);
};
var findNextOptionInList = function findNextOptionInList(list, index) {
var i = index + 1;
if (i === list.length) {
return null;
}
var option = list[i];
return isOptionDisabled(option) ? findNextOptionInList(i) : option;
};
var findPrevOption = function findPrevOption(index) {
if (index === -1) {
return null;
}
if (props.optionGroupLabel) {
var groupIndex = index.group;
var optionIndex = index.option;
var option = findPrevOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
if (option) return option;else if (groupIndex > 0) return findPrevOption({
group: groupIndex - 1,
option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
});else return null;
}
return findPrevOptionInList(visibleOptions, index);
};
var findPrevOptionInList = function findPrevOptionInList(list, index) {
var i = index - 1;
if (i < 0) {
return null;
}
var option = list[i];
return isOptionDisabled(option) ? findPrevOption(i) : option;
};
var search = function search(event) {
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
var _char = event.key;
if (_char === 'Shift' || _char === 'Control' || _char === 'Alt') {
return;
}
if (currentSearchChar.current === _char) searchValue.current = _char;else searchValue.current = searchValue.current ? searchValue.current + _char : _char;
currentSearchChar.current = _char;
if (searchValue.current) {
var searchIndex = getSelectedOptionIndex();
var newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption(searchIndex + 1);
if (newOption) {
selectItem({
originalEvent: event,
option: newOption
});
}
}
searchTimeout.current = setTimeout(function () {
searchValue.current = null;
}, 250);
};
var searchOption = function searchOption(index) {
if (searchValue.current) {
return searchOptionInRange(index, visibleOptions.length) || searchOptionInRange(0, index);
}
return null;
};
var searchOptionInRange = function searchOptionInRange(start, end) {
for (var i = start; i < end; i++) {
var opt = visibleOptions[i];
if (matchesSearchValue(opt)) {
return opt;
}
}
return null;
};
var searchOptionInGroup = function searchOptionInGroup(index) {
var searchIndex = index === -1 ? {
group: 0,
option: -1
} : index;
for (var i = searchIndex.group; i < visibleOptions.length; i++) {
var groupOptions = getOptionGroupChildren(visibleOptions[i]);
for (var j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) {
if (matchesSearchValue(groupOptions[j])) {
return groupOptions[j];
}
}
}
for (var _i = 0; _i <= searchIndex.group; _i++) {
var _groupOptions = getOptionGroupChildren(visibleOptions[_i]);
for (var _j = 0; _j < (searchIndex.group === _i ? searchIndex.option : _groupOptions.length); _j++) {
if (matchesSearchValue(_groupOptions[_j])) {
return _groupOptions[_j];
}
}
}
return null;
};
var matchesSearchValue = function matchesSearchValue(option) {
var label = getOptionLabel(option);
if (!label) {
return false;
}
label = label.toLocaleLowerCase(props.filterLocale);
return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
};
var onEditableInputChange = function onEditableInputChange(event) {
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: event.target.value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: event.target.value
}
});
}
};
var onEditableInputFocus = function onEditableInputFocus(event) {
setFocusedState(true);
hide();
props.onFocus && props.onFocus(event);
};
var onOptionClick = function onOptionClick(event) {
var option = event.option;
if (!option.disabled) {
selectItem(event);
DomHandler.focus(focusInputRef.current);
}
hide();
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.target.value;
setFilterState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var onFilterClearIconClick = function onFilterClearIconClick(callback) {
resetFilter(callback);
};
var resetFilter = function resetFilter(callback) {
setFilterState('');
props.onFilter && props.onFilter({
filter: ''
});
callback && callback();
};
var clear = function clear(event) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: undefined,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: undefined
}
});
}
updateEditableLabel();
};
var selectItem = function selectItem(event) {
if (selectedOption !== event.option) {
updateEditableLabel(event.option);
var optionValue = getOptionValue(event.option);
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: optionValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: optionValue
}
});
}
}
};
var getSelectedOptionIndex = function getSelectedOptionIndex(options) {
options = options || visibleOptions;
if (props.value != null && options) {
if (props.optionGroupLabel) {
for (var i = 0; i < options.length; i++) {
var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(options[i]));
if (selectedOptionIndex !== -1) {
return {
group: i,
option: selectedOptionIndex
};
}
}
} else {
return findOptionIndexInList(props.value, options);
}
}
return -1;
};
var equalityKey = function equalityKey() {
return props.optionValue ? null : props.dataKey;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
var key = equalityKey();
return list.findIndex(function (item) {
return ObjectUtils.equals(value, getOptionValue(item), key);
});
};
var isSelected = function isSelected(option) {
return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onOverlayEnter = function onOverlayEnter(callback) {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
callback && callback();
};
var onOverlayEntered = function onOverlayEntered(callback) {
callback && callback();
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
};
var scrollInView = function scrollInView() {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
if (highlightItem && highlightItem.scrollIntoView) {
highlightItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
};
var updateEditableLabel = function updateEditableLabel(option) {
if (inputRef.current) {
inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
}
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option['disabled'] !== undefined ? option['disabled'] : false;
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var updateInputField = function updateInputField() {
if (props.editable && inputRef.current) {
var label = selectedOption ? getOptionLabel(selectedOption) : null;
var value = label || props.value || '';
inputRef.current.value = value;
}
};
var getSelectedOption = function getSelectedOption() {
var index = getSelectedOptionIndex(props.options);
return index !== -1 ? props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index] : null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(focusInputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
},
getFocusInput: function getFocusInput() {
return focusInputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
}, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(focusInputRef.current, props.autoFocus);
}
});
useUpdateEffect(function () {
if (overlayVisibleState && props.value) {
scrollInView();
}
}, [overlayVisibleState, props.value]);
useUpdateEffect(function () {
if (overlayVisibleState && filterState && props.filter) {
alignOverlay();
}
}, [overlayVisibleState, filterState, props.filter]);
useUpdateEffect(function () {
if (filterState && (!props.options || props.options.length === 0)) {
setFilterState('');
}
updateInputField();
if (inputRef.current) {
inputRef.current.selectedIndex = 1;
}
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createHiddenSelect = function createHiddenSelect() {
var option = {
value: '',
label: props.placeholder
};
if (selectedOption) {
var optionValue = getOptionValue(selectedOption);
option = {
value: _typeof(optionValue) === 'object' ? props.options.findIndex(function (o) {
return o === optionValue;
}) : optionValue,
label: getOptionLabel(selectedOption)
};
}
return /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible p-dropdown-hidden-select"
}, /*#__PURE__*/React.createElement("select", {
ref: inputRef,
required: props.required,
defaultValue: option.value,
name: props.name,
tabIndex: -1,
"aria-hidden": "true"
}, /*#__PURE__*/React.createElement("option", {
value: option.value
}, option.label)));
};
var createKeyboardHelper = function createKeyboardHelper() {
return /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: focusInputRef,
id: props.inputId,
type: "text",
readOnly: true,
"aria-haspopup": "listbox",
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
disabled: props.disabled,
tabIndex: props.tabIndex
}, ariaProps)));
};
var createLabel = function createLabel() {
var label = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
if (props.editable) {
var value = label || props.value || '';
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: "text",
defaultValue: value,
className: "p-dropdown-label p-inputtext",
disabled: props.disabled,
placeholder: props.placeholder,
maxLength: props.maxLength,
onInput: onEditableInputChange,
onFocus: onEditableInputFocus,
onBlur: onInputBlur,
"aria-haspopup": "listbox"
}, ariaProps));
} else {
var _className = classNames('p-dropdown-label p-inputtext', {
'p-placeholder': label === null && props.placeholder,
'p-dropdown-label-empty': label === null && !props.placeholder
});
var content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
return /*#__PURE__*/React.createElement("span", {
ref: inputRef,
className: _className
}, content);
}
};
var createClearIcon = function createClearIcon() {
if (props.value != null && props.showClear && !props.disabled) {
var iconClassName = classNames('p-dropdown-clear-icon p-clickable');
var iconProps = {
className: iconClassName,
onPointerUp: clear
};
return IconUtils.getJSXIcon(props.clearIcon, iconProps);
}
return null;
};
var createDropdownIcon = function createDropdownIcon() {
var iconClassName = classNames('p-dropdown-trigger-icon p-clickable');
var icon = IconUtils.getJSXIcon(props.dropdownIcon, {
className: iconClassName
});
var ariaLabel = props.placeholder || props.ariaLabel;
return /*#__PURE__*/React.createElement("div", {
className: "p-dropdown-trigger",
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState,
"aria-label": ariaLabel
}, icon);
};
var visibleOptions = getVisibleOptions();
var selectedOption = getSelectedOption();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = DropdownBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-dropdown p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-focus': focusedState,
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
}, props.className);
var hiddenSelect = createHiddenSelect();
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var dropdownIcon = createDropdownIcon();
var clearIcon = createClearIcon();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick,
onMouseDown: props.onMouseDown,
onContextMenu: props.onContextMenu
}), keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
ref: overlayRef,
visibleOptions: visibleOptions
}, props, {
appendTo: appendTo,
onClick: onPanelClick,
onOptionClick: onOptionClick,
filterValue: filterState,
hasFilter: hasFilter,
onFilterClearIconClick: onFilterClearIconClick,
resetFilter: resetFilter,
onFilterInputKeyDown: onFilterInputKeyDown,
onFilterInputChange: onFilterInputChange,
getOptionLabel: getOptionLabel,
getOptionRenderKey: getOptionRenderKey,
isOptionDisabled: isOptionDisabled,
getOptionGroupChildren: getOptionGroupChildren,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupRenderKey: getOptionGroupRenderKey,
isSelected: isSelected,
getSelectedOptionIndex: getSelectedOptionIndex,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
Dropdown.displayName = 'Dropdown';
var RowsPerPageDropdown = /*#__PURE__*/React.memo(function (inProps) {
var props = RowsPerPageDropdownBase.getProps(inProps);
var hasOptions = props.options && props.options.length > 0;
var options = hasOptions ? props.options.map(function (opt) {
return {
label: String(opt),
value: opt
};
}) : [];
var ariaLabel = localeOption('choose');
var element = hasOptions ? /*#__PURE__*/React.createElement(Dropdown, {
value: props.value,
options: options,
onChange: props.onChange,
appendTo: props.appendTo,
disabled: props.disabled,
placeholder: ariaLabel,
"aria-label": ariaLabel
}) : null;
if (props.template) {
var defaultOptions = {
value: props.value,
options: options,
onChange: props.onChange,
appendTo: props.appendTo,
currentPage: props.page,
totalPages: props.pageCount,
totalRecords: props.totalRecords,
disabled: props.disabled,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
RowsPerPageDropdown.displayName = 'RowsPerPageDropdown';
var Paginator = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = PaginatorBase.getProps(inProps);
var elementRef = React.useRef(null);
var page = Math.floor(props.first / props.rows);
var pageCount = Math.ceil(props.totalRecords / props.rows);
var isFirstPage = page === 0;
var isLastPage = page === pageCount - 1;
var isEmpty = pageCount === 0;
var calculatePageLinkBoundaries = function calculatePageLinkBoundaries() {
var numberOfPages = pageCount;
var visiblePages = Math.min(props.pageLinkSize, numberOfPages);
//calculate range, keep current in middle if necessary
var start = Math.max(0, Math.ceil(page - visiblePages / 2));
var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
//check when approaching to last page
var delta = props.pageLinkSize - (end - start + 1);
start = Math.max(0, start - delta);
return [start, end];
};
var updatePageLinks = function updatePageLinks() {
var pageLinks = [];
var boundaries = calculatePageLinkBoundaries();
var start = boundaries[0];
var end = boundaries[1];
for (var i = start; i <= end; i++) {
pageLinks.push(i + 1);
}
return pageLinks;
};
var changePage = function changePage(first, rows) {
var pc = pageCount;
var p = Math.floor(first / rows);
if (p >= 0 && p < pc) {
var newPageState = {
first: first,
rows: rows,
page: p,
pageCount: pc
};
if (props.onPageChange) {
props.onPageChange(newPageState);
}
}
};
var changePageToFirst = function changePageToFirst(event) {
changePage(0, props.rows);
event.preventDefault();
};
var changePageToPrev = function changePageToPrev(event) {
changePage(props.first - props.rows, props.rows);
event.preventDefault();
};
var onPageLinkClick = function onPageLinkClick(event) {
changePage((event.value - 1) * props.rows, props.rows);
};
var changePageToNext = function changePageToNext(event) {
changePage(props.first + props.rows, props.rows);
event.preventDefault();
};
var changePageToLast = function changePageToLast(event) {
changePage((pageCount - 1) * props.rows, props.rows);
event.preventDefault();
};
var onRowsChange = function onRowsChange(event) {
var rows = event.value;
changePage(0, rows);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useUpdateEffect(function () {
if (page > 0 && props.first >= props.totalRecords) {
changePage((pageCount - 1) * props.rows, props.rows);
}
}, [props.totalRecords]);
var createElement = function createElement(key, template) {
var element;
switch (key) {
case 'FirstPageLink':
element = /*#__PURE__*/React.createElement(FirstPageLink, {
key: key,
onClick: changePageToFirst,
disabled: isFirstPage || isEmpty,
template: template
});
break;
case 'PrevPageLink':
element = /*#__PURE__*/React.createElement(PrevPageLink, {
key: key,
onClick: changePageToPrev,
disabled: isFirstPage || isEmpty,
template: template
});
break;
case 'NextPageLink':
element = /*#__PURE__*/React.createElement(NextPageLink, {
key: key,
onClick: changePageToNext,
disabled: isLastPage || isEmpty,
template: template
});
break;
case 'LastPageLink':
element = /*#__PURE__*/React.createElement(LastPageLink, {
key: key,
onClick: changePageToLast,
disabled: isLastPage || isEmpty,
template: template
});
break;
case 'PageLinks':
element = /*#__PURE__*/React.createElement(PageLinks, {
key: key,
value: updatePageLinks(),
page: page,
rows: props.rows,
pageCount: pageCount,
onClick: onPageLinkClick,
template: template
});
break;
case 'RowsPerPageDropdown':
element = /*#__PURE__*/React.createElement(RowsPerPageDropdown, {
key: key,
value: props.rows,
page: page,
pageCount: pageCount,
totalRecords: props.totalRecords,
options: props.rowsPerPageOptions,
onChange: onRowsChange,
appendTo: props.dropdownAppendTo,
template: template,
disabled: isEmpty
});
break;
case 'CurrentPageReport':
element = /*#__PURE__*/React.createElement(CurrentPageReport, {
reportTemplate: props.currentPageReportTemplate,
key: key,
page: page,
pageCount: pageCount,
first: props.first,
rows: props.rows,
totalRecords: props.totalRecords,
template: template
});
break;
case 'JumpToPageInput':
element = /*#__PURE__*/React.createElement(JumpToPageInput, {
key: key,
rows: props.rows,
page: page,
pageCount: pageCount,
onChange: changePage,
disabled: isEmpty,
template: template
});
break;
default:
element = null;
break;
}
return element;
};
var createElements = function createElements() {
var template = props.template;
if (template) {
if (_typeof(template) === 'object') {
return template.layout ? template.layout.split(' ').map(function (value) {
var key = value.trim();
return createElement(key, template[key]);
}) : Object.entries(template).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
_template = _ref2[1];
return createElement(key, _template);
});
}
return template.split(' ').map(function (value) {
return createElement(value.trim());
});
}
return null;
};
if (!props.alwaysShow && pageCount === 1) {
return null;
} else {
var otherProps = PaginatorBase.getOtherProps(props);
var className = classNames('p-paginator p-component', props.className);
var leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
var rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
var elements = createElements();
var leftElement = leftContent && /*#__PURE__*/React.createElement("div", {
className: "p-paginator-left-content"
}, leftContent);
var rightElement = rightContent && /*#__PURE__*/React.createElement("div", {
className: "p-paginator-right-content"
}, rightContent);
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps), leftElement, elements, rightElement);
}
}));
Paginator.displayName = 'Paginator';
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: 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 ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return 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.memo(function (props) {
var _React$useState = React.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 = classNames('p-checkbox p-component', {
'p-checkbox-focused': focusedState
});
var boxClassName = classNames('p-checkbox-box p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
var iconClassName = classNames('p-checkbox-icon', {
'pi pi-check': props.checked
});
var tabIndex = props.disabled ? null : '0';
return /*#__PURE__*/React.createElement("div", {
className: className,
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: boxClassName,
role: "checkbox",
"aria-checked": props.checked,
tabIndex: tabIndex,
onKeyDown: onKeyDown,
onFocus: onFocus,
onBlur: onBlur,
"aria-label": props.ariaLabel
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
})));
});
RowCheckbox.displayName = 'RowCheckbox';
var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var inputRef = React.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);
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 = classNames('p-radiobutton p-component', {
'p-radiobutton-focused': focusedState
});
var boxClassName = 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.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.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.createElement("div", {
className: boxClassName,
onClick: onClick,
role: "radio",
"aria-checked": props.checked
}, /*#__PURE__*/React.createElement("div", {
className: "p-radiobutton-icon"
})));
});
RowRadioButton.displayName = 'RowRadioButton';
function ownKeys$n(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$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var BodyCell = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(props.editing),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var _React$useState3 = React.useState(props.rowData),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editingRowDataState = _React$useState4[0],
setEditingRowDataState = _React$useState4[1];
var _React$useState5 = React.useState({}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
styleObjectState = _React$useState6[0],
setStyleObjectState = _React$useState6[1];
var elementRef = React.useRef(null);
var keyHelperRef = React.useRef(null);
var overlayEventListener = React.useRef(null);
var selfClick = React.useRef(false);
var tabindexTimeout = React.useRef(null);
var initFocusTimeout = React.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 = 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 : 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$n({
originalEvent: event
}, params);
};
var resolveFieldData = function resolveFieldData(data) {
return 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.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$n(_objectSpread$n({}, 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 ? DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
};
var findPrevSelectableCell = function findPrevSelectableCell(cell) {
var prevCell = cell.previousElementSibling;
return prevCell ? 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 ? DomHandler.hasClass(downRow, 'p-selectable-row') && 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 ? DomHandler.hasClass(upRow, 'p-selectable-row') && 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' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : 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' ? DomHandler.findSingle(elementRef.current, '.p-row-editor-init') : null;
focusableEl && focusableEl.focus();
}, 1);
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$n({}, styleObjectState);
var align = getColumnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = elementRef.current && elementRef.current.nextElementSibling;
if (next) {
right = 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 = 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$n({}, 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.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 (!DomHandler.isClickable(target)) {
onClick(event);
event.preventDefault();
}
break;
//space
case 32:
if (!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.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
if (props.editMode === 'cell' || props.editMode === 'row') {
focusOnElement();
}
});
useUpdateEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
setEditingRowDataState(getEditingRowData());
}
}, [props.editingMeta]);
React.useEffect(function () {
if (props.editMode === 'cell' || props.editMode === 'row') {
var callbackParams = getCellCallbackParams();
var params = _objectSpread$n(_objectSpread$n({}, callbackParams), {}, {
editing: editingState,
editingKey: editingKey
});
props.onEditingMetaChange(params);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editingState]);
useUnmountEffect(function () {
if (overlayEventListener.current) {
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 = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
return /*#__PURE__*/React.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 = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
var cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
var bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
var className = 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.createElement("span", {
className: "p-column-title"
}, 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 = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
}
content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
checked: props.selected,
onChange: onRadioChange,
tabIndex: props.tabIndex,
tableSelector: props.tableSelector,
ariaLabel: label
}), selectionMode === 'multiple' && /*#__PURE__*/React.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.createElement("i", {
className: classNames('p-datatable-reorderablerow-handle', getColumnProp('rowReorderIcon'))
});
} else if (expander) {
var iconClassName = 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 = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
var expanderProps = {
onClick: onRowToggle,
className: 'p-row-toggler p-link',
iconClassName: iconClassName
};
content = /*#__PURE__*/React.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.createElement("span", {
className: expanderProps.iconClassName,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
if (body) {
expanderProps['element'] = content;
content = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
type: "button",
name: "row-save",
onClick: rowEditorProps.onSaveClick,
className: rowEditorProps.saveClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React.createElement("span", {
className: rowEditorProps.saveIconClassName
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
type: "button",
name: "row-cancel",
onClick: rowEditorProps.onCancelClick,
className: rowEditorProps.cancelClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React.createElement("span", {
className: rowEditorProps.cancelIconClassName
}), /*#__PURE__*/React.createElement(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.createElement("button", {
type: "button",
name: "row-edit",
onClick: rowEditorProps.onInitClick,
className: rowEditorProps.initClassName,
tabIndex: props.tabIndex
}, /*#__PURE__*/React.createElement("span", {
className: rowEditorProps.initIconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
if (body) {
rowEditorProps['element'] = content;
content = 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 ? 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 = 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.createElement("a", {
tabIndex: "0",
ref: keyHelperRef,
className: "p-cell-editor-key-helper p-hidden-accessible",
onFocus: onEditorFocus
}, /*#__PURE__*/React.createElement("span", null));
/* eslint-enable */
}
return /*#__PURE__*/React.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$m(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$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var BodyRow = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.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 : 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 ? DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : findNextSelectableRow(nextRow) : null;
};
var findPrevSelectableRow = function findPrevSelectableRow(row) {
var prevRow = row.previousElementSibling;
return prevRow ? 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 = ObjectUtils.resolveFieldData(value[i], getColumnProp(column, 'field'));
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, getColumnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData;
}
}
return true;
};
var calculateRowGroupSize = function calculateRowGroupSize(value, column, index) {
if (isGrouped(column)) {
var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], getColumnProp(column, 'field'));
var nextRowFieldData = currentRowFieldData;
var groupRowSpan = 0;
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
var nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = 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 (!DomHandler.isClickable(target)) {
onClick(event);
event.preventDefault();
}
break;
//space
case 32:
if (!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.onRowDragLeave({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onDragEnd = function onDragEnd(event) {
props.onRowDragEnd({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
var onDrop = function onDrop(event) {
props.onRowDrop({
originalEvent: event,
data: props.rowData,
index: props.rowIndex
});
};
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(ObjectUtils.resolveFieldData(data, dataKey));
editingRows = props.editingRows ? _objectSpread$m({}, props.editingRows) : {};
if (!isEditing) {
delete editingRows[dataKeyValue];
// if the key value was changed, stop editing for the new key value too
var newDataKeyValue = String(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.rowIndex
});
}
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.rowIndex,
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.rowIndex
});
}
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.createElement(BodyCell, {
key: key,
value: props.value,
tableProps: props.tableProps,
tableSelector: props.tableSelector,
column: col,
rowData: props.rowData,
rowIndex: props.rowIndex,
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 = ObjectUtils.getPropValue(props.rowClassName, props.rowData, {
props: props.tableProps
});
var className = classNames(rowClassName, {
'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
'p-row-odd': props.rowIndex % 2 !== 0
});
var style = {
height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
};
var content = createContent();
var tabIndex = getTabIndex();
return /*#__PURE__*/React.createElement("tr", {
role: "row",
tabIndex: tabIndex,
className: className,
style: style,
onMouseDown: onMouseDown,
onMouseUp: onMouseUp,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onClick: onClick,
onDoubleClick: onDoubleClick,
onContextMenu: onRightClick,
onTouchEnd: onTouchEnd,
onKeyDown: onKeyDown,
onDragStart: onDragStart,
onDragOver: onDragOver,
onDragLeave: onDragLeave,
onDragEnd: onDragEnd,
onDrop: onDrop
}, content);
});
BodyRow.displayName = 'BodyRow';
var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(event) {
props.onClick({
originalEvent: event,
data: props.rowData
});
};
var iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
return /*#__PURE__*/React.createElement("button", {
type: "button",
onClick: onClick,
className: "p-row-toggler p-link",
tabIndex: props.tabIndex,
"aria-label": label
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
});
RowTogglerButton.displayName = 'RowTogglerButton';
var _excluded = ["originalEvent"];
function ownKeys$l(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
rowGroupHeaderStyleObjectState = _React$useState2[0],
setRowGroupHeaderStyleObjectState = _React$useState2[1];
var elementRef = React.useRef(null);
var refCallback = React.useCallback(function (el) {
elementRef.current = el;
props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
}, [props]);
var dragSelectionHelper = React.useRef(null);
var initialDragPosition = React.useRef(null);
var anchorRowIndex = React.useRef(null);
var anchorCellIndex = React.useRef(null);
var rangeRowIndex = React.useRef(null);
var anchorRowFirst = React.useRef(null);
var rowTouched = React.useRef(false);
var rowDragging = React.useRef(false);
var draggedRowIndex = React.useRef(null);
var droppedRowIndex = React.useRef(null);
var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
var isRadioSelectionMode = props.selectionMode === 'radiobutton';
var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
var isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
var isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
var equals = function equals(data1, data2) {
if (allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
};
var isSelectionEnabled = function isSelectionEnabled() {
return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
return col && !!getColumnProp(col, 'selectionMode');
});
};
var isSingleSelection = function isSingleSelection() {
return props.selectionMode === 'single' && !isCheckboxSelectionModeInColumn || !isRadioSelectionMode && isRadioSelectionModeInColumn;
};
var isMultipleSelection = function isMultipleSelection() {
return props.selectionMode === 'multiple' && !isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn;
};
var isRadioOnlySelection = function isRadioOnlySelection() {
return isRadioSelectionMode && isRadioSelectionModeInColumn;
};
var isCheckboxOnlySelection = function isCheckboxOnlySelection() {
return isCheckboxSelectionMode && isCheckboxSelectionModeInColumn;
};
var isSelected = function isSelected(rowData) {
if (rowData && props.selection) {
return props.selection instanceof Array ? findIndex(props.selection, rowData) > -1 : equals(rowData, props.selection);
}
return false;
};
var isContextMenuSelected = function isContextMenuSelected(rowData) {
if (rowData && props.contextMenuSelection) {
return equals(rowData, props.contextMenuSelection);
}
return false;
};
var isSelectable = function isSelectable(options) {
return props.isDataSelectable ? props.isDataSelectable(options) : true;
};
var isRowExpanded = function isRowExpanded(rowData) {
if (rowData && props.expandedRows) {
if (isSubheaderGrouping && props.expandableRowGroups) {
return isRowGroupExpanded(rowData);
} else {
if (props.dataKey) return props.expandedRows ? props.expandedRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.expandedRows, rowData) !== -1;
}
}
return false;
};
var isRowGroupExpanded = function isRowGroupExpanded(rowData) {
if (props.dataKey === props.groupRowsBy) return Object.keys(props.expandedRows).some(function (data) {
return ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey));
});else return props.expandedRows.some(function (data) {
return ObjectUtils.equals(data, rowData, props.groupRowsBy);
});
};
var isRowEditing = function isRowEditing(rowData) {
if (props.editMode === 'row' && rowData && props.editingRows) {
if (props.dataKey) return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.editingRows, rowData) !== -1;
}
return false;
};
var allowDrag = function allowDrag(event) {
return props.dragSelection && isMultipleSelection() && !event.originalEvent.shiftKey;
};
var allowRowDrag = function allowRowDrag(event) {
return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
};
var allowCellDrag = function allowCellDrag(event) {
return allowCellSelection() && allowDrag(event);
};
var allowSelection = function allowSelection(event) {
return !DomHandler.isClickable(event.originalEvent.target);
};
var allowMetaKeySelection = function allowMetaKeySelection(event) {
return !rowTouched.current && (!props.metaKeySelection || props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
};
var allowRangeSelection = function allowRangeSelection(event) {
return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
};
var allowRowSelection = function allowRowSelection() {
return (props.selectionMode || props.selectionModeInColumn) && !isRadioOnlySelection() && !isCheckboxOnlySelection();
};
var allowCellSelection = function allowCellSelection() {
return props.cellSelection && !isRadioSelectionModeInColumn && !isCheckboxSelectionModeInColumn;
};
var getColumnsLength = function getColumnsLength() {
return props.columns ? props.columns.length : 0;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getVirtualScrollerOption = function getVirtualScrollerOption(option, options) {
options = options || props.virtualScrollerOptions;
return options ? options[option] : null;
};
var findIndex = function findIndex(collection, rowData) {
return (collection || []).findIndex(function (data) {
return equals(rowData, data);
});
};
var rowGroupHeaderStyle = function rowGroupHeaderStyle() {
if (props.scrollable) {
return {
top: rowGroupHeaderStyleObjectState['top']
};
}
return null;
};
var getRowKey = function getRowKey(rowData, index) {
return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
};
var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
var prevRowData = value[i - 1];
if (prevRowData) {
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
};
var shouldRenderRowGroupFooter = function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
if (props.expandableRowGroups && !expanded) {
return false;
} else {
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
var nextRowData = value[i + 1];
if (nextRowData) {
var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
} else {
return true;
}
}
};
var updateFrozenRowStickyPosition = function updateFrozenRowStickyPosition() {
elementRef.current.style.top = DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
};
var updateFrozenRowGroupHeaderStickyPosition = function updateFrozenRowGroupHeaderStickyPosition() {
var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
var top = tableHeaderHeight + 'px';
if (rowGroupHeaderStyleObjectState.top !== top) {
setRowGroupHeaderStyleObjectState({
top: top
});
}
};
var onSingleSelection = function onSingleSelection(_ref) {
var originalEvent = _ref.originalEvent,
data = _ref.data,
index = _ref.index,
toggleable = _ref.toggleable,
type = _ref.type;
if (!isSelectable({
data: data,
index: index
})) {
return;
}
var selected = isSelected(data);
var selection = props.selection;
if (selected) {
if (toggleable) {
selection = null;
onUnselect({
originalEvent: originalEvent,
data: data,
type: type
});
}
} else {
selection = data;
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
focusOnElement(originalEvent, true);
if (props.onSelectionChange && selection !== props.selection) {
props.onSelectionChange({
originalEvent: originalEvent,
value: selection,
type: type
});
}
};
var onMultipleSelection = function onMultipleSelection(_ref2) {
var originalEvent = _ref2.originalEvent,
data = _ref2.data,
index = _ref2.index,
toggleable = _ref2.toggleable,
type = _ref2.type;
if (!isSelectable({
data: data,
index: index
})) {
return;
}
var selected = isSelected(data);
var selection = props.selection || [];
if (selected) {
if (toggleable) {
var selectionIndex = findIndex(selection, data);
selection = props.selection.filter(function (val, i) {
return i !== selectionIndex;
});
onUnselect({
originalEvent: originalEvent,
data: data,
type: type
});
} else if (selection.length) {
props.selection.forEach(function (d) {
return onUnselect({
originalEvent: originalEvent,
data: d,
type: type
});
});
selection = [data];
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
} else {
selection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
onSelect({
originalEvent: originalEvent,
data: data,
type: type
});
}
focusOnElement(originalEvent, true);
if (props.onSelectionChange && selection !== props.selection) {
props.onSelectionChange({
originalEvent: originalEvent,
value: selection,
type: type
});
}
};
var onRangeSelection = function onRangeSelection(event, type) {
DomHandler.clearSelection();
rangeRowIndex.current = allowCellSelection() ? event.rowIndex : event.index;
var selection = selectRange(event);
if (props.onSelectionChange && selection !== props.selection) {
props.onSelectionChange({
originalEvent: event.originalEvent,
value: selection,
type: type
});
}
anchorRowIndex.current = rangeRowIndex.current;
anchorCellIndex.current = event.cellIndex;
focusOnElement(event.originalEvent, false);
};
var selectRange = function selectRange(event) {
var rangeStart, rangeEnd;
if (rangeRowIndex.current > anchorRowIndex.current) {
rangeStart = anchorRowIndex.current;
rangeEnd = rangeRowIndex.current;
} else if (rangeRowIndex.current < anchorRowIndex.current) {
rangeStart = rangeRowIndex.current;
rangeEnd = anchorRowIndex.current;
} else {
rangeStart = rangeEnd = rangeRowIndex.current;
}
if (props.paginator) {
rangeStart = Math.max(rangeStart - props.first, 0);
rangeEnd -= props.first;
}
return allowCellSelection() ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
};
var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
var value = props.value;
var selection = [];
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
var rangeRowData = value[i];
if (!isSelectable({
data: rangeRowData,
index: i
})) {
continue;
}
selection.push(rangeRowData);
onSelect({
originalEvent: event.originalEvent,
data: rangeRowData,
type: 'row'
});
}
return selection;
};
var selectRangeOnCell = function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
var cellRangeStart,
cellRangeEnd,
cellIndex = event.cellIndex;
if (cellIndex > anchorCellIndex.current) {
cellRangeStart = anchorCellIndex.current;
cellRangeEnd = cellIndex;
} else if (cellIndex < anchorCellIndex.current) {
cellRangeStart = cellIndex;
cellRangeEnd = anchorCellIndex.current;
} else {
cellRangeStart = cellRangeEnd = cellIndex;
}
var value = props.value;
var selection = [];
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
var rowData = value[i];
var columns = props.columns;
var rowIndex = props.paginator ? i + props.first : i;
for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
var field = getColumnProp(columns[j], 'field');
var _value = ObjectUtils.resolveFieldData(rowData, field);
var rangeRowData = {
value: _value,
field: field,
rowData: rowData,
rowIndex: rowIndex,
cellIndex: j,
selected: true
};
if (!isSelectable({
data: rangeRowData,
index: i
})) {
continue;
}
selection.push(rangeRowData);
onSelect({
originalEvent: event.originalEvent,
data: rangeRowData,
type: 'cell'
});
}
}
return selection;
};
var onSelect = function onSelect(event) {
if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$l(_objectSpread$l({
originalEvent: event.originalEvent
}, event.data), {}, {
type: event.type
}));else props.onRowSelect && props.onRowSelect(event);
};
var onUnselect = function onUnselect(event) {
if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$l(_objectSpread$l({
originalEvent: event.originalEvent
}, event.data), {}, {
type: event.type
}));else props.onRowUnselect && props.onRowUnselect(event);
};
var enableDragSelection = function enableDragSelection(event) {
if (props.dragSelection && !dragSelectionHelper.current) {
dragSelectionHelper.current = document.createElement('div');
DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
initialDragPosition.current = {
x: event.clientX,
y: event.clientY
};
dragSelectionHelper.current.style.top = "".concat(event.pageY, "px");
dragSelectionHelper.current.style.left = "".concat(event.pageX, "px");
bindDragSelectionEvents();
}
};
var focusOnElement = function focusOnElement(event, isFocused) {
var target = event.currentTarget;
if (!allowCellSelection() && props.selectionAutoFocus) {
if (isCheckboxSelectionModeInColumn) {
var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
checkbox && checkbox.focus();
} else if (isRadioSelectionModeInColumn) {
var radio = DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
radio && radio.focus();
}
}
!isFocused && target && target.focus();
};
var changeTabIndex = function changeTabIndex(event, type) {
var target = event.currentTarget;
var isSelectable = DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row');
if (isSelectable) {
var selector = type === 'cell' ? 'tr > td' : 'tr';
var tabbableEl = DomHandler.findSingle(elementRef.current, "".concat(selector, "[tabindex=\"").concat(props.tabIndex, "\"]"));
if (tabbableEl && target) {
tabbableEl.tabIndex = -1;
target.tabIndex = props.tabIndex;
}
}
};
var onRowClick = function onRowClick(event) {
if (allowCellSelection() || !allowSelection(event)) {
return;
}
props.onRowClick && props.onRowClick(event);
if (allowRowSelection()) {
if (allowRangeSelection(event)) {
onRangeSelection(event, 'row');
} else {
var toggleable = isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn || allowMetaKeySelection(event);
anchorRowIndex.current = event.index;
rangeRowIndex.current = event.index;
anchorRowFirst.current = props.first;
if (isSingleSelection()) {
onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
toggleable: toggleable,
type: 'row'
}));
} else {
onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
toggleable: toggleable,
type: 'row'
}));
}
}
changeTabIndex(event.originalEvent, 'row');
} else {
focusOnElement(event.originalEvent);
}
rowTouched.current = false;
};
var onRowDoubleClick = function onRowDoubleClick(e) {
var event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
return;
}
if (props.onRowDoubleClick) {
props.onRowDoubleClick(e);
}
};
var onRowRightClick = function onRowRightClick(event) {
if (props.onContextMenu || props.onContextMenuSelectionChange) {
DomHandler.clearSelection();
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event.originalEvent,
value: event.data
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event.originalEvent,
data: event.data
});
}
event.originalEvent.preventDefault();
}
};
var onRowMouseEnter = function onRowMouseEnter(event) {
props.onRowMouseEnter && props.onRowMouseEnter(event);
};
var onRowMouseLeave = function onRowMouseLeave(event) {
props.onRowMouseLeave && props.onRowMouseLeave(event);
};
var onRowTouchEnd = function onRowTouchEnd() {
rowTouched.current = true;
};
var onRowMouseDown = function onRowMouseDown(e) {
var event = e.originalEvent;
if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
if (allowRowDrag(e)) {
enableDragSelection(event);
anchorRowIndex.current = e.index;
rangeRowIndex.current = e.index;
anchorRowFirst.current = props.first;
}
};
var onRowMouseUp = function onRowMouseUp(event) {
var isSameRow = event.index === anchorRowIndex.current;
if (allowRowDrag(event) && !isSameRow) {
onRangeSelection(event, 'row');
}
};
var onRowToggle = function onRowToggle(event) {
var expandedRows;
var dataKey = props.dataKey;
var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
if (hasDataKey) {
var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
expandedRows = props.expandedRows ? _objectSpread$l({}, props.expandedRows) : {};
if (expandedRows[dataKeyValue] != null) {
delete expandedRows[dataKeyValue];
if (props.onRowCollapse) {
props.onRowCollapse({
originalEvent: event,
data: event.data
});
}
} else {
expandedRows[dataKeyValue] = true;
if (props.onRowExpand) {
props.onRowExpand({
originalEvent: event,
data: event.data
});
}
}
} else {
var expandedRowIndex = findIndex(props.expandedRows, event.data);
expandedRows = props.expandedRows ? _toConsumableArray(props.expandedRows) : [];
if (expandedRowIndex !== -1) {
expandedRows = expandedRows.filter(function (_, i) {
return i !== expandedRowIndex;
});
if (props.onRowCollapse) {
props.onRowCollapse({
originalEvent: event,
data: event.data
});
}
} else {
expandedRows.push(event.data);
if (props.onRowExpand) {
props.onRowExpand({
originalEvent: event,
data: event.data
});
}
}
}
if (props.onRowToggle) {
props.onRowToggle({
data: expandedRows
});
}
};
var onRowDragStart = function onRowDragStart(e) {
var event = e.originalEvent,
index = e.index;
if (allowRowDrag(event)) {
rowDragging.current = true;
draggedRowIndex.current = index;
event.dataTransfer.setData('text', 'b'); // For firefox
}
};
var onRowDragOver = function onRowDragOver(e) {
var event = e.originalEvent,
index = e.index;
if (rowDragging.current && draggedRowIndex.current !== index) {
var rowElement = event.currentTarget;
var rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
var pageY = event.pageY + window.scrollY;
var rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
var prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) {
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
droppedRowIndex.current = index;
if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
} else {
if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
droppedRowIndex.current = index + 1;
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
}
}
event.preventDefault();
};
var onRowDragLeave = function onRowDragLeave(e) {
var event = e.originalEvent;
var rowElement = event.currentTarget;
var prevRowElement = rowElement.previousElementSibling;
if (prevRowElement) {
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
}
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
};
var onRowDragEnd = function onRowDragEnd(e) {
var event = e.originalEvent;
rowDragging.current = false;
draggedRowIndex.current = null;
droppedRowIndex.current = null;
event.currentTarget.draggable = false;
};
var onRowDrop = function onRowDrop(e) {
var event = e.originalEvent;
if (droppedRowIndex.current != null) {
var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
var val = _toConsumableArray(props.tableProps.value);
ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
if (props.onRowReorder) {
props.onRowReorder({
originalEvent: event,
value: val,
dragIndex: draggedRowIndex.current,
dropIndex: dropIndex
});
}
}
//cleanup
onRowDragLeave(e);
onRowDragEnd(e);
event.preventDefault();
};
var onRadioChange = function onRadioChange(event) {
onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
toggleable: true,
type: 'radio'
}));
};
var onCheckboxChange = function onCheckboxChange(event) {
onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
toggleable: true,
type: 'checkbox'
}));
};
var onDragSelectionMouseMove = function onDragSelectionMouseMove(event) {
var _initialDragPosition$ = initialDragPosition.current,
x = _initialDragPosition$.x,
y = _initialDragPosition$.y;
var dx = event.clientX - x;
var dy = event.clientY - y;
if (dy < 0) dragSelectionHelper.current.style.top = "".concat(event.pageY + 5, "px");
if (dx < 0) dragSelectionHelper.current.style.left = "".concat(event.pageX + 5, "px");
dragSelectionHelper.current.style.height = "".concat(Math.abs(dy), "px");
dragSelectionHelper.current.style.width = "".concat(Math.abs(dx), "px");
event.preventDefault();
};
var onDragSelectionMouseUp = function onDragSelectionMouseUp() {
if (dragSelectionHelper.current) {
dragSelectionHelper.current.remove();
dragSelectionHelper.current = null;
}
document.removeEventListener('mousemove', onDragSelectionMouseMove);
document.removeEventListener('mouseup', onDragSelectionMouseUp);
};
var onCellClick = function onCellClick(event) {
if (!allowSelection(event)) {
return;
}
props.onCellClick && props.onCellClick(event);
if (allowCellSelection()) {
if (allowRangeSelection(event)) {
onRangeSelection(event, 'cell');
} else {
var toggleable = allowMetaKeySelection(event);
var originalEvent = event.originalEvent,
data = _objectWithoutProperties(event, _excluded);
anchorRowIndex.current = event.rowIndex;
rangeRowIndex.current = event.rowIndex;
anchorRowFirst.current = props.first;
anchorCellIndex.current = event.cellIndex;
if (isSingleSelection()) {
onSingleSelection({
originalEvent: originalEvent,
data: data,
index: event.rowIndex,
toggleable: toggleable,
type: 'cell'
});
} else {
onMultipleSelection({
originalEvent: originalEvent,
data: data,
index: event.rowIndex,
toggleable: toggleable,
type: 'cell'
});
}
}
changeTabIndex(event.originalEvent, 'cell');
}
rowTouched.current = false;
};
var onCellMouseDown = function onCellMouseDown(event) {
if (allowCellDrag(event)) {
enableDragSelection(event.originalEvent);
anchorRowIndex.current = event.rowIndex;
rangeRowIndex.current = event.rowIndex;
anchorRowFirst.current = props.first;
anchorCellIndex.current = event.cellIndex;
}
};
var onCellMouseUp = function onCellMouseUp(event) {
var isSameCell = event.rowIndex === anchorRowIndex.current && event.cellIndex === anchorCellIndex.current;
if (allowCellDrag(event) && !isSameCell) {
onRangeSelection(event, 'cell');
}
};
var bindDragSelectionEvents = function bindDragSelectionEvents() {
document.addEventListener('mousemove', onDragSelectionMouseMove);
document.addEventListener('mouseup', onDragSelectionMouseUp);
document.body.appendChild(dragSelectionHelper.current);
};
var unbindDragSelectionEvents = function unbindDragSelectionEvents() {
onDragSelectionMouseUp();
};
React.useEffect(function () {
if (props.frozenRow) {
updateFrozenRowStickyPosition();
}
if (props.scrollable && props.rowGroupMode === 'subheader') {
updateFrozenRowGroupHeaderStickyPosition();
}
});
useUpdateEffect(function () {
if (props.paginator && isMultipleSelection()) {
anchorRowIndex.current = null;
}
}, [props.first]);
useUnmountEffect(function () {
if (props.dragSelection) {
unbindDragSelectionEvents();
}
});
var createEmptyContent = function createEmptyContent() {
if (!props.loading) {
var colSpan = getColumnsLength();
var _content = ObjectUtils.getJSXElement(props.emptyMessage, {
props: props.tableProps,
frozen: props.frozenRow
}) || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("tr", {
className: "p-datatable-emptymessage",
role: "row"
}, /*#__PURE__*/React.createElement("td", {
colSpan: colSpan,
role: "cell"
}, _content));
}
return null;
};
var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
var style = rowGroupHeaderStyle();
var toggler = props.expandableRowGroups && /*#__PURE__*/React.createElement(RowTogglerButton, {
onClick: onRowToggle,
rowData: rowData,
expanded: expanded,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon
});
var options = {
index: rowIndex,
props: props.tableProps,
customRendering: false
};
var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
// check if the user wants complete control of the rendering
if (!options.customRendering) {
_content2 = /*#__PURE__*/React.createElement("td", {
colSpan: colSpan
}, toggler, /*#__PURE__*/React.createElement("span", {
className: "p-rowgroup-header-name"
}, _content2));
}
return /*#__PURE__*/React.createElement("tr", {
className: "p-rowgroup-header",
style: style,
role: "row"
}, _content2);
}
return null;
};
var createRow = function createRow(rowData, rowIndex, index, expanded) {
if (!props.expandableRowGroups || expanded) {
var selected = isSelectionEnabled() ? isSelected(rowData) : false;
var contextMenuSelected = isContextMenuSelected(rowData);
var _allowRowSelection = allowRowSelection();
var _allowCellSelection = allowCellSelection();
var editing = isRowEditing(rowData);
return /*#__PURE__*/React.createElement(BodyRow, {
tableProps: props.tableProps,
tableSelector: props.tableSelector,
value: props.value,
columns: props.columns,
rowData: rowData,
rowIndex: rowIndex,
index: index,
selected: selected,
contextMenuSelected: contextMenuSelected,
onRowClick: onRowClick,
onRowDoubleClick: onRowDoubleClick,
onRowRightClick: onRowRightClick,
onRowMouseEnter: onRowMouseEnter,
onRowMouseLeave: onRowMouseLeave,
tabIndex: props.tabIndex,
isSelectable: isSelectable,
onRowTouchEnd: onRowTouchEnd,
onRowMouseDown: onRowMouseDown,
onRowMouseUp: onRowMouseUp,
onRowToggle: onRowToggle,
onRowDragStart: onRowDragStart,
onRowDragOver: onRowDragOver,
onRowDragLeave: onRowDragLeave,
onRowDragEnd: onRowDragEnd,
onRowDrop: onRowDrop,
onRadioChange: onRadioChange,
onCheckboxChange: onCheckboxChange,
onCellClick: onCellClick,
onCellMouseDown: onCellMouseDown,
onCellMouseUp: onCellMouseUp,
editing: editing,
editingRows: props.editingRows,
editingMeta: props.editingMeta,
editMode: props.editMode,
onRowEditChange: props.onRowEditChange,
onEditingMetaChange: props.onEditingMetaChange,
groupRowsBy: props.groupRowsBy,
compareSelectionBy: props.compareSelectionBy,
dataKey: props.dataKey,
rowGroupMode: props.rowGroupMode,
onRowEditInit: props.onRowEditInit,
rowEditValidator: props.rowEditValidator,
onRowEditSave: props.onRowEditSave,
onRowEditComplete: props.onRowEditComplete,
onRowEditCancel: props.onRowEditCancel,
selection: props.selection,
allowRowSelection: _allowRowSelection,
allowCellSelection: _allowCellSelection,
selectOnEdit: props.selectOnEdit,
selectionMode: props.selectionMode,
selectionModeInColumn: props.selectionModeInColumn,
cellClassName: props.cellClassName,
responsiveLayout: props.responsiveLayout,
frozenRow: props.frozenRow,
showSelectionElement: props.showSelectionElement,
showRowReorderElement: props.showRowReorderElement,
expanded: expanded,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon,
rowClassName: props.rowClassName,
virtualScrollerOptions: props.virtualScrollerOptions
});
}
};
var createExpansion = function createExpansion(rowData, rowIndex, expanded, colSpan) {
if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
var id = "".concat(props.tableSelector, "_content_").concat(rowIndex, "_expanded");
var options = {
index: rowIndex,
customRendering: false
};
var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
// check if the user wants complete control of the rendering
if (!options.customRendering) {
_content3 = /*#__PURE__*/React.createElement("td", {
role: "cell",
colSpan: colSpan
}, _content3);
}
return /*#__PURE__*/React.createElement("tr", {
id: id,
className: "p-datatable-row-expansion",
role: "row"
}, _content3);
}
return null;
};
var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
index: rowIndex,
colSpan: colSpan,
props: props.tableProps
});
return /*#__PURE__*/React.createElement("tr", {
className: "p-rowgroup-footer",
role: "row"
}, _content4);
}
return null;
};
var createContent = function createContent() {
return props.value && props.value.map(function (rowData, index) {
var rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
var key = getRowKey(rowData, rowIndex);
var expanded = isRowExpanded(rowData);
var colSpan = getColumnsLength();
var groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
var row = createRow(rowData, rowIndex, index, expanded);
var expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
var groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, groupHeader, row, expansion, groupFooter);
});
};
var content = props.empty ? createEmptyContent() : createContent();
return /*#__PURE__*/React.createElement("tbody", {
ref: refCallback,
style: props.style,
className: props.className
}, content);
}));
TableBody.displayName = 'TableBody';
var ColumnGroupBase = {
defaultProps: {
__TYPE: 'ColumnGroup',
children: undefined
},
getCProp: function getCProp(group, name) {
return ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps);
},
getCProps: function getCProps(group) {
return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
}
};
var RowBase = {
defaultProps: {
__TYPE: 'Row',
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, RowBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, RowBase.defaultProps);
},
getCProp: function getCProp(row, name) {
return ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
}
};
function ownKeys$k(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var FooterCell = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
styleObjectState = _React$useState2[0],
setStyleObjectState = _React$useState2[1];
var elementRef = React.useRef(null);
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getStyle = function getStyle() {
var footerStyle = getColumnProp('footerStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, styleObjectState) : Object.assign({}, columnStyle, footerStyle);
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$k({}, styleObjectState);
var _align = getColumnProp('alignFrozen');
if (_align === 'right') {
var right = 0;
var next = elementRef.current.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject['right'] = right + 'px';
} else {
var left = 0;
var prev = elementRef.current.previousElementSibling;
if (prev) {
left = 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);
}
};
React.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
});
var style = getStyle();
var align = getColumnProp('align');
var colSpan = getColumnProp('colSpan');
var rowSpan = getColumnProp('rowSpan');
var className = classNames(getColumnProp('footerClassName'), getColumnProp('className'), _defineProperty({
'p-frozen-column': getColumnProp('frozen')
}, "p-align-".concat(align), !!align));
var content = ObjectUtils.getJSXElement(getColumnProp('footer'), {
props: props.tableProps
});
return /*#__PURE__*/React.createElement("td", {
ref: elementRef,
style: style,
className: className,
role: "cell",
colSpan: colSpan,
rowSpan: rowSpan
}, content);
});
FooterCell.displayName = 'FooterCell';
var TableFooter = /*#__PURE__*/React.memo(function (props) {
var hasFooter = function hasFooter() {
return props.footerColumnGroup ? true : props.columns ? props.columns.some(function (col) {
return col && getColumnProp(col, 'footer');
}) : false;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var createGroupFooterCells = function createGroupFooterCells(row) {
var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
return createFooterCells(columns);
};
var createFooterCells = function createFooterCells(columns) {
return React.Children.map(columns, function (col, i) {
var isVisible = col ? !getColumnProp(col, 'hidden') : true;
var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
return isVisible && /*#__PURE__*/React.createElement(FooterCell, {
key: key,
tableProps: props.tableProps,
column: col
});
});
};
var createContent = function createContent() {
if (props.footerColumnGroup) {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
return rows.map(function (row, i) {
return /*#__PURE__*/React.createElement("tr", {
key: i,
role: "row"
}, createGroupFooterCells(row));
});
}
return /*#__PURE__*/React.createElement("tr", {
role: "row"
}, createFooterCells(props.columns));
};
if (hasFooter()) {
var content = createContent();
return /*#__PURE__*/React.createElement("tfoot", {
className: "p-datatable-tfoot"
}, content);
}
return null;
});
TableFooter.displayName = 'TableFooter';
function ownKeys$j(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var overlayRef = React.useRef(null);
var iconRef = React.useRef(null);
var selfClick = React.useRef(false);
var overlayEventListener = React.useRef(null);
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var field = getColumnProp('filterField') || getColumnProp('field');
var filterModel = props.filters[field];
var filterStoreModel = props.filtersStore && props.filtersStore[field];
var _useOverlayListener = useOverlayListener({
target: iconRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? !selfClick.current && !isTargetClicked(event.target) && hide() : hide();
}
selfClick.current = false;
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var hasFilter = function hasFilter() {
if (!filterStoreModel || !filterModel) return false;
return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
};
var hasRowFilter = function hasRowFilter() {
return filterModel && !isFilterBlank(filterModel.value);
};
var isFilterBlank = function isFilterBlank(filter) {
return ObjectUtils.isEmpty(filter);
};
var isRowMatchModeSelected = function isRowMatchModeSelected(matchMode) {
return filterModel && filterModel.matchMode === matchMode;
};
var showMenuButton = function showMenuButton() {
return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
};
var matchModes = function matchModes() {
return getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[findDataType()].map(function (key) {
return {
label: localeOption(key),
value: key
};
});
};
var isShowMatchModes = function isShowMatchModes() {
return getColumnProp('dataType') !== 'boolean' && getColumnProp('showFilterMatchModes') && matchModes() && getColumnProp('showFilterMenuOptions');
};
var isShowOperator = function isShowOperator() {
return getColumnProp('showFilterOperator') && filterModel && filterModel.operator && getColumnProp('showFilterMenuOptions');
};
var showRemoveIcon = function showRemoveIcon() {
return fieldConstraints().length > 1;
};
var isShowAddConstraint = function isShowAddConstraint() {
return getColumnProp('showAddButton') && filterModel && filterModel.operator && fieldConstraints() && fieldConstraints().length < getColumnProp('maxConstraints') && getColumnProp('showFilterMenuOptions');
};
var isOutsideClicked = function isOutsideClicked(target) {
return !isTargetClicked(target) && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var isTargetClicked = function isTargetClicked(target) {
return iconRef.current && (iconRef.current.isSameNode(target) || iconRef.current.contains(target));
};
var getDefaultConstraint = function getDefaultConstraint() {
if (filterStoreModel) {
if (filterStoreModel.operator) {
return {
matchMode: filterStoreModel.constraints[0].matchMode,
operator: filterStoreModel.operator
};
} else {
return {
matchMode: filterStoreModel.matchMode
};
}
}
};
var findDataType = function findDataType() {
var dataType = getColumnProp('dataType');
var matchMode = getColumnProp('filterMatchMode');
var hasMatchMode = function hasMatchMode(key) {
return PrimeReact.filterMatchModeOptions[key].some(function (mode) {
return mode === matchMode;
});
};
if (matchMode === 'custom' && !hasMatchMode(dataType)) {
PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
return dataType;
} else if (matchMode) {
return Object.keys(PrimeReact.filterMatchModeOptions).find(function (key) {
return hasMatchMode(key);
}) || dataType;
}
return dataType;
};
var clearFilter = function clearFilter() {
var filterClearCallback = getColumnProp('onFilterClear');
var defaultConstraint = getDefaultConstraint();
var filters = _objectSpread$j({}, 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();
props.onFilterChange(filters);
props.onFilterApply();
hide();
};
var applyFilter = function applyFilter() {
var filterApplyClickCallback = getColumnProp('onFilterApplyClick');
filterApplyClickCallback && filterApplyClickCallback({
field: field,
constraints: filterModel
});
props.onFilterApply();
hide();
};
var toggleMenu = function toggleMenu() {
setOverlayVisibleState(function (prevVisible) {
return !prevVisible;
});
};
var onToggleButtonKeyDown = function onToggleButtonKeyDown(event) {
switch (event.key) {
case 'Escape':
case 'Tab':
hide();
break;
case 'ArrowDown':
if (overlayVisibleState) {
var focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
focusable && focusable.focus();
event.preventDefault();
} else if (event.altKey) {
setOverlayVisibleState(true);
event.preventDefault();
}
break;
}
};
var onContentKeyDown = function onContentKeyDown(event) {
if (event.key === 'Escape') {
hide();
iconRef.current && iconRef.current.focus();
}
};
var onInputChange = function onInputChange(event, index) {
var filters = _objectSpread$j({}, props.filters);
var value = event.target.value;
if (props.display === 'menu') {
filters[field].constraints[index].value = value;
} else {
filters[field].value = value;
}
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton') || props.display === 'row') {
props.onFilterApply();
}
};
var onInputKeydown = function onInputKeydown(event, _index) {
if (event.key === 'Enter') {
if (!getColumnProp('showApplyButton') || props.display === 'menu') {
applyFilter();
}
}
};
var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
var filters = _objectSpread$j({}, props.filters);
filters[field].matchMode = matchMode;
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
field: field,
matchMode: matchMode
});
props.onFilterChange(filters);
props.onFilterApply();
hide();
};
var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
var item = event.target;
switch (event.key) {
case 'ArrowDown':
var nextItem = findNextItem(item);
if (nextItem) {
item.removeAttribute('tabindex');
nextItem.tabIndex = 0;
nextItem.focus();
}
event.preventDefault();
break;
case 'ArrowUp':
var prevItem = findPrevItem(item);
if (prevItem) {
item.removeAttribute('tabindex');
prevItem.tabIndex = 0;
prevItem.focus();
}
event.preventDefault();
break;
case 'Enter':
clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
event.preventDefault();
break;
}
};
var onOperatorChange = function onOperatorChange(e) {
var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
var value = e.value;
var filters = _objectSpread$j({}, props.filters);
filters[field].operator = value;
props.onFilterChange(filters);
filterOperationChangeCallback && filterOperationChangeCallback({
field: field,
operator: value
});
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
var filters = _objectSpread$j({}, props.filters);
filters[field].constraints[index].matchMode = value;
props.onFilterChange(filters);
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
field: field,
matchMode: value,
index: index
});
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var addConstraint = function addConstraint() {
var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
var defaultConstraint = getDefaultConstraint();
var filters = _objectSpread$j({}, props.filters);
var newConstraint = {
value: null,
matchMode: defaultConstraint.matchMode
};
filters[field].constraints.push(newConstraint);
filterConstraintAddCallback && filterConstraintAddCallback({
field: field,
constraint: newConstraint
});
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var removeConstraint = function removeConstraint(index) {
var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
var filters = _objectSpread$j({}, props.filters);
var removedConstraint = filters[field].constraints.splice(index, 1);
filterConstraintRemoveCallback && filterConstraintRemoveCallback({
field: field,
constraint: removedConstraint
});
props.onFilterChange(filters);
if (!getColumnProp('showApplyButton')) {
props.onFilterApply();
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? findNextItem(nextItem) : nextItem : item.parentElement.firstElementChild;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? findPrevItem(prevItem) : prevItem : item.parentElement.lastElementChild;
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onContentClick = function onContentClick(event) {
selfClick.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: overlayRef.current
});
};
var onContentMouseDown = function onContentMouseDown() {
selfClick.current = true;
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e.target)) {
selfClick.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
};
var onOverlayExit = function onOverlayExit() {
onOverlayHide();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
};
var onOverlayHide = function onOverlayHide() {
unbindOverlayListener();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
selfClick.current = false;
};
var fieldConstraints = function fieldConstraints() {
return filterModel ? filterModel.constraints || [filterModel] : [];
};
var operator = function operator() {
return filterModel.operator;
};
var operatorOptions = function operatorOptions() {
return [{
label: localeOption('matchAll'),
value: FilterOperator.AND
}, {
label: localeOption('matchAny'),
value: FilterOperator.OR
}];
};
var filterLabel = function filterLabel() {
return localeOption('filter');
};
var noFilterLabel = function noFilterLabel() {
return localeOption('noFilter');
};
var removeRuleButtonLabel = function removeRuleButtonLabel() {
return localeOption('removeRule');
};
var addRuleButtonLabel = function addRuleButtonLabel() {
return localeOption('addRule');
};
var clearButtonLabel = function clearButtonLabel() {
return localeOption('clear');
};
var applyButtonLabel = function applyButtonLabel() {
return localeOption('apply');
};
var filterCallback = function filterCallback(value) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var filters = _objectSpread$j({}, props.filters);
var meta = filters[field];
props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
props.onFilterChange(filters);
};
var filterApplyCallback = function filterApplyCallback() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
args && filterCallback(args[0], args[1]);
props.onFilterApply();
};
useUpdateEffect(function () {
if (props.display === 'menu' && overlayVisibleState) {
DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
}
});
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
if (overlayRef.current) {
ZIndexUtils.clear(overlayRef.current);
onOverlayHide();
}
});
var createFilterElement = function createFilterElement(model, index) {
var value = model ? model.value : null;
return getColumnProp('filterElement') ? ObjectUtils.getJSXElement(getColumnProp('filterElement'), {
field: field,
index: index,
filterModel: model,
value: value,
filterApplyCallback: filterApplyCallback,
filterCallback: filterCallback
}) : /*#__PURE__*/React.createElement(InputText, {
type: getColumnProp('filterType'),
value: value || '',
onChange: function onChange(e) {
return onInputChange(e, index);
},
onKeyDown: function onKeyDown(e) {
return onInputKeydown(e);
},
className: "p-column-filter",
placeholder: getColumnProp('filterPlaceholder'),
maxLength: getColumnProp('filterMaxLength')
});
};
var createRowFilterElement = function createRowFilterElement() {
if (props.display === 'row') {
var content = createFilterElement(filterModel, 0);
return /*#__PURE__*/React.createElement("div", {
className: "p-fluid p-column-filter-element"
}, content);
}
return null;
};
var createMenuFilterElement = function createMenuFilterElement(fieldConstraint, index) {
return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
};
var createMenuButton = function createMenuButton() {
if (showMenuButton()) {
var _className = classNames('p-column-filter-menu-button p-link', {
'p-column-filter-menu-button-open': overlayVisibleState,
'p-column-filter-menu-button-active': hasFilter()
});
var label = filterLabel();
return /*#__PURE__*/React.createElement("button", {
ref: iconRef,
type: "button",
className: _className,
"aria-haspopup": true,
"aria-expanded": overlayVisibleState,
onClick: toggleMenu,
onKeyDown: onToggleButtonKeyDown,
"aria-label": label
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-filter-icon pi-filter",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createClearButton = function createClearButton() {
if (getColumnProp('showClearButton') && props.display === 'row') {
var _className2 = classNames('p-column-filter-clear-button p-link', {
'p-hidden-space': !hasRowFilter()
});
var clearLabel = clearButtonLabel();
return /*#__PURE__*/React.createElement("button", {
className: _className2,
type: "button",
onClick: clearFilter,
"aria-label": clearLabel
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-filter-slash",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createRowItems = function createRowItems() {
if (isShowMatchModes()) {
var _matchModes = matchModes();
var _noFilterLabel = noFilterLabel();
return /*#__PURE__*/React.createElement("ul", {
className: "p-column-filter-row-items"
}, _matchModes.map(function (matchMode, i) {
var value = matchMode.value,
label = matchMode.label;
var className = classNames('p-column-filter-row-item', {
'p-highlight': isRowMatchModeSelected(value)
});
var tabIndex = i === 0 ? 0 : null;
return /*#__PURE__*/React.createElement("li", {
className: className,
key: label,
onClick: function onClick() {
return onRowMatchModeChange(value);
},
onKeyDown: function onKeyDown(e) {
return onRowMatchModeKeyDown(e, matchMode);
},
tabIndex: tabIndex
}, label);
}), /*#__PURE__*/React.createElement("li", {
className: "p-column-filter-separator"
}), /*#__PURE__*/React.createElement("li", {
className: "p-column-filter-row-item",
onClick: clearFilter,
onKeyDown: function onKeyDown(e) {
return onRowMatchModeKeyDown(e, null, true);
}
}, _noFilterLabel));
}
return null;
};
var createOperator = function createOperator() {
if (isShowOperator()) {
var options = operatorOptions();
var value = operator();
return /*#__PURE__*/React.createElement("div", {
className: "p-column-filter-operator"
}, /*#__PURE__*/React.createElement(Dropdown, {
options: options,
value: value,
onChange: onOperatorChange,
className: "p-column-filter-operator-dropdown"
}));
}
return null;
};
var createMatchModeDropdown = function createMatchModeDropdown(constraint, index) {
if (isShowMatchModes()) {
var options = matchModes();
return /*#__PURE__*/React.createElement(Dropdown, {
options: options,
value: constraint.matchMode,
onChange: function onChange(e) {
return onMenuMatchModeChange(e.value, index);
},
className: "p-column-filter-matchmode-dropdown"
});
}
return null;
};
var createRemoveButton = function createRemoveButton(index) {
if (showRemoveIcon()) {
var removeRuleLabel = removeRuleButtonLabel();
return /*#__PURE__*/React.createElement(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 removeConstraint(index);
},
label: removeRuleLabel
});
}
return null;
};
var createConstraints = function createConstraints() {
var _fieldConstraints = fieldConstraints();
return /*#__PURE__*/React.createElement("div", {
className: "p-column-filter-constraints"
}, _fieldConstraints.map(function (fieldConstraint, i) {
var matchModeDropdown = createMatchModeDropdown(fieldConstraint, i);
var menuFilterElement = createMenuFilterElement(fieldConstraint, i);
var removeButton = createRemoveButton(i);
return /*#__PURE__*/React.createElement("div", {
key: i,
className: "p-column-filter-constraint"
}, matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", null, removeButton));
}));
};
var createAddRule = function createAddRule() {
if (isShowAddConstraint()) {
var addRuleLabel = addRuleButtonLabel();
return /*#__PURE__*/React.createElement("div", {
className: "p-column-filter-add-rule"
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
label: addRuleLabel,
icon: "pi pi-plus",
className: "p-column-filter-add-button p-button-text p-button-sm",
onClick: addConstraint
}));
}
return null;
};
var createFilterClearButton = function createFilterClearButton() {
if (getColumnProp('showClearButton')) {
if (!getColumnProp('filterClear')) {
var clearLabel = clearButtonLabel();
return /*#__PURE__*/React.createElement(Button, {
type: "button",
className: "p-button-outlined p-button-sm",
onClick: clearFilter,
label: clearLabel
});
}
return ObjectUtils.getJSXElement(getColumnProp('filterClear'), {
field: field,
filterModel: filterModel,
filterClearCallback: clearFilter
});
}
return null;
};
var createFilterApplyButton = function createFilterApplyButton() {
if (getColumnProp('showApplyButton')) {
if (!getColumnProp('filterApply')) {
var applyLabel = applyButtonLabel();
return /*#__PURE__*/React.createElement(Button, {
type: "button",
className: "p-button-sm",
onClick: applyFilter,
label: applyLabel
});
}
return ObjectUtils.getJSXElement(getColumnProp('filterApply'), {
field: field,
filterModel: filterModel,
filterApplyCallback: applyFilter
});
}
return null;
};
var createButtonBar = function createButtonBar() {
var clearButton = createFilterClearButton();
var applyButton = createFilterApplyButton();
return /*#__PURE__*/React.createElement("div", {
className: "p-column-filter-buttonbar"
}, clearButton, applyButton);
};
var createItems = function createItems() {
var operator = createOperator();
var constraints = createConstraints();
var addRule = createAddRule();
var buttonBar = createButtonBar();
return /*#__PURE__*/React.createElement(React.Fragment, null, operator, constraints, addRule, buttonBar);
};
var createOverlay = function createOverlay() {
var style = getColumnProp('filterMenuStyle');
var className = classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var filterHeader = ObjectUtils.getJSXElement(getColumnProp('filterHeader'), {
field: field,
filterModel: filterModel,
filterApplyCallback: filterApplyCallback
});
var filterFooter = ObjectUtils.getJSXElement(getColumnProp('filterFooter'), {
field: field,
filterModel: filterModel,
filterApplyCallback: filterApplyCallback
});
var items = props.display === 'row' ? createRowItems() : createItems();
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-connected-overlay",
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, /*#__PURE__*/React.createElement("div", {
ref: overlayRef,
style: style,
className: className,
onKeyDown: onContentKeyDown,
onClick: onContentClick,
onMouseDown: onContentMouseDown
}, filterHeader, items, filterFooter)));
};
var className = classNames('p-column-filter p-fluid', {
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
});
var rowFilterElement = createRowFilterElement();
var menuButton = createMenuButton();
var clearButton = createClearButton();
var overlay = createOverlay();
return /*#__PURE__*/React.createElement("div", {
className: className
}, rowFilterElement, menuButton, clearButton, overlay);
});
ColumnFilter.displayName = 'ColumnFilter';
var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.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({
originalEvent: event,
checked: !props.checked
});
}
};
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Space' || event.key === ' ') {
// event.key is for Android support
onClick(event);
event.preventDefault();
}
};
var boxClassName = classNames('p-checkbox-box p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
var iconClassName = classNames('p-checkbox-icon', {
'pi pi-check': props.checked
});
var tabIndex = props.disabled ? null : 0;
return /*#__PURE__*/React.createElement("div", {
className: "p-checkbox p-component",
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: boxClassName,
role: "checkbox",
"aria-checked": props.checked,
tabIndex: tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
})));
});
HeaderCheckbox.displayName = 'HeaderCheckbox';
function ownKeys$i(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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var HeaderCell = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
styleObjectState = _React$useState2[0],
setStyleObjectState = _React$useState2[1];
var elementRef = React.useRef(null);
var prevColumn = usePrevious(props.column);
var isBadgeVisible = function isBadgeVisible() {
return props.multiSortMeta && props.multiSortMeta.length > 1;
};
var isSortableDisabled = function isSortableDisabled() {
return !getColumnProp('sortable') || getColumnProp('sortable') && (props.allSortableDisabled || getColumnProp('sortableDisabled'));
};
var getColumnProp = function getColumnProp() {
return props.column ? typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string' ? ColumnBase.getCProp(props.column, arguments.length <= 0 ? undefined : arguments[0]) : ColumnBase.getCProp((arguments.length <= 0 ? undefined : arguments[0]) || props.column, arguments.length <= 1 ? undefined : arguments[1]) : null;
};
var getStyle = function getStyle() {
var headerStyle = getColumnProp('headerStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, styleObjectState) : Object.assign({}, columnStyle, headerStyle);
};
var getMultiSortMetaIndex = function getMultiSortMetaIndex() {
return props.multiSortMeta.findIndex(function (meta) {
return meta.field === getColumnProp('field') || meta.field === getColumnProp('sortField');
});
};
var getSortMeta = function getSortMeta() {
var sorted = false;
var sortOrder = 0;
var metaIndex = -1;
if (props.sortMode === 'single') {
sorted = props.sortField && (props.sortField === getColumnProp('field') || props.sortField === getColumnProp('sortField'));
sortOrder = sorted ? props.sortOrder : 0;
} else if (props.sortMode === 'multiple') {
metaIndex = getMultiSortMetaIndex();
if (metaIndex > -1) {
sorted = true;
sortOrder = props.multiSortMeta[metaIndex].order;
}
}
return {
sorted: sorted,
sortOrder: sortOrder,
metaIndex: metaIndex
};
};
var getAriaSort = function getAriaSort(_ref) {
var sorted = _ref.sorted,
sortOrder = _ref.sortOrder;
if (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;
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$i({}, styleObjectState);
var align = getColumnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = elementRef.current.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject['right'] = right + 'px';
} else {
var left = 0;
var prev = elementRef.current.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
styleObject['left'] = left + 'px';
}
var filterRow = elementRef.current.parentElement.nextElementSibling;
if (filterRow) {
var index = DomHandler.index(elementRef.current);
filterRow.children[index].style.left = styleObject['left'];
filterRow.children[index].style.right = styleObject['right'];
}
var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
!isSameStyle && setStyleObjectState(styleObject);
}
};
var updateSortableDisabled = function updateSortableDisabled(prevColumn) {
if (getColumnProp(prevColumn, 'sortableDisabled') !== getColumnProp('sortableDisabled') || getColumnProp(prevColumn, 'sortable') !== getColumnProp('sortable')) {
props.onSortableChange();
}
};
var onClick = function onClick(event) {
if (!isSortableDisabled()) {
var targetNode = event.target;
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
DomHandler.clearSelection();
props.onSortChange({
originalEvent: event,
column: props.column,
sortableDisabledFields: props.sortableDisabledFields
});
}
}
};
var onMouseDown = function onMouseDown(event) {
props.onColumnMouseDown({
originalEvent: event,
column: props.column
});
};
var onKeyDown = function onKeyDown(event) {
if (event.key === 'Enter' && event.currentTarget === elementRef.current && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
onClick(event);
event.preventDefault();
}
};
var onDragStart = function onDragStart(event) {
props.onColumnDragStart({
originalEvent: event,
column: props.column
});
};
var onDragOver = function onDragOver(event) {
props.onColumnDragOver({
originalEvent: event,
column: props.column
});
};
var onDragLeave = function onDragLeave(event) {
props.onColumnDragLeave({
originalEvent: event,
column: props.column
});
};
var onDrop = function onDrop(event) {
props.onColumnDrop({
originalEvent: event,
column: props.column
});
};
var onResizerMouseDown = function onResizerMouseDown(event) {
props.onColumnResizeStart({
originalEvent: event,
column: props.column
});
};
var onResizerClick = function onResizerClick(event) {
if (props.onColumnResizerClick) {
props.onColumnResizerClick({
originalEvent: event,
element: event.currentTarget.parentElement,
column: props.column
});
event.preventDefault();
}
};
var onResizerDoubleClick = function onResizerDoubleClick(event) {
if (props.onColumnResizerDoubleClick) {
props.onColumnResizerDoubleClick({
originalEvent: event,
element: event.currentTarget.parentElement,
column: props.column
});
event.preventDefault();
}
};
React.useEffect(function () {
if (getColumnProp('frozen')) {
updateStickyPosition();
}
updateSortableDisabled(prevColumn);
});
var createResizer = function createResizer() {
if (props.resizableColumns && !getColumnProp('frozen')) {
return /*#__PURE__*/React.createElement("span", {
className: "p-column-resizer",
onMouseDown: onResizerMouseDown,
onClick: onResizerClick,
onDoubleClick: onResizerDoubleClick
});
}
return null;
};
var createTitle = function createTitle() {
var title = ObjectUtils.getJSXElement(getColumnProp('header'), {
props: props.tableProps
});
return /*#__PURE__*/React.createElement("span", {
className: "p-column-title"
}, title);
};
var createSortIcon = function createSortIcon(_ref2) {
var sorted = _ref2.sorted,
sortOrder = _ref2.sortOrder;
if (getColumnProp('sortable')) {
var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
var className = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
return /*#__PURE__*/React.createElement("span", {
className: className
});
}
return null;
};
var createBadge = function createBadge(_ref3) {
var metaIndex = _ref3.metaIndex;
if (metaIndex !== -1 && isBadgeVisible()) {
var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
return /*#__PURE__*/React.createElement("span", {
className: "p-sortable-column-badge"
}, value);
}
return null;
};
var createCheckbox = function createCheckbox() {
if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
var allRowsSelected = props.allRowsSelected(props.value);
return /*#__PURE__*/React.createElement(HeaderCheckbox, {
checked: allRowsSelected,
onChange: props.onColumnCheckboxChange,
disabled: props.empty
});
}
return null;
};
var createFilter = function createFilter() {
if (props.filterDisplay === 'menu' && getColumnProp('filter')) {
return /*#__PURE__*/React.createElement(ColumnFilter, {
display: "menu",
column: props.column,
filters: props.filters,
onFilterChange: props.onFilterChange,
onFilterApply: props.onFilterApply,
filtersStore: props.filtersStore
});
}
return null;
};
var createHeader = function createHeader(sortMeta) {
var title = createTitle();
var sortIcon = createSortIcon(sortMeta);
var badge = createBadge(sortMeta);
var checkbox = createCheckbox();
var filter = createFilter();
return /*#__PURE__*/React.createElement("div", {
className: "p-column-header-content"
}, title, sortIcon, badge, checkbox, filter);
};
var createElement = function createElement() {
var _isSortableDisabled = isSortableDisabled();
var sortMeta = getSortMeta();
var style = getStyle();
var align = getColumnProp('alignHeader') || getColumnProp('align');
var frozen = getColumnProp('frozen');
var className = classNames(getColumnProp('headerClassName'), getColumnProp('className'), _defineProperty({
'p-sortable-column': getColumnProp('sortable'),
'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
'p-highlight': sortMeta.sorted,
'p-frozen-column': frozen,
'p-selection-column': getColumnProp('selectionMode'),
'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
}, "p-align-".concat(align), !!align));
var tabIndex = getColumnProp('sortable') && !_isSortableDisabled ? props.tabIndex : null;
var colSpan = getColumnProp('colSpan');
var rowSpan = getColumnProp('rowSpan');
var ariaSort = getAriaSort(sortMeta);
var headerTooltip = getColumnProp('headerTooltip');
var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
var headerTooltipOptions = getColumnProp('headerTooltipOptions');
var resizer = createResizer();
var header = createHeader(sortMeta);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
ref: elementRef,
style: style,
className: className,
tabIndex: tabIndex,
role: "columnheader",
onClick: onClick,
onKeyDown: onKeyDown,
onMouseDown: onMouseDown,
onDragStart: onDragStart,
onDragOver: onDragOver,
onDragLeave: onDragLeave,
onDrop: onDrop,
colSpan: colSpan,
rowSpan: rowSpan,
"aria-sort": ariaSort
}, resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: headerTooltip
}, headerTooltipOptions)));
};
var element = createElement();
return element;
});
HeaderCell.displayName = 'HeaderCell';
function ownKeys$h(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TableHeader = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
sortableDisabledFieldsState = _React$useState2[0],
setSortableDisabledFieldsState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
allSortableDisabledState = _React$useState4[0],
setAllSortableDisabledState = _React$useState4[1];
var isSingleSort = props.sortMode === 'single';
var isMultipleSort = props.sortMode === 'multiple';
var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var isColumnSorted = function isColumnSorted(column) {
return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false;
};
var updateSortableDisabled = function updateSortableDisabled() {
if (isSingleSort || isMultipleSort && props.onSortChange) {
var sortableDisabledFields = [];
var allSortableDisabled = false;
props.columns.forEach(function (column) {
if (getColumnProp(column, 'sortableDisabled')) {
sortableDisabledFields.push(getColumnProp(column, 'sortField') || getColumnProp(column, 'field'));
if (!allSortableDisabled && isColumnSorted(column)) {
allSortableDisabled = true;
}
}
});
setSortableDisabledFieldsState(sortableDisabledFields);
setAllSortableDisabledState(allSortableDisabled);
}
};
var onSortableChange = function onSortableChange() {
updateSortableDisabled();
};
var onCheckboxChange = function onCheckboxChange(e) {
props.onColumnCheckboxChange(e, props.value);
};
useMountEffect(function () {
updateSortableDisabled();
});
var createGroupHeaderCells = function createGroupHeaderCells(row) {
var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
return createHeaderCells(columns);
};
var createHeaderCells = function createHeaderCells(columns) {
return React.Children.map(columns, function (col, i) {
var isVisible = col ? !getColumnProp(col, 'hidden') : true;
var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
return isVisible && /*#__PURE__*/React.createElement(HeaderCell, {
key: key,
value: props.value,
tableProps: props.tableProps,
column: col,
tabIndex: props.tabIndex,
empty: props.empty,
resizableColumns: props.resizableColumns,
groupRowsBy: props.groupRowsBy,
groupRowSortField: props.groupRowSortField,
sortMode: props.sortMode,
sortField: props.sortField,
sortOrder: props.sortOrder,
multiSortMeta: props.multiSortMeta,
allSortableDisabled: isAllSortableDisabled,
onSortableChange: onSortableChange,
sortableDisabledFields: sortableDisabledFieldsState,
filterDisplay: props.filterDisplay,
filters: props.filters,
filtersStore: props.filtersStore,
onFilterChange: props.onFilterChange,
onFilterApply: props.onFilterApply,
onColumnMouseDown: props.onColumnMouseDown,
onColumnDragStart: props.onColumnDragStart,
onColumnDragOver: props.onColumnDragOver,
onColumnDragLeave: props.onColumnDragLeave,
onColumnDrop: props.onColumnDrop,
onColumnResizeStart: props.onColumnResizeStart,
onColumnResizerClick: props.onColumnResizerClick,
onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
showSelectAll: props.showSelectAll,
allRowsSelected: props.allRowsSelected,
onColumnCheckboxChange: onCheckboxChange,
reorderableColumns: props.reorderableColumns,
onSortChange: props.onSortChange
});
});
};
var createCheckbox = function createCheckbox(selectionMode) {
if (props.showSelectAll && selectionMode === 'multiple') {
var allRowsSelected = props.allRowsSelected(props.value);
return /*#__PURE__*/React.createElement(HeaderCheckbox, {
checked: allRowsSelected,
onChange: onCheckboxChange,
disabled: props.empty
});
}
return null;
};
var createFilter = function createFilter(column, filter) {
if (filter) {
return /*#__PURE__*/React.createElement(ColumnFilter, {
display: "row",
column: column,
filters: props.filters,
filtersStore: props.filtersStore,
onFilterChange: props.onFilterChange,
onFilterApply: props.onFilterApply
});
}
return null;
};
var createFilterCells = function createFilterCells() {
return React.Children.map(props.columns, function (col, i) {
var isVisible = !getColumnProp(col, 'hidden');
if (isVisible) {
var _ColumnBase$getCProps = ColumnBase.getCProps(col),
filterHeaderStyle = _ColumnBase$getCProps.filterHeaderStyle,
style = _ColumnBase$getCProps.style,
filterHeaderClassName = _ColumnBase$getCProps.filterHeaderClassName,
className = _ColumnBase$getCProps.className,
frozen = _ColumnBase$getCProps.frozen,
columnKey = _ColumnBase$getCProps.columnKey,
field = _ColumnBase$getCProps.field,
selectionMode = _ColumnBase$getCProps.selectionMode,
filter = _ColumnBase$getCProps.filter;
var colStyle = _objectSpread$h(_objectSpread$h({}, filterHeaderStyle || {}), style || {});
var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
'p-frozen-column': frozen
});
var colKey = columnKey || field || i;
var checkbox = createCheckbox(selectionMode);
var filterRow = createFilter(col, filter);
return /*#__PURE__*/React.createElement("th", {
key: colKey,
style: colStyle,
className: colClassName
}, checkbox, filterRow);
}
return null;
});
};
var createContent = function createContent() {
if (props.headerColumnGroup) {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
return rows.map(function (row, i) {
return /*#__PURE__*/React.createElement("tr", {
key: i,
role: "row"
}, createGroupHeaderCells(row));
});
} else {
var headerRow = /*#__PURE__*/React.createElement("tr", {
role: "row"
}, createHeaderCells(props.columns));
var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", {
role: "row"
}, createFilterCells());
return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
}
};
var content = createContent();
return /*#__PURE__*/React.createElement("thead", {
className: "p-datatable-thead"
}, content);
});
TableHeader.displayName = 'TableHeader';
function ownKeys$g(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DataTableBase.getProps(inProps);
var _React$useState = React.useState(props.first),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(props.rows),
_React$useState4 = _slicedToArray(_React$useState3, 2),
rowsState = _React$useState4[0],
setRowsState = _React$useState4[1];
var _React$useState5 = React.useState(props.sortField),
_React$useState6 = _slicedToArray(_React$useState5, 2),
sortFieldState = _React$useState6[0],
setSortFieldState = _React$useState6[1];
var _React$useState7 = React.useState(props.sortOrder),
_React$useState8 = _slicedToArray(_React$useState7, 2),
sortOrderState = _React$useState8[0],
setSortOrderState = _React$useState8[1];
var _React$useState9 = React.useState(props.multiSortMeta),
_React$useState10 = _slicedToArray(_React$useState9, 2),
multiSortMetaState = _React$useState10[0],
setMultiSortMetaState = _React$useState10[1];
var _React$useState11 = React.useState(props.filters),
_React$useState12 = _slicedToArray(_React$useState11, 2),
filtersState = _React$useState12[0],
setFiltersState = _React$useState12[1];
var _React$useState13 = React.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
columnOrderState = _React$useState14[0],
setColumnOrderState = _React$useState14[1];
var _React$useState15 = React.useState(null),
_React$useState16 = _slicedToArray(_React$useState15, 2),
groupRowsSortMetaState = _React$useState16[0],
setGroupRowsSortMetaState = _React$useState16[1];
var _React$useState17 = React.useState({}),
_React$useState18 = _slicedToArray(_React$useState17, 2),
editingMetaState = _React$useState18[0],
setEditingMetaState = _React$useState18[1];
var _React$useState19 = React.useState(null),
_React$useState20 = _slicedToArray(_React$useState19, 2),
attributeSelectorState = _React$useState20[0],
setAttributeSelectorState = _React$useState20[1];
var _React$useState21 = React.useState(props.rows),
_React$useState22 = _slicedToArray(_React$useState21, 2),
d_rowsState = _React$useState22[0],
setD_rowsState = _React$useState22[1];
var _React$useState23 = React.useState({}),
_React$useState24 = _slicedToArray(_React$useState23, 2),
d_filtersState = _React$useState24[0],
setD_filtersState = _React$useState24[1];
var elementRef = React.useRef(null);
var tableRef = React.useRef(null);
var wrapperRef = React.useRef(null);
var bodyRef = React.useRef(null);
var frozenBodyRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var reorderIndicatorUpRef = React.useRef(null);
var reorderIndicatorDownRef = React.useRef(null);
var colReorderIconWidth = React.useRef(null);
var colReorderIconHeight = React.useRef(null);
var resizeHelperRef = React.useRef(null);
var draggedColumnElement = React.useRef(null);
var draggedColumn = React.useRef(null);
var dropPosition = React.useRef(null);
var styleElement = React.useRef(null);
var responsiveStyleElement = React.useRef(null);
var columnWidthsState = React.useRef(null);
var tableWidthState = React.useRef(null);
var resizeColumn = React.useRef(null);
var resizeColumnElement = React.useRef(null);
var columnResizing = React.useRef(false);
var lastResizeHelperX = React.useRef(null);
var columnSortable = React.useRef(false);
var columnSortFunction = React.useRef(null);
var columnField = React.useRef(null);
var filterTimeout = React.useRef(null);
if (props.rows !== d_rowsState && !props.onPage) {
setRowsState(props.rows);
setD_rowsState(props.rows);
}
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
if (columnResizing.current) {
onColumnResize(event);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener() {
if (columnResizing.current) {
columnResizing.current = false;
onColumnResizeEnd();
}
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var isCustomStateStorage = function isCustomStateStorage() {
return props.stateStorage === 'custom';
};
var isStateful = function isStateful() {
return props.stateKey != null || isCustomStateStorage();
};
var isVirtualScrollerDisabled = function isVirtualScrollerDisabled() {
return ObjectUtils.isEmpty(props.virtualScrollerOptions) || !props.scrollable;
};
var isEquals = function isEquals(data1, data2) {
return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
};
var hasFilter = function hasFilter() {
return ObjectUtils.isNotEmpty(getFilters()) || props.globalFilter;
};
var getFirst = function getFirst() {
return props.onPage ? props.first : firstState;
};
var getRows = function getRows() {
return props.onPage ? props.rows : rowsState;
};
var getSortField = function getSortField() {
return props.onSort ? props.sortField : sortFieldState;
};
var getSortOrder = function getSortOrder() {
return props.onSort ? props.sortOrder : sortOrderState;
};
var getMultiSortMeta = function getMultiSortMeta() {
return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
};
var getFilters = function getFilters() {
return props.onFilter ? props.filters : filtersState;
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getColumns = function getColumns(ignoreReorderable) {
var columns = React.Children.toArray(props.children);
if (!columns) {
return null;
}
if (!ignoreReorderable && props.reorderableColumns && columnOrderState) {
var orderedColumns = columnOrderState.reduce(function (arr, columnKey) {
var column = 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;
};
var getStorage = function getStorage() {
switch (props.stateStorage) {
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
case 'custom':
return null;
default:
throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
}
};
var saveState = function saveState() {
var state = {};
if (props.paginator) {
state.first = getFirst();
state.rows = getRows();
}
var sortField = getSortField();
if (sortField) {
state.sortField = sortField;
state.sortOrder = getSortOrder();
}
var multiSortMeta = getMultiSortMeta();
if (multiSortMeta) {
state.multiSortMeta = multiSortMeta;
}
if (hasFilter()) {
state.filters = getFilters();
}
if (props.resizableColumns) {
saveColumnWidths(state);
}
if (props.reorderableColumns) {
state.columnOrder = columnOrderState;
}
if (props.expandedRows) {
state.expandedRows = props.expandedRows;
}
if (props.selection && props.onSelectionChange) {
state.selection = props.selection;
}
if (isCustomStateStorage()) {
if (props.customSaveState) {
props.customSaveState(state);
}
} else {
var storage = getStorage();
if (ObjectUtils.isNotEmpty(state)) {
storage.setItem(props.stateKey, JSON.stringify(state));
}
}
if (props.onStateSave) {
props.onStateSave(state);
}
};
var clearState = function clearState() {
var storage = getStorage();
if (storage && props.stateKey) {
storage.removeItem(props.stateKey);
}
};
var restoreState = function restoreState() {
var restoredState = {};
if (isCustomStateStorage()) {
if (props.customRestoreState) {
restoredState = props.customRestoreState();
}
} else {
var storage = getStorage();
var stateString = storage.getItem(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);
}
}
_restoreState(restoredState);
};
var restoreTableState = function restoreTableState(restoredState) {
_restoreState(restoredState);
};
var _restoreState = function _restoreState() {
var restoredState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (ObjectUtils.isNotEmpty(restoredState)) {
if (props.paginator) {
if (props.onPage) {
var getOnPageParams = function getOnPageParams(first, rows) {
var totalRecords = getTotalRecords(processedData());
var pageCount = Math.ceil(totalRecords / rows) || 1;
var page = Math.floor(first / rows);
return {
first: first,
rows: rows,
page: page,
pageCount: pageCount
};
};
props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
} else {
setFirstState(restoredState.first);
setRowsState(restoredState.rows);
}
}
if (restoredState.sortField) {
if (props.onSort) {
props.onSort(createEvent({
sortField: restoredState.sortField,
sortOrder: restoredState.sortOrder
}));
} else {
setSortFieldState(restoredState.sortField);
setSortOrderState(restoredState.sortOrder);
}
}
if (restoredState.multiSortMeta) {
if (props.onSort) {
props.onSort(createEvent({
multiSortMeta: restoredState.multiSortMeta
}));
} else {
setMultiSortMetaState(restoredState.multiSortMeta);
}
}
if (restoredState.filters) {
setD_filtersState(cloneFilters(restoredState.filters));
if (props.onFilter) {
props.onFilter(createEvent({
filters: restoredState.filters
}));
} else {
setFiltersState(cloneFilters(restoredState.filters));
}
}
if (props.resizableColumns) {
columnWidthsState.current = restoredState.columnWidths;
tableWidthState.current = restoredState.tableWidth;
restoreColumnWidths();
}
if (props.reorderableColumns) {
setColumnOrderState(restoredState.columnOrder);
}
if (restoredState.expandedRows && props.onRowToggle) {
props.onRowToggle({
data: restoredState.expandedRows
});
}
if (restoredState.selection && props.onSelectionChange) {
props.onSelectionChange({
value: restoredState.selection
});
}
if (props.onStateRestore) {
props.onStateRestore(restoredState);
}
}
};
var saveColumnWidths = function saveColumnWidths(state) {
var widths = [];
var headers = DomHandler.find(elementRef.current, '.p-datatable-thead > tr > th');
headers.forEach(function (header) {
return widths.push(DomHandler.getOuterWidth(header));
});
state.columnWidths = widths.join(',');
if (props.columnResizeMode === 'expand') {
state.tableWidth = DomHandler.getOuterWidth(tableRef.current) + 'px';
}
};
var restoreColumnWidths = function restoreColumnWidths() {
if (columnWidthsState.current) {
var widths = columnWidthsState.current.split(',');
if (props.columnResizeMode === 'expand' && tableWidthState.current) {
tableRef.current.style.width = tableWidthState.current;
tableRef.current.style.minWidth = tableWidthState.current;
elementRef.current.style.width = tableWidthState.current;
}
if (ObjectUtils.isNotEmpty(widths)) {
createStyleElement();
var innerHTML = '';
var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
widths.forEach(function (width, index) {
var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
innerHTML += "\n ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
});
styleElement.current.innerHTML = innerHTML;
}
}
};
var findParentHeader = 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;
}
};
var getGroupRowSortField = function getGroupRowSortField() {
return props.sortMode === 'single' ? props.sortField : groupRowsSortMetaState ? groupRowsSortMetaState.field : null;
};
var getSelectableData = function getSelectableData(val) {
if (props.showSelectionElement || props.isDataSelectable) {
return val.filter(function (data, index) {
var isSelectable = true;
if (props.showSelectionElement) isSelectable = props.showSelectionElement({
rowIndex: index,
props: props
});
if (props.isDataSelectable && isSelectable) isSelectable = props.isDataSelectable({
data: data,
index: index
});
return isSelectable;
});
}
return val;
};
var allRowsSelected = function allRowsSelected(processedData) {
if (props.onSelectAllChange) {
return props.selectAll;
} else {
var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
var selectableVal = getSelectableData(val);
return selectableVal && props.selection && selectableVal.every(function (sv) {
return props.selection.some(function (s) {
return isEquals(s, sv);
});
});
}
};
var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
if (columns) {
var col = columns.find(function (c) {
return !!getColumnProp(c, 'selectionMode');
});
return col ? getColumnProp(col, 'selectionMode') : null;
}
return null;
};
var findColumnByKey = function findColumnByKey(columns, key) {
return ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
return getColumnProp(col, 'columnKey') === key || getColumnProp(col, 'field') === key;
}) : null;
};
var getTotalRecords = function getTotalRecords(data) {
return props.lazy ? props.totalRecords : data ? data.length : 0;
};
var onEditingMetaChange = function onEditingMetaChange(e) {
var rowData = e.rowData,
field = e.field,
editingKey = e.editingKey;
e.rowIndex;
var editing = e.editing;
var editingMeta = _objectSpread$g({}, editingMetaState);
var meta = editingMeta[editingKey];
if (editing) {
!meta && (meta = editingMeta[editingKey] = {
data: _objectSpread$g({}, rowData),
fields: []
});
meta['fields'].push(field);
} else if (meta) {
var fields = meta['fields'].filter(function (f) {
return f !== field;
});
!fields.length ? delete editingMeta[editingKey] : meta['fields'] = fields;
}
setEditingMetaState(editingMeta);
};
var clearEditingMetaData = function clearEditingMetaData() {
if (props.editMode && ObjectUtils.isNotEmpty(editingMetaState)) {
setEditingMetaState({});
}
};
var onColumnResizeStart = function onColumnResizeStart(e) {
var event = e.originalEvent,
column = e.column;
var containerLeft = DomHandler.getOffset(elementRef.current).left;
resizeColumn.current = column;
resizeColumnElement.current = event.currentTarget.parentElement;
columnResizing.current = true;
lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft;
bindColumnResizeEvents();
};
var onColumnResize = function onColumnResize(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
DomHandler.addClass(elementRef.current, 'p-unselectable-text');
resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
resizeHelperRef.current.style.top = 0 + 'px';
resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
resizeHelperRef.current.style.display = 'block';
};
var onColumnResizeEnd = function onColumnResizeEnd() {
var delta = resizeHelperRef.current.offsetLeft - lastResizeHelperX.current;
var columnWidth = resizeColumnElement.current.offsetWidth;
var newColumnWidth = columnWidth + delta;
var minWidth = resizeColumnElement.current.style.minWidth || 15;
if (columnWidth + delta > parseInt(minWidth, 10)) {
if (props.columnResizeMode === 'fit') {
var nextColumn = resizeColumnElement.current.nextElementSibling;
var nextColumnWidth = nextColumn.offsetWidth - delta;
if (newColumnWidth > 15 && nextColumnWidth > 15) {
resizeTableCells(newColumnWidth, nextColumnWidth);
}
} else if (props.columnResizeMode === 'expand') {
var tableWidth = tableRef.current.offsetWidth + delta + 'px';
var updateTableWidth = function updateTableWidth(el) {
!!el && (el.style.width = el.style.minWidth = tableWidth);
};
updateTableWidth(tableRef.current);
if (!isVirtualScrollerDisabled()) {
updateTableWidth(bodyRef.current);
updateTableWidth(frozenBodyRef.current);
if (wrapperRef.current) {
updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
}
}
resizeTableCells(newColumnWidth);
}
if (props.onColumnResizeEnd) {
props.onColumnResizeEnd({
element: resizeColumnElement.current,
column: resizeColumn.current,
delta: delta
});
}
if (isStateful()) {
saveState();
}
}
resizeHelperRef.current.style.display = 'none';
resizeColumn.current = null;
resizeColumnElement.current = null;
DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
unbindColumnResizeEvents();
};
var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
var widths = [];
var colIndex = DomHandler.index(resizeColumnElement.current);
var headers = DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
headers.forEach(function (header) {
return widths.push(DomHandler.getOuterWidth(header));
});
destroyStyleElement();
createStyleElement();
var innerHTML = '';
var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
widths.forEach(function (width, index) {
var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
innerHTML += "\n ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
});
styleElement.current.innerHTML = innerHTML;
};
var bindColumnResizeEvents = function bindColumnResizeEvents() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
DomHandler.clearSelection();
var event = e.originalEvent,
column = e.column;
if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
}
};
var onColumnHeaderCheckboxChange = function onColumnHeaderCheckboxChange(e, processedData) {
if (props.onSelectAllChange) {
props.onSelectAllChange(e);
} else {
var originalEvent = e.originalEvent,
checked = e.checked;
var _data2 = props.selectionPageOnly ? dataToRender(processedData) : processedData;
var selection = props.selectionPageOnly && props.selection ? props.selection.filter(function (s) {
return !_data2.some(function (d) {
return isEquals(s, d);
});
}) : [];
if (checked) {
selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
selection = getSelectableData(selection);
props.onAllRowsSelect && props.onAllRowsSelect({
originalEvent: originalEvent,
data: selection,
type: 'all'
});
} else {
props.onAllRowsUnselect && props.onAllRowsUnselect({
originalEvent: originalEvent,
data: selection,
type: 'all'
});
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: originalEvent,
value: selection,
type: 'all'
});
}
}
};
var onColumnHeaderDragStart = function onColumnHeaderDragStart(e) {
var event = e.originalEvent,
column = e.column;
if (columnResizing.current) {
event.preventDefault();
return;
}
if (!props.reorderableColumns) return;
colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
draggedColumn.current = column;
draggedColumnElement.current = findParentHeader(event.currentTarget);
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
};
var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
var event = e.originalEvent,
column = e.column;
var dropHeader = findParentHeader(event.currentTarget);
if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
event.preventDefault();
if (draggedColumnElement.current !== dropHeader) {
var containerOffset = DomHandler.getOffset(elementRef.current);
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
var targetLeft = dropHeaderOffset.left - containerOffset.left;
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
if (event.pageX > columnCenter) {
reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = 1;
} else {
reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
dropPosition.current = -1;
}
reorderIndicatorUpRef.current.style.display = 'block';
reorderIndicatorDownRef.current.style.display = 'block';
}
}
};
var onColumnHeaderDragLeave = function onColumnHeaderDragLeave(e) {
var event = e.originalEvent;
if (props.reorderableColumns && draggedColumnElement.current) {
event.preventDefault();
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
}
};
var onColumnHeaderDrop = function onColumnHeaderDrop(e) {
var event = e.originalEvent,
column = e.column;
event.preventDefault();
if (draggedColumnElement.current) {
var dragIndex = DomHandler.index(draggedColumnElement.current);
var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
var allowDrop = dragIndex !== dropIndex;
if (allowDrop && (dropIndex - dragIndex === 1 && dropPosition.current === -1 || dragIndex - dropIndex === 1 && dropPosition.current === 1)) {
allowDrop = false;
}
if (allowDrop) {
var _columns = getColumns();
var isSameColumn = function isSameColumn(col1, col2) {
return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
};
var dragColIndex = _columns.findIndex(function (child) {
return isSameColumn(child, draggedColumn.current);
});
var dropColIndex = _columns.findIndex(function (child) {
return isSameColumn(child, column);
});
if (dropColIndex < dragColIndex && dropPosition.current === 1) {
dropColIndex++;
}
if (dropColIndex > dragColIndex && dropPosition.current === -1) {
dropColIndex--;
}
ObjectUtils.reorderArray(_columns, dragColIndex, dropColIndex);
var columnOrder = _columns.reduce(function (orders, col) {
orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
return orders;
}, []);
setColumnOrderState(columnOrder);
if (props.onColReorder) {
props.onColReorder({
originalEvent: event,
dragIndex: dragColIndex,
dropIndex: dropColIndex,
columns: _columns
});
}
}
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
draggedColumnElement.current.draggable = false;
draggedColumnElement.current = null;
draggedColumn.current = null;
dropPosition.current = null;
}
};
var createStyleElement = function createStyleElement() {
styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
};
var createResponsiveStyle = function createResponsiveStyle() {
if (!responsiveStyleElement.current) {
responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
var selector = ".p-datatable[".concat(attributeSelectorState, "] > ").concat(tableSelector);
var gridLinesSelector = ".p-datatable[".concat(attributeSelectorState, "].p-datatable-gridlines > ").concat(tableSelector);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n ").concat(selector, " > .p-datatable-thead > tr > th,\n ").concat(selector, " > .p-datatable-tfoot > tr > td {\n display: none !important;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td {\n display: flex;\n width: 100% !important;\n align-items: center;\n justify-content: space-between;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n border: 0 none;\n }\n\n ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n border-top: 0;\n border-right: 0;\n border-left: 0;\n }\n\n ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n display: block;\n }\n}\n");
responsiveStyleElement.current.innerHTML = innerHTML;
}
};
var destroyResponsiveStyle = function destroyResponsiveStyle() {
responsiveStyleElement.current = DomHandler.removeInlineStyle(responsiveStyleElement.current);
};
var destroyStyleElement = function destroyStyleElement() {
styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
};
var onPageChange = function onPageChange(e) {
clearEditingMetaData();
if (props.onPage) {
props.onPage(createEvent(e));
} else {
setFirstState(e.first);
setRowsState(e.rows);
}
if (props.onValueChange) {
props.onValueChange(processedData());
}
};
var onSortChange = function onSortChange(e) {
clearEditingMetaData();
var event = e.originalEvent,
column = e.column,
sortableDisabledFields = e.sortableDisabledFields;
var sortField = getColumnProp(column, 'sortField') || getColumnProp(column, 'field');
var sortOrder = props.defaultSortOrder;
var multiSortMeta;
var eventMeta;
columnSortable.current = getColumnProp(column, 'sortable');
columnSortFunction.current = getColumnProp(column, 'sortFunction');
columnField.current = sortField;
if (props.sortMode === 'multiple') {
var metaKey = event.metaKey || event.ctrlKey;
multiSortMeta = _toConsumableArray(getMultiSortMeta());
var sortMeta = multiSortMeta.find(function (sortMeta) {
return sortMeta.field === sortField;
});
sortOrder = sortMeta ? 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;
});
});
addSortMeta(newMetaData, multiSortMeta);
} else if (props.removableSort) {
removeSortMeta(newMetaData, multiSortMeta);
}
eventMeta = {
multiSortMeta: multiSortMeta
};
} else {
sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
if (props.removableSort) {
sortField = sortOrder ? sortField : null;
}
eventMeta = {
sortField: sortField,
sortOrder: sortOrder
};
}
if (props.onSort) {
props.onSort(createEvent(eventMeta));
} else {
setFirstState(0);
setSortFieldState(eventMeta.sortField);
setSortOrderState(eventMeta.sortOrder);
setMultiSortMetaState(eventMeta.multiSortMeta);
}
if (props.onValueChange) {
props.onValueChange(processedData({
sortField: sortField,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta
}));
}
};
var getCalculatedSortOrder = function getCalculatedSortOrder(currentOrder) {
return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
};
var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
};
var addSortMeta = 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);
};
var removeSortMeta = 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;
};
var sortSingle = function sortSingle(data, field, order) {
if (props.groupRowsBy && props.groupRowsBy === props.sortField) {
var multiSortMeta = [{
field: props.sortField,
order: props.sortOrder || props.defaultSortOrder
}];
props.sortField !== field && multiSortMeta.push({
field: field,
order: order
});
return sortMultiple(data, multiSortMeta);
}
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortFunction.current) {
value = columnSortFunction.current({
data: data,
field: field,
order: order
});
} else {
value.sort(function (data1, data2) {
var value1 = ObjectUtils.resolveFieldData(data1, field);
var value2 = ObjectUtils.resolveFieldData(data2, field);
return compareValuesOnSort(value1, value2, order);
});
}
return value;
};
var sortMultiple = function sortMultiple(data) {
var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
if (props.groupRowsBy && (groupRowsSortMetaState || multiSortMeta.length && props.groupRowsBy === multiSortMeta[0].field)) {
var groupRowsSortMeta = groupRowsSortMetaState;
var firstSortMeta = multiSortMeta[0];
if (!groupRowsSortMeta) {
groupRowsSortMeta = firstSortMeta;
setGroupRowsSortMetaState(groupRowsSortMeta);
}
if (firstSortMeta.field !== groupRowsSortMeta.field) {
multiSortMeta = [groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta));
}
}
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortFunction.current) {
var meta = multiSortMeta.find(function (meta) {
return meta.field === columnField.current;
});
var field = columnField.current;
var order = meta ? meta.order : props.defaultSortOrder;
value = columnSortFunction.current({
data: data,
field: field,
order: order,
multiSortMeta: multiSortMeta
});
} else {
value.sort(function (data1, data2) {
return multisortField(data1, data2, multiSortMeta, 0);
});
}
return value;
};
var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
// check if they are equal handling dates and locales
if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
}
return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
};
var onFilterChange = function onFilterChange(filters) {
clearEditingMetaData();
setD_filtersState(filters);
};
var onFilterApply = function onFilterApply(filtersToApply) {
clearTimeout(filterTimeout.current);
filterTimeout.current = setTimeout(function () {
var filters = cloneFilters(filtersToApply || d_filtersState);
if (props.onFilter) {
props.onFilter(createEvent({
filters: filters
}));
} else {
setFirstState(0);
setFiltersState(filters);
}
if (props.onValueChange) {
props.onValueChange(processedData({
filters: filters
}));
}
}, props.filterDelay);
};
var filterLocal = function filterLocal(data, filters) {
if (!data) return;
filters = filters || {};
var columns = getColumns();
var filteredValue = [];
var isGlobalFilter = filters['global'] || props.globalFilter;
var globalFilterFieldsArray;
if (isGlobalFilter) {
globalFilterFieldsArray = props.globalFilterFields || columns.filter(function (col) {
return !getColumnProp(col, 'excludeGlobalFilter');
}).map(function (col) {
return getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
});
}
for (var i = 0; i < data.length; i++) {
var localMatch = true;
var globalMatch = false;
var localFiltered = false;
for (var prop in filters) {
if (prop === 'null') {
continue;
}
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 = executeLocalFilter(filterField, data[i], filterConstraint, j);
if (filterMeta.operator === FilterOperator.OR && localMatch || filterMeta.operator === FilterOperator.AND && !localMatch) {
break;
}
}
} else {
localMatch = 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 : props.globalFilterMatchMode;
var value = filters['global'] ? filters['global'].value : props.globalFilter;
globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, 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 === props.value.length) {
filteredValue = data;
}
return filteredValue;
};
var executeLocalFilter = function executeLocalFilter(field, rowData, filterMeta, index) {
var filterValue = filterMeta.value;
var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
var dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
var filterConstraint = FilterService.filters[filterMatchMode];
return ObjectUtils.isFunction(filterConstraint) && filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
};
var cloneFilters = function cloneFilters(filters) {
filters = filters || 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$g({}, constraint);
})
} : _objectSpread$g({}, value);
});
} else {
var _columns2 = getColumns();
cloned = _columns2.reduce(function (filters, col) {
var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
var filterFunction = getColumnProp(col, 'filterFunction');
var dataType = getColumnProp(col, 'dataType');
var matchMode = getColumnProp(col, 'filterMatchMode') || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
var constraint = {
value: null,
matchMode: matchMode
};
if (filterFunction) {
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] = props.filterDisplay === 'menu' ? {
operator: FilterOperator.AND,
constraints: [constraint]
} : constraint;
return filters;
}, {});
}
return cloned;
};
var filter = function filter(value, field, matchMode) {
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var filters = _objectSpread$g({}, d_filtersState);
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
};
props.filterDisplay === 'menu' && meta && meta.operator ? filters[field].constraints[index] = constraint : filters[field] = constraint;
setD_filtersState(filters);
onFilterApply(filters);
};
var reset = function reset() {
setD_rowsState(props.rows);
setD_filtersState(cloneFilters(props.filters));
setGroupRowsSortMetaState(null);
setEditingMetaState({});
if (!props.onPage) {
setFirstState(props.first);
setRowsState(props.rows);
}
if (!props.onSort) {
setSortFieldState(props.sortField);
setSortOrderState(props.sortOrder);
setMultiSortMetaState(props.multiSortMeta);
}
if (!props.onFilter) {
setFiltersState(props.filters);
}
resetColumnOrder();
};
var resetScroll = function resetScroll() {
if (wrapperRef.current) {
var scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller') : wrapperRef.current;
scrollableContainer.scrollTo(0, 0);
}
};
var resetColumnOrder = function resetColumnOrder() {
var columns = getColumns(true);
var columnOrder = [];
if (columns) {
columnOrder = columns.reduce(function (orders, col) {
orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
return orders;
}, []);
}
setColumnOrderState(columnOrder);
};
var exportCSV = function exportCSV(options) {
var data;
var csv = "\uFEFF";
var columns = getColumns();
if (options && options.selectionOnly) {
data = props.selection || [];
} else {
data = [].concat(_toConsumableArray(props.frozenValue || []), _toConsumableArray(processedData() || []));
}
//headers
columns.forEach(function (column, i) {
var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportable')],
field = _ref3[0],
header = _ref3[1],
exportable = _ref3[2];
if (exportable && field) {
var columnHeader = String(header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
csv += '"' + columnHeader + '"';
if (i < columns.length - 1) {
csv += props.csvSeparator;
}
}
});
//body
data.forEach(function (record) {
csv += '\n';
columns.forEach(function (column, i) {
var _ref4 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
colField = _ref4[0],
exportField = _ref4[1],
exportable = _ref4[2];
var field = exportField || colField;
if (exportable && field) {
var cellData = ObjectUtils.resolveFieldData(record, field);
if (cellData != null) {
if (props.exportFunction) {
cellData = props.exportFunction({
data: cellData,
field: field,
rowData: record,
column: column
});
} else {
cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
}
} else cellData = '';
csv += '"' + cellData + '"';
if (i < columns.length - 1) {
csv += props.csvSeparator;
}
}
});
});
DomHandler.exportCSV(csv, props.exportFilename);
};
var closeEditingCell = function closeEditingCell() {
if (props.editMode !== 'row') {
document.body.click();
}
};
var createEvent = function createEvent(event) {
return _objectSpread$g({
first: getFirst(),
rows: getRows(),
sortField: getSortField(),
sortOrder: getSortOrder(),
multiSortMeta: getMultiSortMeta(),
filters: getFilters()
}, event);
};
var processedData = function processedData(localState) {
var data = props.value || [];
if (!props.lazy) {
if (data && data.length) {
var filters = localState && localState.filters || getFilters();
var sortField = localState && localState.sortField || getSortField();
var sortOrder = localState && localState.sortOrder || getSortOrder();
var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
var _columns3 = getColumns();
var sortColumn = _columns3.find(function (col) {
return getColumnProp(col, 'field') === sortField;
});
if (sortColumn) {
columnSortable.current = getColumnProp(sortColumn, 'sortable');
columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
}
if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
data = filterLocal(data, filters);
}
if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
if (props.sortMode === 'single') data = sortSingle(data, sortField, sortOrder);else if (props.sortMode === 'multiple') data = sortMultiple(data, multiSortMeta);
}
}
}
return data;
};
var dataToRender = function dataToRender(data) {
if (data && props.paginator) {
var first = props.lazy ? 0 : getFirst();
return data.slice(first, first + getRows());
}
return data;
};
useMountEffect(function () {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
setFiltersState(cloneFilters(props.filters));
setD_filtersState(cloneFilters(props.filters));
if (isStateful()) {
restoreState();
if (props.resizableColumns) {
restoreColumnWidths();
}
}
});
useUpdateEffect(function () {
if (attributeSelectorState) {
elementRef.current.setAttribute(attributeSelectorState, '');
if (props.responsiveLayout === 'stack' && !props.scrollable) {
createResponsiveStyle();
}
}
return function () {
destroyResponsiveStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
var filters = cloneFilters(props.filters);
setFiltersState(filters);
setD_filtersState(cloneFilters(props.filters));
if (props.onValueChange) {
props.onValueChange(processedData({
filters: filters
}));
}
}, [props.filters]);
useUpdateEffect(function () {
if (isStateful()) {
saveState();
}
});
useUpdateEffect(function () {
destroyResponsiveStyle();
if (props.responsiveLayout === 'stack' && !props.scrollable) {
createResponsiveStyle();
}
}, [props.responsiveLayout, props.scrollable]);
useUpdateEffect(function () {
if (props.globalFilter) {
filter(props.globalFilter, 'global', props.globalFilterMatchMode);
} else {
// #3819 was filtering but now reset filter state
setFiltersState(props.filters);
}
}, [props.globalFilter, props.globalFilterMatchMode]);
useUnmountEffect(function () {
unbindColumnResizeEvents();
destroyStyleElement();
destroyResponsiveStyle();
});
React.useImperativeHandle(ref, function () {
return {
props: props,
clearState: clearState,
closeEditingCell: closeEditingCell,
exportCSV: exportCSV,
filter: filter,
reset: reset,
resetColumnOrder: resetColumnOrder,
resetScroll: resetScroll,
restoreColumnWidths: restoreColumnWidths,
restoreState: restoreState,
restoreTableState: restoreTableState,
saveState: saveState,
getElement: function getElement() {
return elementRef.current;
},
getTable: function getTable() {
return tableRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
var createLoader = function createLoader() {
if (props.loading) {
var iconClassName = classNames('p-datatable-loading-icon pi-spin', props.loadingIcon);
return /*#__PURE__*/React.createElement("div", {
className: "p-datatable-loading-overlay p-component-overlay"
}, /*#__PURE__*/React.createElement("i", {
className: iconClassName
}));
}
return null;
};
var createHeader = function createHeader() {
if (props.header) {
var _content = ObjectUtils.getJSXElement(props.header, {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-datatable-header"
}, _content);
}
return null;
};
var createTableHeader = function createTableHeader(options, empty, _isVirtualScrollerDisabled) {
var sortField = getSortField();
var sortOrder = getSortOrder();
var multiSortMeta = _toConsumableArray(getMultiSortMeta());
var groupRowSortField = getGroupRowSortField();
var filters = d_filtersState;
var filtersStore = !props.onFilter && props.filters || getFilters();
var processedData = options.items,
virtualScrollerProps = options.props,
columns = options.columns;
var data = _isVirtualScrollerDisabled || virtualScrollerProps.lazy ? processedData : virtualScrollerProps.items;
return /*#__PURE__*/React.createElement(TableHeader, {
value: data,
tableProps: props,
columns: columns,
tabIndex: props.tabIndex,
empty: empty,
headerColumnGroup: props.headerColumnGroup,
resizableColumns: props.resizableColumns,
onColumnResizeStart: onColumnResizeStart,
onColumnResizerClick: props.onColumnResizerClick,
onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
sortMode: props.sortMode,
sortField: sortField,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta,
groupRowsBy: props.groupRowsBy,
groupRowSortField: groupRowSortField,
onSortChange: onSortChange,
filterDisplay: props.filterDisplay,
filters: filters,
filtersStore: filtersStore,
onFilterChange: onFilterChange,
onFilterApply: onFilterApply,
showSelectAll: props.showSelectAll,
allRowsSelected: allRowsSelected,
onColumnCheckboxChange: onColumnHeaderCheckboxChange,
onColumnMouseDown: onColumnHeaderMouseDown,
onColumnDragStart: onColumnHeaderDragStart,
onColumnDragOver: onColumnHeaderDragOver,
onColumnDragLeave: onColumnHeaderDragLeave,
onColumnDrop: onColumnHeaderDrop,
rowGroupMode: props.rowGroupMode,
reorderableColumns: props.reorderableColumns
});
};
var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
var first = getFirst();
var rows = options.rows,
columns = options.columns,
contentRef = options.contentRef,
style = options.style,
className = options.className,
spacerStyle = options.spacerStyle,
itemSize = options.itemSize;
var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.createElement(TableBody, {
ref: frozenBodyRef,
value: props.frozenValue,
className: "p-datatable-tbody p-datatable-frozen-tbody",
frozenRow: true,
tableProps: props,
tableSelector: attributeSelectorState,
columns: columns,
selectionModeInColumn: selectionModeInColumn,
first: first,
editingMeta: editingMetaState,
onEditingMetaChange: onEditingMetaChange,
tabIndex: props.tabIndex,
onRowClick: props.onRowClick,
onRowDoubleClick: props.onRowDoubleClick,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onCellClick: props.onCellClick,
selection: props.selection,
onSelectionChange: props.onSelectionChange,
lazy: props.lazy,
paginator: props.paginator,
onCellSelect: props.onCellSelect,
onCellUnselect: props.onCellUnselect,
onRowSelect: props.onRowSelect,
onRowUnselect: props.onRowUnselect,
dragSelection: props.dragSelection,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
metaKeySelection: props.metaKeySelection,
selectionMode: props.selectionMode,
cellSelection: props.cellSelection,
contextMenuSelection: props.contextMenuSelection,
dataKey: props.dataKey,
expandedRows: props.expandedRows,
onRowCollapse: props.onRowCollapse,
onRowExpand: props.onRowExpand,
onRowToggle: props.onRowToggle,
editMode: props.editMode,
editingRows: props.editingRows,
onRowReorder: props.onRowReorder,
reorderableRows: props.reorderableRows,
scrollable: props.scrollable,
rowGroupMode: props.rowGroupMode,
groupRowsBy: props.groupRowsBy,
expandableRowGroups: props.expandableRowGroups,
loading: props.loading,
emptyMessage: props.emptyMessage,
rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
rowExpansionTemplate: props.rowExpansionTemplate,
rowGroupFooterTemplate: props.rowGroupFooterTemplate,
onRowEditChange: props.onRowEditChange,
compareSelectionBy: props.compareSelectionBy,
selectOnEdit: props.selectOnEdit,
onRowEditInit: props.onRowEditInit,
rowEditValidator: props.rowEditValidator,
onRowEditSave: props.onRowEditSave,
onRowEditComplete: props.onRowEditComplete,
onRowEditCancel: props.onRowEditCancel,
cellClassName: props.cellClassName,
responsiveLayout: props.responsiveLayout,
selectionAutoFocus: props.selectionAutoFocus,
isDataSelectable: props.isDataSelectable,
showSelectionElement: props.showSelectionElement,
showRowReorderElement: props.showRowReorderElement,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon,
rowClassName: props.rowClassName,
virtualScrollerOptions: options,
isVirtualScrollerDisabled: true
});
var body = /*#__PURE__*/React.createElement(TableBody, {
ref: bodyRef,
value: dataToRender(rows),
style: style,
className: classNames('p-datatable-tbody', className),
empty: empty,
frozenRow: false,
tableProps: props,
tableSelector: attributeSelectorState,
columns: columns,
selectionModeInColumn: selectionModeInColumn,
first: first,
editingMeta: editingMetaState,
onEditingMetaChange: onEditingMetaChange,
tabIndex: props.tabIndex,
onRowClick: props.onRowClick,
onRowDoubleClick: props.onRowDoubleClick,
onRowMouseEnter: props.onRowMouseEnter,
onRowMouseLeave: props.onRowMouseLeave,
onCellClick: props.onCellClick,
selection: props.selection,
onSelectionChange: props.onSelectionChange,
lazy: props.lazy,
paginator: props.paginator,
onCellSelect: props.onCellSelect,
onCellUnselect: props.onCellUnselect,
onRowSelect: props.onRowSelect,
onRowUnselect: props.onRowUnselect,
dragSelection: props.dragSelection,
onContextMenu: props.onContextMenu,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
metaKeySelection: props.metaKeySelection,
selectionMode: props.selectionMode,
cellSelection: props.cellSelection,
contextMenuSelection: props.contextMenuSelection,
dataKey: props.dataKey,
expandedRows: props.expandedRows,
onRowCollapse: props.onRowCollapse,
onRowExpand: props.onRowExpand,
onRowToggle: props.onRowToggle,
editMode: props.editMode,
editingRows: props.editingRows,
onRowReorder: props.onRowReorder,
reorderableRows: props.reorderableRows,
scrollable: props.scrollable,
rowGroupMode: props.rowGroupMode,
groupRowsBy: props.groupRowsBy,
expandableRowGroups: props.expandableRowGroups,
loading: props.loading,
emptyMessage: props.emptyMessage,
rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
rowExpansionTemplate: props.rowExpansionTemplate,
rowGroupFooterTemplate: props.rowGroupFooterTemplate,
onRowEditChange: props.onRowEditChange,
compareSelectionBy: props.compareSelectionBy,
selectOnEdit: props.selectOnEdit,
onRowEditInit: props.onRowEditInit,
rowEditValidator: props.rowEditValidator,
onRowEditSave: props.onRowEditSave,
onRowEditComplete: props.onRowEditComplete,
onRowEditCancel: props.onRowEditCancel,
cellClassName: props.cellClassName,
responsiveLayout: props.responsiveLayout,
selectionAutoFocus: props.selectionAutoFocus,
isDataSelectable: props.isDataSelectable,
showSelectionElement: props.showSelectionElement,
showRowReorderElement: props.showRowReorderElement,
expandedRowIcon: props.expandedRowIcon,
collapsedRowIcon: props.collapsedRowIcon,
rowClassName: props.rowClassName,
virtualScrollerContentRef: contentRef,
virtualScrollerOptions: options,
isVirtualScrollerDisabled: isVirtualScrollerDisabled
});
var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.createElement(TableBody, {
style: {
height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
},
className: "p-datatable-virtualscroller-spacer"
}) : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body, spacerBody);
};
var createTableFooter = function createTableFooter(options) {
var columns = options.columns;
return /*#__PURE__*/React.createElement(TableFooter, {
tableProps: props,
columns: columns,
footerColumnGroup: props.footerColumnGroup
});
};
var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
if (!columns) return;
var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
var virtualScrollerOptions = props.virtualScrollerOptions || {};
return /*#__PURE__*/React.createElement("div", {
ref: wrapperRef,
className: "p-datatable-wrapper",
style: {
maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
}
}, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerOptions, {
items: processedData,
columns: columns,
style: _objectSpread$g(_objectSpread$g({}, virtualScrollerOptions.style), {
height: props.scrollHeight !== 'flex' ? props.scrollHeight : undefined
}),
scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
disabled: _isVirtualScrollerDisabled,
loaderDisabled: true,
inline: true,
autoSize: true,
showSpacer: false,
contentTemplate: function contentTemplate(options) {
var ref = function ref(el) {
tableRef.current = el;
options.spacerRef && options.spacerRef(el);
};
var tableClassName = classNames('p-datatable-table', {
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
}, props.tableClassName);
var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
var tableFooter = createTableFooter(options);
return /*#__PURE__*/React.createElement("table", {
ref: ref,
style: props.tableStyle,
className: tableClassName,
role: "table"
}, tableHeader, tableBody, tableFooter);
}
})));
};
var createFooter = function createFooter() {
if (props.footer) {
var _content2 = ObjectUtils.getJSXElement(props.footer, {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-datatable-footer"
}, _content2);
}
return null;
};
var createPaginator = function createPaginator(position, totalRecords) {
var className = classNames('p-paginator-' + position, props.paginatorClassName);
return /*#__PURE__*/React.createElement(Paginator, {
first: getFirst(),
rows: getRows(),
pageLinkSize: props.pageLinkSize,
className: className,
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo
});
};
var createPaginatorTop = function createPaginatorTop(totalRecords) {
if (props.paginator && props.paginatorPosition !== 'bottom') {
return createPaginator('top', totalRecords);
}
return null;
};
var createPaginatorBottom = function createPaginatorBottom(totalRecords) {
if (props.paginator && props.paginatorPosition !== 'top') {
return createPaginator('bottom', totalRecords);
}
return null;
};
var createResizeHelper = function createResizeHelper() {
if (props.resizableColumns) {
return /*#__PURE__*/React.createElement("div", {
ref: resizeHelperRef,
className: "p-column-resizer-helper",
style: {
display: 'none'
}
});
}
return null;
};
var createReorderIndicators = function createReorderIndicators() {
if (props.reorderableColumns) {
var style = {
position: 'absolute',
display: 'none'
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
ref: reorderIndicatorUpRef,
className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
style: style
}), /*#__PURE__*/React.createElement("span", {
ref: reorderIndicatorDownRef,
className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
style: style
}));
}
return null;
};
var data = processedData();
var columns = getColumns();
var totalRecords = getTotalRecords(data);
var empty = ObjectUtils.isEmpty(data);
var selectionModeInColumn = getSelectionModeInColumn(columns);
var selectable = props.selectionMode || selectionModeInColumn;
var otherProps = DataTableBase.getOtherProps(props);
var className = classNames('p-datatable p-component', {
'p-datatable-hoverable-rows': props.rowHover,
'p-datatable-selectable': selectable && !props.cellSelection,
'p-datatable-selectable-cell': selectable && props.cellSelection,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': props.headerColumnGroup != null,
'p-datatable-grouped-footer': props.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
}, props.className);
var loader = createLoader();
var header = createHeader();
var paginatorTop = createPaginatorTop(totalRecords);
var content = createContent(data, columns, selectionModeInColumn, empty);
var paginatorBottom = createPaginatorBottom(totalRecords);
var footer = createFooter();
var resizeHelper = createResizeHelper();
var reorderIndicators = createReorderIndicators();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
"data-scrollselectors": ".p-datatable-wrapper"
}), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
});
DataTable.displayName = 'DataTable';
var DataViewBase = {
defaultProps: {
__TYPE: 'DataView',
id: null,
header: null,
footer: null,
value: null,
layout: 'list',
dataKey: null,
rows: null,
first: 0,
totalRecords: 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})',
emptyMessage: null,
sortField: null,
sortOrder: null,
style: null,
className: null,
lazy: false,
loading: false,
loadingIcon: 'pi pi-spinner',
gutter: false,
itemTemplate: null,
onPage: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DataViewBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DataViewBase.defaultProps);
}
};
var DataViewLayoutOptionsBase = {
defaultProps: {
__TYPE: 'DataViewLayoutOptions',
id: null,
style: null,
className: null,
layout: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DataViewLayoutOptionsBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DataViewLayoutOptionsBase.defaultProps);
}
};
var DataViewLayoutOptions = /*#__PURE__*/React.memo(function (inProps) {
var props = DataViewLayoutOptionsBase.getProps(inProps);
var changeLayout = function changeLayout(event, layoutMode) {
props.onChange({
originalEvent: event,
value: layoutMode
});
event.preventDefault();
};
var otherProps = DataViewLayoutOptionsBase.getOtherProps(props);
var className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', props.className);
var buttonListClass = classNames('p-button p-button-icon-only', {
'p-highlight': props.layout === 'list'
});
var buttonGridClass = classNames('p-button p-button-icon-only', {
'p-highlight': props.layout === 'grid'
});
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
style: props.style,
className: className
}, otherProps), /*#__PURE__*/React.createElement("button", {
type: "button",
className: buttonListClass,
onClick: function onClick(event) {
return changeLayout(event, 'list');
}
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-bars"
}), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
type: "button",
className: buttonGridClass,
onClick: function onClick(event) {
return changeLayout(event, 'grid');
}
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-th-large"
}), /*#__PURE__*/React.createElement(Ripple, null)));
});
var DataViewItem = /*#__PURE__*/React.memo(function (props) {
return props.template(props.item, props.layout);
});
var DataView = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames;
var props = DataViewBase.getProps(inProps);
var _React$useState = React.useState(props.first),
_React$useState2 = _slicedToArray(_React$useState, 2),
firstState = _React$useState2[0],
setFirstState = _React$useState2[1];
var _React$useState3 = React.useState(props.rows),
_React$useState4 = _slicedToArray(_React$useState3, 2),
rowsState = _React$useState4[0],
setRowsState = _React$useState4[1];
var elementRef = React.useRef(null);
var first = props.onPage ? props.first : firstState;
var rows = props.onPage ? props.rows : rowsState;
var getItemRenderKey = function getItemRenderKey(value) {
return props.dataKey ? ObjectUtils.resolveFieldData(value, props.dataKey) : null;
};
var getTotalRecords = function getTotalRecords() {
return props.totalRecords ? props.totalRecords : props.value ? props.value.length : 0;
};
var createPaginator = function createPaginator(position) {
var className = classNames('p-paginator-' + position, props.paginatorClassName);
var totalRecords = getTotalRecords();
return /*#__PURE__*/React.createElement(Paginator, {
first: first,
rows: rows,
pageLinkSize: props.pageLinkSize,
className: className,
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo
});
};
var onPageChange = function onPageChange(event) {
if (props.onPage) {
props.onPage(event);
} else {
setFirstState(event.first);
setRowsState(event.rows);
}
};
var sort = function sort() {
if (props.value) {
var value = _toConsumableArray(props.value);
value.sort(function (data1, data2) {
var value1 = ObjectUtils.resolveFieldData(data1, props.sortField);
var value2 = ObjectUtils.resolveFieldData(data2, props.sortField);
return ObjectUtils.sort(value1, value2, props.sortOrder, PrimeReact.locale, PrimeReact.nullSortOrder);
});
return value;
}
return null;
};
var createLoader = function createLoader() {
if (props.loading) {
var iconClassName = classNames('p-dataview-loading-icon pi-spin', props.loadingIcon);
return /*#__PURE__*/React.createElement("div", {
className: "p-dataview-loading-overlay p-component-overlay"
}, /*#__PURE__*/React.createElement("i", {
className: iconClassName
}));
}
return null;
};
var createTopPaginator = function createTopPaginator() {
if (props.paginator && (props.paginatorPosition !== 'bottom' || props.paginatorPosition === 'both')) {
return createPaginator('top');
}
return null;
};
var createBottomPaginator = function createBottomPaginator() {
if (props.paginator && (props.paginatorPosition !== 'top' || props.paginatorPosition === 'both')) {
return createPaginator('bottom');
}
return null;
};
var createEmptyMessage = function createEmptyMessage() {
if (!props.loading) {
var _content = props.emptyMessage || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("div", {
className: "p-col-12 col-12 p-dataview-emptymessage"
}, _content);
}
return null;
};
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-dataview-header"
}, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
return /*#__PURE__*/React.createElement("div", {
className: "p-dataview-footer"
}, props.footer);
}
return null;
};
var createItems = function createItems(value) {
if (ObjectUtils.isNotEmpty(value)) {
if (props.paginator) {
var currentFirst = props.lazy ? 0 : first;
var totalRecords = getTotalRecords();
var last = Math.min(rows + currentFirst, totalRecords);
var items = [];
for (var i = currentFirst; i < last; i++) {
var val = value[i];
val && items.push( /*#__PURE__*/React.createElement(DataViewItem, {
key: getItemRenderKey(value) || i,
template: props.itemTemplate,
layout: props.layout,
item: val
}));
}
return items;
}
return value.map(function (item, index) {
return /*#__PURE__*/React.createElement(DataViewItem, {
key: getItemRenderKey(item) || index,
template: props.itemTemplate,
layout: props.layout,
item: item
});
});
}
return createEmptyMessage();
};
var createContent = function createContent(value) {
var items = createItems(value);
var gridClassName = classNames('p-grid grid', {
'p-nogutter grid-nogutter': !props.gutter
});
return /*#__PURE__*/React.createElement("div", {
className: "p-dataview-content"
}, /*#__PURE__*/React.createElement("div", {
className: gridClassName
}, items));
};
var processData = function processData() {
var data = props.value;
if (ObjectUtils.isNotEmpty(data) && props.sortField) {
data = sort();
}
return data;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var data = processData();
var otherProps = DataViewBase.getOtherProps(props);
var className = classNames('p-dataview p-component', (_classNames = {}, _defineProperty(_classNames, "p-dataview-".concat(props.layout), !!props.layout), _defineProperty(_classNames, 'p-dataview-loading', props.loading), _classNames), props.className);
var loader = createLoader();
var topPaginator = createTopPaginator();
var bottomPaginator = createBottomPaginator();
var header = createHeader();
var footer = createFooter();
var content = createContent(data);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
style: props.style,
className: className
}, otherProps), loader, header, topPaginator, content, bottomPaginator, footer);
}));
DataViewLayoutOptions.displayName = 'DataViewLayoutOptions';
DataViewItem.displayName = 'DataViewItem';
DataView.displayName = 'DataView';
var DeferredContentBase = {
defaultProps: {
__TYPE: 'DeferredContent',
onload: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DeferredContentBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DeferredContentBase.defaultProps);
}
};
var DeferredContent = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DeferredContentBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
loadedState = _React$useState2[0],
setLoadedState = _React$useState2[1];
var elementRef = React.useRef(null);
var _useEventListener = useEventListener({
target: 'window',
type: 'scroll',
listener: function listener() {
if (shouldLoad()) {
load();
unbindScrollListener();
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindScrollListener = _useEventListener2[0],
unbindScrollListener = _useEventListener2[1];
var shouldLoad = function shouldLoad() {
if (loadedState) {
return false;
} else {
var rect = elementRef.current.getBoundingClientRect();
var winHeight = document.documentElement.clientHeight;
return winHeight >= rect.top;
}
};
var load = function load(event) {
setLoadedState(true);
props.onLoad && props.onLoad(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!loadedState) {
shouldLoad() ? load() : bindScrollListener();
}
});
var otherProps = DeferredContentBase.getOtherProps(props);
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, otherProps), loadedState && props.children);
});
DeferredContent.displayName = 'DeferredContent';
var DividerBase = {
defaultProps: {
__TYPE: 'Divider',
align: null,
layout: 'horizontal',
type: 'solid',
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DividerBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DividerBase.defaultProps);
}
};
var Divider = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DividerBase.getProps(inProps);
var elementRef = React.useRef(null);
var horizontal = props.layout === 'horizontal';
var vertical = props.layout === 'vertical';
var otherProps = DividerBase.getOtherProps(props);
var className = classNames("p-divider p-component p-divider-".concat(props.layout, " p-divider-").concat(props.type), {
'p-divider-left': horizontal && (!props.align || props.align === 'left'),
'p-divider-right': horizontal && props.align === 'right',
'p-divider-center': horizontal && props.align === 'center' || vertical && (!props.align || props.align === 'center'),
'p-divider-top': vertical && props.align === 'top',
'p-divider-bottom': vertical && props.align === 'bottom'
}, props.className);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
style: props.style,
role: "separator"
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-divider-content"
}, props.children));
});
Divider.displayName = 'Divider';
var DockBase = {
defaultProps: {
__TYPE: 'Dock',
id: null,
style: null,
className: null,
model: null,
position: 'bottom',
magnification: true,
header: null,
footer: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, DockBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, DockBase.defaultProps);
}
};
var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = DockBase.getProps(inProps);
var _React$useState = React.useState(-3),
_React$useState2 = _slicedToArray(_React$useState, 2),
currentIndexState = _React$useState2[0],
setCurrentIndexState = _React$useState2[1];
var elementRef = React.useRef(null);
var onListMouseLeave = function onListMouseLeave() {
setCurrentIndexState(-3);
};
var onItemMouseEnter = function onItemMouseEnter(index) {
setCurrentIndexState(index);
};
var onItemClick = function onItemClick(e, item) {
if (item.command) {
item.command({
originalEvent: e,
item: item
});
}
e.preventDefault();
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var disabled = item.disabled,
_icon = item.icon,
label = item.label,
template = item.template,
url = item.url,
target = item.target;
var className = classNames('p-dock-item', {
'p-dock-item-second-prev': currentIndexState - 2 === index,
'p-dock-item-prev': currentIndexState - 1 === index,
'p-dock-item-current': currentIndexState === index,
'p-dock-item-next': currentIndexState + 1 === index,
'p-dock-item-second-next': currentIndexState + 2 === index
});
var contentClassName = classNames('p-dock-action', {
'p-disabled': disabled
});
var iconClassName = classNames('p-dock-action-icon', _icon);
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-dock-action-icon'
}, {
props: props
});
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
role: "menuitem",
className: contentClassName,
target: target,
"data-pr-tooltip": label,
onClick: function onClick(e) {
return onItemClick(e, item);
}
}, icon, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(e) {
return onItemClick(e, item);
},
className: contentClassName,
iconClassName: iconClassName,
element: content,
props: props,
index: index
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: index,
className: className,
role: "none",
onMouseEnter: function onMouseEnter() {
return onItemMouseEnter(index);
}
}, content);
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var createHeader = function createHeader() {
if (props.header) {
var _header = ObjectUtils.getJSXElement(props.header, {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-dock-header"
}, _header);
}
return null;
};
var createList = function createList() {
var items = createItems();
return /*#__PURE__*/React.createElement("ul", {
className: "p-dock-list",
role: "menu",
onMouseLeave: onListMouseLeave
}, items);
};
var createFooter = function createFooter() {
if (props.footer) {
var _footer = ObjectUtils.getJSXElement(props.footer, {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-dock-footer"
}, _footer);
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = DockBase.getOtherProps(props);
var className = classNames("p-dock p-component p-dock-".concat(props.position), {
'p-dock-magnification': props.magnification
}, props.className);
var header = createHeader();
var list = createList();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-dock-container"
}, header, list, footer));
}));
Dock.displayName = 'Dock';
var EditorBase = {
defaultProps: {
__TYPE: 'Editor',
id: null,
value: null,
style: null,
className: null,
placeholder: null,
readOnly: false,
modules: null,
formats: null,
theme: 'snow',
showHeader: true,
headerTemplate: null,
onTextChange: null,
onSelectionChange: null,
onLoad: null,
maxLength: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, EditorBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, EditorBase.defaultProps);
}
};
function ownKeys$f(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var QuillJS = function () {
try {
return Quill;
} catch (_unused) {
return null;
}
}();
var Editor = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = EditorBase.getProps(inProps);
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var toolbarRef = React.useRef(null);
var quill = React.useRef(null);
var isQuillLoaded = React.useRef(false);
useMountEffect(function () {
if (!isQuillLoaded.current) {
var configuration = {
modules: _objectSpread$f({
toolbar: props.showHeader ? toolbarRef.current : false
}, props.modules),
placeholder: props.placeholder,
readOnly: props.readOnly,
theme: props.theme,
formats: props.formats
};
if (QuillJS) {
// GitHub #3097 loaded by script only
quill.current = new Quill(contentRef.current, configuration);
initQuill();
if (quill.current && quill.current.getModule('toolbar')) {
props.onLoad && props.onLoad(quill.current);
}
} else {
import('quill').then(function (module) {
if (module && DomHandler.isExist(contentRef.current)) {
if (module["default"]) {
// webpack
quill.current = new module["default"](contentRef.current, configuration);
} else {
// parceljs
quill.current = new module(contentRef.current, configuration);
}
initQuill();
}
}).then(function () {
if (quill.current && quill.current.getModule('toolbar')) {
props.onLoad && props.onLoad(quill.current);
}
});
}
isQuillLoaded.current = true;
}
});
var initQuill = function initQuill() {
if (props.value) {
quill.current.setContents(quill.current.clipboard.convert(props.value));
}
quill.current.on('text-change', function (delta, oldContents, source) {
var firstChild = contentRef.current.children[0];
var html = firstChild ? firstChild.innerHTML : null;
var text = quill.current.getText();
if (html === '<p><br></p>') {
html = null;
}
// GitHub #2271 prevent infinite loop on clipboard paste of HTML
if (source === 'api') {
var htmlValue = contentRef.current.children[0];
var editorValue = document.createElement('div');
editorValue.innerHTML = props.value || '';
// this is necessary because Quill rearranged style elements
if (DomHandler.isEqualElement(htmlValue, editorValue)) {
return;
}
}
if (props.maxLength) {
var length = quill.current.getLength();
if (length > props.maxLength) {
quill.current.deleteText(props.maxLength, length);
}
}
if (props.onTextChange) {
props.onTextChange({
htmlValue: html,
textValue: text,
delta: delta,
source: source
});
}
});
quill.current.on('selection-change', function (range, oldRange, source) {
if (props.onSelectionChange) {
props.onSelectionChange({
range: range,
oldRange: oldRange,
source: source
});
}
});
};
useUpdateEffect(function () {
if (quill.current && !quill.current.hasFocus()) {
props.value ? quill.current.setContents(quill.current.clipboard.convert(props.value)) : quill.current.setText('');
}
}, [props.value]);
React.useImperativeHandle(ref, function () {
return {
props: props,
getQuill: function getQuill() {
return quill.current;
},
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getToolbar: function getToolbar() {
return toolbarRef.current;
}
};
});
var createToolbarHeader = function createToolbarHeader() {
if (props.showHeader === false) {
return null;
} else if (props.headerTemplate) {
return /*#__PURE__*/React.createElement("div", {
ref: toolbarRef,
className: "p-editor-toolbar"
}, props.headerTemplate);
} else {
return /*#__PURE__*/React.createElement("div", {
ref: toolbarRef,
className: "p-editor-toolbar"
}, /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("select", {
className: "ql-header",
defaultValue: "0"
}, /*#__PURE__*/React.createElement("option", {
value: "1"
}, "Heading"), /*#__PURE__*/React.createElement("option", {
value: "2"
}, "Subheading"), /*#__PURE__*/React.createElement("option", {
value: "0"
}, "Normal")), /*#__PURE__*/React.createElement("select", {
className: "ql-font"
}, /*#__PURE__*/React.createElement("option", null), /*#__PURE__*/React.createElement("option", {
value: "serif"
}), /*#__PURE__*/React.createElement("option", {
value: "monospace"
}))), /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-bold",
"aria-label": "Bold"
}), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-italic",
"aria-label": "Italic"
}), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-underline",
"aria-label": "Underline"
})), /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("select", {
className: "ql-color"
}), /*#__PURE__*/React.createElement("select", {
className: "ql-background"
})), /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-list",
value: "ordered",
"aria-label": "Ordered List"
}), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-list",
value: "bullet",
"aria-label": "Unordered List"
}), /*#__PURE__*/React.createElement("select", {
className: "ql-align"
}, /*#__PURE__*/React.createElement("option", {
defaultValue: true
}), /*#__PURE__*/React.createElement("option", {
value: "center"
}), /*#__PURE__*/React.createElement("option", {
value: "right"
}), /*#__PURE__*/React.createElement("option", {
value: "justify"
}))), /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-link",
"aria-label": "Insert Link"
}), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-image",
"aria-label": "Insert Image"
}), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-code-block",
"aria-label": "Insert Code Block"
})), /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ql-clean",
"aria-label": "Remove Styles"
})));
}
};
var otherProps = EditorBase.getOtherProps(props);
var className = classNames('p-component p-editor-container', props.className);
var header = createToolbarHeader();
var content = /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: "p-editor-content",
style: props.style
});
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className
}, otherProps), header, content);
}));
Editor.displayName = 'Editor';
var FieldsetBase = {
defaultProps: {
__TYPE: 'Fieldset',
id: null,
legend: null,
className: null,
style: null,
toggleable: null,
collapsed: null,
transitionOptions: null,
onExpand: null,
onCollapse: null,
onToggle: null,
onClick: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, FieldsetBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, FieldsetBase.defaultProps);
}
};
var Fieldset = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = FieldsetBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.collapsed),
_React$useState4 = _slicedToArray(_React$useState3, 2),
collapsedState = _React$useState4[0],
setCollapsedState = _React$useState4[1];
var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var headerId = idState + '_header';
var contentId = idState + '_content';
var toggle = function toggle(event) {
if (props.toggleable) {
collapsed ? expand(event) : collapse(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: !collapsed
});
}
}
event.preventDefault();
};
var expand = function expand(event) {
if (!props.onToggle) {
setCollapsedState(false);
}
props.onExpand && props.onExpand(event);
};
var collapse = function collapse(event) {
if (!props.onToggle) {
setCollapsedState(true);
}
props.onCollapse && props.onCollapse(event);
};
useMountEffect(function () {
if (!props.id) {
setIdState(UniqueComponentId());
}
});
var createContent = function createContent() {
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: contentRef,
classNames: "p-toggleable-content",
timeout: {
enter: 1000,
exit: 450
},
"in": !collapsed,
unmountOnExit: true,
options: props.transitionOptions
}, /*#__PURE__*/React.createElement("div", {
ref: contentRef,
id: contentId,
className: "p-toggleable-content",
"aria-hidden": collapsed,
role: "region",
"aria-labelledby": headerId
}, /*#__PURE__*/React.createElement("div", {
className: "p-fieldset-content"
}, props.children)));
};
var createToggleIcon = function createToggleIcon() {
if (props.toggleable) {
var _className = classNames('p-fieldset-toggler pi', {
'pi-plus': collapsed,
'pi-minus': !collapsed
});
return /*#__PURE__*/React.createElement("span", {
className: _className
});
}
return null;
};
var createLegendContent = function createLegendContent() {
if (props.toggleable) {
var toggleIcon = createToggleIcon();
return /*#__PURE__*/React.createElement("a", {
href: '#' + contentId,
"aria-controls": contentId,
id: headerId,
"aria-expanded": !collapsed,
tabIndex: props.toggleable ? null : -1
}, toggleIcon, /*#__PURE__*/React.createElement("span", {
className: "p-fieldset-legend-text"
}, props.legend), /*#__PURE__*/React.createElement(Ripple, null));
}
return /*#__PURE__*/React.createElement("span", {
className: "p-fieldset-legend-text",
id: headerId
}, props.legend);
};
var createLegend = function createLegend() {
if (props.legend != null || props.toggleable) {
var legendContent = createLegendContent();
return /*#__PURE__*/React.createElement("legend", {
className: "p-fieldset-legend p-unselectable-text",
onClick: toggle
}, legendContent);
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
var otherProps = FieldsetBase.getOtherProps(props);
var className = classNames('p-fieldset p-component', {
'p-fieldset-toggleable': props.toggleable
}, props.className);
var legend = createLegend();
var content = createContent();
return /*#__PURE__*/React.createElement("fieldset", _extends({
id: idState,
ref: elementRef,
className: className,
style: props.style
}, otherProps, {
onClick: props.onClick
}), legend, content);
});
Fieldset.displayName = 'Fieldset';
function _readOnlyError(name) {
throw new TypeError("\"" + name + "\" is read-only");
}
var MessagesBase = {
defaultProps: {
__TYPE: 'Messages',
id: null,
className: null,
style: null,
transitionOptions: null,
onRemove: null,
onClick: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MessagesBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MessagesBase.defaultProps);
}
};
var UIMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$message = props.message,
severity = _props$message.severity,
content = _props$message.content,
summary = _props$message.summary,
detail = _props$message.detail,
closable = _props$message.closable,
life = _props$message.life,
sticky = _props$message.sticky,
icon = _props$message.icon;
var _useTimeout = useTimeout(function () {
onClose(null);
}, life || 3000, !sticky),
_useTimeout2 = _slicedToArray(_useTimeout, 1),
clearTimer = _useTimeout2[0];
var onClose = function onClose(event) {
clearTimer();
props.onClose && props.onClose(props.message);
if (event) {
event.preventDefault();
event.stopPropagation();
}
};
var onClick = function onClick() {
props.onClick && props.onClick(props.message);
};
var createCloseIcon = function createCloseIcon() {
if (closable !== false) {
var ariaLabel = localeOption('close');
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-message-close p-link",
"aria-label": ariaLabel,
onClick: onClose
}, /*#__PURE__*/React.createElement("i", {
className: "p-message-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createMessage = function createMessage() {
if (props.message) {
var iconValue = icon;
if (!iconValue) {
iconValue = classNames('pi', {
'pi-info-circle': severity === 'info',
'pi-exclamation-triangle': severity === 'warn',
'pi-times-circle': severity === 'error',
'pi-check': severity === 'success'
});
}
var iconContent = IconUtils.getJSXIcon(iconValue, {
className: 'p-message-icon'
}, {
props: props
});
return content || /*#__PURE__*/React.createElement(React.Fragment, null, iconContent, /*#__PURE__*/React.createElement("span", {
className: "p-message-summary"
}, summary), /*#__PURE__*/React.createElement("span", {
className: "p-message-detail"
}, detail));
}
return null;
};
var className = classNames('p-message p-component p-message-' + severity);
var closeIcon = createCloseIcon();
var message = createMessage();
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: "p-message-wrapper"
}, message, closeIcon));
}));
UIMessage.displayName = 'UIMessage';
var messageIdx$1 = 0;
var Messages = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MessagesBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
messagesState = _React$useState2[0],
setMessagesState = _React$useState2[1];
var elementRef = React.useRef(null);
var show = function show(value) {
if (value) {
var messages = assignIdentifiers(value, true);
if (Array.isArray(value)) {
for (var i = 0; i < value.length; i++) {
value[i].id = messageIdx$1++;
messages = [].concat(_toConsumableArray(messagesState), _toConsumableArray(value));
}
} else {
value.id = messageIdx$1++;
messages = messagesState ? [].concat(_toConsumableArray(messagesState), [value]) : [value];
}
setMessagesState(messages);
}
};
var assignIdentifiers = function assignIdentifiers(value, copy) {
var messages;
if (Array.isArray(value)) {
for (var i = 0; i < value.length; i++) {
value[i].id = messageIdx$1++;
if (copy) {
messages = [].concat(_toConsumableArray(messagesState), _toConsumableArray(value));
} else {
messages = value;
}
}
} else {
value.id = messageIdx$1++;
if (copy) {
messages = messagesState ? [].concat(_toConsumableArray(messagesState), [value]) : [value];
} else {
messages = [value];
}
}
return messages;
};
var clear = function clear() {
setMessagesState([]);
};
var replace = function replace(value) {
var replaced = assignIdentifiers(value, false);
setMessagesState(replaced);
};
var onClose = function onClose(message) {
setMessagesState(messagesState.filter(function (msg) {
return msg.id !== message.id;
}));
props.onRemove && props.onRemove(message);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
replace: replace,
clear: clear,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = MessagesBase.getOtherProps(props);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: props.className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement(TransitionGroup, null, messagesState && messagesState.map(function (message) {
var messageRef = /*#__PURE__*/React.createRef();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: messageRef,
key: message.id,
classNames: "p-message",
unmountOnExit: true,
timeout: {
enter: 300,
exit: 300
},
options: props.transitionOptions
}, /*#__PURE__*/React.createElement(UIMessage, {
ref: messageRef,
message: message,
onClick: props.onClick,
onClose: onClose
}));
})));
}));
Messages.displayName = 'Messages';
var ProgressBarBase = {
defaultProps: {
__TYPE: 'ProgressBar',
id: null,
value: null,
showValue: true,
unit: '%',
style: null,
className: null,
mode: 'determinate',
displayValueTemplate: null,
color: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ProgressBarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ProgressBarBase.defaultProps);
}
};
var ProgressBar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ProgressBarBase.getProps(inProps);
var elementRef = React.useRef(null);
var createLabel = function createLabel() {
if (props.showValue && props.value != null) {
var label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
return label;
}
return null;
};
var createDeterminate = function createDeterminate() {
var otherProps = ProgressBarBase.getOtherProps(props);
var className = classNames('p-progressbar p-component p-progressbar-determinate', props.className);
var label = createLabel();
return /*#__PURE__*/React.createElement("div", _extends({
role: "progressbar",
id: props.id,
ref: elementRef,
className: className,
style: props.style,
"aria-valuemin": "0",
"aria-valuenow": props.value,
"aria-valuemax": "100"
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-progressbar-value p-progressbar-value-animate",
style: {
width: props.value + '%',
display: 'flex',
backgroundColor: props.color
}
}, props.value != null && props.value !== 0 && props.showValue && /*#__PURE__*/React.createElement("div", {
className: "p-progressbar-label"
}, label)));
};
var createIndeterminate = function createIndeterminate() {
var otherProps = ProgressBarBase.getOtherProps(props);
var className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
return /*#__PURE__*/React.createElement("div", _extends({
role: "progressbar",
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-progressbar-indeterminate-container"
}, /*#__PURE__*/React.createElement("div", {
className: "p-progressbar-value p-progressbar-value-animate",
style: {
backgroundColor: props.color
}
})));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
if (props.mode === 'determinate') return createDeterminate();else if (props.mode === 'indeterminate') return createIndeterminate();else throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
}));
ProgressBar.displayName = 'ProgressBar';
var FileUploadBase = {
defaultProps: {
__TYPE: 'FileUpload',
id: null,
name: null,
url: null,
mode: 'advanced',
multiple: false,
accept: null,
disabled: false,
auto: false,
maxFileSize: null,
invalidFileSizeMessageSummary: '{0}: Invalid file size, ',
invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
style: null,
className: null,
widthCredentials: false,
previewWidth: 50,
chooseLabel: null,
uploadLabel: null,
cancelLabel: null,
chooseOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
uploadOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
cancelOptions: {
label: null,
icon: null,
iconOnly: false,
className: null,
style: null
},
customUpload: false,
headerClassName: null,
headerStyle: null,
contentClassName: null,
contentStyle: null,
headerTemplate: null,
itemTemplate: null,
emptyTemplate: null,
progressBarTemplate: null,
onBeforeUpload: null,
onBeforeSend: null,
onBeforeDrop: null,
onBeforeSelect: null,
onUpload: null,
onError: null,
onClear: null,
onSelect: null,
onProgress: null,
onValidationFail: null,
uploadHandler: null,
onRemove: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, FileUploadBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, FileUploadBase.defaultProps);
}
};
function _createForOfIteratorHelper$9(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$9(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$9(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$9(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$9(o, minLen); }
function _arrayLikeToArray$9(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = FileUploadBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
uploadedFilesState = _React$useState2[0],
setUploadedFilesState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filesState = _React$useState4[0],
setFilesState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
progressState = _React$useState6[0],
setProgressState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedState = _React$useState8[0],
setFocusedState = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
uploadingState = _React$useState10[0],
setUploadingState = _React$useState10[1];
var fileInputRef = React.useRef(null);
var messagesRef = React.useRef(null);
var contentRef = React.useRef(null);
var duplicateIEEvent = React.useRef(false);
var uploadedFileCount = React.useRef(0);
var hasFiles = ObjectUtils.isNotEmpty(filesState);
var hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState);
var disabled = props.disabled || uploadingState;
var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
var cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
var chooseDisabled = disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
var uploadDisabled = disabled || !hasFiles;
var cancelDisabled = disabled || !hasFiles;
var isImage = function isImage(file) {
return /^image\//.test(file.type);
};
var remove = function remove(event, index) {
clearInput();
var currentFiles = _toConsumableArray(filesState);
var removedFile = filesState[index];
currentFiles.splice(index, 1);
setFilesState(currentFiles);
if (props.onRemove) {
props.onRemove({
originalEvent: event,
file: removedFile
});
}
};
var removeUploadedFiles = function removeUploadedFiles(event, index) {
clearInput();
var currentUploadedFiles = _toConsumableArray(uploadedFilesState);
var removedFile = filesState[index];
currentUploadedFiles.splice(index, 1);
setUploadedFilesState(currentUploadedFiles);
if (props.onRemove) {
props.onRemove({
originalEvent: event,
file: removedFile
});
}
};
var clearInput = function clearInput() {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
var clearIEInput = function clearIEInput() {
if (fileInputRef.current) {
duplicateIEEvent.current = true; //IE11 fix to prevent onFileChange trigger again
fileInputRef.current.value = '';
}
};
var formatSize = function formatSize(bytes) {
if (bytes === 0) {
return '0 B';
}
var k = 1000,
dm = 3,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};
var onFileSelect = function onFileSelect(event) {
// give caller a chance to stop the selection
if (props.onBeforeSelect && props.onBeforeSelect({
originalEvent: event,
files: filesState
}) === false) {
return;
}
if (event.type !== 'drop' && isIE11() && duplicateIEEvent.current) {
duplicateIEEvent.current = false;
return;
}
var currentFiles = [];
if (props.multiple) {
currentFiles = filesState ? _toConsumableArray(filesState) : [];
}
var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
for (var i = 0; i < selectedFiles.length; i++) {
var file = selectedFiles[i];
if (!isFileSelected(file) && validate(file)) {
if (isImage(file)) {
file.objectURL = window.URL.createObjectURL(file);
}
currentFiles.push(file);
}
}
setFilesState(currentFiles);
if (ObjectUtils.isNotEmpty(currentFiles) && props.auto) {
upload(currentFiles);
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
files: selectedFiles
});
}
if (event.type !== 'drop' && isIE11()) {
clearIEInput();
} else {
clearInput();
}
if (props.mode === 'basic' && currentFiles.length > 0) {
fileInputRef.current.style.display = 'none';
}
};
var isFileSelected = function isFileSelected(file) {
return filesState.some(function (f) {
return f.name + f.type + f.size === file.name + file.type + file.size;
});
};
var isIE11 = function isIE11() {
return !!window['MSInputMethodContext'] && !!document['documentMode'];
};
var validate = function validate(file) {
if (props.maxFileSize && file.size > props.maxFileSize) {
var message = {
severity: 'error',
summary: props.invalidFileSizeMessageSummary.replace('{0}', file.name),
detail: props.invalidFileSizeMessageDetail.replace('{0}', formatSize(props.maxFileSize)),
sticky: true
};
if (props.mode === 'advanced') {
messagesRef.current.show(message);
}
props.onValidationFail && props.onValidationFail(file);
return false;
}
return true;
};
var upload = function upload(files) {
files = files || filesState;
if (files && files.nativeEvent) {
files = filesState;
}
if (props.customUpload) {
if (props.fileLimit) {
uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
}
if (props.uploadHandler) {
props.uploadHandler({
files: files,
options: {
clear: clear,
props: props
}
});
}
} else {
setUploadingState(true);
var xhr = new XMLHttpRequest();
var formData = new FormData();
if (props.onBeforeUpload) {
props.onBeforeUpload({
xhr: xhr,
formData: formData
});
}
var _iterator = _createForOfIteratorHelper$9(files),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var file = _step.value;
formData.append(props.name, file, file.name);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
var progress = Math.round(event.loaded * 100 / event.total);
setProgressState(progress);
if (props.onProgress) {
props.onProgress({
originalEvent: event,
progress: progress
});
}
}
});
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
setProgressState(0);
setUploadingState(false);
if (xhr.status >= 200 && xhr.status < 300) {
if (props.fileLimit) {
uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
}
if (props.onUpload) {
props.onUpload({
xhr: xhr,
files: files
});
}
} else {
if (props.onError) {
props.onError({
xhr: xhr,
files: files
});
}
}
setUploadedFilesState(function (prevUploadedFiles) {
return [].concat(_toConsumableArray(prevUploadedFiles), _toConsumableArray(files));
});
clear();
}
};
xhr.open('POST', props.url, true);
if (props.onBeforeSend) {
props.onBeforeSend({
xhr: xhr,
formData: formData
});
}
xhr.withCredentials = props.withCredentials;
xhr.send(formData);
}
};
var clear = function clear() {
setFilesState([]);
setUploadingState(false);
props.onClear && props.onClear();
clearInput();
};
var choose = function choose() {
fileInputRef.current.click();
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(event) {
if (event.which === 13) {
// enter
choose();
}
};
var onDragEnter = function onDragEnter(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
event.stopPropagation();
event.preventDefault();
}
};
var onDragOver = function onDragOver(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
event.stopPropagation();
event.preventDefault();
}
};
var onDragLeave = function onDragLeave(event) {
if (!disabled) {
event.dataTransfer.dropEffect = 'copy';
DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
}
};
var onDrop = function onDrop(event) {
if (props.disabled) {
return;
}
DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
event.stopPropagation();
event.preventDefault();
// give caller a chance to stop the drop
if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
return;
}
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
var allowDrop = props.multiple || ObjectUtils.isEmpty(filesState) && files && files.length === 1;
allowDrop && onFileSelect(event);
};
var onSimpleUploaderClick = function onSimpleUploaderClick() {
!disabled && hasFiles ? upload() : fileInputRef.current.click();
};
React.useImperativeHandle(ref, function () {
return {
props: props,
upload: upload,
clear: clear,
formatSize: formatSize,
onFileSelect: onFileSelect,
getInput: function getInput() {
return fileInputRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getFiles: function getFiles() {
return filesState;
},
setFiles: function setFiles(files) {
return setFilesState(files || []);
}
};
});
var createChooseButton = function createChooseButton() {
var _props$chooseOptions = props.chooseOptions,
className = _props$chooseOptions.className,
style = _props$chooseOptions.style,
_icon = _props$chooseOptions.icon,
iconOnly = _props$chooseOptions.iconOnly;
var chooseClassName = classNames('p-button p-fileupload-choose p-component', {
'p-disabled': disabled,
'p-focus': focusedState,
'p-button-icon-only': iconOnly
}, className);
var labelClassName = 'p-button-label p-clickable';
var label = iconOnly ? /*#__PURE__*/React.createElement("span", {
className: labelClassName,
dangerouslySetInnerHTML: {
__html: ' '
}
}) : /*#__PURE__*/React.createElement("span", {
className: labelClassName
}, chooseButtonLabel);
var input = /*#__PURE__*/React.createElement("input", {
ref: fileInputRef,
type: "file",
onChange: onFileSelect,
multiple: props.multiple,
accept: props.accept,
disabled: chooseDisabled
});
var icon = IconUtils.getJSXIcon(_icon || 'pi pi-fw pi-plus', {
className: 'p-button-icon p-button-icon-left p-clickable'
}, {
props: props
});
return /*#__PURE__*/React.createElement("span", {
className: chooseClassName,
style: style,
onClick: choose,
onKeyDown: onKeyDown,
onFocus: onFocus,
onBlur: onBlur,
tabIndex: 0
}, input, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
};
var onRemoveClick = function onRemoveClick(e, badgeOptions, index) {
if (badgeOptions.severity === 'warning') remove(e, index);else removeUploadedFiles(e, index);
};
var createFile = function createFile(file, index, badgeOptions) {
var key = file.name + file.type + file.size;
var preview = isImage(file) ? /*#__PURE__*/React.createElement("img", {
role: "presentation",
className: "p-fileupload-file-thumbnail",
alt: file.name,
src: file.objectURL,
width: props.previewWidth
}) : null;
var fileName = /*#__PURE__*/React.createElement("div", {
className: "p-fileupload-filename"
}, file.name);
var size = /*#__PURE__*/React.createElement("div", null, formatSize(file.size));
var contentBody = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, " ", file.name), /*#__PURE__*/React.createElement("span", null, formatSize(file.size)), /*#__PURE__*/React.createElement(Badge, {
className: "p-fileupload-file-badge",
value: badgeOptions.value,
severity: badgeOptions.severity
}));
var removeButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "pi pi-times",
className: "p-button-danger p-button-text p-button-rounded",
onClick: function onClick(e) {
return onRemoveClick(e, badgeOptions, index);
},
disabled: disabled
}));
var content = /*#__PURE__*/React.createElement(React.Fragment, null, preview, contentBody, removeButton);
if (props.itemTemplate) {
var defaultContentOptions = {
onRemove: function onRemove(event) {
return remove(event, index);
},
previewElement: preview,
fileNameElement: fileName,
sizeElement: size,
removeElement: removeButton,
formatSize: formatSize(file.size),
element: content,
index: index,
props: props
};
content = ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-fileupload-row",
key: key
}, content);
};
var createFiles = function createFiles() {
var badgeOptions = {
severity: 'warning',
value: 'Pending'
};
var content = filesState.map(function (file, index) {
return createFile(file, index, badgeOptions);
});
return /*#__PURE__*/React.createElement("div", null, content);
};
var createUploadedFiles = function createUploadedFiles() {
var badgeOptions = {
severity: 'success',
value: 'Completed'
};
var content = uploadedFilesState && uploadedFilesState.map(function (file, index) {
return createFile(file, index, badgeOptions);
});
return /*#__PURE__*/React.createElement("div", null, content);
};
var createEmptyContent = function createEmptyContent() {
return props.emptyTemplate && !hasFiles && !hasUploadedFiles ? ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
};
var createProgressBarContent = function createProgressBarContent() {
if (props.progressBarTemplate) {
return ObjectUtils.getJSXElement(props.progressBarTemplate, props);
}
return /*#__PURE__*/React.createElement(ProgressBar, {
value: progressState,
showValue: false
});
};
var createAdvanced = function createAdvanced() {
var otherProps = FileUploadBase.getOtherProps(props);
var className = classNames('p-fileupload p-fileupload-advanced p-component', props.className);
var headerClassName = classNames('p-fileupload-buttonbar', props.headerClassName);
var contentClassName = classNames('p-fileupload-content', props.contentClassName);
var chooseButton = createChooseButton();
var emptyContent = createEmptyContent();
var uploadButton, cancelButton, filesList, uplaodedFilesList, progressBar;
if (!props.auto) {
var uploadOptions = props.uploadOptions;
var cancelOptions = props.cancelOptions;
var uploadLabel = !uploadOptions.iconOnly ? uploadButtonLabel : '';
var cancelLabel = !cancelOptions.iconOnly ? cancelButtonLabel : '';
uploadButton = /*#__PURE__*/React.createElement(Button, {
type: "button",
label: uploadLabel,
icon: uploadOptions.icon || 'pi pi-upload',
onClick: upload,
disabled: uploadDisabled,
style: uploadOptions.style,
className: uploadOptions.className
});
cancelButton = /*#__PURE__*/React.createElement(Button, {
type: "button",
label: cancelLabel,
icon: cancelOptions.icon || 'pi pi-times',
onClick: clear,
disabled: cancelDisabled,
style: cancelOptions.style,
className: cancelOptions.className
});
}
if (hasFiles) {
filesList = createFiles();
progressBar = createProgressBarContent();
}
if (hasUploadedFiles) {
uplaodedFilesList = createUploadedFiles();
}
var header = /*#__PURE__*/React.createElement("div", {
className: headerClassName,
style: props.headerStyle
}, chooseButton, uploadButton, cancelButton);
if (props.headerTemplate) {
var defaultContentOptions = {
className: headerClassName,
chooseButton: chooseButton,
uploadButton: uploadButton,
cancelButton: cancelButton,
element: header,
props: props
};
header = ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
className: className,
style: props.style
}, otherProps), header, /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: contentClassName,
style: props.contentStyle,
onDragEnter: onDragEnter,
onDragOver: onDragOver,
onDragLeave: onDragLeave,
onDrop: onDrop
}, progressBar, /*#__PURE__*/React.createElement(Messages, {
ref: messagesRef
}), hasFiles ? filesList : null, hasUploadedFiles ? uplaodedFilesList : null, emptyContent));
};
var createBasic = function createBasic() {
var chooseOptions = props.chooseOptions;
var otherProps = FileUploadBase.getOtherProps(props);
var className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
var buttonClassName = classNames('p-button p-component p-fileupload-choose', {
'p-fileupload-choose-selected': hasFiles,
'p-disabled': disabled,
'p-focus': focusedState
}, chooseOptions.className);
var chooseIcon = chooseOptions.icon || classNames({
'pi pi-plus': !chooseOptions.icon && (!hasFiles || props.auto),
'pi pi-upload': !chooseOptions.icon && hasFiles && !props.auto
});
var labelClassName = 'p-button-label p-clickable';
var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React.createElement("span", {
className: labelClassName,
dangerouslySetInnerHTML: {
__html: ' '
}
}) : /*#__PURE__*/React.createElement("span", {
className: labelClassName
}, chooseButtonLabel);
var label = props.auto ? chooseLabel : /*#__PURE__*/React.createElement("span", {
className: labelClassName
}, hasFiles ? filesState[0].name : chooseLabel);
var icon = IconUtils.getJSXIcon(chooseIcon, {
className: 'p-button-icon p-button-icon-left'
}, {
props: props,
hasFiles: hasFiles
});
var input = !hasFiles && /*#__PURE__*/React.createElement("input", {
ref: fileInputRef,
type: "file",
accept: props.accept,
multiple: props.multiple,
disabled: disabled,
onChange: onFileSelect
});
return /*#__PURE__*/React.createElement("div", _extends({
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement(Messages, {
ref: messagesRef
}), /*#__PURE__*/React.createElement("span", {
className: buttonClassName,
style: chooseOptions.style,
onMouseUp: onSimpleUploaderClick,
onKeyDown: onKeyDown,
onFocus: onFocus,
onBlur: onBlur,
tabIndex: 0
}, icon, label, input, /*#__PURE__*/React.createElement(Ripple, null)));
};
if (props.mode === 'advanced') return createAdvanced();else if (props.mode === 'basic') return createBasic();
}));
FileUpload.displayName = 'FileUpload';
var GalleriaBase = {
defaultProps: {
__TYPE: 'Galleria',
id: null,
value: null,
activeIndex: 0,
fullScreen: false,
item: null,
thumbnail: null,
indicator: null,
caption: null,
className: null,
style: null,
header: null,
footer: null,
numVisible: 3,
responsiveOptions: null,
showItemNavigators: false,
showThumbnailNavigators: true,
showItemNavigatorsOnHover: false,
changeItemOnIndicatorHover: false,
circular: false,
autoPlay: false,
transitionInterval: 4000,
showThumbnails: true,
thumbnailsPosition: 'bottom',
verticalThumbnailViewPortHeight: '300px',
showIndicators: false,
showIndicatorsOnItem: false,
indicatorsPosition: 'bottom',
baseZIndex: 0,
transitionOptions: null,
onItemChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, GalleriaBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, GalleriaBase.defaultProps);
}
};
var GalleriaItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var next = function next() {
var nextItemIndex = props.activeItemIndex + 1;
props.onActiveItemChange({
index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
});
};
var prev = function prev() {
var prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
props.onActiveItemChange({
index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
});
};
var stopSlideShow = function stopSlideShow() {
if (props.slideShowActive && props.stopSlideShow) {
props.stopSlideShow();
}
};
var navBackward = function navBackward(e) {
stopSlideShow();
prev();
if (e && e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e) {
stopSlideShow();
next();
if (e && e.cancelable) {
e.preventDefault();
}
};
var onIndicatorClick = function onIndicatorClick(index) {
stopSlideShow();
props.onActiveItemChange({
index: index
});
};
var onIndicatorMouseEnter = function onIndicatorMouseEnter(index) {
if (props.changeItemOnIndicatorHover) {
stopSlideShow();
props.onActiveItemChange({
index: index
});
}
};
var onIndicatorKeyDown = function onIndicatorKeyDown(event, index) {
if (event.which === 13) {
stopSlideShow();
props.onActiveItemChange({
index: index
});
}
};
useMountEffect(function () {
if (props.autoPlay) {
props.startSlideShow();
}
});
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showItemNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === 0;
var buttonClassName = classNames('p-galleria-item-prev p-galleria-item-nav p-link', {
'p-disabled': isDisabled
});
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: buttonClassName,
onClick: navBackward,
disabled: isDisabled
}, /*#__PURE__*/React.createElement("span", {
className: "p-galleria-item-prev-icon pi pi-chevron-left"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showItemNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1;
var buttonClassName = classNames('p-galleria-item-next p-galleria-item-nav p-link', {
'p-disabled': isDisabled
});
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: buttonClassName,
onClick: navForward,
disabled: isDisabled
}, /*#__PURE__*/React.createElement("span", {
className: "p-galleria-item-next-icon pi pi-chevron-right"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createCaption = function createCaption() {
if (props.caption) {
var _content = props.caption(props.value[props.activeItemIndex]);
return /*#__PURE__*/React.createElement("div", {
className: "p-galleria-caption"
}, _content);
}
return null;
};
var createIndicator = function createIndicator(index) {
var key = 'p-galleria-indicator-' + index;
var isActive = props.activeItemIndex === index;
var className = classNames('p-galleria-indicator', {
'p-highlight': isActive
});
var indicator = props.indicator && props.indicator(index);
if (!indicator) {
indicator = /*#__PURE__*/React.createElement("button", {
type: "button",
tabIndex: -1,
className: "p-link"
}, /*#__PURE__*/React.createElement(Ripple, null));
}
return /*#__PURE__*/React.createElement("li", {
className: className,
key: key,
tabIndex: 0,
onClick: function onClick() {
return onIndicatorClick(index);
},
onMouseEnter: function onMouseEnter() {
return onIndicatorMouseEnter(index);
},
onKeyDown: function onKeyDown(e) {
return onIndicatorKeyDown(e, index);
}
}, indicator);
};
var createIndicators = function createIndicators() {
if (props.showIndicators) {
var className = classNames('p-galleria-indicators p-reset', props.indicatorsContentClassName);
var _indicators = [];
for (var i = 0; i < props.value.length; i++) {
_indicators.push(createIndicator(i));
}
return /*#__PURE__*/React.createElement("ul", {
className: className
}, _indicators);
}
return null;
};
var content = props.itemTemplate && props.itemTemplate(props.value[props.activeItemIndex]);
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var caption = createCaption();
var indicators = createIndicators();
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: "p-galleria-item-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "p-galleria-item-container"
}, backwardNavigator, /*#__PURE__*/React.createElement("div", {
className: "p-galleria-item"
}, content), forwardNavigator, caption), indicators);
}));
GalleriaItem.displayName = 'GalleriaItem';
var GalleriaThumbnailItem = /*#__PURE__*/React.memo(function (props) {
var onItemClick = function onItemClick(event) {
props.onItemClick({
originalEvent: event,
index: props.index
});
};
var onItemKeyDown = function onItemKeyDown(event) {
if (event.which === 13) {
props.onItemClick({
originalEvent: event,
index: props.index
});
}
};
var tabIndex = props.active ? 0 : null;
var content = props.template && props.template(props.item);
var className = classNames('p-galleria-thumbnail-item', {
'p-galleria-thumbnail-item-current': props.current,
'p-galleria-thumbnail-item-active': props.active,
'p-galleria-thumbnail-item-start': props.start,
'p-galleria-thumbnail-item-end': props.end
}, props.className);
return /*#__PURE__*/React.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement("div", {
className: "p-galleria-thumbnail-item-content",
tabIndex: tabIndex,
onClick: onItemClick,
onKeyDown: onItemKeyDown
}, content));
});
var GalleriaThumbnails = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var _React$useState = React.useState(props.numVisible),
_React$useState2 = _slicedToArray(_React$useState, 2),
numVisibleState = _React$useState2[0],
setNumVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
totalShiftedItemsState = _React$useState4[0],
setTotalShiftedItemsState = _React$useState4[1];
var itemsContainerRef = React.useRef(null);
var startPos = React.useRef(null);
var attributeSelector = React.useRef('');
var thumbnailsStyle = React.useRef(null);
var responsiveOptions = React.useRef(null);
var prevNumVisible = usePrevious(numVisibleState);
var prevActiveItemIndex = usePrevious(props.activeItemIndex);
var _useResizeListener = useResizeListener({
listener: function listener() {
calculatePosition();
},
when: props.responsiveOptions
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var step = function step(dir) {
var totalShiftedItems = totalShiftedItemsState + dir;
if (dir < 0 && -1 * totalShiftedItems + numVisibleState > props.value.length - 1) {
totalShiftedItems = numVisibleState - props.value.length;
} else if (dir > 0 && totalShiftedItems > 0) {
totalShiftedItems = 0;
}
if (props.circular) {
if (dir < 0 && props.value.length - 1 === props.activeItemIndex) {
totalShiftedItems = 0;
} else if (dir > 0 && props.activeItemIndex === 0) {
totalShiftedItems = numVisibleState - props.value.length;
}
}
if (itemsContainerRef.current) {
DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transform = props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
setTotalShiftedItemsState(totalShiftedItems);
};
var stopSlideShow = function stopSlideShow() {
if (props.slideShowActive && props.stopSlideShow) {
props.stopSlideShow();
}
};
var getMedianItemIndex = function getMedianItemIndex() {
var index = Math.floor(numVisibleState / 2);
return numVisibleState % 2 ? index : index - 1;
};
var navBackward = function navBackward(e) {
stopSlideShow();
var prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
var diff = prevItemIndex + totalShiftedItemsState;
if (numVisibleState - diff - 1 > getMedianItemIndex() && (-1 * totalShiftedItemsState !== 0 || props.circular)) {
step(1);
}
props.onActiveItemChange({
index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
});
if (e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e) {
stopSlideShow();
var nextItemIndex = props.activeItemIndex + 1;
if (nextItemIndex + totalShiftedItemsState > getMedianItemIndex() && (-1 * totalShiftedItemsState < getTotalPageNumber() - 1 || props.circular)) {
step(-1);
}
props.onActiveItemChange({
index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
});
if (e.cancelable) {
e.preventDefault();
}
};
var onItemClick = function onItemClick(event) {
stopSlideShow();
var selectedItemIndex = event.index;
if (selectedItemIndex !== props.activeItemIndex) {
var diff = selectedItemIndex + totalShiftedItemsState;
var dir = 0;
if (selectedItemIndex < props.activeItemIndex) {
dir = numVisibleState - diff - 1 - getMedianItemIndex();
if (dir > 0 && -1 * totalShiftedItemsState !== 0) {
step(dir);
}
} else {
dir = getMedianItemIndex() - diff;
if (dir < 0 && -1 * totalShiftedItemsState < getTotalPageNumber() - 1) {
step(dir);
}
}
props.onActiveItemChange({
index: selectedItemIndex
});
}
};
var onTransitionEnd = function onTransitionEnd(e) {
if (itemsContainerRef.current && e.propertyName === 'transform') {
DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = '';
}
};
var onTouchStart = function onTouchStart(e) {
var touchobj = e.changedTouches[0];
startPos.current = {
x: touchobj.pageX,
y: touchobj.pageY
};
};
var onTouchMove = function onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
};
var onTouchEnd = function onTouchEnd(e) {
var touchobj = e.changedTouches[0];
if (props.isVertical) {
changePageOnTouch(e, touchobj.pageY - startPos.current.y);
} else {
changePageOnTouch(e, touchobj.pageX - startPos.current.x);
}
};
var changePageOnTouch = function changePageOnTouch(e, diff) {
if (diff < 0) {
// left
navForward(e);
} else {
// right
navBackward(e);
}
};
var getTotalPageNumber = function getTotalPageNumber() {
return props.value.length > numVisibleState ? props.value.length - numVisibleState + 1 : 0;
};
var createStyle = function createStyle() {
if (!thumbnailsStyle.current) {
thumbnailsStyle.current = DomHandler.createInlineStyle(PrimeReact.nonce);
}
var innerHTML = "\n .p-galleria-thumbnail-items[".concat(attributeSelector.current, "] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100 / numVisibleState, "%\n }\n ");
if (props.responsiveOptions) {
responsiveOptions.current = _toConsumableArray(props.responsiveOptions);
responsiveOptions.current.sort(function (data1, data2) {
var value1 = data1.breakpoint;
var value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, PrimeReact.locale, PrimeReact.nullSortOrder);
});
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
innerHTML += "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-galleria-thumbnail-items[").concat(attributeSelector.current, "] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
}
}
thumbnailsStyle.current.innerHTML = innerHTML;
};
var calculatePosition = function calculatePosition() {
if (itemsContainerRef.current && responsiveOptions.current) {
var windowWidth = window.innerWidth;
var matchedResponsiveData = {
numVisible: props.numVisible
};
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (numVisibleState !== matchedResponsiveData.numVisible) {
setNumVisibleState(matchedResponsiveData.numVisible);
}
}
};
useMountEffect(function () {
if (itemsContainerRef.current) {
attributeSelector.current = UniqueComponentId();
itemsContainerRef.current.setAttribute(attributeSelector.current, '');
}
createStyle();
calculatePosition();
bindWindowResizeListener();
});
useUpdateEffect(function () {
var totalShiftedItems = totalShiftedItemsState;
if (prevNumVisible !== numVisibleState || prevActiveItemIndex !== props.activeItemIndex) {
if (props.activeItemIndex <= getMedianItemIndex()) {
totalShiftedItems = 0;
} else if (props.value.length - numVisibleState + getMedianItemIndex() < props.activeItemIndex) {
totalShiftedItems = numVisibleState - props.value.length;
} else if (props.value.length - numVisibleState < props.activeItemIndex && numVisibleState % 2 === 0) {
totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex() + 1;
} else {
totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex();
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
}
itemsContainerRef.current.style.transform = props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
if (prevActiveItemIndex !== props.activeItemIndex) {
DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
}
});
var createItems = function createItems() {
return props.value.map(function (item, index) {
var firstIndex = totalShiftedItemsState * -1;
var lastIndex = firstIndex + numVisibleState - 1;
var isActive = firstIndex <= index && lastIndex >= index;
var start = firstIndex === index;
var end = lastIndex === index;
var current = props.activeItemIndex === index;
return /*#__PURE__*/React.createElement(GalleriaThumbnailItem, {
key: index,
index: index,
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
onItemClick: onItemClick,
current: current
});
});
};
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showThumbnailNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === 0 || props.value.length <= numVisibleState;
var buttonClassName = classNames('p-galleria-thumbnail-prev p-link', {
'p-disabled': isDisabled
}),
iconClassName = classNames('p-galleria-thumbnail-prev-icon pi', {
'pi-chevron-left': !props.isVertical,
'pi-chevron-up': props.isVertical
});
return /*#__PURE__*/React.createElement("button", {
className: buttonClassName,
onClick: navBackward,
disabled: isDisabled
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showThumbnailNavigators) {
var isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1 || props.value.length <= numVisibleState;
var buttonClassName = classNames('p-galleria-thumbnail-next p-link', {
'p-disabled': isDisabled
});
var iconClassName = classNames('p-galleria-thumbnail-next-icon pi', {
'pi-chevron-right': !props.isVertical,
'pi-chevron-down': props.isVertical
});
return /*#__PURE__*/React.createElement("button", {
className: buttonClassName,
onClick: navForward,
disabled: isDisabled
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createContent = function createContent() {
var items = createItems();
var height = props.isVertical ? props.contentHeight : '';
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
return /*#__PURE__*/React.createElement("div", {
className: "p-galleria-thumbnail-container"
}, backwardNavigator, /*#__PURE__*/React.createElement("div", {
className: "p-galleria-thumbnail-items-container",
style: {
height: height
}
}, /*#__PURE__*/React.createElement("div", {
ref: itemsContainerRef,
className: "p-galleria-thumbnail-items",
onTransitionEnd: onTransitionEnd,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, items)), forwardNavigator);
};
var content = createContent();
return /*#__PURE__*/React.createElement("div", {
className: "p-galleria-thumbnail-wrapper"
}, content);
}));
GalleriaThumbnailItem.displayName = 'GalleriaThumbnailItem';
GalleriaThumbnails.displayName = 'GalleriaThumbnails';
var Galleria = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = GalleriaBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(props.numVisible),
_React$useState4 = _slicedToArray(_React$useState3, 2),
numVisibleState = _React$useState4[0],
setNumVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
slideShowActiveState = _React$useState6[0],
setSlideShowActiveState = _React$useState6[1];
var _React$useState7 = React.useState(props.activeIndex),
_React$useState8 = _slicedToArray(_React$useState7, 2),
activeIndexState = _React$useState8[0],
setActiveIndexState = _React$useState8[1];
var elementRef = React.useRef(null);
var previewContentRef = React.useRef(null);
var maskRef = React.useRef(null);
var activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
var isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
useInterval(function () {
onActiveItemChange({
index: props.circular && props.value.length - 1 === activeItemIndex ? 0 : activeItemIndex + 1
});
}, props.transitionInterval, slideShowActiveState);
var onActiveItemChange = function onActiveItemChange(event) {
if (props.onItemChange) {
props.onItemChange(event);
} else {
setActiveIndexState(event.index);
}
};
var show = function show() {
setVisibleState(true);
};
var hide = function hide() {
setVisibleState(false);
};
var onEnter = function onEnter() {
DomHandler.addClass(document.body, 'p-overflow-hidden');
};
var onEntering = function onEntering() {
ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']);
DomHandler.addMultipleClasses(maskRef.current, 'p-component-overlay p-component-overlay-enter');
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExit = function onExit() {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
props.onHide && props.onHide();
};
var isAutoPlayActive = function isAutoPlayActive() {
return slideShowActiveState;
};
var startSlideShow = function startSlideShow() {
setSlideShowActiveState(true);
};
var stopSlideShow = function stopSlideShow() {
setSlideShowActiveState(false);
};
var getPositionClassName = function getPositionClassName(preClassName, position) {
var positions = ['top', 'left', 'bottom', 'right'];
var pos = positions.find(function (item) {
return item === position;
});
return pos ? "".concat(preClassName, "-").concat(pos) : '';
};
React.useEffect(function () {
if (props.value && props.value.length < numVisibleState) {
setNumVisibleState(props.value.length);
}
}, [props.value, numVisibleState]);
React.useEffect(function () {
setNumVisibleState(props.numVisible);
}, [props.numVisible]);
useUnmountEffect(function () {
if (slideShowActiveState) {
stopSlideShow();
}
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
isAutoPlayActive: isAutoPlayActive,
startSlideShow: startSlideShow,
stopSlideShow: stopSlideShow,
getElement: function getElement() {
return elementRef.current;
},
getPreviewContent: function getPreviewContent() {
return previewContentRef.current;
}
};
});
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-galleria-header"
}, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
return /*#__PURE__*/React.createElement("div", {
className: "p-galleria-footer"
}, props.footer);
}
return null;
};
var createElement = function createElement() {
var otherProps = GalleriaBase.getOtherProps(props);
var thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
var indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
var galleriaClassName = classNames('p-galleria p-component', props.className, {
'p-galleria-fullscreen': props.fullScreen,
'p-galleria-indicator-onitem': props.showIndicatorsOnItem,
'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
}, thumbnailsPosClassName, indicatorPosClassName);
var closeIcon = props.fullScreen && /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-galleria-close p-link",
"aria-label": localeOption('close'),
onClick: hide
}, /*#__PURE__*/React.createElement("span", {
className: "p-galleria-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
var header = createHeader();
var footer = createFooter();
var element = /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: galleriaClassName,
style: props.style
}, otherProps), closeIcon, header, /*#__PURE__*/React.createElement("div", {
className: "p-galleria-content"
}, /*#__PURE__*/React.createElement(GalleriaItem, {
ref: previewContentRef,
value: props.value,
activeItemIndex: activeItemIndex,
onActiveItemChange: onActiveItemChange,
itemTemplate: props.item,
circular: props.circular,
caption: props.caption,
showIndicators: props.showIndicators,
changeItemOnIndicatorHover: props.changeItemOnIndicatorHover,
indicator: props.indicator,
showItemNavigators: props.showItemNavigators,
autoPlay: props.autoPlay,
slideShowActive: slideShowActiveState,
startSlideShow: startSlideShow,
stopSlideShow: stopSlideShow
}), props.showThumbnails && /*#__PURE__*/React.createElement(GalleriaThumbnails, {
value: props.value,
activeItemIndex: activeItemIndex,
onActiveItemChange: onActiveItemChange,
itemTemplate: props.thumbnail,
numVisible: numVisibleState,
responsiveOptions: props.responsiveOptions,
circular: props.circular,
isVertical: isVertical,
contentHeight: props.verticalThumbnailViewPortHeight,
showThumbnailNavigators: props.showThumbnailNavigators,
autoPlay: props.autoPlay,
slideShowActive: slideShowActiveState,
stopSlideShow: stopSlideShow
})), footer);
return element;
};
var createGalleria = function createGalleria() {
var element = createElement();
if (props.fullScreen) {
var maskClassName = classNames('p-galleria-mask', {
'p-galleria-visible': visibleState
});
var galleriaWrapper = /*#__PURE__*/React.createElement("div", {
ref: maskRef,
className: maskClassName
}, /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: elementRef,
classNames: "p-galleria",
"in": visibleState,
timeout: {
enter: 150,
exit: 150
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, element));
return /*#__PURE__*/React.createElement(Portal, {
element: galleriaWrapper
});
}
return element;
};
return ObjectUtils.isNotEmpty(props.value) && createGalleria();
}));
Galleria.displayName = 'Galleria';
var ImageBase = {
defaultProps: {
__TYPE: 'Image',
alt: null,
className: null,
downloadable: false,
height: null,
imageClassName: null,
imageStyle: null,
onError: null,
onHide: null,
onShow: null,
preview: false,
src: null,
template: null,
width: null,
zoomSrc: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ImageBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ImageBase.defaultProps);
}
};
var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ImageBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
maskVisibleState = _React$useState2[0],
setMaskVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
previewVisibleState = _React$useState4[0],
setPreviewVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
rotateState = _React$useState6[0],
setRotateState = _React$useState6[1];
var _React$useState7 = React.useState(1),
_React$useState8 = _slicedToArray(_React$useState7, 2),
scaleState = _React$useState8[0],
setScaleState = _React$useState8[1];
var elementRef = React.useRef(null);
var imageRef = React.useRef(null);
var maskRef = React.useRef(null);
var previewRef = React.useRef(null);
var previewClick = React.useRef(false);
var show = function show() {
if (props.preview) {
setMaskVisibleState(true);
setTimeout(function () {
setPreviewVisibleState(true);
}, 25);
}
};
var hide = function hide() {
if (!previewClick.current) {
setPreviewVisibleState(false);
setRotateState(0);
setScaleState(1);
}
previewClick.current = false;
};
var onPreviewImageClick = function onPreviewImageClick() {
previewClick.current = true;
};
var onDownload = function onDownload() {
var name = props.alt,
src = props.src;
DomHandler.saveAs({
name: name,
src: src
});
previewClick.current = true;
};
var rotateRight = function rotateRight() {
setRotateState(function (prevRotate) {
return prevRotate + 90;
});
previewClick.current = true;
};
var rotateLeft = function rotateLeft() {
setRotateState(function (prevRotate) {
return prevRotate - 90;
});
previewClick.current = true;
};
var zoomIn = function zoomIn() {
setScaleState(function (prevScale) {
return prevScale + 0.1;
});
previewClick.current = true;
};
var zoomOut = function zoomOut() {
setScaleState(function (prevScale) {
return prevScale - 0.1;
});
previewClick.current = true;
};
var onEntering = function onEntering() {
ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['modal']);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExit = function onExit() {
DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
};
var onExiting = function onExiting() {
props.onHide && props.onHide();
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
};
useUnmountEffect(function () {
maskRef.current && ZIndexUtils.clear(maskRef.current);
});
var createPreview = function createPreview() {
if (props.preview) {
return /*#__PURE__*/React.createElement("div", {
className: "p-image-preview-indicator",
onClick: show
}, content);
}
return null;
};
var createElement = function createElement() {
var downloadable = props.downloadable;
var imagePreviewStyle = {
transform: 'rotate(' + rotateState + 'deg) scale(' + scaleState + ')'
};
var zoomDisabled = scaleState <= 0.5 || scaleState >= 1.5;
// const rotateClassName = 'p-image-preview-rotate-' + rotateScale;
return /*#__PURE__*/React.createElement("div", {
ref: maskRef,
className: "p-image-mask p-component-overlay p-component-overlay-enter",
onClick: hide
}, /*#__PURE__*/React.createElement("div", {
className: "p-image-toolbar"
}, downloadable && /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
onClick: onDownload,
type: "button"
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-download"
})), /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
onClick: rotateRight,
type: "button"
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-refresh"
})), /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
onClick: rotateLeft,
type: "button"
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-undo"
})), /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
onClick: zoomOut,
type: "button",
disabled: zoomDisabled
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-search-minus"
})), /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
onClick: zoomIn,
type: "button",
disabled: zoomDisabled
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-search-plus"
})), /*#__PURE__*/React.createElement("button", {
className: "p-image-action p-link",
type: "button",
"aria-label": localeOption('close')
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-times"
}))), /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: previewRef,
classNames: "p-image-preview",
"in": previewVisibleState,
timeout: {
enter: 150,
exit: 150
},
unmountOnExit: true,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", {
ref: previewRef
}, /*#__PURE__*/React.createElement("img", {
src: props.zoomSrc || props.src,
className: "p-image-preview",
style: imagePreviewStyle,
onClick: onPreviewImageClick,
alt: props.alt
}))));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
},
getImage: function getImage() {
return imageRef.current;
}
};
});
var src = props.src,
alt = props.alt,
width = props.width,
height = props.height;
var otherProps = ImageBase.getOtherProps(props);
var containerClassName = classNames('p-image p-component', props.className, {
'p-image-preview-container': props.preview
});
var element = createElement();
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : /*#__PURE__*/React.createElement("i", {
className: "p-image-preview-icon pi pi-eye"
});
var preview = createPreview();
var image = props.src && /*#__PURE__*/React.createElement("img", {
ref: imageRef,
src: src,
className: props.imageClassName,
width: width,
height: height,
style: props.imageStyle,
alt: alt,
onError: props.onError
});
return /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
className: containerClassName
}, otherProps), image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: document.body
}));
}));
Image.displayName = 'Image';
var InplaceDisplayBase = {
defaultProps: {
__TYPE: 'InplaceDisplay',
children: undefined
},
getOtherProps: function getOtherProps(display) {
return ObjectUtils.getComponentDiffProps(display, InplaceDisplayBase.defaultProps);
}
};
var InplaceContentBase = {
defaultProps: {
__TYPE: 'InplaceContent',
children: undefined
},
getOtherProps: function getOtherProps(content) {
return ObjectUtils.getComponentDiffProps(content, InplaceContentBase.defaultProps);
}
};
var InplaceBase = {
defaultProps: {
__TYPE: 'Inplace',
style: null,
className: null,
active: false,
closable: false,
disabled: false,
tabIndex: 0,
ariaLabel: null,
onOpen: null,
onClose: null,
onToggle: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InplaceBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InplaceBase.defaultProps);
}
};
var InplaceDisplay = function InplaceDisplay(props) {
return props.children;
};
var InplaceContent = function InplaceContent(props) {
return props.children;
};
var Inplace = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InplaceBase.getProps(inProps);
var _React$useState = React.useState(props.active),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeState = _React$useState2[0],
setActiveState = _React$useState2[1];
var elementRef = React.useRef(null);
var active = props.onToggle ? props.active : activeState;
var open = function open(event) {
if (props.disabled) {
return;
}
props.onOpen && props.onOpen(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: true
});
} else {
setActiveState(true);
}
};
var close = function close(event) {
props.onClose && props.onClose(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: false
});
} else {
setActiveState(false);
}
};
var onDisplayKeyDown = function onDisplayKeyDown(event) {
if (event.key === 'Enter') {
open(event);
event.preventDefault();
}
};
var createDisplay = function createDisplay(content) {
var otherProps = InplaceDisplayBase.getOtherProps(content);
var className = classNames('p-inplace-display', {
'p-disabled': props.disabled
});
return /*#__PURE__*/React.createElement("div", _extends({
className: className
}, otherProps, {
onClick: open,
onKeyDown: onDisplayKeyDown,
tabIndex: props.tabIndex,
"aria-label": props.ariaLabel
}), content);
};
var createCloseButton = function createCloseButton() {
if (props.closable) {
return /*#__PURE__*/React.createElement(Button, {
type: "button",
className: "p-inplace-content-close",
icon: "pi pi-times",
onClick: close,
"aria-label": localeOption('close')
});
}
return null;
};
var createContent = function createContent(content) {
var otherProps = InplaceContentBase.getOtherProps(content);
var closeButton = createCloseButton();
return /*#__PURE__*/React.createElement("div", _extends({
className: "p-inplace-content"
}, otherProps), content, closeButton);
};
var createChildren = function createChildren() {
var validChildTypes = ['InplaceContent', 'InplaceDisplay'];
return React.Children.map(props.children, function (child) {
if (active && ObjectUtils.isValidChild(child, 'InplaceContent', validChildTypes)) {
return createContent(child);
} else if (!active && ObjectUtils.isValidChild(child, 'InplaceDisplay', validChildTypes)) {
return createDisplay(child);
}
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = InplaceBase.getOtherProps(props);
var children = createChildren();
var className = classNames('p-inplace p-component', {
'p-inplace-closable': props.closable
}, props.className);
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className
}, otherProps), children);
});
InplaceDisplay.displayName = 'InplaceDisplay';
InplaceContent.displayName = 'InplaceContent';
Inplace.displayName = 'Inplace';
var InputMaskBase = {
defaultProps: {
__TYPE: 'InputMask',
id: null,
value: null,
type: 'text',
mask: null,
slotChar: '_',
autoClear: true,
unmask: false,
style: null,
className: null,
placeholder: null,
size: null,
maxLength: null,
tabIndex: null,
disabled: false,
readOnly: false,
name: null,
required: false,
tooltip: null,
tooltipOptions: null,
onComplete: null,
onChange: null,
onFocus: null,
onBlur: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InputMaskBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InputMaskBase.defaultProps);
}
};
var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InputMaskBase.getProps(inProps);
var elementRef = React.useRef(ref);
var firstNonMaskPos = React.useRef(null);
var lastRequiredNonMaskPos = React.useRef(0);
var tests = React.useRef([]);
var buffer = React.useRef([]);
var len = React.useRef(0);
var oldVal = React.useRef(null);
var focus = React.useRef(false);
var focusText = React.useRef(null);
var isValueChecked = React.useRef(null);
var partialPosition = React.useRef(null);
var defaultBuffer = React.useRef(null);
var caretTimeoutId = React.useRef(null);
var androidChrome = React.useRef(false);
var caret = function caret(first, last) {
var range, begin, end;
var inputEl = elementRef.current;
if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
return;
}
if (typeof first === 'number') {
begin = first;
end = typeof last === 'number' ? last : begin;
if (inputEl.setSelectionRange) {
inputEl.setSelectionRange(begin, end);
} else if (inputEl['createTextRange']) {
range = inputEl['createTextRange']();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
} else {
if (inputEl.setSelectionRange) {
begin = inputEl.selectionStart;
end = inputEl.selectionEnd;
} else if (document['selection'] && document['selection'].createRange) {
range = document['selection'].createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return {
begin: begin,
end: end
};
}
};
var isCompleted = function isCompleted() {
for (var i = firstNonMaskPos.current; i <= lastRequiredNonMaskPos.current; i++) {
if (tests.current[i] && buffer.current[i] === getPlaceholder(i)) {
return false;
}
}
return true;
};
var getPlaceholder = React.useCallback(function (i) {
if (i < props.slotChar.length) {
return props.slotChar.charAt(i);
}
return props.slotChar.charAt(0);
}, [props.slotChar]);
var getValue = function getValue() {
return props.unmask ? getUnmaskedValue() : elementRef.current && elementRef.current.value;
};
var seekNext = function seekNext(pos) {
while (++pos < len.current && !tests.current[pos]);
return pos;
};
var seekPrev = function seekPrev(pos) {
while (--pos >= 0 && !tests.current[pos]);
return pos;
};
var shiftL = function shiftL(begin, end) {
var i, j;
if (begin < 0) {
return;
}
for (i = begin, j = seekNext(end); i < len.current; i++) {
if (tests.current[i]) {
if (j < len.current && tests.current[i].test(buffer.current[j])) {
buffer.current[i] = buffer.current[j];
buffer.current[j] = getPlaceholder(j);
} else {
break;
}
j = seekNext(j);
}
}
writeBuffer();
caret(Math.max(firstNonMaskPos.current, begin));
};
var shiftR = function shiftR(pos) {
var i, c, j, t;
for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
if (tests.current[i]) {
j = seekNext(i);
t = buffer.current[i];
buffer.current[i] = c;
if (j < len.current && tests.current[j].test(t)) {
c = t;
} else {
break;
}
}
}
};
var handleAndroidInput = function handleAndroidInput(e) {
var curVal = elementRef.current.value;
var pos = caret();
if (oldVal.current.length && oldVal.current.length > curVal.length) {
// a deletion or backspace happened
checkVal(true);
while (pos.begin > 0 && !tests.current[pos.begin - 1]) pos.begin--;
if (pos.begin === 0) {
while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) pos.begin++;
}
caret(pos.begin, pos.begin);
} else {
checkVal(true);
while (pos.begin < len.current && !tests.current[pos.begin]) pos.begin++;
caret(pos.begin, pos.begin);
}
if (props.onComplete && isCompleted()) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
updateModel(e);
};
var onBlur = function onBlur(e) {
focus.current = false;
checkVal();
updateModel(e);
updateFilledState();
props.onBlur && props.onBlur(e);
if (elementRef.current.value !== focusText.current) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
elementRef.current.dispatchEvent(event);
}
};
var onKeyDown = function onKeyDown(e) {
if (props.readOnly) {
return;
}
var k = e.which || e.keyCode,
pos,
begin,
end;
oldVal.current = elementRef.current.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
pos = caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
end = k === 46 ? seekNext(end) : end;
}
clearBuffer(begin, end);
shiftL(begin, end - 1);
updateModel(e);
e.preventDefault();
} else if (k === 13) {
// enter
onBlur(e);
updateModel(e);
} else if (k === 27) {
// escape
elementRef.current.value = focusText.current;
caret(0, checkVal());
updateModel(e);
e.preventDefault();
}
};
var onKeyPress = function onKeyPress(e) {
if (props.readOnly) {
return;
}
var k = e.which || e.keyCode,
pos = caret(),
p,
c,
next,
completed;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
//Ignore
return;
} else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
clearBuffer(pos.begin, pos.end);
shiftL(pos.begin, pos.end - 1);
}
p = seekNext(pos.begin - 1);
if (p < len.current) {
c = String.fromCharCode(k);
if (tests.current[p].test(c)) {
shiftR(p);
buffer.current[p] = c;
writeBuffer();
next = seekNext(p);
if (DomHandler.isAndroid()) {
//Path for CSP Violation on FireFox OS 1.1
var proxy = function proxy() {
caret(next);
};
setTimeout(proxy, 0);
} else {
caret(next);
}
if (pos.begin <= lastRequiredNonMaskPos.current) {
completed = isCompleted();
}
}
}
e.preventDefault();
}
updateModel(e);
if (props.onComplete && completed) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var clearBuffer = function clearBuffer(start, end) {
var i;
for (i = start; i < end && i < len.current; i++) {
if (tests.current[i]) {
buffer.current[i] = getPlaceholder(i);
}
}
};
var writeBuffer = function writeBuffer() {
elementRef.current.value = buffer.current.join('');
};
var checkVal = function checkVal(allow) {
isValueChecked.current = true;
//try to place characters where they belong
var test = elementRef.current.value,
lastMatch = -1,
i,
c,
pos;
for (i = 0, pos = 0; i < len.current; i++) {
if (tests.current[i]) {
buffer.current[i] = getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (tests.current[i].test(c)) {
buffer.current[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
clearBuffer(i + 1, len.current);
break;
}
} else {
if (buffer.current[i] === test.charAt(pos)) {
pos++;
}
if (i < partialPosition.current) {
lastMatch = i;
}
}
}
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition.current) {
if (props.autoClear || buffer.current.join('') === defaultBuffer.current) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if (elementRef.current.value) elementRef.current.value = '';
clearBuffer(0, len.current);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
}
return partialPosition.current ? i : firstNonMaskPos.current;
};
var onFocus = function onFocus(e) {
if (props.readOnly) {
return;
}
focus.current = true;
clearTimeout(caretTimeoutId.current);
var pos;
focusText.current = elementRef.current.value;
pos = checkVal();
caretTimeoutId.current = setTimeout(function () {
if (elementRef.current !== document.activeElement) {
return;
}
writeBuffer();
if (pos === props.mask.replace('?', '').length) {
caret(0, pos);
} else {
caret(pos);
}
updateFilledState();
}, 10);
props.onFocus && props.onFocus(e);
};
var onInput = function onInput(event) {
androidChrome.current ? handleAndroidInput(event) : handleInputChange(event);
};
var handleInputChange = function handleInputChange(e) {
if (props.readOnly) {
return;
}
var pos = checkVal(true);
caret(pos);
updateModel(e);
if (props.onComplete && isCompleted()) {
props.onComplete({
originalEvent: e,
value: getValue()
});
}
};
var getUnmaskedValue = React.useCallback(function () {
var unmaskedBuffer = [];
for (var i = 0; i < buffer.current.length; i++) {
var c = buffer.current[i];
if (tests.current[i] && c !== getPlaceholder(i)) {
unmaskedBuffer.push(c);
}
}
return unmaskedBuffer.join('');
}, [getPlaceholder]);
var updateModel = function updateModel(e) {
if (props.onChange) {
var val = props.unmask ? getUnmaskedValue() : e && e.target.value;
props.onChange({
originalEvent: e,
value: defaultBuffer.current !== val ? val : '',
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: defaultBuffer.current !== val ? val : ''
}
});
}
};
var updateFilledState = function updateFilledState() {
if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) DomHandler.addClass(elementRef.current, 'p-filled');else DomHandler.removeClass(elementRef.current, 'p-filled');
};
var updateValue = function updateValue(allow) {
var pos;
if (elementRef.current) {
if (props.value == null) {
elementRef.current.value = '';
} else {
elementRef.current.value = props.value;
pos = checkVal(allow);
setTimeout(function () {
if (elementRef.current) {
writeBuffer();
return checkVal(allow);
}
}, 10);
}
focusText.current = elementRef.current.value;
}
updateFilledState();
return pos;
};
var isValueUpdated = React.useCallback(function () {
return props.unmask ? props.value !== getUnmaskedValue() : defaultBuffer.current !== elementRef.current.value && elementRef.current.value !== props.value;
}, [props.unmask, props.value, getUnmaskedValue]);
var init = function init() {
if (props.mask) {
tests.current = [];
partialPosition.current = props.mask.length;
len.current = props.mask.length;
firstNonMaskPos.current = null;
var defs = {
9: '[0-9]',
a: '[A-Za-z]',
'*': '[A-Za-z0-9]'
};
androidChrome.current = DomHandler.isChrome() && DomHandler.isAndroid();
var maskTokens = props.mask.split('');
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c === '?') {
len.current--;
partialPosition.current = i;
} else if (defs[c]) {
tests.current.push(new RegExp(defs[c]));
if (firstNonMaskPos.current === null) {
firstNonMaskPos.current = tests.current.length - 1;
}
if (i < partialPosition.current) {
lastRequiredNonMaskPos.current = tests.current.length - 1;
}
} else {
tests.current.push(null);
}
}
buffer.current = [];
for (var _i = 0; _i < maskTokens.length; _i++) {
var _c = maskTokens[_i];
if (_c !== '?') {
if (defs[_c]) buffer.current.push(getPlaceholder(_i));else buffer.current.push(_c);
}
}
defaultBuffer.current = buffer.current.join('');
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
useMountEffect(function () {
init();
updateValue();
});
useUpdateEffect(function () {
init();
caret(updateValue(true));
if (props.unmask) {
updateModel();
}
}, [props.mask]);
useUpdateEffect(function () {
if (isValueUpdated()) {
updateValue();
}
}, [isValueUpdated]);
var otherProps = InputMaskBase.getOtherProps(props);
var className = classNames('p-inputmask', props.className);
return /*#__PURE__*/React.createElement(InputText, _extends({
ref: elementRef,
id: props.id,
type: props.type,
name: props.name,
style: props.style,
className: className
}, otherProps, {
placeholder: props.placeholder,
size: props.size,
maxLength: props.maxLength,
tabIndex: props.tabIndex,
disabled: props.disabled,
readOnly: props.readOnly,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyPress: onKeyPress,
onInput: onInput,
onPaste: handleInputChange,
required: props.required,
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions
}));
}));
InputMask.displayName = 'InputMask';
var InputSwitchBase = {
defaultProps: {
__TYPE: 'InputSwitch',
checked: false,
className: null,
disabled: false,
falseValue: false,
id: null,
inputId: null,
inputRef: null,
name: null,
onBlur: null,
onChange: null,
onFocus: null,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
trueValue: true,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InputSwitchBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InputSwitchBase.defaultProps);
}
};
var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InputSwitchBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var checked = props.checked === props.trueValue;
var onClick = function onClick(event) {
if (props.disabled) {
return;
}
toggle(event);
DomHandler.focus(inputRef.current);
event.preventDefault();
};
var toggle = function toggle(event) {
if (props.onChange) {
var value = checked ? props.falseValue : props.trueValue;
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputSwitchBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-inputswitch p-component', {
'p-inputswitch-checked': checked,
'p-disabled': props.disabled,
'p-focus': focusedState
}, props.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick,
role: "checkbox",
"aria-checked": checked
}), /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
type: "checkbox",
id: props.inputId,
name: props.name,
checked: checked,
onChange: toggle,
onFocus: onFocus,
onBlur: onBlur,
disabled: props.disabled,
role: "switch",
tabIndex: props.tabIndex,
"aria-checked": checked
}, ariaProps))), /*#__PURE__*/React.createElement("span", {
className: "p-inputswitch-slider"
})), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
InputSwitch.displayName = 'InputSwitch';
var InputTextareaBase = {
defaultProps: {
__TYPE: 'InputTextarea',
autoResize: false,
keyfilter: null,
onBlur: null,
onFocus: null,
onInput: null,
onKeyDown: null,
onKeyUp: null,
onPaste: null,
tooltip: null,
tooltipOptions: null,
validateOnly: false,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, InputTextareaBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, InputTextareaBase.defaultProps);
}
};
var InputTextarea = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = InputTextareaBase.getProps(inProps);
var elementRef = React.useRef(ref);
var cachedScrollHeight = React.useRef(0);
var onFocus = function onFocus(event) {
if (props.autoResize) {
resize();
}
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
if (props.autoResize) {
resize();
}
props.onBlur && props.onBlur(event);
};
var onKeyUp = function onKeyUp(event) {
if (props.autoResize) {
resize();
}
props.onKeyUp && props.onKeyUp(event);
};
var onKeyDown = function onKeyDown(event) {
props.onKeyDown && props.onKeyDown(event);
if (props.keyfilter) {
KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
}
};
var onPaste = function onPaste(event) {
props.onPaste && props.onPaste(event);
if (props.keyfilter) {
KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
}
};
var onInput = function onInput(event) {
if (props.autoResize) {
resize();
}
props.onInput && props.onInput(event);
var target = event.target;
ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
};
var resize = function resize(initial) {
var inputEl = elementRef.current;
if (inputEl && DomHandler.isVisible(inputEl)) {
if (!cachedScrollHeight.current) {
cachedScrollHeight.current = inputEl.scrollHeight;
inputEl.style.overflow = 'hidden';
}
if (cachedScrollHeight.current !== inputEl.scrollHeight || initial) {
inputEl.style.height = '';
inputEl.style.height = inputEl.scrollHeight + 'px';
if (parseFloat(inputEl.style.height) >= parseFloat(inputEl.style.maxHeight)) {
inputEl.style.overflowY = 'scroll';
inputEl.style.height = inputEl.style.maxHeight;
} else {
inputEl.style.overflow = 'hidden';
}
cachedScrollHeight.current = inputEl.scrollHeight;
}
}
};
var currentValue = elementRef.current && elementRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
React.useEffect(function () {
if (props.autoResize) {
resize(true);
}
}, [props.autoResize]);
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = InputTextareaBase.getOtherProps(props);
var className = classNames('p-inputtextarea p-inputtext p-component', {
'p-disabled': props.disabled,
'p-filled': isFilled,
'p-inputtextarea-resizable': props.autoResize
}, props.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", _extends({
ref: elementRef
}, otherProps, {
className: className,
onFocus: onFocus,
onBlur: onBlur,
onKeyUp: onKeyUp,
onKeyDown: onKeyDown,
onInput: onInput,
onPaste: onPaste
})), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
InputTextarea.displayName = 'InputTextarea';
var KnobBase = {
defaultProps: {
__TYPE: 'Knob',
id: null,
style: null,
className: null,
value: null,
size: 100,
disabled: false,
readOnly: false,
showValue: true,
step: 1,
min: 0,
max: 100,
strokeWidth: 14,
name: null,
valueColor: 'var(--primary-color, Black)',
rangeColor: 'var(--surface-border, LightGray)',
textColor: 'var(--text-color-secondary, Black)',
valueTemplate: '{value}',
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, KnobBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, KnobBase.defaultProps);
}
};
var radius = 40;
var midX = 50;
var midY = 50;
var minRadians = 4 * Math.PI / 3;
var maxRadians = -Math.PI / 3;
var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = KnobBase.getProps(inProps);
var elementRef = React.useRef(null);
var enabled = !props.disabled && !props.readOnly;
var _useEventListener = useEventListener({
target: 'window',
type: 'mousemove',
listener: function listener(event) {
updateValue(event.offsetX, event.offsetY);
event.preventDefault();
},
when: enabled
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindWindowMouseMoveListener = _useEventListener2[0],
unbindWindowMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'mouseup',
listener: function listener(event) {
unbindWindowMouseMoveListener();
unbindWindowMouseUpListener();
event.preventDefault();
},
when: enabled
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindWindowMouseUpListener = _useEventListener4[0],
unbindWindowMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
target: 'window',
type: 'touchmove',
listener: function listener(event) {
if (event.touches.length === 1) {
var rect = elementRef.current.getBoundingClientRect();
var touch = event.targetTouches.item(0);
var offsetX = touch.clientX - rect.left;
var offsetY = touch.clientY - rect.top;
updateValue(offsetX, offsetY);
event.preventDefault();
}
},
when: enabled
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindWindowTouchMoveListener = _useEventListener6[0],
unbindWindowTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
target: 'window',
type: 'touchend',
listener: function listener() {
unbindWindowTouchMoveListener();
unbindWindowTouchEndListener();
},
when: enabled
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindWindowTouchEndListener = _useEventListener8[0],
unbindWindowTouchEndListener = _useEventListener8[1];
var mapRange = function mapRange(x, inMin, inMax, outMin, outMax) {
return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
};
var zeroRadians = function zeroRadians() {
return mapRange(props.min > 0 && props.max > 0 ? props.min : 0, props.min, props.max, minRadians, maxRadians);
};
var valueRadians = function valueRadians() {
return mapRange(props.value, props.min, props.max, minRadians, maxRadians);
};
var minX = function minX() {
return midX + Math.cos(minRadians) * radius;
};
var minY = function minY() {
return midY - Math.sin(minRadians) * radius;
};
var maxX = function maxX() {
return midX + Math.cos(maxRadians) * radius;
};
var maxY = function maxY() {
return midY - Math.sin(maxRadians) * radius;
};
var zeroX = function zeroX() {
return midX + Math.cos(zeroRadians()) * radius;
};
var zeroY = function zeroY() {
return midY - Math.sin(zeroRadians()) * radius;
};
var valueX = function valueX() {
return midX + Math.cos(valueRadians()) * radius;
};
var valueY = function valueY() {
return midY - Math.sin(valueRadians()) * radius;
};
var largeArc = function largeArc() {
return Math.abs(zeroRadians() - valueRadians()) < Math.PI ? 0 : 1;
};
var sweep = function sweep() {
return valueRadians() > zeroRadians() ? 0 : 1;
};
var rangePath = "M ".concat(minX(), " ").concat(minY(), " A ").concat(radius, " ").concat(radius, " 0 1 1 ").concat(maxX(), " ").concat(maxY());
var valuePath = "M ".concat(zeroX(), " ").concat(zeroY(), " A ").concat(radius, " ").concat(radius, " 0 ").concat(largeArc(), " ").concat(sweep(), " ").concat(valueX(), " ").concat(valueY());
var valueToDisplay = function valueToDisplay() {
return props.valueTemplate.replace('{value}', props.value.toString());
};
var updateValue = function updateValue(offsetX, offsetY) {
var dx = offsetX - props.size / 2;
var dy = props.size / 2 - offsetY;
var angle = Math.atan2(dy, dx);
var start = -Math.PI / 2 - Math.PI / 6;
updateModel(angle, start);
};
var updateModel = function updateModel(angle, start) {
var mappedValue;
if (angle > maxRadians) mappedValue = mapRange(angle, minRadians, maxRadians, props.min, props.max);else if (angle < start) mappedValue = mapRange(angle + 2 * Math.PI, minRadians, maxRadians, props.min, props.max);else return;
if (props.onChange) {
props.onChange({
value: Math.round((mappedValue - props.min) / props.step) * props.step + props.min
});
}
};
var onClick = function onClick(event) {
if (!props.disabled && !props.readOnly) {
updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
}
};
var onMouseDown = function onMouseDown(event) {
bindWindowMouseMoveListener();
bindWindowMouseUpListener();
event.preventDefault();
};
var onMouseUp = function onMouseUp() {
unbindWindowMouseMoveListener();
unbindWindowMouseUpListener();
};
var onTouchStart = function onTouchStart() {
bindWindowTouchMoveListener();
bindWindowTouchEndListener();
};
var onTouchEnd = function onTouchEnd() {
unbindWindowTouchMoveListener();
unbindWindowTouchEndListener();
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = KnobBase.getOtherProps(props);
var className = classNames('p-knob p-component', {
'p-disabled': props.disabled
}, props.className);
var text = props.showValue && /*#__PURE__*/React.createElement("text", {
x: 50,
y: 57,
textAnchor: 'middle',
fill: props.textColor,
className: 'p-knob-text',
name: props.name
}, valueToDisplay());
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement("svg", {
viewBox: "0 0 100 100",
width: props.size,
height: props.size,
onClick: onClick,
onMouseDown: onMouseDown,
onMouseUp: onMouseUp,
onTouchStart: onTouchStart,
onTouchEnd: onTouchEnd
}, /*#__PURE__*/React.createElement("path", {
d: rangePath,
strokeWidth: props.strokeWidth,
stroke: props.rangeColor,
className: 'p-knob-range'
}), /*#__PURE__*/React.createElement("path", {
d: valuePath,
strokeWidth: props.strokeWidth,
stroke: props.valueColor,
className: 'p-knob-value'
}), text));
}));
Knob.displayName = 'Knob';
var ListBoxBase = {
defaultProps: {
__TYPE: 'ListBox',
className: null,
dataKey: null,
disabled: null,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterInputProps: null,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
filterValue: null,
id: null,
itemTemplate: null,
listClassName: null,
listStyle: null,
metaKeySelection: false,
multiple: false,
onChange: null,
onFilterValueChange: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ListBoxBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ListBoxBase.defaultProps);
}
};
var ListBoxHeader = /*#__PURE__*/React.memo(function (props) {
var filterOptions = {
filter: function filter(e) {
return onFilter(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: event.target.value
});
}
};
var createHeader = function createHeader() {
var content = /*#__PURE__*/React.createElement("div", {
className: "p-listbox-filter-container"
}, /*#__PURE__*/React.createElement(InputText, _extends({
type: "text",
value: props.filter,
onChange: onFilter,
className: "p-listbox-filter",
disabled: props.disabled,
placeholder: props.filterPlaceholder
}, props.filterInputProps)), /*#__PURE__*/React.createElement("span", {
className: "p-listbox-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-listbox-filter-container',
element: content,
filterOptions: filterOptions,
filterInputChange: onFilter,
filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-listbox-header"
}, content);
};
var content = createHeader();
return /*#__PURE__*/React.createElement(React.Fragment, null, content);
});
ListBoxHeader.displayName = 'ListBoxHeader';
var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: props.option
});
}
event.preventDefault();
};
var onTouchEnd = function onTouchEnd(event) {
if (props.onTouchEnd) {
props.onTouchEnd({
originalEvent: event,
option: props.option
});
}
};
var onKeyDown = function onKeyDown(event) {
var item = event.currentTarget;
switch (event.which) {
//down
case 40:
var nextItem = findNextItem(item);
nextItem && nextItem.focus();
event.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(item);
prevItem && prevItem.focus();
event.preventDefault();
break;
//enter
case 13:
onClick(event);
event.preventDefault();
break;
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || DomHandler.hasClass(nextItem, 'p-listbox-item-group') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || DomHandler.hasClass(prevItem, 'p-listbox-item-group') ? findPrevItem(prevItem) : prevItem : null;
};
var className = classNames('p-listbox-item', {
'p-highlight': props.selected,
'p-disabled': props.disabled
}, props.option.className);
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
return /*#__PURE__*/React.createElement("li", {
className: className,
style: props.style,
onClick: onClick,
onTouchEnd: onTouchEnd,
onKeyDown: onKeyDown,
tabIndex: "-1",
"aria-label": props.label,
key: props.label,
role: "option",
"aria-selected": props.selected,
"aria-disabled": props.disabled
}, content, /*#__PURE__*/React.createElement(Ripple, null));
});
ListBoxItem.displayName = 'ListBoxItem';
function ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createForOfIteratorHelper$8(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$8(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$8(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$8(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$8(o, minLen); }
function _arrayLikeToArray$8(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ListBoxBase.getProps(inProps);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
filterValueState = _React$useState2[0],
setFilterValueState = _React$useState2[1];
var elementRef = React.useRef(null);
var virtualScrollerRef = React.useRef(null);
var optionTouched = React.useRef(false);
var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
var hasFilter = filteredValue && filteredValue.trim().length > 0;
var onOptionSelect = function onOptionSelect(event) {
var option = event.option;
if (props.disabled || isOptionDisabled(option)) {
return;
}
props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option);
optionTouched.current = false;
};
var onOptionTouchEnd = function onOptionTouchEnd() {
if (props.disabled) {
return;
}
optionTouched.current = true;
};
var onOptionSelectSingle = function onOptionSelectSingle(event, option) {
var selected = isSelected(option);
var valueChanged = false;
var value = null;
var metaSelection = optionTouched.current ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected) {
if (metaKey) {
value = null;
valueChanged = true;
}
} else {
value = getOptionValue(option);
valueChanged = true;
}
} else {
value = selected ? null : getOptionValue(option);
valueChanged = true;
}
if (valueChanged) {
updateModel(event, value);
}
};
var onOptionSelectMultiple = function onOptionSelectMultiple(event, option) {
var selected = isSelected(option);
var valueChanged = false;
var value = null;
var metaSelection = optionTouched ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected) {
if (metaKey) value = removeOption(option);else value = [getOptionValue(option)];
valueChanged = true;
} else {
value = metaKey ? props.value || [] : [];
value = [].concat(_toConsumableArray(value), [getOptionValue(option)]);
valueChanged = true;
}
} else {
if (selected) value = removeOption(option);else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
valueChanged = true;
}
if (valueChanged) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onFilter = function onFilter(event) {
virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
var originalEvent = event.originalEvent,
value = event.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: originalEvent,
value: value
});
} else {
setFilterValueState(value);
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var removeOption = function removeOption(option) {
return props.value.filter(function (val) {
return !ObjectUtils.equals(val, getOptionValue(option), props.dataKey);
});
};
var getSelectedOptionIndex = function getSelectedOptionIndex() {
if (props.value != null && visibleOptions) {
if (props.optionGroupLabel) {
for (var i = 0; i < visibleOptions.length; i++) {
var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(visibleOptions[i]));
if (selectedOptionIndex !== -1) {
return {
group: i,
option: selectedOptionIndex
};
}
}
} else {
return findOptionIndexInList(props.value, visibleOptions);
}
}
return -1;
};
var equalityKey = function equalityKey() {
return props.optionValue ? null : props.dataKey;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
var key = equalityKey();
return list.findIndex(function (item) {
return ObjectUtils.equals(value, getOptionValue(item), key);
});
};
var isSelected = function isSelected(option) {
var optionValue = getOptionValue(option);
var key = equalityKey();
return props.multiple && props.value ? props.value.some(function (val) {
return ObjectUtils.equals(val, optionValue, key);
}) : ObjectUtils.equals(props.value, optionValue, key);
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option['disabled'] !== undefined ? option['disabled'] : false;
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var getVisibleOptions = function getVisibleOptions() {
if (hasFilter) {
var filterValue = filteredValue.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator = _createForOfIteratorHelper$8(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optgroup = _step.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$e(_objectSpread$e({}, optgroup), {
items: filteredSubOptions
}));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return filteredGroups;
} else {
return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
} else {
return props.options;
}
};
var scrollToSelectedIndex = function scrollToSelectedIndex() {
if (virtualScrollerRef.current) {
var selectedIndex = getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getVirtualScroller: function getVirtualScroller() {
return virtualScrollerRef.current;
}
};
});
useMountEffect(function () {
scrollToSelectedIndex();
});
var createHeader = function createHeader() {
return props.filter ? /*#__PURE__*/React.createElement(ListBoxHeader, {
filter: filteredValue,
onFilter: onFilter,
resetFilter: resetFilter,
filterTemplate: props.filterTemplate,
disabled: props.disabled,
filterPlaceholder: props.filterPlaceholder,
filterInputProps: props.filterInputProps
}) : null;
};
var createGroupChildren = function createGroupChildren(optionGroup, style) {
var groupChildren = getOptionGroupChildren(optionGroup);
return groupChildren.map(function (option, j) {
var optionLabel = getOptionLabel(option);
var optionKey = j + '_' + getOptionRenderKey(option);
var disabled = isOptionDisabled(option);
var tabIndex = disabled ? null : props.tabIndex || 0;
return /*#__PURE__*/React.createElement(ListBoxItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: isSelected(option),
onClick: onOptionSelect,
onTouchEnd: onOptionTouchEnd,
tabIndex: tabIndex,
disabled: disabled
});
});
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (props.optionGroupLabel) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
var groupChildrenContent = createGroupChildren(option, style);
var key = index + '_' + getOptionGroupRenderKey(option);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", {
className: "p-listbox-item-group",
style: style,
role: "group"
}, groupContent), groupChildrenContent);
} else {
var optionLabel = getOptionLabel(option);
var optionKey = index + '_' + getOptionRenderKey(option);
var disabled = isOptionDisabled(option);
var tabIndex = disabled ? null : props.tabIndex || 0;
return /*#__PURE__*/React.createElement(ListBoxItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: isSelected(option),
onClick: onOptionSelect,
onTouchEnd: onOptionTouchEnd,
tabIndex: tabIndex,
disabled: disabled
});
}
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(visibleOptions)) {
return visibleOptions.map(createItem);
} else if (hasFilter) {
return createEmptyMessage(props.emptyFilterMessage, true);
}
return createEmptyMessage(props.emptyMessage);
};
var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
return /*#__PURE__*/React.createElement("li", {
className: "p-listbox-empty-message"
}, message);
};
var createList = function createList() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$e(_objectSpread$e({}, props.virtualScrollerOptions), {
items: visibleOptions,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$e(_objectSpread$e({}, event), {
filter: visibleOptions
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var className = classNames('p-listbox-list', options.className);
return /*#__PURE__*/React.createElement("ul", _extends({
ref: options.contentRef,
style: options.style,
className: className,
role: "listbox",
"aria-multiselectable": props.multiple
}, ariaProps), options.children);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps));
} else {
var items = createItems();
return /*#__PURE__*/React.createElement("ul", _extends({
className: "p-listbox-list",
role: "listbox",
"aria-multiselectable": props.multiple
}, ariaProps), items);
}
};
var visibleOptions = getVisibleOptions();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = ListBoxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-listbox p-component', {
'p-disabled': props.disabled
}, props.className);
var listClassName = classNames('p-listbox-list-wrapper', props.listClassName);
var list = createList();
var header = createHeader();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), header, /*#__PURE__*/React.createElement("div", {
className: listClassName,
style: props.listStyle
}, list)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
ListBox.displayName = 'ListBox';
var MegaMenuBase = {
defaultProps: {
__TYPE: 'MegaMenu',
id: null,
model: null,
style: null,
className: null,
orientation: 'horizontal',
breakpoint: undefined,
scrollHeight: '400px',
start: null,
end: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MegaMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MegaMenuBase.defaultProps);
}
};
var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MegaMenuBase.getProps(inProps);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
attributeSelectorState = _React$useState4[0],
setAttributeSelectorState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
mobileActiveState = _React$useState6[0],
setMobileActiveState = _React$useState6[1];
var elementRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var menuButtonRef = React.useRef(null);
var horizontal = props.orientation === 'horizontal';
var vertical = props.orientation === 'vertical';
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if ((!isMobileMode || mobileActiveState) && isOutsideClicked(event)) {
setActiveItemState(null);
setMobileActiveState(false);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindDocumentClickListener = _useEventListener2[0];
var _useResizeListener = useResizeListener({
listener: function listener() {
if (!isMobileMode || mobileActiveState) {
setActiveItemState(null);
setMobileActiveState(false);
}
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindDocumentResizeListener = _useResizeListener2[0];
var onLeafClick = function onLeafClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
setActiveItemState(null);
setMobileActiveState(false);
};
var onCategoryMouseEnter = function onCategoryMouseEnter(event, item) {
if (item.disabled || isMobileMode) {
event.preventDefault();
return;
}
if (activeItemState) {
setActiveItemState(item);
}
};
var onCategoryClick = function onCategoryClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: props.item
});
}
if (item.items) {
activeItemState && activeItemState === item ? setActiveItemState(null) : setActiveItemState(item);
}
event.preventDefault();
};
var onCategoryKeyDown = function onCategoryKeyDown(event, item) {
var listItem = event.currentTarget.parentElement;
switch (event.which) {
//down
case 40:
horizontal ? expandMenu(item) : navigateToNextItem(listItem);
event.preventDefault();
break;
//up
case 38:
vertical ? navigateToPrevItem(listItem) : item.items && item === activeItemState && collapseMenu();
event.preventDefault();
break;
//right
case 39:
horizontal ? navigateToNextItem(listItem) : expandMenu(item);
event.preventDefault();
break;
//left
case 37:
horizontal ? navigateToPrevItem(listItem) : item.items && item === activeItemState && collapseMenu();
event.preventDefault();
break;
}
};
var expandMenu = function expandMenu(item) {
if (item.items) {
setActiveItemState(item);
}
};
var collapseMenu = function collapseMenu(item) {
setActiveItemState(null);
};
var toggle = function toggle(event) {
event.preventDefault();
setMobileActiveState(function (prevMobileActive) {
return !prevMobileActive;
});
setActiveItemState(null);
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
};
var navigateToNextItem = function navigateToNextItem(listItem) {
var nextItem = findNextItem(listItem);
nextItem && nextItem.children[0].focus();
};
var navigateToPrevItem = function navigateToPrevItem(listItem) {
var prevItem = findPrevItem(listItem);
prevItem && prevItem.children[0].focus();
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || menuButtonRef.current && menuButtonRef.current.contains(event.target));
};
var getColumnClassName = function getColumnClassName(category) {
var length = category.items ? category.items.length : 0;
var columnClass;
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
}
return columnClass;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
}
bindDocumentClickListener();
bindDocumentResizeListener();
});
useUpdateEffect(function () {
var currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');
if (activeItemState && !isMobileMode) {
ZIndexUtils.set('menu', currentPanel, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']);
}
if (isMobileMode) {
currentPanel && currentPanel.previousElementSibling.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
return function () {
ZIndexUtils.clear(currentPanel);
};
}, [activeItemState]);
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator",
role: "separator"
});
};
var createSubmenuIcon = function createSubmenuIcon(item) {
if (item.items) {
var _className = classNames('p-submenu-icon pi', {
'pi-angle-down': horizontal,
'pi-angle-right': vertical
});
return /*#__PURE__*/React.createElement("span", {
className: _className
});
}
return null;
};
var createSubmenuItem = function createSubmenuItem(item, index) {
if (item.visible === false) {
return null;
}
if (item.separator) {
return createSeparator(index);
} else {
var key = item.label + '_' + index;
var _className2 = classNames('p-menuitem', item.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames(item.icon, 'p-menuitem-icon');
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: linkClassName,
target: item.target,
onClick: function onClick(event) {
return onLeafClick(event, item);
},
role: "menuitem",
"aria-disabled": item.disabled
}, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onLeafClick(event, item);
},
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
id: item.id,
className: _className2,
style: item.style,
role: "none"
}, content);
}
};
var createSubmenu = function createSubmenu(submenu) {
if (submenu.visible === false) {
return null;
}
var className = classNames('p-megamenu-submenu-header', {
'p-disabled': submenu.disabled
}, submenu.className);
var items = submenu.items.map(createSubmenuItem);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: submenu.label
}, /*#__PURE__*/React.createElement("li", {
id: submenu.id,
className: className,
style: submenu.style,
role: "presentation"
}, submenu.label), items);
};
var createSubmenus = function createSubmenus(column) {
return column.map(createSubmenu);
};
var createColumn = function createColumn(category, column, index, columnClassName) {
var key = category.label + '_column_' + index;
var submenus = createSubmenus(column);
return /*#__PURE__*/React.createElement("div", {
key: key,
className: columnClassName
}, /*#__PURE__*/React.createElement("ul", {
className: "p-megamenu-submenu",
role: "menu"
}, submenus));
};
var createColumns = function createColumns(category) {
if (category.items) {
var columnClassName = getColumnClassName(category);
return category.items.map(function (column, index) {
return createColumn(category, column, index, columnClassName);
});
}
return null;
};
var createCategoryPanel = function createCategoryPanel(category) {
if (category.items) {
var columns = createColumns(category);
return /*#__PURE__*/React.createElement("div", {
className: "p-megamenu-panel"
}, /*#__PURE__*/React.createElement("div", {
className: "p-megamenu-grid"
}, columns));
}
return null;
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-megamenu[").concat(selector, "] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {\n position: relative;\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n background: inherit;\n }\n\n .p-megamenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-megamenu[").concat(selector, "] .p-megamenu-grid {\n flex-wrap: wrap;\n }\n\n ").concat(horizontal ? "\n.p-megamenu[".concat(selector, "] .p-megamenu-button {\n display: flex;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal {\n position: relative;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal .p-megamenu-root-list {\n display: none;\n}\n\n.p-megamenu-horizontal[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n width: auto;\n flex: 1;\n padding: 0;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-mobile-active .p-megamenu-root-list {\n display: flex;\n flex-direction: column;\n position: absolute;\n width: 100%;\n top: 100%;\n left: 0;\n z-index: 1;\n}\n ") : '', "\n\n ").concat(vertical ? "\n.p-megamenu-vertical[".concat(selector, "] {\n width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-root-list {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n}\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n width: 100%;\n padding: 0;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-submenu {\n width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] .p-megamenu-submenu-header {\n background: inherit;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-submenu-icon:before {\n content: \"\\e930\";\n}\n ") : '', "\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
useUpdateEffect(function () {
if (attributeSelectorState && elementRef.current) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
var createCategory = function createCategory(category, index) {
var className = classNames('p-menuitem', {
'p-menuitem-active': category === activeItemState
}, category.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': category.disabled
});
var icon = IconUtils.getJSXIcon(category.icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var label = category.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, category.label);
var itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category) : null;
var submenuIcon = createSubmenuIcon(category);
var panel = createCategoryPanel(category);
return /*#__PURE__*/React.createElement("li", {
key: category.label + '_' + index,
id: category.id,
className: className,
style: category.style,
onMouseEnter: function onMouseEnter(e) {
return onCategoryMouseEnter(e, category);
},
role: "none"
}, /*#__PURE__*/React.createElement("a", {
href: category.url || '#',
className: linkClassName,
target: category.target,
onClick: function onClick(e) {
return onCategoryClick(e, category);
},
onKeyDown: function onKeyDown(e) {
return onCategoryKeyDown(e, category);
},
role: "menuitem",
"aria-haspopup": category.items != null
}, icon, label, itemContent, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null)), panel);
};
var createMenu = function createMenu() {
if (props.model) {
return /*#__PURE__*/React.createElement("ul", {
className: "p-megamenu-root-list",
role: "menubar"
}, props.model.map(function (item, index) {
return createCategory(item, index);
}));
}
return null;
};
var createStartContent = function createStartContent() {
if (props.start) {
var _start = ObjectUtils.getJSXElement(props.start, props);
return /*#__PURE__*/React.createElement("div", {
className: "p-megamenu-start"
}, _start);
}
return null;
};
var createEndContent = function createEndContent() {
if (props.end) {
var _end = ObjectUtils.getJSXElement(props.end, props);
return /*#__PURE__*/React.createElement("div", {
className: "p-megamenu-end"
}, _end);
}
return null;
};
var createMenuButton = function createMenuButton() {
if (props.orientation === 'vertical' || props.model && props.model.length < 1) {
return null;
}
/* eslint-disable */
var button = /*#__PURE__*/React.createElement("a", {
ref: menuButtonRef,
href: '#',
role: "button",
tabIndex: 0,
className: "p-megamenu-button",
onClick: toggle
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-bars"
}));
/* eslint-enable */
return button;
};
var otherProps = MegaMenuBase.getOtherProps(props);
var className = classNames('p-megamenu p-component', {
'p-megamenu-horizontal': props.orientation === 'horizontal',
'p-megamenu-vertical': props.orientation === 'vertical',
'p-megamenu-mobile-active': mobileActiveState
}, props.className);
var menu = createMenu();
var start = createStartContent();
var end = createEndContent();
var menuButton = createMenuButton();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), start, menuButton, menu, end);
}));
MegaMenu.displayName = 'MegaMenu';
var MentionBase = {
defaultProps: {
__TYPE: 'Mention',
autoHighlight: true,
className: null,
delay: 0,
field: null,
footerTemplate: null,
headerTemplate: null,
id: null,
inputClassName: null,
inputId: null,
inputRef: null,
inputStyle: null,
itemTemplate: null,
panelClassName: null,
panelStyle: null,
scrollHeight: '200px',
style: null,
suggestions: null,
transitionOptions: null,
trigger: '@',
onBlur: null,
onChange: null,
onFocus: null,
onHide: null,
onInput: null,
onSearch: null,
onSelect: null,
onShow: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MentionBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MentionBase.defaultProps);
}
};
function ownKeys$d(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MentionBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedState = _React$useState4[0],
setFocusedState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
searchingState = _React$useState6[0],
setSearchingState = _React$useState6[1];
var _React$useState7 = React.useState(null),
_React$useState8 = _slicedToArray(_React$useState7, 2),
triggerState = _React$useState8[0],
setTriggerState = _React$useState8[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var listRef = React.useRef(null);
var timeout = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
setSearchingState(false);
setTriggerState(null);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
};
var onOverlayEntering = function onOverlayEntering() {
if (props.autoHighlight && props.suggestions && props.suggestions.length) {
DomHandler.addClass(listRef.current.firstChild, 'p-highlight');
}
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
var key = triggerState.key,
index = triggerState.index;
var value = inputRef.current.value;
var position = DomHandler.getCursorOffset(inputRef.current, value.substring(0, index - 1), value.substring(index), key);
overlayRef.current.style.transformOrigin = 'top';
overlayRef.current.style.left = "calc(".concat(position.left, "px + 1rem)");
overlayRef.current.style.top = "calc(".concat(position.top, "px + 1.2rem)");
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var getTrigger = function getTrigger(value, key, start) {
if (!triggerState) {
var triggerKey = Array.isArray(props.trigger) ? props.trigger.find(function (t) {
return t === key;
}) : props.trigger === key ? props.trigger : null;
if (triggerKey) {
return {
key: triggerKey,
index: start
};
}
var latestSpaceIndex = value.substring(0, start).lastIndexOf(' ');
var latestTrigger = getLatestTrigger(value, start);
if (latestTrigger.index > latestSpaceIndex) {
return latestTrigger;
}
}
return triggerState;
};
var getLatestTrigger = function getLatestTrigger(value, start) {
if (Array.isArray(props.trigger)) {
var latestTrigger = {};
props.trigger.forEach(function (t) {
var index = value.substring(0, start).lastIndexOf(t);
if (index !== -1 && (index > latestTrigger.index || !latestTrigger.index)) {
latestTrigger = {
key: t,
index: index !== -1 ? index + 1 : -1
};
}
});
return latestTrigger;
}
var index = value.substring(0, start).lastIndexOf(props.trigger);
return {
key: props.trigger,
index: index !== -1 ? index + 1 : -1
};
};
var onSearch = function onSearch(event) {
if (timeout.current) {
clearTimeout(timeout.current);
}
var _event$target = event.target,
value = _event$target.value,
selectionStart = _event$target.selectionStart;
var key = value.substring(selectionStart - 1, selectionStart);
if (key === ' ') {
hide();
return;
}
var currentTrigger = getTrigger(value, key, selectionStart);
if (currentTrigger && currentTrigger.index > -1) {
var query = value.substring(currentTrigger.index, selectionStart);
timeout.current = setTimeout(function () {
search(event, query, currentTrigger);
}, props.delay);
}
};
var search = function search(event, query, trigger) {
if (props.onSearch) {
setSearchingState(true);
setTriggerState(trigger);
props.onSearch({
originalEvent: event,
trigger: trigger.key,
query: query
});
}
};
var selectItem = function selectItem(event, suggestion) {
var value = inputRef.current.value;
var selectionStart = event.target.selectionStart;
var spaceIndex = value.indexOf(' ', triggerState.index);
var currentText = value.substring(triggerState.index, spaceIndex > -1 ? spaceIndex : selectionStart);
var selectedText = formatValue(suggestion).replace(/\s+/g, '');
if (currentText.trim() !== selectedText) {
var diff = 0;
while (diff < selectedText.length) {
var s_c = selectedText.charAt(diff);
var c_c = currentText.charAt(diff);
if (s_c === c_c || c_c === ' ') diff++;else break;
}
var prevText = value.substring(0, triggerState.index);
var nextText = value.substring(triggerState.index + diff);
inputRef.current.value = "".concat(prevText).concat(selectedText, " ").concat(nextText);
props.onChange && props.onChange(event);
}
var cursorStart = triggerState.index + selectedText.length + 1;
inputRef.current.setSelectionRange(cursorStart, cursorStart);
hide();
props.onSelect && props.onSelect({
originalEvent: event,
suggestion: suggestion
});
};
var formatValue = function formatValue(value) {
if (value) {
var field = Array.isArray(props.field) ? props.field[props.trigger.findIndex(function (f) {
return f === triggerState.key;
})] : props.field;
return field ? ObjectUtils.resolveFieldData(value, field) : value;
}
return '';
};
var onItemClick = function onItemClick(event, suggestion) {
DomHandler.focus(inputRef.current);
selectItem(event, suggestion);
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var onInput = function onInput(event) {
props.onInput && props.onInput(event);
if (event.target.value.length > 0) DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled');else DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
};
var onKeyUp = function onKeyUp(event) {
if (event.which === 37 || event.which === 39) {
onSearch(event);
}
};
var onChange = function onChange(event) {
props.onChange && props.onChange(event);
onSearch(event);
};
var onKeyDown = function onKeyDown(event) {
if (overlayVisibleState) {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
switch (event.which) {
//down
case 40:
if (highlightItem) {
var nextElement = highlightItem.nextElementSibling;
if (nextElement) {
DomHandler.addClass(nextElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(overlayRef.current, nextElement);
}
} else {
highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
if (highlightItem) {
DomHandler.addClass(highlightItem, 'p-highlight');
}
}
event.preventDefault();
break;
//up
case 38:
if (highlightItem) {
var previousElement = highlightItem.previousElementSibling;
if (previousElement) {
DomHandler.addClass(previousElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(overlayRef.current, previousElement);
}
}
event.preventDefault();
break;
//backspace
case 8:
var _event$target2 = event.target,
value = _event$target2.value,
selectionStart = _event$target2.selectionStart;
var key = value.substring(selectionStart - 1, selectionStart);
if (key === triggerState.key) {
hide();
}
break;
//enter
case 13:
if (highlightItem) {
selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
}
event.preventDefault();
break;
//escape
case 27:
hide();
event.preventDefault();
break;
}
}
};
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
if (searchingState) {
props.suggestions && props.suggestions.length ? show() : hide();
overlayVisibleState && alignOverlay();
setSearchingState(false);
}
}, [props.suggestions]);
useUpdateEffect(function () {
if (!isFilled && DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled')) {
DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
}, [isFilled]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createItem = function createItem(suggestion, index) {
var key = index + '_item';
var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, {
trigger: triggerState ? triggerState.key : '',
index: index
}) : formatValue(suggestion);
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-mention-item",
onClick: function onClick(e) {
return onItemClick(e, suggestion);
}
}, content, /*#__PURE__*/React.createElement(Ripple, null));
};
var createList = function createList() {
if (props.suggestions) {
var items = props.suggestions.map(createItem);
return /*#__PURE__*/React.createElement("ul", {
ref: listRef,
className: "p-mention-items"
}, items);
}
return null;
};
var createPanel = function createPanel() {
var panelClassName = classNames('p-mention-panel p-component', props.panelClassName);
var panelStyle = _objectSpread$d({
maxHeight: props.scrollHeight
}, props.panelStyle);
var header = ObjectUtils.getJSXElement(props.headerTemplate, props);
var footer = ObjectUtils.getJSXElement(props.footerTemplate, props);
var list = createList();
var panel = /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-connected-overlay",
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntering: onOverlayEntering,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, /*#__PURE__*/React.createElement("div", {
ref: overlayRef,
className: panelClassName,
style: panelStyle,
onClick: onPanelClick
}, header, list, footer));
return /*#__PURE__*/React.createElement(Portal, {
element: panel,
appendTo: "self"
});
};
var className = classNames('p-mention p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState
}, props.className);
var inputClassName = classNames('p-mention-input', props.inputClassName);
var inputProps = MentionBase.getOtherProps(props);
var panel = createPanel();
return /*#__PURE__*/React.createElement("div", {
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, /*#__PURE__*/React.createElement(InputTextarea, _extends({
ref: inputRef,
id: props.inputId,
className: inputClassName,
style: props.inputStyle
}, inputProps, {
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onInput: onInput,
onKeyUp: onKeyUp,
onChange: onChange
})), panel);
}));
Mention.displayName = 'Mention';
var MenuBase = {
defaultProps: {
__TYPE: 'Menu',
id: null,
model: null,
popup: false,
style: null,
className: null,
autoZIndex: true,
baseZIndex: 0,
appendTo: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MenuBase.defaultProps);
}
};
var Menu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MenuBase.getProps(inProps);
var _React$useState = React.useState(!props.popup),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var menuRef = React.useRef(null);
var targetRef = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: targetRef,
overlay: menuRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide(event);
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.popup) {
hide(event);
}
};
var onItemKeyDown = function onItemKeyDown(event, item) {
var listItem = event.currentTarget.parentElement;
switch (event.which) {
//down
case 40:
var nextItem = findNextItem(listItem);
nextItem && nextItem.children[0].focus();
event.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(listItem);
prevItem && prevItem.children[0].focus();
event.preventDefault();
break;
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
};
var hide = function hide(event) {
targetRef.current = event.currentTarget;
setVisibleState(false);
props.onHide && props.onHide(event);
};
var onEnter = function onEnter() {
ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
DomHandler.absolutePosition(menuRef.current, targetRef.current);
};
var onEntered = function onEntered() {
bindOverlayListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
};
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
getElement: function getElement() {
return menuRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
var createSubmenu = function createSubmenu(submenu, index) {
var key = submenu.label + '_' + index;
var className = classNames('p-submenu-header', {
'p-disabled': submenu.disabled
}, submenu.className);
var items = submenu.items.map(createMenuItem);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", {
className: className,
style: submenu.style,
role: "presentation"
}, submenu.label), items);
};
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator",
role: "separator"
});
};
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
var className = classNames('p-menuitem', item.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var tabIndex = item.disabled ? null : 0;
var key = item.label + '_' + index;
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: linkClassName,
role: "menuitem",
target: item.target,
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event);
},
tabIndex: tabIndex,
"aria-disabled": item.disabled
}, icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event);
},
className: linkClassName,
tabIndex: tabIndex,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
className: className,
style: item.style,
role: "none"
}, content);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : item.items ? createSubmenu(item, index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model.map(createItem);
};
var createElement = function createElement() {
if (props.model) {
var otherProps = MenuBase.getOtherProps(props);
var className = classNames('p-menu p-component', {
'p-menu-overlay': props.popup,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
}, props.className);
var menuitems = createMenu();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: menuRef,
classNames: "p-connected-overlay",
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: menuRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onPanelClick
}), /*#__PURE__*/React.createElement("ul", {
className: "p-menu-list p-reset",
role: "menu"
}, menuitems)));
}
return null;
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
Menu.displayName = 'Menu';
var MenubarBase = {
defaultProps: {
__TYPE: 'Menubar',
id: null,
model: null,
style: null,
className: null,
start: null,
end: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MenubarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MenubarBase.defaultProps);
}
};
var MenubarSub = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (ref && ref.current && !ref.current.contains(event.target)) {
setActiveItemState(null);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindDocumentClickListener = _useEventListener2[0];
var onItemMouseEnter = function onItemMouseEnter(event, item) {
if (item.disabled || props.mobileActive) {
event.preventDefault();
return;
}
if (props.root) {
if (activeItemState || props.popup) {
setActiveItemState(item);
}
} else {
setActiveItemState(item);
}
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (item.items) activeItemState && item === activeItemState ? setActiveItemState(null) : setActiveItemState(item);else onLeafClick();
};
var onItemKeyDown = function onItemKeyDown(event, item) {
var listItem = event.currentTarget.parentElement;
switch (event.which) {
//down
case 40:
if (props.root) item.items && expandSubmenu(item, listItem);else navigateToNextItem(listItem);
event.preventDefault();
break;
//up
case 38:
!props.root && navigateToPrevItem(listItem);
event.preventDefault();
break;
//right
case 39:
if (props.root) {
var nextItem = findNextItem(listItem);
nextItem && nextItem.children[0].focus();
} else {
item.items && expandSubmenu(item, listItem);
}
event.preventDefault();
break;
//left
case 37:
props.root && navigateToPrevItem(listItem);
event.preventDefault();
break;
}
props.onKeyDown && props.onKeyDown(event, listItem);
};
var onChildItemKeyDown = function onChildItemKeyDown(event, childListItem) {
if (props.root) {
//up
if (event.which === 38 && childListItem.previousElementSibling == null) {
collapseMenu(childListItem);
}
} else {
//left
if (event.which === 37) {
collapseMenu(childListItem);
}
}
};
var expandSubmenu = function expandSubmenu(item, listItem) {
setActiveItemState(item);
setTimeout(function () {
listItem.children[1].children[0].children[0].focus();
}, 50);
};
var collapseMenu = function collapseMenu(listItem) {
setActiveItemState(null);
listItem.parentElement.previousElementSibling.focus();
};
var navigateToNextItem = function navigateToNextItem(listItem) {
var nextItem = findNextItem(listItem);
nextItem && nextItem.children[0].focus();
};
var navigateToPrevItem = function navigateToPrevItem(listItem) {
var prevItem = findPrevItem(listItem);
prevItem && prevItem.children[0].focus();
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
};
var onLeafClick = function onLeafClick() {
setActiveItemState(null);
props.onLeafClick && props.onLeafClick();
};
useMountEffect(function () {
bindDocumentClickListener();
});
useUpdateEffect(function () {
!props.parentActive && setActiveItemState(null);
}, [props.parentActive]);
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator",
role: "separator"
});
};
var createSubmenu = function createSubmenu(item) {
if (item.items) {
return /*#__PURE__*/React.createElement(MenubarSub, {
menuProps: props.menuProps,
model: item.items,
mobileActive: props.mobileActive,
onLeafClick: onLeafClick,
onKeyDown: onChildItemKeyDown,
parentActive: item === activeItemState
});
}
return null;
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var key = item.label + '_' + index;
var className = classNames('p-menuitem', {
'p-menuitem-active': activeItemState === item
}, item.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var submenuIconClassName = classNames('p-submenu-icon pi', {
'pi-angle-down': props.root,
'pi-angle-right': !props.root
});
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props.menuProps
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var submenu = createSubmenu(item);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
role: "menuitem",
className: linkClassName,
target: item.target,
"aria-haspopup": item.items != null,
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event, item);
}
}, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event, item);
},
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
role: "none",
id: item.id,
className: className,
style: item.style,
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, item);
}
}, content, submenu);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : createMenuitem(item, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var role = props.root ? 'menubar' : 'menu';
var className = classNames({
'p-submenu-list': !props.root,
'p-menubar-root-list': props.root
});
var submenu = createMenu();
return /*#__PURE__*/React.createElement("ul", {
ref: ref,
className: className,
role: role
}, submenu);
}));
MenubarSub.displayName = 'MenubarSub';
var Menubar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MenubarBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
mobileActiveState = _React$useState2[0],
setMobileActiveState = _React$useState2[1];
var elementRef = React.useRef(null);
var rootMenuRef = React.useRef(null);
var menuButtonRef = React.useRef(null);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (mobileActiveState && isOutsideClicked(event)) {
setMobileActiveState(false);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var toggle = function toggle(event) {
event.preventDefault();
setMobileActiveState(function (prevMobileActive) {
return !prevMobileActive;
});
};
var onLeafClick = function onLeafClick() {
setMobileActiveState(false);
};
var isOutsideClicked = function isOutsideClicked(event) {
return rootMenuRef.current !== event.target && !rootMenuRef.current.contains(event.target) && menuButtonRef.current !== event.target && !menuButtonRef.current.contains(event.target);
};
useUpdateEffect(function () {
if (mobileActiveState) {
ZIndexUtils.set('menu', rootMenuRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']);
bindDocumentClickListener();
} else {
unbindDocumentClickListener();
ZIndexUtils.clear(rootMenuRef.current);
}
}, [mobileActiveState]);
useUnmountEffect(function () {
ZIndexUtils.clear(rootMenuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
useCustomContent: useCustomContent,
getElement: function getElement() {
return elementRef.current;
},
getRootMenu: function getRootMenu() {
return rootMenuRef.current;
},
getMenuButton: function getMenuButton() {
return menuButtonRef.current;
}
};
});
var createStartContent = function createStartContent() {
if (props.start) {
var _start = ObjectUtils.getJSXElement(props.start, props);
return /*#__PURE__*/React.createElement("div", {
className: "p-menubar-start"
}, _start);
}
return null;
};
var createEndContent = function createEndContent() {
if (props.end) {
var _end = ObjectUtils.getJSXElement(props.end, props);
return /*#__PURE__*/React.createElement("div", {
className: "p-menubar-end"
}, _end);
}
return null;
};
var createMenuButton = function createMenuButton() {
if (props.model && props.model.length < 1) {
return null;
}
/* eslint-disable */
var button = /*#__PURE__*/React.createElement("a", {
ref: menuButtonRef,
href: '#',
role: "button",
tabIndex: 0,
className: "p-menubar-button",
onClick: toggle
}, /*#__PURE__*/React.createElement("i", {
className: "pi pi-bars"
}));
/* eslint-enable */
return button;
};
var otherProps = MenubarBase.getOtherProps(props);
var className = classNames('p-menubar p-component', {
'p-menubar-mobile-active': mobileActiveState
}, props.className);
var start = createStartContent();
var end = createEndContent();
var menuButton = createMenuButton();
var submenu = /*#__PURE__*/React.createElement(MenubarSub, {
ref: rootMenuRef,
menuProps: props,
model: props.model,
root: true,
mobileActive: mobileActiveState,
onLeafClick: onLeafClick
});
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
className: className,
style: props.style
}, otherProps), start, menuButton, submenu, end);
}));
Menubar.displayName = 'Menubar';
var MessageBase = {
defaultProps: {
__TYPE: 'Message',
id: null,
className: null,
style: null,
text: null,
icon: null,
severity: 'info',
content: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MessageBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MessageBase.defaultProps);
}
};
var Message = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MessageBase.getProps(inProps);
var elementRef = React.useRef(null);
var createContent = function createContent() {
if (props.content) {
return ObjectUtils.getJSXElement(props.content, props);
}
var text = ObjectUtils.getJSXElement(props.text, props);
var iconValue = props.icon;
if (!iconValue) {
iconValue = classNames('pi', {
'pi-info-circle': props.severity === 'info',
'pi-exclamation-triangle': props.severity === 'warn',
'pi-times-circle': props.severity === 'error',
'pi-check': props.severity === 'success'
});
}
var icon = IconUtils.getJSXIcon(iconValue, {
className: 'p-inline-message-icon'
}, {
props: props
});
return /*#__PURE__*/React.createElement(React.Fragment, null, icon, /*#__PURE__*/React.createElement("span", {
className: "p-inline-message-text"
}, text));
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = MessageBase.getOtherProps(props);
var className = classNames('p-inline-message p-component', {
'p-inline-message-info': props.severity === 'info',
'p-inline-message-warn': props.severity === 'warn',
'p-inline-message-error': props.severity === 'error',
'p-inline-message-success': props.severity === 'success',
'p-inline-message-icon-only': !props.text
}, props.className);
var content = createContent();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps, {
role: "alert",
"aria-live": "polite"
}), content);
}));
Message.displayName = 'Message';
var MultiSelectBase = {
defaultProps: {
__TYPE: 'MultiSelect',
appendTo: null,
ariaLabelledBy: null,
className: null,
dataKey: null,
disabled: false,
display: 'comma',
dropdownIcon: 'pi pi-chevron-down',
emptyFilterMessage: null,
filter: false,
filterBy: null,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
fixedPlaceholder: false,
flex: false,
id: null,
inline: false,
inputId: null,
inputRef: null,
itemClassName: null,
itemTemplate: null,
maxSelectedLabels: null,
name: null,
onBlur: null,
onChange: null,
onFilter: null,
onFocus: null,
onHide: null,
onSelectAll: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
overlayVisible: false,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
panelStyle: null,
placeholder: null,
removeIcon: 'pi pi-times-circle',
resetFilterOnHide: false,
scrollHeight: '200px',
selectAll: false,
selectedItemTemplate: null,
selectedItemsLabel: '{0} items selected',
selectionLimit: null,
showClear: false,
showSelectAll: true,
style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
useOptionAsValue: false,
value: null,
virtualScrollerOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MultiSelectBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MultiSelectBase.defaultProps);
}
};
var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
var filterOptions = {
filter: function filter(e) {
return onFilter(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
query: event.target.value
});
}
};
var onSelectAll = function onSelectAll(event) {
if (props.onSelectAll) {
props.onSelectAll({
originalEvent: event,
checked: props.selectAll
});
}
event.preventDefault();
};
var createFilterElement = function createFilterElement() {
if (props.filter) {
var containerClassName = classNames('p-multiselect-filter-container');
var content = /*#__PURE__*/React.createElement("div", {
className: containerClassName
}, /*#__PURE__*/React.createElement(InputText, {
ref: props.filterRef,
type: "text",
role: "textbox",
value: props.filterValue,
onChange: onFilter,
className: "p-multiselect-filter",
placeholder: props.filterPlaceholder
}), /*#__PURE__*/React.createElement("span", {
className: "p-multiselect-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: containerClassName,
element: content,
filterOptions: filterOptions,
onFilter: onFilter,
filterIconClassName: 'p-multeselect-filter-icon pi pi-search',
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, content);
}
return null;
};
var filterElement = createFilterElement();
var checkboxElement = props.showSelectAll && /*#__PURE__*/React.createElement(Checkbox, {
checked: props.selectAll,
onChange: onSelectAll,
role: "checkbox",
"aria-checked": props.selectAll
});
var closeElement = /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-multiselect-close p-link",
"aria-label": localeOption('close'),
onClick: props.onClose
}, /*#__PURE__*/React.createElement("span", {
className: "p-multiselect-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
var element = /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-header"
}, checkboxElement, filterElement, closeElement);
if (props.template) {
var defaultOptions = {
className: 'p-multiselect-header',
checkboxElement: checkboxElement,
checked: props.selectAll,
onChange: onSelectAll,
filterElement: filterElement,
closeElement: closeElement,
closeElementClassName: 'p-multiselect-close p-link',
closeIconClassName: 'p-multiselect-close-icon pi pi-times',
onCloseClick: props.onClose,
element: element,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
MultiSelectHeader.displayName = 'MultiSelectHeader';
var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: props.option
});
}
event.preventDefault();
};
var onKeyDown = function onKeyDown(event) {
if (props.onKeyDown) {
props.onKeyDown({
originalEvent: event,
option: props.option
});
}
};
var className = classNames('p-multiselect-item', {
'p-highlight': props.selected,
'p-disabled': props.disabled
}, props.className, props.option.className);
var checkboxClassName = classNames('p-checkbox-box', {
'p-highlight': props.selected
});
var checkboxIcon = classNames('p-checkbox-icon p-c', {
'pi pi-check': props.selected
});
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var tabIndex = props.disabled ? null : props.tabIndex || 0;
return /*#__PURE__*/React.createElement("li", {
className: className,
style: props.style,
onClick: onClick,
tabIndex: tabIndex,
onKeyDown: onKeyDown,
role: "option",
"aria-selected": props.selected
}, /*#__PURE__*/React.createElement("div", {
className: "p-checkbox p-component"
}, /*#__PURE__*/React.createElement("div", {
className: checkboxClassName
}, /*#__PURE__*/React.createElement("span", {
className: checkboxIcon
}))), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
});
MultiSelectItem.displayName = 'MultiSelectItem';
function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var virtualScrollerRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var onEnter = function onEnter() {
props.onEnter(function () {
if (virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && filterInputRef.current) {
DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
if (virtualScrollerRef.current) {
virtualScrollerRef.current.scrollToIndex(0);
}
props.onFilterInputChange && props.onFilterInputChange(event);
};
var isEmptyFilter = function isEmptyFilter() {
return !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
};
var createHeader = function createHeader() {
return /*#__PURE__*/React.createElement(MultiSelectHeader, {
filter: props.filter,
filterRef: filterInputRef,
filterValue: props.filterValue,
filterTemplate: props.filterTemplate,
onFilter: onFilterInputChange,
filterPlaceholder: props.filterPlaceholder,
onClose: props.onCloseClick,
showSelectAll: props.showSelectAll,
selectAll: props.isAllSelected(),
onSelectAll: props.onSelectAll,
template: props.panelHeaderTemplate,
resetFilter: props.resetFilter
});
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
return /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-footer"
}, content);
}
return null;
};
var createGroupChildren = function createGroupChildren(optionGroup, style) {
var groupChildren = props.getOptionGroupChildren(optionGroup);
return groupChildren.map(function (option, j) {
var optionLabel = props.getOptionLabel(option);
var optionKey = j + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
var tabIndex = disabled ? null : props.tabIndex || 0;
var selected = props.isSelected(option);
return /*#__PURE__*/React.createElement(MultiSelectItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: selected,
onClick: props.onOptionSelect,
onKeyDown: props.onOptionKeyDown,
tabIndex: tabIndex,
disabled: disabled,
className: props.itemClassName
});
});
};
var createEmptyFilter = function createEmptyFilter() {
var emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
return /*#__PURE__*/React.createElement("li", {
className: "p-multiselect-empty-message"
}, emptyFilterMessage);
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
if (props.optionGroupLabel) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var groupChildrenContent = createGroupChildren(option, style);
var key = index + '_' + props.getOptionGroupRenderKey(option);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", {
className: "p-multiselect-item-group",
style: style
}, groupContent), groupChildrenContent);
} else {
var optionLabel = props.getOptionLabel(option);
var optionKey = index + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
var tabIndex = disabled ? null : props.tabIndex || 0;
var selected = props.isSelected(option);
return /*#__PURE__*/React.createElement(MultiSelectItem, {
key: optionKey,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: selected,
onClick: props.onOptionSelect,
onKeyDown: props.onOptionKeyDown,
tabIndex: tabIndex,
disabled: disabled,
className: props.itemClassName
});
}
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
} else if (props.hasFilter) {
return createEmptyFilter();
}
return null;
};
var createContent = function createContent() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions), {
style: _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
items: props.visibleOptions,
autoSize: true,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$c(_objectSpread$c({}, event), {
filter: props.filterValue
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var className = classNames('p-multiselect-items p-component', options.className);
var content = isEmptyFilter() ? createEmptyFilter() : options.children;
return /*#__PURE__*/React.createElement("ul", {
ref: options.contentRef,
style: options.style,
className: className,
role: "listbox",
"aria-multiselectable": true
}, content);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps));
} else {
var items = createItems();
return /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-items-wrapper",
style: {
maxHeight: props.scrollHeight
}
}, /*#__PURE__*/React.createElement("ul", {
className: "p-multiselect-items p-component",
role: "listbox",
"aria-multiselectable": true
}, items));
}
};
var createElement = function createElement() {
var allowOptionSelect = props.allowOptionSelect();
var panelClassName = classNames('p-multiselect-panel p-component', {
'p-multiselect-inline': props.inline,
'p-multiselect-flex': props.flex,
'p-multiselect-limited': !allowOptionSelect,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
}, props.panelClassName);
var header = createHeader();
var content = createContent();
var footer = createFooter();
if (props.inline) {
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: panelClassName,
style: props.panelStyle,
onClick: props.onClick
}, content, footer);
}
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: panelClassName,
style: props.panelStyle,
onClick: props.onClick
}, header, content, footer));
};
var element = createElement();
if (props.inline) return element;
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
MultiSelectPanel.displayName = 'MultiSelectPanel';
function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createForOfIteratorHelper$7(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$7(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$7(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$7(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$7(o, minLen); }
function _arrayLikeToArray$7(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MultiSelectBase.getProps(inProps);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
filterState = _React$useState2[0],
setFilterState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedState = _React$useState4[0],
setFocusedState = _React$useState4[1];
var _React$useState5 = React.useState(props.inline),
_React$useState6 = _slicedToArray(_React$useState5, 2),
overlayVisibleState = _React$useState6[0],
setOverlayVisibleState = _React$useState6[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var labelRef = React.useRef(null);
var overlayRef = React.useRef(null);
var hasFilter = filterState && filterState.trim().length > 0;
var empty = ObjectUtils.isEmpty(props.value);
var equalityKey = props.optionValue ? null : props.dataKey;
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? !isClearClicked(event) && hide() : hide();
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var allowOptionSelect = function allowOptionSelect() {
return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
};
var onOptionSelect = function onOptionSelect(event) {
var originalEvent = event.originalEvent,
option = event.option;
if (props.disabled || isOptionDisabled(option)) {
return;
}
var optionValue = getOptionValue(option);
var isUsed = isOptionValueUsed(option);
var selected = isSelected(option);
var allowSelect = allowOptionSelect();
if (selected) updateModel(originalEvent, props.value.filter(function (val) {
return !ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
}));else if (allowSelect) updateModel(originalEvent, [].concat(_toConsumableArray(props.value || []), [optionValue]));
};
var onOptionKeyDown = function onOptionKeyDown(event) {
var originalEvent = event.originalEvent;
var listItem = originalEvent.currentTarget;
switch (originalEvent.which) {
//down
case 40:
var nextItem = findNextItem(listItem);
nextItem && nextItem.focus();
originalEvent.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(listItem);
prevItem && prevItem.focus();
originalEvent.preventDefault();
break;
//enter and space
case 13:
case 32:
onOptionSelect(event);
originalEvent.preventDefault();
break;
//escape
case 27:
hide();
DomHandler.focus(inputRef.current);
break;
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? findPrevItem(prevItem) : prevItem : null;
};
var onClick = function onClick(event) {
if (!props.inline && !props.disabled && !isPanelClicked(event) && !DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !isClearClicked(event)) {
overlayVisibleState ? hide() : show();
DomHandler.focus(inputRef.current);
event.preventDefault();
}
};
var onKeyDown = function onKeyDown(event) {
switch (event.which) {
//down
case 40:
if (props.inline) break;
if (!overlayVisibleState && event.altKey) {
show();
event.preventDefault();
}
break;
//space
case 32:
if (props.inline) break;
overlayVisibleState ? hide() : show();
event.preventDefault();
break;
//escape
case 27:
if (props.inline) break;
hide();
break;
//tab
case 9:
if (overlayVisibleState) {
var firstFocusableElement = DomHandler.getFirstFocusableElement(overlayRef.current);
if (firstFocusableElement) {
firstFocusableElement.focus();
event.preventDefault();
}
}
break;
}
};
var onSelectAll = function onSelectAll(event) {
if (props.onSelectAll) {
props.onSelectAll(event);
} else {
var value = null;
if (event.checked) {
value = [];
if (visibleOptions) {
var selectedOptions = visibleOptions.filter(function (option) {
return isOptionDisabled(option) && isSelected(option);
});
value = selectedOptions.map(function (option) {
return getOptionValue(option);
});
}
} else if (visibleOptions) {
var options = visibleOptions.filter(function (option) {
return !isOptionDisabled(option);
});
if (props.optionGroupLabel) {
value = [];
options.forEach(function (optionGroup) {
return value = [].concat(_toConsumableArray(value), _toConsumableArray(getOptionGroupChildren(optionGroup).filter(function (option) {
return !isOptionDisabled(option);
}).map(function (option) {
return getOptionValue(option);
})));
});
} else {
value = options.map(function (option) {
return getOptionValue(option);
});
}
}
updateModel(event.originalEvent, value);
}
};
var updateModel = function updateModel(event, value) {
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: value
}
});
}
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.query;
setFilterState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var resetFilter = function resetFilter() {
setFilterState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var scrollInView = function scrollInView() {
var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
if (highlightItem && highlightItem.scrollIntoView) {
highlightItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
}
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onOverlayEnter = function onOverlayEnter(callback) {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
scrollInView();
callback && callback();
};
var onOverlayEntered = function onOverlayEntered(callback) {
callback && callback();
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
};
var isClearClicked = function isClearClicked(event) {
return DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
};
var isPanelClicked = function isPanelClicked(event) {
return overlayRef.current && overlayRef.current.contains(event.target);
};
var onCloseClick = function onCloseClick(event) {
hide();
DomHandler.focus(inputRef.current);
event.preventDefault();
event.stopPropagation();
};
var getSelectedOptionIndex = function getSelectedOptionIndex() {
if (props.value != null && props.options) {
if (props.optionGroupLabel) {
var groupIndex = 0;
var optionIndex = props.options.findIndex(function (optionGroup, i) {
return (groupIndex = i) && findOptionIndexInList(props.value, getOptionGroupChildren(optionGroup)) !== -1;
});
return optionIndex !== -1 ? {
group: groupIndex,
option: optionIndex
} : -1;
} else {
return findOptionIndexInList(props.value, props.options);
}
}
return -1;
};
var findOptionIndexInList = function findOptionIndexInList(value, list) {
return list.findIndex(function (item) {
return value.some(function (val) {
return ObjectUtils.equals(val, getOptionValue(item), equalityKey);
});
});
};
var isSelected = function isSelected(option) {
if (props.value) {
var optionValue = getOptionValue(option);
var isUsed = isOptionValueUsed(option);
return props.value.some(function (val) {
return ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
});
}
return false;
};
var getLabelByValue = function getLabelByValue(val) {
var option;
if (props.options) {
if (props.optionGroupLabel) {
var _iterator = _createForOfIteratorHelper$7(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optionGroup = _step.value;
option = findOptionByValue(val, getOptionGroupChildren(optionGroup));
if (option) {
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
} else {
option = findOptionByValue(val, props.options);
}
}
return option ? getOptionLabel(option) : null;
};
var findOptionByValue = function findOptionByValue(val, list) {
return list.find(function (option) {
return ObjectUtils.equals(getOptionValue(option), val, equalityKey);
});
};
var onFocus = function onFocus(event) {
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
props.onBlur && props.onBlur(event);
};
var isAllSelected = function isAllSelected() {
if (props.onSelectAll) {
return props.selectAll;
} else {
if (ObjectUtils.isEmpty(visibleOptions)) {
return false;
}
var options = visibleOptions.filter(function (option) {
return !isOptionDisabled(option);
});
if (props.optionGroupLabel) {
var _iterator2 = _createForOfIteratorHelper$7(options),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var optionGroup = _step2.value;
var visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter(function (option) {
return !isOptionDisabled(option);
});
return !visibleOptionsGroupChildren.some(function (option) {
return !isSelected(option);
});
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
} else {
return !options.some(function (option) {
return !isSelected(option);
});
}
}
return true;
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
};
var getOptionValue = function getOptionValue(option) {
if (props.useOptionAsValue) {
return option;
}
if (props.optionValue) {
var data = ObjectUtils.resolveFieldData(option, props.optionValue);
return data !== null ? data : option;
}
return option && option['value'] !== undefined ? option['value'] : option;
};
var getOptionRenderKey = function getOptionRenderKey(option) {
return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
};
var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option['disabled'] !== undefined ? option['disabled'] : false;
};
var isOptionValueUsed = function isOptionValueUsed(option) {
return !props.useOptionAsValue && props.optionValue || option && option['value'] !== undefined;
};
var removeChip = function removeChip(event, item) {
var value = props.value.filter(function (val) {
return !ObjectUtils.equals(val, item, equalityKey);
});
updateModel(event, value);
};
var getSelectedItemsLabel = function getSelectedItemsLabel() {
var pattern = /{(.*?)}/;
if (pattern.test(props.selectedItemsLabel)) {
return props.selectedItemsLabel.replace(props.selectedItemsLabel.match(pattern)[0], props.value.length + '');
}
return props.selectedItemsLabel;
};
var getLabel = function getLabel() {
var label;
if (!empty && !props.fixedPlaceholder) {
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
return getSelectedItemsLabel();
} else {
return props.value.reduce(function (acc, value, index) {
return acc + (index !== 0 ? ',' : '') + getLabelByValue(value);
}, '');
}
}
return label;
};
var getLabelContent = function getLabelContent() {
if (props.selectedItemTemplate) {
if (!empty) {
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
return getSelectedItemsLabel();
} else {
return props.value.map(function (val, index) {
var item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, item);
});
}
} else {
return ObjectUtils.getJSXElement(props.selectedItemTemplate);
}
} else {
if (props.display === 'chip' && !empty) {
var value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
return value.map(function (val) {
var label = getLabelByValue(val);
var icon = !props.disabled && IconUtils.getJSXIcon(props.removeIcon, {
className: 'p-multiselect-token-icon',
onClick: function onClick(e) {
return removeChip(e, val);
}
}, {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-token",
key: label
}, /*#__PURE__*/React.createElement("span", {
className: "p-multiselect-token-label"
}, label), icon);
});
}
return getLabel();
}
};
var getVisibleOptions = function getVisibleOptions() {
if (hasFilter) {
var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator3 = _createForOfIteratorHelper$7(props.options),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var optgroup = _step3.value;
var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread$b(_objectSpread$b({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return filteredGroups;
} else {
return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
} else {
return props.options;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useEffect(function () {
setTimeout(function () {
props.overlayVisible ? show() : hide();
}, 100);
}, [props.overlayVisible]);
useUpdateEffect(function () {
if (overlayVisibleState && hasFilter) {
alignOverlay();
}
}, [overlayVisibleState, hasFilter]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createClearIcon = function createClearIcon() {
if (!empty && props.showClear && !props.disabled) {
return /*#__PURE__*/React.createElement("i", {
className: "p-multiselect-clear-icon pi pi-times",
onClick: function onClick(e) {
return updateModel(e, null);
}
});
}
return null;
};
var createLabel = function createLabel() {
var content = getLabelContent();
var className = classNames('p-multiselect-label', {
'p-placeholder': empty && props.placeholder,
'p-multiselect-label-empty': empty && !props.placeholder && !props.selectedItemTemplate,
'p-multiselect-items-label': !empty && props.display !== 'chip' && props.value.length > props.maxSelectedLabels
});
return /*#__PURE__*/React.createElement("div", {
ref: labelRef,
className: "p-multiselect-label-container"
}, /*#__PURE__*/React.createElement("div", {
className: className
}, content || props.placeholder || 'empty'));
};
var visibleOptions = getVisibleOptions();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = MultiSelectBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-multiselect p-component p-inputwrapper', {
'p-multiselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-multiselect-clearable': props.showClear && !props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
}, props.className);
var label = !props.inline && createLabel();
var clearIcon = !props.inline && createClearIcon();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
style: props.style,
className: className
}, otherProps, {
onClick: onClick
}), /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
id: props.inputId,
name: props.name,
readOnly: true,
type: "text",
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
role: "listbox",
"aria-expanded": overlayVisibleState,
disabled: props.disabled,
tabIndex: props.tabIndex
}, ariaProps))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-trigger"
}, IconUtils.getJSXIcon(props.dropdownIcon, {
className: 'p-multiselect-trigger-icon p-c'
}, {
props: props
}))), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
ref: overlayRef,
visibleOptions: visibleOptions
}, props, {
onClick: onPanelClick,
onOverlayHide: hide,
filterValue: filterState,
hasFilter: hasFilter,
onFilterInputChange: onFilterInputChange,
resetFilter: resetFilter,
onCloseClick: onCloseClick,
onSelectAll: onSelectAll,
getOptionLabel: getOptionLabel,
getOptionRenderKey: getOptionRenderKey,
isOptionDisabled: isOptionDisabled,
getOptionGroupChildren: getOptionGroupChildren,
getOptionGroupLabel: getOptionGroupLabel,
getOptionGroupRenderKey: getOptionGroupRenderKey,
isSelected: isSelected,
getSelectedOptionIndex: getSelectedOptionIndex,
isAllSelected: isAllSelected,
onOptionSelect: onOptionSelect,
allowOptionSelect: allowOptionSelect,
onOptionKeyDown: onOptionKeyDown,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
MultiSelect.displayName = 'MultiSelect';
var MultiStateCheckboxBase = {
defaultProps: {
__TYPE: 'MultiStateCheckbox',
id: null,
value: null,
options: null,
optionValue: null,
optionLabel: null,
optionIcon: null,
iconTemplate: null,
dataKey: null,
style: null,
className: null,
disabled: false,
readOnly: false,
empty: true,
tabIndex: '0',
tooltip: null,
tooltipOptions: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, MultiStateCheckboxBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, MultiStateCheckboxBase.defaultProps);
}
};
var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = MultiStateCheckboxBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var equalityKey = props.optionValue ? null : props.dataKey;
var onClick = function onClick(event) {
if (!props.disabled && !props.readOnly) {
toggle(event);
}
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
};
var getOptionIcon = function getOptionIcon(option) {
return ObjectUtils.resolveFieldData(option, props.optionIcon || 'icon');
};
var getOptionAriaLabel = function getOptionAriaLabel(option) {
var ariaField = props.optionLabel || props.optionValue;
return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
};
var findNextOption = function findNextOption() {
if (props.options) {
return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
}
return null;
};
var toggle = function toggle(event) {
if (props.onChange) {
var newValue = getOptionValue(findNextOption());
props.onChange({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(e) {
if (e.keyCode === 32) {
toggle(e);
e.preventDefault();
}
};
var getSelectedOptionMap = function getSelectedOptionMap() {
var option, index;
if (props.options) {
index = props.options.findIndex(function (option) {
return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey);
});
option = props.options[index];
}
return {
option: option,
index: index
};
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!props.empty && props.value === null) {
toggle();
}
});
var createIcon = function createIcon() {
var icon = selectedOption && getOptionIcon(selectedOption) || '';
var className = classNames('p-checkbox-icon p-c', _defineProperty({}, "".concat(icon), true));
var content = /*#__PURE__*/React.createElement("span", {
className: className
});
if (props.iconTemplate) {
var defaultOptions = {
option: selectedOption,
className: className,
element: content,
props: props
};
return ObjectUtils.getJSXElement(props.iconTemplate, defaultOptions);
}
return content;
};
var _getSelectedOptionMap = getSelectedOptionMap(),
selectedOption = _getSelectedOptionMap.option,
selectedOptionIndex = _getSelectedOptionMap.index;
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = MultiStateCheckboxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-multistatecheckbox p-checkbox p-component', props.className, {
'p-checkbox-disabled': props.disabled
});
var boxClassName = classNames('p-checkbox-box', {
'p-highlight': !!selectedOption,
'p-disabled': props.disabled,
'p-focus': focusedState
}, selectedOption && selectedOption.className);
var icon = createIcon();
var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
var ariaChecked = !!selectedOption ? 'true' : 'false';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), /*#__PURE__*/React.createElement("div", _extends({
className: boxClassName,
style: selectedOption && selectedOption.style,
tabIndex: props.tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
role: "checkbox",
"aria-checked": ariaChecked
}, ariaProps), icon), focusedState && /*#__PURE__*/React.createElement("span", {
className: "p-sr-only",
"aria-live": "polite"
}, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
MultiStateCheckbox.displayName = 'MultiStateCheckbox';
var OrderListBase = {
defaultProps: {
__TYPE: 'OrderList',
id: null,
value: null,
header: null,
style: null,
className: null,
listStyle: null,
dragdrop: false,
tabIndex: 0,
dataKey: null,
breakpoint: '960px',
onChange: null,
itemTemplate: null,
filter: false,
filterBy: null,
filterMatchMode: 'contains',
filterLocale: undefined,
filterPlaceholder: null,
filterTemplate: null,
onFilter: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, OrderListBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, OrderListBase.defaultProps);
}
};
var OrderListControls = /*#__PURE__*/React.memo(function (props) {
var moveUp = function moveUp(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = 0; i < props.selection.length; i++) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = value[selectedItemIndex];
var temp = value[selectedItemIndex - 1];
value[selectedItemIndex - 1] = movedItem;
value[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'up'
});
}
}
};
var moveTop = function moveTop(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = 0; i < props.selection.length; i++) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = value.splice(selectedItemIndex, 1)[0];
value.unshift(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'top'
});
}
}
};
var moveDown = function moveDown(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = props.selection.length - 1; i >= 0; i--) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== value.length - 1) {
var movedItem = value[selectedItemIndex];
var temp = value[selectedItemIndex + 1];
value[selectedItemIndex + 1] = movedItem;
value[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'down'
});
}
}
};
var moveBottom = function moveBottom(event) {
if (props.selection) {
var value = _toConsumableArray(props.value);
for (var i = props.selection.length - 1; i >= 0; i--) {
var selectedItem = props.selection[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
if (selectedItemIndex !== value.length - 1) {
var movedItem = value.splice(selectedItemIndex, 1)[0];
value.push(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: value,
direction: 'bottom'
});
}
}
};
return /*#__PURE__*/React.createElement("div", {
className: "p-orderlist-controls"
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "pi pi-angle-up",
onClick: moveUp
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "pi pi-angle-double-up",
onClick: moveTop
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "pi pi-angle-down",
onClick: moveDown
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "pi pi-angle-double-down",
onClick: moveBottom
}));
});
OrderListControls.displayName = 'OrderListControls';
var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
var dragging = React.useRef(null);
var draggedItemIndex = React.useRef(null);
var dragOverItemIndex = React.useRef(null);
var listElementRef = React.useRef(null);
var filterOptions = {
filter: function filter(e) {
return props.onFilterInputChange(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var isSelected = function isSelected(item) {
return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
};
var _onDragStart = function onDragStart(event, index) {
dragging.current = true;
draggedItemIndex.current = index;
if (props.dragdropScope) {
event.dataTransfer.setData('text', 'orderlist');
}
};
var _onDragOver = function onDragOver(event, index) {
if (draggedItemIndex.current !== index && draggedItemIndex.current + 1 !== index) {
dragOverItemIndex.current = index;
DomHandler.addClass(event.target, 'p-orderlist-droppoint-highlight');
event.preventDefault();
}
};
var onDragLeave = function onDragLeave(event) {
dragOverItemIndex.current = null;
DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
};
var onDrop = function onDrop(event) {
var dropIndex = draggedItemIndex.current > dragOverItemIndex.current ? dragOverItemIndex.current : dragOverItemIndex.current === 0 ? 0 : dragOverItemIndex.current - 1;
var value = _toConsumableArray(props.value);
ObjectUtils.reorderArray(value, draggedItemIndex.current, dropIndex);
dragOverItemIndex.current = null;
DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
if (props.onChange) {
props.onChange({
originalEvent: event,
value: value
});
}
};
var onDragEnd = function onDragEnd(event) {
dragging.current = false;
};
var onListMouseMove = function onListMouseMove(event) {
if (dragging.current) {
var offsetY = listElementRef.current.getBoundingClientRect().top + DomHandler.getWindowScrollTop();
var bottomDiff = offsetY + listElementRef.current.clientHeight - event.pageY;
var topDiff = event.pageY - offsetY;
if (bottomDiff < 25 && bottomDiff > 0) listElementRef.current.scrollTop += 15;else if (topDiff < 25 && topDiff > 0) listElementRef.current.scrollTop -= 15;
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
var createDropPoint = function createDropPoint(index, key) {
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-orderlist-droppoint",
onDragOver: function onDragOver(e) {
return _onDragOver(e, index + 1);
},
onDragLeave: onDragLeave,
onDrop: onDrop
});
};
var createHeader = function createHeader() {
return props.header ? /*#__PURE__*/React.createElement("div", {
className: "p-orderlist-header"
}, props.header) : null;
};
var createItems = function createItems() {
if (props.value) {
return props.value.map(function (item, i) {
var content = props.itemTemplate ? props.itemTemplate(item) : item;
var itemClassName = classNames('p-orderlist-item', {
'p-highlight': isSelected(item)
}, props.className);
var key = JSON.stringify(item);
if (props.dragdrop) {
var items = [];
if (i === 0) {
items.push(createDropPoint(item, i));
}
items.push( /*#__PURE__*/React.createElement("li", {
key: key,
className: itemClassName,
onClick: function onClick(e) {
return props.onItemClick({
originalEvent: e,
value: item,
index: i
});
},
onKeyDown: function onKeyDown(e) {
return props.onItemKeyDown({
originalEvent: e,
value: item,
index: i
});
},
role: "option",
"aria-selected": isSelected(item),
draggable: "true",
onDragStart: function onDragStart(e) {
return _onDragStart(e, i);
},
onDragEnd: onDragEnd,
tabIndex: props.tabIndex
}, content, /*#__PURE__*/React.createElement(Ripple, null)));
items.push(createDropPoint(i, key + '_droppoint'));
return items;
} else {
return /*#__PURE__*/React.createElement("li", {
key: key,
className: itemClassName,
role: "option",
"aria-selected": isSelected(item),
onClick: function onClick(e) {
return props.onItemClick({
originalEvent: e,
value: item,
index: i
});
},
onKeyDown: function onKeyDown(e) {
return props.onItemKeyDown({
originalEvent: e,
value: item,
index: i
});
},
tabIndex: props.tabIndex
}, content);
}
});
}
return null;
};
var createList = function createList() {
var items = createItems();
return /*#__PURE__*/React.createElement("ul", {
ref: listElementRef,
className: "p-orderlist-list",
style: props.listStyle,
onDragOver: onListMouseMove,
role: "listbox",
"aria-multiselectable": true
}, items);
};
var createFilter = function createFilter() {
if (props.filter) {
var content = /*#__PURE__*/React.createElement("div", {
className: "p-orderlist-filter"
}, /*#__PURE__*/React.createElement("input", {
type: "text",
value: props.filterValue,
onChange: props.onFilter,
onKeyDown: onFilterInputKeyDown,
placeholder: props.placeholder,
className: "p-orderlist-filter-input p-inputtext p-component"
}), /*#__PURE__*/React.createElement("span", {
className: "p-orderlist-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-orderlist-filter',
inputProps: {
inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
onChange: props.onFilter,
onKeyDown: onFilterInputKeyDown
},
filterOptions: filterOptions,
iconClassName: 'p-orderlist-filter-icon pi pi-search',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-orderlist-filter-container"
}, content);
}
return null;
};
var header = createHeader();
var filter = createFilter();
var list = createList();
return /*#__PURE__*/React.createElement("div", {
className: "p-orderlist-list-container"
}, header, filter, list);
});
OrderListSubList.displayName = 'OrderListSubList';
var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = OrderListBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectionState = _React$useState2[0],
setSelectionState = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filterValueState = _React$useState4[0],
setFilterValueState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
attributeSelectorState = _React$useState6[0],
setAttributeSelectorState = _React$useState6[1];
var hasFilter = ObjectUtils.isNotEmpty(filterValueState);
var elementRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var reorderDirection = React.useRef(null);
var onItemClick = function onItemClick(event) {
var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
var index = ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
var selected = index !== -1;
var newSelection;
if (selected) newSelection = metaKey ? selectionState.filter(function (_, i) {
return i !== index;
}) : [event.value];else newSelection = metaKey ? [].concat(_toConsumableArray(selectionState), [event.value]) : [event.value];
setSelectionState(newSelection);
};
var onItemKeyDown = function onItemKeyDown(event) {
var originalEvent = event.originalEvent;
var listItem = originalEvent.currentTarget;
switch (originalEvent.which) {
//down
case 40:
var nextItem = findNextItem(listItem);
nextItem && nextItem.focus();
originalEvent.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(listItem);
prevItem && prevItem.focus();
originalEvent.preventDefault();
break;
//enter
case 13:
onItemClick(event);
originalEvent.preventDefault();
break;
}
};
var onFilter = function onFilter(event) {
var _filterValue = event.target.value;
setFilterValueState(_filterValue);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: _filterValue
});
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
props.onFilter && props.onFilter({
filter: ''
});
};
var onFilterInputChange = function onFilterInputChange(event) {
var filter = event.target.value;
setFilterValueState(filter);
if (props.onFilter) {
props.onFilter({
originalEvent: event,
filter: filter
});
}
};
var getVisibleList = function getVisibleList() {
if (hasFilter) {
var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [];
return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
}
return props.value;
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? findPrevItem(prevItem) : prevItem : null;
};
var onReorder = function onReorder(event) {
if (props.onChange) {
props.onChange({
event: event.originalEvent,
value: event.value
});
}
reorderDirection.current = event.direction;
};
var updateListScroll = function updateListScroll() {
var list = DomHandler.findSingle(elementRef.current, '.p-orderlist-list');
var listItems = DomHandler.find(list, '.p-orderlist-item.p-highlight');
if (listItems && listItems.length) {
switch (reorderDirection.current) {
case 'up':
DomHandler.scrollInView(list, listItems[0]);
break;
case 'top':
list.scrollTop = 0;
break;
case 'down':
DomHandler.scrollInView(list, listItems[listItems.length - 1]);
break;
case 'bottom':
/* TODO: improve this code block */
setTimeout(function () {
return list.scrollTop = list.scrollHeight;
}, 100);
break;
}
}
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-orderlist[").concat(attributeSelectorState, "] {\n flex-direction: column;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls {\n padding: var(--content-padding);\n flex-direction: row;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button {\n margin-right: var(--inline-spacing);\n margin-bottom: 0;\n }\n\n .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button:last-child {\n margin-right: 0;\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
});
useUpdateEffect(function () {
if (attributeSelectorState) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (reorderDirection.current) {
updateListScroll();
reorderDirection.current = null;
}
});
var otherProps = OrderListBase.getOtherProps(props);
var className = classNames('p-orderlist p-component', props.className);
var visibleList = getVisibleList();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement(OrderListControls, {
value: visibleList,
selection: selectionState,
onReorder: onReorder,
dataKey: props.dataKey
}), /*#__PURE__*/React.createElement(OrderListSubList, {
value: visibleList,
selection: selectionState,
onItemClick: onItemClick,
onItemKeyDown: onItemKeyDown,
onFilterInputChange: onFilterInputChange,
itemTemplate: props.itemTemplate,
filter: props.filter,
onFilter: onFilter,
resetFilter: resetFilter,
filterTemplate: props.filterTemplate,
header: props.header,
listStyle: props.listStyle,
dataKey: props.dataKey,
dragdrop: props.dragdrop,
onChange: props.onChange,
tabIndex: props.tabIndex
}));
}));
OrderList.displayName = 'OrderList';
var OrganizationChartBase = {
defaultProps: {
__TYPE: 'OrganizationChart',
id: null,
value: null,
style: null,
className: null,
selectionMode: null,
selection: null,
nodeTemplate: null,
onSelectionChange: null,
onNodeSelect: null,
onNodeUnselect: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, OrganizationChartBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, OrganizationChartBase.defaultProps);
}
};
var OrganizationChartNode = /*#__PURE__*/React.memo(function (props) {
var node = props.node;
var _React$useState = React.useState(node.expanded),
_React$useState2 = _slicedToArray(_React$useState, 2),
expandedState = _React$useState2[0],
setExpandedState = _React$useState2[1];
var leaf = node.leaf === false ? false : !(node.children && node.children.length);
var colspan = node.children && node.children.length ? node.children.length * 2 : null;
var selected = props.isSelected(node);
var visibility = !leaf && expandedState ? 'inherit' : 'hidden';
var onNodeClick = function onNodeClick(event, node) {
props.onNodeClick(event, node);
};
var toggleNode = function toggleNode(event, node) {
setExpandedState(function (prevExpanded) {
return !prevExpanded;
});
event.preventDefault();
};
var createChildNodes = function createChildNodes() {
return /*#__PURE__*/React.createElement("tr", {
style: {
visibility: visibility
},
className: "p-organizationchart-nodes"
}, node.children && node.children.map(function (child, index) {
return /*#__PURE__*/React.createElement("td", {
key: index,
colSpan: "2"
}, /*#__PURE__*/React.createElement(OrganizationChartNode, {
node: child,
nodeTemplate: props.nodeTemplate,
selectionMode: props.selectionMode,
onNodeClick: props.onNodeClick,
isSelected: props.isSelected
}));
}));
};
var createLinesMiddle = function createLinesMiddle() {
var nodeChildLength = node.children && node.children.length;
return /*#__PURE__*/React.createElement("tr", {
style: {
visibility: visibility
},
className: "p-organizationchart-lines"
}, node.children && node.children.length === 1 && /*#__PURE__*/React.createElement("td", {
colSpan: colspan
}, /*#__PURE__*/React.createElement("div", {
className: "p-organizationchart-line-down"
})), node.children && node.children.length > 1 && node.children.map(function (_, index) {
var leftClassName = classNames('p-organizationchart-line-left', {
'p-organizationchart-line-top': index !== 0
});
var rightClassName = classNames('p-organizationchart-line-right', {
'p-organizationchart-line-top': index !== nodeChildLength - 1
});
return [/*#__PURE__*/React.createElement("td", {
key: index + '_lineleft',
className: leftClassName
}, "\xA0"), /*#__PURE__*/React.createElement("td", {
key: index + '_lineright',
className: rightClassName
}, "\xA0")];
}));
};
var createLinesDown = function createLinesDown() {
return /*#__PURE__*/React.createElement("tr", {
style: {
visibility: visibility
},
className: "p-organizationchart-lines"
}, /*#__PURE__*/React.createElement("td", {
colSpan: colspan
}, /*#__PURE__*/React.createElement("div", {
className: "p-organizationchart-line-down"
})));
};
var createToggler = function createToggler() {
if (!leaf) {
var toggleIconClassName = classNames('p-node-toggler-icon', {
'pi pi-chevron-down': expandedState,
'pi pi-chevron-up': !expandedState
});
return (
/*#__PURE__*/
/* eslint-disable */
React.createElement("a", {
href: "#",
className: "p-node-toggler",
onClick: function onClick(e) {
return toggleNode(e);
}
}, /*#__PURE__*/React.createElement("i", {
className: toggleIconClassName
}))
/* eslint-enable */
);
}
return null;
};
var createNodeLabel = function createNodeLabel() {
var label = props.nodeTemplate && ObjectUtils.getJSXElement(props.nodeTemplate, node) || node.label;
return /*#__PURE__*/React.createElement("div", null, label);
};
var createNodeContent = function createNodeContent() {
var nodeClassName = classNames('p-organizationchart-node-content', {
'p-organizationchart-selectable-node': props.selectionMode && node.selectable !== false,
'p-highlight': selected
}, node.className);
var label = createNodeLabel();
var toggler = createToggler();
return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
colSpan: colspan
}, /*#__PURE__*/React.createElement("div", {
className: nodeClassName,
style: node.style,
onClick: function onClick(e) {
return onNodeClick(e, node);
}
}, label, toggler)));
};
var nodeContent = createNodeContent();
var linesDown = createLinesDown();
var linesMiddle = createLinesMiddle();
var childNodes = createChildNodes();
return /*#__PURE__*/React.createElement("table", {
className: "p-organizationchart-table"
}, /*#__PURE__*/React.createElement("tbody", null, nodeContent, linesDown, linesMiddle, childNodes));
});
OrganizationChartNode.displayName = 'OrganizationChartNode';
var OrganizationChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = OrganizationChartBase.getProps(inProps);
var elementRef = React.useRef(null);
var root = props.value && props.value.length ? props.value[0] : null;
var onNodeClick = function onNodeClick(event, node) {
if (props.selectionMode) {
var target = event.target;
if (node.selectable === false || DomHandler.hasClass(target, 'p-node-toggler') || DomHandler.hasClass(target, 'p-node-toggler-icon')) {
return;
}
var index = findIndexInSelection(node);
var selected = index >= 0;
var selection;
if (props.selectionMode === 'single') {
if (selected) {
selection = null;
props.onNodeUnselect && props.onNodeUnselect({
originalEvent: event,
node: node
});
} else {
selection = node;
props.onNodeSelect && props.onNodeSelect({
originalEvent: event,
node: node
});
}
} else if (props.selectionMode === 'multiple') {
if (selected) {
selection = props.selection.filter(function (_, i) {
return i !== index;
});
props.onNodeUnselect && props.onNodeUnselect({
originalEvent: event,
node: node
});
} else {
selection = [].concat(_toConsumableArray(props.selection || []), [node]);
props.onNodeSelect && props.onNodeSelect({
originalEvent: event,
node: node
});
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
data: selection
});
}
}
};
var findIndexInSelection = function findIndexInSelection(node) {
if (props.selectionMode && props.selection) {
if (props.selectionMode === 'single') return props.selection === node ? 0 : -1;else if (props.selectionMode === 'multiple') return props.selection.findIndex(function (selectedNode) {
return selectedNode === node;
});
}
return -1;
};
var isSelected = function isSelected(node) {
return findIndexInSelection(node) !== -1;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = OrganizationChartBase.getOtherProps(props);
var className = classNames('p-organizationchart p-component', props.className);
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
style: props.style,
className: className
}, otherProps), /*#__PURE__*/React.createElement(OrganizationChartNode, {
node: root,
nodeTemplate: props.nodeTemplate,
selectionMode: props.selectionMode,
onNodeClick: onNodeClick,
isSelected: isSelected
}));
}));
OrganizationChart.displayName = 'OrganizationChart';
var OverlayPanelBase = {
defaultProps: {
__TYPE: 'OverlayPanel',
id: null,
dismissable: true,
showCloseIcon: false,
style: null,
className: null,
appendTo: null,
breakpoints: null,
ariaCloseLabel: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, OverlayPanelBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, OverlayPanelBase.defaultProps);
}
};
var OverlayPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = OverlayPanelBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var attributeSelector = React.useRef('');
var overlayRef = React.useRef(null);
var currentTargetRef = React.useRef(null);
var isPanelClicked = React.useRef(false);
var styleElement = React.useRef(null);
var overlayEventListener = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: currentTargetRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
type === 'outside' ? props.dismissable && !isPanelClicked.current && hide() : hide();
}
isPanelClicked.current = false;
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var isOutsideClicked = function isOutsideClicked(target) {
return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
};
var hasTargetChanged = function hasTargetChanged(event, target) {
return currentTargetRef.current != null && currentTargetRef.current !== (target || event.currentTarget || event.target);
};
var onCloseClick = function onCloseClick(event) {
hide();
event.preventDefault();
};
var onPanelClick = function onPanelClick(event) {
isPanelClicked.current = true;
OverlayService.emit('overlay-click', {
originalEvent: event,
target: currentTargetRef.current
});
};
var onContentClick = function onContentClick() {
isPanelClicked.current = true;
};
var toggle = function toggle(event, target) {
if (visibleState) {
hide();
if (hasTargetChanged(event, target)) {
currentTargetRef.current = target || event.currentTarget || event.target;
setTimeout(function () {
show(event, currentTargetRef.current);
}, 200);
}
} else {
show(event, target);
}
};
var show = function show(event, target) {
currentTargetRef.current = target || event.currentTarget || event.target;
if (visibleState) {
align();
} else {
setVisibleState(true);
overlayEventListener.current = function (e) {
!isOutsideClicked(e.target) && (isPanelClicked.current = true);
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var hide = function hide() {
setVisibleState(false);
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
};
var onEnter = function onEnter() {
overlayRef.current.setAttribute(attributeSelector.current, '');
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
align();
};
var onEntered = function onEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onExit = function onExit() {
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var align = function align() {
if (currentTargetRef.current && overlayRef.current) {
DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
var containerOffset = DomHandler.getOffset(overlayRef.current);
var targetOffset = DomHandler.getOffset(currentTargetRef.current);
var arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
if (containerOffset.top < targetOffset.top) {
DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
}
}
};
var createStyle = function createStyle() {
if (!styleElement.current) {
styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var innerHTML = '';
for (var breakpoint in props.breakpoints) {
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-overlaypanel[").concat(attributeSelector.current, "] {\n width: ").concat(props.breakpoints[breakpoint], " !important;\n }\n }\n ");
}
styleElement.current.innerHTML = innerHTML;
}
};
useMountEffect(function () {
attributeSelector.current = UniqueComponentId();
if (props.breakpoints) {
createStyle();
}
});
useUnmountEffect(function () {
styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
getElement: function getElement() {
return overlayRef.current;
}
};
});
var createCloseIcon = function createCloseIcon() {
if (props.showCloseIcon) {
var ariaLabel = props.ariaCloseLabel || localeOption('close');
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-overlaypanel-close p-link",
onClick: onCloseClick,
"aria-label": ariaLabel
}, /*#__PURE__*/React.createElement("span", {
className: "p-overlaypanel-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createElement = function createElement() {
var otherProps = OverlayPanelBase.getOtherProps(props);
var className = classNames('p-overlaypanel p-component', props.className, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var closeIcon = createCloseIcon();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-overlaypanel",
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: overlayRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onPanelClick
}), /*#__PURE__*/React.createElement("div", {
className: "p-overlaypanel-content",
onClick: onContentClick,
onMouseDown: onContentClick
}, props.children), closeIcon));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
OverlayPanel.displayName = 'OverlayPanel';
var PanelBase = {
defaultProps: {
__TYPE: 'Panel',
id: null,
header: null,
headerTemplate: null,
toggleable: null,
style: null,
className: null,
collapsed: null,
expandIcon: 'pi pi-plus',
collapseIcon: 'pi pi-minus',
icons: null,
transitionOptions: null,
onExpand: null,
onCollapse: null,
onToggle: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PanelBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PanelBase.defaultProps);
}
};
var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = PanelBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.collapsed),
_React$useState4 = _slicedToArray(_React$useState3, 2),
collapsedState = _React$useState4[0],
setCollapsedState = _React$useState4[1];
var elementRef = React.useRef(ref);
var contentRef = React.useRef(null);
var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
var headerId = idState + '_header';
var contentId = idState + '_content';
var toggle = function toggle(event) {
if (props.toggleable) {
collapsed ? expand(event) : collapse(event);
if (props.onToggle) {
props.onToggle({
originalEvent: event,
value: !collapsed
});
}
}
event.preventDefault();
};
var expand = function expand(event) {
if (!props.onToggle) {
setCollapsedState(false);
}
props.onExpand && props.onExpand(event);
};
var collapse = function collapse(event) {
if (!props.onToggle) {
setCollapsedState(true);
}
props.onCollapse && props.onCollapse(event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getContent: function getContent() {
return contentRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
var createToggleIcon = function createToggleIcon() {
if (props.toggleable) {
var buttonId = idState + '_label';
var toggleIcon = collapsed ? props.expandIcon : props.collapseIcon;
return /*#__PURE__*/React.createElement("button", {
className: "p-panel-header-icon p-panel-toggler p-link",
onClick: toggle,
id: buttonId,
"aria-controls": contentId,
"aria-expanded": !collapsed,
role: "tab"
}, IconUtils.getJSXIcon(toggleIcon, undefined, {
props: props,
collapsed: collapsed
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createHeader = function createHeader() {
var header = ObjectUtils.getJSXElement(props.header, props);
var icons = ObjectUtils.getJSXElement(props.icons, props);
var togglerElement = createToggleIcon();
var titleElement = /*#__PURE__*/React.createElement("span", {
className: "p-panel-title",
id: headerId
}, header);
var iconsElement = /*#__PURE__*/React.createElement("div", {
className: "p-panel-icons"
}, icons, togglerElement);
var content = /*#__PURE__*/React.createElement("div", {
className: "p-panel-header"
}, titleElement, iconsElement);
if (props.headerTemplate) {
var defaultContentOptions = {
className: 'p-panel-header',
titleClassName: 'p-panel-title',
iconsClassName: 'p-panel-icons',
togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
togglerIconClassName: collapsed ? props.expandIcon : props.collapseIcon,
onTogglerClick: toggle,
titleElement: titleElement,
iconsElement: iconsElement,
togglerElement: togglerElement,
element: content,
props: props,
collapsed: collapsed
};
return ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
} else if (props.header || props.toggleable) {
return content;
}
return null;
};
var createContent = function createContent() {
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: contentRef,
classNames: "p-toggleable-content",
timeout: {
enter: 1000,
exit: 450
},
"in": !collapsed,
unmountOnExit: true,
options: props.transitionOptions
}, /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: "p-toggleable-content",
"aria-hidden": collapsed,
role: "region",
id: contentId,
"aria-labelledby": headerId
}, /*#__PURE__*/React.createElement("div", {
className: "p-panel-content"
}, props.children)));
};
var otherProps = PanelBase.getOtherProps(props);
var className = classNames('p-panel p-component', {
'p-panel-toggleable': props.toggleable
}, props.className);
var header = createHeader();
var content = createContent();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), header, content);
});
Panel.displayName = 'Panel';
var PanelMenuBase = {
defaultProps: {
__TYPE: 'Panel',
id: null,
model: null,
style: null,
className: null,
multiple: false,
transitionOptions: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PanelMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PanelMenuBase.defaultProps);
}
};
var PanelMenuSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var findActiveItem = function findActiveItem() {
if (props.model) {
if (props.multiple) {
return props.model.filter(function (item) {
return item.expanded;
});
} else {
var activeItem = null;
props.model.forEach(function (item) {
if (item.expanded) {
if (!activeItem) activeItem = item;else item.expanded = false;
}
});
return activeItem;
}
}
return null;
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
var activeItem = activeItemState;
var active = isItemActive(item);
if (active) {
item.expanded = false;
setActiveItemState(props.multiple ? activeItem.filter(function (a_item) {
return a_item !== item;
}) : null);
} else {
if (!props.multiple && activeItem) {
activeItem.expanded = false;
}
item.expanded = true;
setActiveItemState(props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item);
}
};
var isItemActive = function isItemActive(item) {
return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
};
useMountEffect(function () {
setActiveItemState(findActiveItem());
});
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator"
});
};
var createSubmenu = function createSubmenu(item, active) {
var className = classNames('p-toggleable-content', {
'p-toggleable-content-collapsed': !active
});
var submenuRef = /*#__PURE__*/React.createRef();
if (item.items) {
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: submenuRef,
classNames: "p-toggleable-content",
timeout: {
enter: 1000,
exit: 450
},
"in": active,
unmountOnExit: true
}, /*#__PURE__*/React.createElement("div", {
ref: submenuRef,
className: className
}, /*#__PURE__*/React.createElement(PanelMenuSub, {
menuProps: props.menuProps,
model: item.items,
multiple: props.multiple
})));
}
return null;
};
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
var key = item.label + '_' + index;
var active = isItemActive(item);
var className = classNames('p-menuitem', item.className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': item.disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var submenuIconClassName = classNames('p-panelmenu-icon pi pi-fw', {
'pi-angle-right': !active,
'pi-angle-down': active
});
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props.menuProps
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var submenu = createSubmenu(item, active);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: linkClassName,
target: item.target,
onClick: function onClick(event) {
return onItemClick(event, item);
},
role: "menuitem",
"aria-disabled": item.disabled
}, submenuIcon, icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
leaf: !item.items,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
id: item.id,
className: className,
style: item.style,
role: "none"
}, content, submenu);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var className = classNames('p-submenu-list', props.className);
var menu = createMenu();
return /*#__PURE__*/React.createElement("ul", {
className: className,
role: "tree"
}, menu);
});
PanelMenuSub.displayName = 'PanelMenuSub';
var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = PanelMenuBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeItemState = _React$useState4[0],
setActiveItemState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
animationDisabled = _React$useState6[0],
setAnimationDisabled = _React$useState6[1];
var elementRef = React.useRef(null);
var headerId = idState + '_header';
var contentId = idState + '_content';
var findActiveItem = function findActiveItem() {
if (props.model) {
if (props.multiple) {
return props.model.filter(function (item) {
return item.expanded;
});
} else {
var activeItem = null;
props.model.forEach(function (item) {
if (item.expanded) {
if (!activeItem) activeItem = item;else item.expanded = false;
}
});
return activeItem;
}
}
return null;
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
var activeItem = activeItemState;
var active = isItemActive(item);
if (active) {
item.expanded = false;
setActiveItemState(props.multiple ? activeItem.filter(function (a_item) {
return a_item !== item;
}) : null);
} else {
if (!props.multiple && activeItem) {
activeItem.expanded = false;
}
item.expanded = true;
setActiveItemState(props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item);
}
};
var isItemActive = function isItemActive(item) {
return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
setActiveItemState(findActiveItem());
});
useUpdateEffect(function () {
setAnimationDisabled(true);
setActiveItemState(findActiveItem());
}, [props.model]);
var onEnter = function onEnter() {
setAnimationDisabled(false);
};
var createPanel = function createPanel(item, index) {
if (item.visible === false) {
return null;
}
var key = item.label + '_' + index;
var active = isItemActive(item);
var className = classNames('p-panelmenu-panel', item.className);
var headerClassName = classNames('p-component p-panelmenu-header', {
'p-highlight': active,
'p-disabled': item.disabled
});
var submenuIconClassName = classNames('p-panelmenu-icon pi', {
'pi-chevron-right': !active,
' pi-chevron-down': active
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var contentWrapperClassName = classNames('p-toggleable-content', {
'p-toggleable-content-collapsed': !active
});
var menuContentRef = /*#__PURE__*/React.createRef();
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: "p-panelmenu-header-link",
onClick: function onClick(e) {
return onItemClick(e, item);
},
"aria-expanded": active,
id: headerId,
"aria-controls": contentId,
"aria-disabled": item.disabled
}, submenuIcon, icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
className: 'p-panelmenu-header-link',
labelClassName: 'p-menuitem-text',
submenuIconClassName: submenuIconClassName,
iconClassName: iconClassName,
element: content,
props: props,
leaf: !item.items,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
key: key,
className: className,
style: item.style
}, /*#__PURE__*/React.createElement("div", {
className: headerClassName,
style: item.style
}, content), /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: menuContentRef,
classNames: "p-toggleable-content",
timeout: {
enter: 1000,
exit: 450
},
onEnter: onEnter,
disabled: animationDisabled,
"in": active,
unmountOnExit: true,
options: props.transitionOptions
}, /*#__PURE__*/React.createElement("div", {
ref: menuContentRef,
className: contentWrapperClassName,
role: "region",
id: contentId,
"aria-labelledby": headerId
}, /*#__PURE__*/React.createElement("div", {
className: "p-panelmenu-content"
}, /*#__PURE__*/React.createElement(PanelMenuSub, {
menuProps: props,
model: item.items,
className: "p-panelmenu-root-submenu",
multiple: props.multiple
})))));
};
var createPanels = function createPanels() {
return props.model ? props.model.map(createPanel) : null;
};
var otherProps = PanelMenuBase.getOtherProps(props);
var className = classNames('p-panelmenu p-component', props.className);
var panels = createPanels();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), panels);
}));
PanelMenu.displayName = 'PanelMenu';
var PasswordBase = {
defaultProps: {
__TYPE: 'Password',
id: null,
inputId: null,
inputRef: null,
promptLabel: null,
weakLabel: null,
mediumLabel: null,
strongLabel: null,
mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})',
strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
feedback: true,
toggleMask: false,
appendTo: null,
header: null,
content: null,
footer: null,
icon: null,
tooltip: null,
tooltipOptions: null,
style: null,
className: null,
inputStyle: null,
inputClassName: null,
panelStyle: null,
panelClassName: null,
transitionOptions: null,
onInput: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PasswordBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PasswordBase.defaultProps);
}
};
var Password = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = PasswordBase.getProps(inProps);
var promptLabel = props.promptLabel || localeOption('passwordPrompt');
var weakLabel = props.weakLabel || localeOption('weak');
var mediumLabel = props.mediumLabel || localeOption('medium');
var strongLabel = props.strongLabel || localeOption('strong');
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
overlayVisibleState = _React$useState2[0],
setOverlayVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
meterState = _React$useState4[0],
setMeterState = _React$useState4[1];
var _React$useState5 = React.useState(promptLabel),
_React$useState6 = _slicedToArray(_React$useState5, 2),
infoTextState = _React$useState6[0],
setInfoTextState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedState = _React$useState8[0],
setFocusedState = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
unmaskedState = _React$useState10[0],
setUnmaskedState = _React$useState10[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex));
var strongCheckRegExp = React.useRef(new RegExp(props.strongRegex));
var type = unmaskedState ? 'text' : 'password';
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var currentValue = inputRef.current && inputRef.current.value;
var isFilled = React.useMemo(function () {
return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue);
}, [props.value, props.defaultValue, currentValue]);
var updateLabels = function updateLabels() {
if (meterState) {
var label = null;
switch (meterState.strength) {
case 'weak':
label = weakLabel;
break;
case 'medium':
label = mediumLabel;
break;
case 'strong':
label = strongLabel;
break;
}
if (label && infoTextState !== label) {
setInfoTextState(label);
}
} else {
if (infoTextState !== promptLabel) {
setInfoTextState(promptLabel);
}
}
};
var onPanelClick = function onPanelClick(event) {
if (props.feedback) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
}
};
var onMaskToggle = function onMaskToggle() {
setUnmaskedState(function (prevUnmasked) {
return !prevUnmasked;
});
};
var show = function show() {
updateLabels();
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var alignOverlay = function alignOverlay() {
if (inputRef.current) {
DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
}
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var onFocus = function onFocus(event) {
setFocusedState(true);
if (props.feedback) {
show();
}
props.onFocus && props.onFocus(event);
};
var onBlur = function onBlur(event) {
setFocusedState(false);
if (props.feedback) {
hide();
}
props.onBlur && props.onBlur(event);
};
var onKeyup = function onKeyup(e) {
var keyCode = e.keyCode || e.which;
if (props.feedback) {
var value = e.target.value;
var label = null;
var meter = null;
switch (testStrength(value)) {
case 1:
label = weakLabel;
meter = {
strength: 'weak',
width: '33.33%'
};
break;
case 2:
label = mediumLabel;
meter = {
strength: 'medium',
width: '66.66%'
};
break;
case 3:
label = strongLabel;
meter = {
strength: 'strong',
width: '100%'
};
break;
default:
label = promptLabel;
meter = null;
break;
}
setMeterState(meter);
setInfoTextState(label);
if (!!keyCode && !overlayVisibleState) {
show();
}
}
props.onKeyUp && props.onKeyUp(e);
};
var onInput = function onInput(event, validatePattern) {
if (props.onInput) {
props.onInput(event, validatePattern);
}
if (!props.onChange) {
ObjectUtils.isNotEmpty(event.target.value) ? DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled') : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
};
var testStrength = function testStrength(str) {
if (strongCheckRegExp.current.test(str)) return 3;else if (mediumCheckRegExp.current.test(str)) return 2;else if (str.length) return 1;
return 0;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getOverlay: function getOverlay() {
return overlayRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useEffect(function () {
mediumCheckRegExp.current = new RegExp(props.mediumRegex);
}, [props.mediumRegex]);
React.useEffect(function () {
strongCheckRegExp.current = new RegExp(props.strongRegex);
}, [props.strongRegex]);
React.useEffect(function () {
if (!isFilled && DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled')) {
DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
}
}, [isFilled]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createIcon = function createIcon() {
if (props.toggleMask) {
var iconClassName = unmaskedState ? 'pi pi-eye-slash' : 'pi pi-eye';
var content = /*#__PURE__*/React.createElement("i", {
className: iconClassName,
onClick: onMaskToggle
});
if (props.icon) {
var defaultIconOptions = {
onClick: onMaskToggle,
className: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.icon, defaultIconOptions);
}
return content;
}
return null;
};
var createPanel = function createPanel() {
var panelClassName = classNames('p-password-panel p-component', props.panelClassName, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var _ref2 = meterState || {
strength: '',
width: '0%'
},
strength = _ref2.strength,
width = _ref2.width;
var header = ObjectUtils.getJSXElement(props.header, props);
var footer = ObjectUtils.getJSXElement(props.footer, props);
var content = props.content ? ObjectUtils.getJSXElement(props.content, props) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "p-password-meter"
}, /*#__PURE__*/React.createElement("div", {
className: "p-password-strength ".concat(strength),
style: {
width: width
}
})), /*#__PURE__*/React.createElement("div", {
className: "p-password-info ".concat(strength)
}, infoTextState));
var panel = /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: overlayRef,
classNames: "p-connected-overlay",
"in": overlayVisibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, /*#__PURE__*/React.createElement("div", {
ref: overlayRef,
className: panelClassName,
style: props.panelStyle,
onClick: onPanelClick
}, header, content, footer));
return /*#__PURE__*/React.createElement(Portal, {
element: panel,
appendTo: props.appendTo
});
};
var className = classNames('p-password p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState,
'p-input-icon-right': props.toggleMask
}, props.className);
var inputClassName = classNames('p-password-input', props.inputClassName);
var inputProps = PasswordBase.getOtherProps(props);
var icon = createIcon();
var panel = createPanel();
return /*#__PURE__*/React.createElement("div", {
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, /*#__PURE__*/React.createElement(InputText, _extends({
ref: inputRef,
id: props.inputId
}, inputProps, {
type: type,
className: inputClassName,
style: props.inputStyle,
onFocus: onFocus,
onBlur: onBlur,
onKeyUp: onKeyup,
onInput: onInput,
tooltip: props.tooltip,
tooltipOptions: props.tooltipOptions
})), icon, panel);
}));
Password.displayName = 'Password';
var PickListBase = {
defaultProps: {
__TYPE: 'PickList',
id: null,
source: null,
target: null,
sourceHeader: null,
targetHeader: null,
style: null,
className: null,
sourceStyle: null,
targetStyle: null,
sourceSelection: null,
targetSelection: null,
showSourceControls: true,
showTargetControls: true,
metaKeySelection: true,
filter: false,
filterBy: null,
filterMatchMode: 'contains',
filterLocale: undefined,
sourceFilterValue: null,
targetFilterValue: null,
showSourceFilter: true,
showTargetFilter: true,
sourceFilterPlaceholder: null,
targetFilterPlaceholder: null,
sourceFilterTemplate: null,
targetFilterTemplate: null,
tabIndex: 0,
dataKey: null,
breakpoint: '960px',
itemTemplate: null,
sourceItemTemplate: null,
targetItemTemplate: null,
onChange: null,
onMoveToSource: null,
onMoveAllToSource: null,
onMoveToTarget: null,
onMoveAllToTarget: null,
onSourceSelectionChange: null,
onTargetSelectionChange: null,
onSourceFilterChange: null,
onTargetFilterChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, PickListBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, PickListBase.defaultProps);
}
};
var PickListControls = /*#__PURE__*/React.memo(function (props) {
var moveDisabled = !props.selection || !props.selection.length;
var moveUp = function moveUp(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = 0; i < selectedItems.length; i++) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = list[selectedItemIndex];
var temp = list[selectedItemIndex - 1];
list[selectedItemIndex - 1] = movedItem;
list[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'up'
});
}
}
};
var moveTop = function moveTop(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = 0; i < selectedItems.length; i++) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== 0) {
var movedItem = list.splice(selectedItemIndex, 1)[0];
list.unshift(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'top'
});
}
}
};
var moveDown = function moveDown(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = selectedItems.length - 1; i >= 0; i--) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== list.length - 1) {
var movedItem = list[selectedItemIndex];
var temp = list[selectedItemIndex + 1];
list[selectedItemIndex + 1] = movedItem;
list[selectedItemIndex] = temp;
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'down'
});
}
}
};
var moveBottom = function moveBottom(event) {
var selectedItems = props.selection;
if (selectedItems && selectedItems.length) {
var list = _toConsumableArray(props.list);
for (var i = selectedItems.length - 1; i >= 0; i--) {
var selectedItem = selectedItems[i];
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
if (selectedItemIndex !== list.length - 1) {
var movedItem = list.splice(selectedItemIndex, 1)[0];
list.push(movedItem);
} else {
break;
}
}
if (props.onReorder) {
props.onReorder({
originalEvent: event,
value: list,
direction: 'bottom'
});
}
}
};
var className = classNames('p-picklist-buttons', props.className);
return /*#__PURE__*/React.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: "pi pi-angle-up",
onClick: moveUp
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: "pi pi-angle-double-up",
onClick: moveTop
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: "pi pi-angle-down",
onClick: moveDown
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveDisabled,
type: "button",
icon: "pi pi-angle-double-down",
onClick: moveBottom
}));
});
PickListControls.displayName = 'PickListControls';
var PickListItem = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
value: props.value
});
}
};
var onKeyDown = function onKeyDown(event) {
if (props.onKeyDown) {
props.onKeyDown({
originalEvent: event,
value: props.value
});
}
};
var content = props.template ? props.template(props.value) : props.value;
var className = classNames('p-picklist-item', {
'p-highlight': props.selected
}, props.className);
return /*#__PURE__*/React.createElement("li", {
className: className,
onClick: onClick,
onKeyDown: onKeyDown,
tabIndex: props.tabIndex,
role: "option",
"aria-selected": props.selected
}, content, /*#__PURE__*/React.createElement(Ripple, null));
});
PickListItem.displayName = 'PickListItem';
var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var listElementRef = React.useRef(null);
var onItemClick = function onItemClick(event) {
var originalEvent = event.originalEvent;
var item = event.value;
var selection = _toConsumableArray(props.selection);
var index = ObjectUtils.findIndexInList(item, selection, props.dataKey);
var selected = index !== -1;
var metaSelection = props.metaKeySelection;
if (metaSelection) {
var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
if (selected && metaKey) {
selection.splice(index, 1);
} else {
if (!metaKey) {
selection.length = 0;
}
selection.push(item);
}
} else {
if (selected) selection.splice(index, 1);else selection.push(item);
}
if (props.onSelectionChange) {
props.onSelectionChange({
event: originalEvent,
value: selection
});
}
};
var onItemKeyDown = function onItemKeyDown(event) {
var originalEvent = event.originalEvent;
var listItem = originalEvent.currentTarget;
switch (originalEvent.which) {
//down
case 40:
var nextItem = findNextItem(listItem);
nextItem && nextItem.focus();
originalEvent.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(listItem);
prevItem && prevItem.focus();
originalEvent.preventDefault();
break;
//enter
case 13:
onItemClick(event);
originalEvent.preventDefault();
break;
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? !DomHandler.hasClass(nextItem, 'p-picklist-item') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? !DomHandler.hasClass(prevItem, 'p-picklist-item') ? findPrevItem(prevItem) : prevItem : null;
};
var isSelected = function isSelected(item) {
return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
value: event.target.value,
type: props.type
});
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
React.useImperativeHandle(ref, function () {
return {
listElementRef: listElementRef
};
});
var createHeader = function createHeader() {
if (props.header) {
return /*#__PURE__*/React.createElement("div", {
className: "p-picklist-header"
}, ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createItems = function createItems() {
if (props.list) {
return props.list.map(function (item) {
var key = JSON.stringify(item);
var selected = isSelected(item);
return /*#__PURE__*/React.createElement(PickListItem, {
key: key,
value: item,
template: props.itemTemplate,
selected: selected,
onClick: onItemClick,
onKeyDown: onItemKeyDown,
tabIndex: props.tabIndex
});
});
}
return null;
};
var createFilter = function createFilter() {
if (props.showFilter) {
var content = /*#__PURE__*/React.createElement("div", {
className: "p-picklist-filter"
}, /*#__PURE__*/React.createElement("input", {
type: "text",
value: props.filterValue,
onChange: onFilter,
onKeyDown: onFilterInputKeyDown,
placeholder: props.placeholder,
className: "p-picklist-filter-input p-inputtext p-component"
}), /*#__PURE__*/React.createElement("span", {
className: "p-picklist-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-picklist-filter',
inputProps: {
className: 'p-picklist-filter-input p-inputtext p-component',
onChange: onFilter,
onKeyDown: onFilterInputKeyDown
},
iconClassName: 'p-picklist-filter-icon pi pi-search',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-picklist-filter-container"
}, content);
}
return null;
};
var createList = function createList() {
var items = createItems();
var className = classNames('p-picklist-list', props.listClassName);
return /*#__PURE__*/React.createElement("ul", {
className: className,
style: props.style,
role: "listbox",
"aria-multiselectable": true
}, items);
};
var className = classNames('p-picklist-list-wrapper', props.className);
var header = createHeader();
var filter = createFilter();
var list = createList();
return /*#__PURE__*/React.createElement("div", {
ref: listElementRef,
className: className
}, header, filter, list);
}));
PickListSubList.displayName = 'PickListSubList';
var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
var moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
var moveAllLeftDisabled = ObjectUtils.isEmpty(props.visibleTargetList);
var moveRight = function moveRight(event) {
var selection = props.sourceSelection;
if (ObjectUtils.isNotEmpty(selection)) {
var targetList = _toConsumableArray(props.target);
var sourceList = _toConsumableArray(props.source);
for (var i = 0; i < selection.length; i++) {
var selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey) === -1) {
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey), 1)[0]);
}
}
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'toTarget'
});
}
}
};
var moveAllRight = function moveAllRight(event) {
if (props.source) {
var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.visibleSourceList));
var sourceList = props.source.filter(function (s) {
return !props.visibleSourceList.some(function (vs) {
return vs === s;
});
});
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'allToTarget'
});
}
}
};
var moveLeft = function moveLeft(event) {
var selection = props.targetSelection;
if (ObjectUtils.isNotEmpty(selection)) {
var targetList = _toConsumableArray(props.target);
var sourceList = _toConsumableArray(props.source);
for (var i = 0; i < selection.length; i++) {
var selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey) === -1) {
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey), 1)[0]);
}
}
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'toSource'
});
}
}
};
var moveAllLeft = function moveAllLeft(event) {
if (props.source) {
var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.visibleTargetList));
var targetList = props.target.filter(function (t) {
return !props.visibleTargetList.some(function (vt) {
return vt === t;
});
});
if (props.onTransfer) {
props.onTransfer({
originalEvent: event,
source: sourceList,
target: targetList,
direction: 'allToSource'
});
}
}
};
var className = classNames('p-picklist-buttons p-picklist-transfer-buttons', props.className);
return /*#__PURE__*/React.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement(Button, {
disabled: moveRightDisabled,
type: "button",
icon: "pi pi-angle-right",
onClick: moveRight
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveAllRightDisabled,
type: "button",
icon: "pi pi-angle-double-right",
onClick: moveAllRight
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveLeftDisabled,
type: "button",
icon: "pi pi-angle-left",
onClick: moveLeft
}), /*#__PURE__*/React.createElement(Button, {
disabled: moveAllLeftDisabled,
type: "button",
icon: "pi pi-angle-double-left",
onClick: moveAllLeft
}));
});
PickListTransferControls.displayName = 'PickListTransferControls';
var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = PickListBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
sourceSelectionState = _React$useState2[0],
setSourceSelectionState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
targetSelectionState = _React$useState4[0],
setTargetSelectionState = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
sourceFilterValueState = _React$useState6[0],
setSourceFilterValueState = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
targetFilterValueState = _React$useState8[0],
setTargetFilterValueState = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
attributeSelectorState = _React$useState10[0],
setAttributeSelectorState = _React$useState10[1];
var elementRef = React.useRef(null);
var sourceListElementRef = React.useRef(null);
var targetListElementRef = React.useRef(null);
var reorderedListElementRef = React.useRef(null);
var reorderDirection = React.useRef(null);
var styleElementRef = React.useRef(null);
var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
var targetFilteredValue = props.onTargetFilterChange ? props.targetFilterValue : targetFilterValueState;
var hasFilterBy = ObjectUtils.isNotEmpty(props.filterBy);
var showSourceFilter = hasFilterBy && props.showSourceFilter;
var showTargetFilter = hasFilterBy && props.showTargetFilter;
var onSourceReorder = function onSourceReorder(event) {
handleChange(event, event.value, props.target);
reorderedListElementRef.current = sourceListElementRef.current.listElementRef.current;
reorderDirection.current = event.direction;
};
var onTargetReorder = function onTargetReorder(event) {
handleChange(event, props.source, event.value);
reorderedListElementRef.current = targetListElementRef.current.listElementRef.current;
reorderDirection.current = event.direction;
};
var handleScrollPosition = function handleScrollPosition(listElement, direction) {
if (listElement) {
var list = DomHandler.findSingle(listElement, '.p-picklist-list');
switch (direction) {
case 'up':
scrollInView(list, -1);
break;
case 'top':
list.scrollTop = 0;
break;
case 'down':
scrollInView(list, 1);
break;
case 'bottom':
/* TODO: improve this code block */
setTimeout(function () {
return list.scrollTop = list.scrollHeight;
}, 100);
break;
}
}
};
var handleChange = function handleChange(event, source, target) {
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
source: source,
target: target
});
}
};
var onTransfer = function onTransfer(event) {
var originalEvent = event.originalEvent,
source = event.source,
target = event.target,
direction = event.direction;
var selectedValue = [];
switch (direction) {
case 'toTarget':
selectedValue = sourceSelection;
if (props.onMoveToTarget) {
props.onMoveToTarget({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
case 'allToTarget':
selectedValue = props.source;
if (props.onMoveAllToTarget) {
props.onMoveAllToTarget({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
case 'toSource':
selectedValue = targetSelection;
if (props.onMoveToSource) {
props.onMoveToSource({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
case 'allToSource':
selectedValue = props.target;
if (props.onMoveAllToSource) {
props.onMoveAllToSource({
originalEvent: originalEvent,
value: selectedValue
});
}
break;
}
_onSelectionChange({
originalEvent: originalEvent,
value: selectedValue
}, 'sourceSelection', props.onSourceSelectionChange);
_onSelectionChange({
originalEvent: originalEvent,
value: selectedValue
}, 'targetSelection', props.onTargetSelectionChange);
handleChange(event, source, target);
};
var scrollInView = function scrollInView(listContainer) {
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var selectedItems = listContainer.getElementsByClassName('p-highlight');
if (ObjectUtils.isNotEmpty(selectedItems)) {
DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
}
};
var _onSelectionChange = function onSelectionChange(e, stateKey, callback) {
if (stateKey === 'sourceSelection') setSourceSelectionState(e.value);else setTargetSelectionState(e.value);
if (callback) {
callback(e);
}
if (ObjectUtils.isNotEmpty(sourceSelection) && stateKey === 'targetSelection') {
setSourceSelectionState([]);
} else if (ObjectUtils.isNotEmpty(targetSelection) && stateKey === 'sourceSelection') {
setTargetSelectionState([]);
}
};
var onFilter = function onFilter(event) {
var originalEvent = event.originalEvent,
value = event.value,
type = event.type;
var _ref = type === 'source' ? [setSourceFilterValueState, props.onSourceFilterChange] : [setTargetFilterValueState, props.onTargetFilterChange],
_ref2 = _slicedToArray(_ref, 2),
setFilterState = _ref2[0],
onFilterChange = _ref2[1];
if (onFilterChange) {
onFilterChange({
originalEvent: originalEvent,
value: value
});
} else {
setFilterState(value);
}
};
var getVisibleList = function getVisibleList(list, type) {
var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
_ref4 = _slicedToArray(_ref3, 2),
filteredValue = _ref4[0],
filterCallback = _ref4[1];
return hasFilterBy && ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
};
var filterSource = function filterSource() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
return filter(props.source, filteredValue);
};
var filterTarget = function filterTarget() {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
return filter(props.target, filteredValue);
};
var filter = function filter(list, filterValue) {
var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-picklist[").concat(attributeSelectorState, "] {\n flex-direction: column;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n padding: var(--content-padding);\n flex-direction: row;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n margin-right: var(--inline-spacing);\n margin-bottom: 0;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n margin-right: 0;\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .pi-angle-right:before {\n content: \"\\e930\"\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-right:before {\n content: \"\\e92c\"\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .pi-angle-left:before {\n content: \"\\e933\"\n }\n\n .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-left:before {\n content: \"\\e92f\"\n }\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
});
useUpdateEffect(function () {
if (attributeSelectorState) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUpdateEffect(function () {
if (reorderedListElementRef.current) {
handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
reorderedListElementRef.current = null;
reorderDirection.current = null;
}
});
var otherProps = PickListBase.getOtherProps(props);
var className = classNames('p-picklist p-component', props.className);
var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
var sourceList = getVisibleList(props.source, 'source');
var targetList = getVisibleList(props.target, 'target');
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), props.showSourceControls && /*#__PURE__*/React.createElement(PickListControls, {
list: props.source,
selection: sourceSelection,
onReorder: onSourceReorder,
className: "p-picklist-source-controls",
dataKey: props.dataKey
}), /*#__PURE__*/React.createElement(PickListSubList, {
ref: sourceListElementRef,
type: "source",
list: sourceList,
selection: sourceSelection,
onSelectionChange: function onSelectionChange(e) {
return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
},
itemTemplate: sourceItemTemplate,
header: props.sourceHeader,
style: props.sourceStyle,
className: "p-picklist-source-wrapper",
listClassName: "p-picklist-source",
metaKeySelection: props.metaKeySelection,
tabIndex: props.tabIndex,
dataKey: props.dataKey,
filterValue: sourceFilteredValue,
onFilter: onFilter,
showFilter: showSourceFilter,
placeholder: props.sourceFilterPlaceholder,
template: props.sourceFilterTemplate
}), /*#__PURE__*/React.createElement(PickListTransferControls, {
onTransfer: onTransfer,
source: props.source,
visibleSourceList: sourceList,
target: props.target,
visibleTargetList: targetList,
sourceSelection: sourceSelection,
targetSelection: targetSelection,
dataKey: props.dataKey
}), /*#__PURE__*/React.createElement(PickListSubList, {
ref: targetListElementRef,
type: "target",
list: targetList,
selection: targetSelection,
onSelectionChange: function onSelectionChange(e) {
return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
},
itemTemplate: targetItemTemplate,
header: props.targetHeader,
style: props.targetStyle,
className: "p-picklist-target-wrapper",
listClassName: "p-picklist-target",
metaKeySelection: props.metaKeySelection,
tabIndex: props.tabIndex,
dataKey: props.dataKey,
filterValue: targetFilteredValue,
onFilter: onFilter,
showFilter: showTargetFilter,
placeholder: props.targetFilterPlaceholder,
template: props.targetFilterTemplate
}), props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
list: props.target,
selection: targetSelection,
onReorder: onTargetReorder,
className: "p-picklist-target-controls",
dataKey: props.dataKey
}));
}));
PickList.displayName = 'PickList';
var ProgressSpinnerBase = {
defaultProps: {
__TYPE: 'ProgressSpinner',
id: null,
style: null,
className: null,
strokeWidth: '2',
fill: 'none',
animationDuration: '2s',
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ProgressSpinnerBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ProgressSpinnerBase.defaultProps);
}
};
var ProgressSpinner = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ProgressSpinnerBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = ProgressSpinnerBase.getOtherProps(props);
var className = classNames('p-progress-spinner', props.className);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
style: props.style,
className: className,
role: "alert",
"aria-busy": true
}, otherProps), /*#__PURE__*/React.createElement("svg", {
className: "p-progress-spinner-svg",
viewBox: "25 25 50 50",
style: {
animationDuration: props.animationDuration
}
}, /*#__PURE__*/React.createElement("circle", {
className: "p-progress-spinner-circle",
cx: "50",
cy: "50",
r: "20",
fill: props.fill,
strokeWidth: props.strokeWidth,
strokeMiterlimit: "10"
})));
}));
ProgressSpinner.displayName = 'ProgressSpinner';
var RadioButtonBase = {
defaultProps: {
__TYPE: 'RadioButton',
id: null,
inputRef: null,
inputId: null,
name: null,
value: null,
checked: false,
style: null,
className: null,
disabled: false,
required: false,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, RadioButtonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, RadioButtonBase.defaultProps);
}
};
var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = RadioButtonBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var select = function select(e) {
onClick(e);
};
var onClick = function onClick(e) {
if (!props.disabled && props.onChange) {
var checked = props.checked;
var radioClicked = e.target instanceof HTMLDivElement;
var inputClicked = e.target === inputRef.current;
var isInputToggled = inputClicked && e.target.checked !== checked;
var isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
if (isInputToggled || isRadioToggled) {
var value = !checked;
props.onChange({
originalEvent: e,
value: props.value,
checked: value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
type: 'radio',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
});
if (isRadioToggled) {
inputRef.current.checked = value;
}
}
DomHandler.focus(inputRef.current);
e.preventDefault();
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(event) {
if (event.code === 'Space' || event.key === ' ') {
// event.key is for Android support
onClick(event);
}
};
React.useEffect(function () {
if (inputRef.current) {
inputRef.current.checked = props.checked;
}
}, [props.checked]);
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
React.useImperativeHandle(ref, function () {
return {
props: props,
select: select,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = RadioButtonBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-radiobutton p-component', {
'p-radiobutton-checked': props.checked,
'p-radiobutton-disabled': props.disabled,
'p-radiobutton-focused': focusedState
}, props.className);
var boxClassName = classNames('p-radiobutton-box', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef,
id: props.inputId,
type: "radio",
name: props.name,
defaultChecked: props.checked,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
disabled: props.disabled,
required: props.required,
tabIndex: props.tabIndex
}, ariaProps))), /*#__PURE__*/React.createElement("div", {
className: boxClassName
}, /*#__PURE__*/React.createElement("div", {
className: "p-radiobutton-icon"
}))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
RadioButton.displayName = 'RadioButton';
var RatingBase = {
defaultProps: {
__TYPE: 'Rating',
id: null,
value: null,
disabled: false,
readOnly: false,
stars: 5,
cancel: true,
style: null,
className: null,
tooltip: null,
tooltipOptions: null,
onChange: null,
onIcon: 'pi pi-star-fill',
offIcon: 'pi pi-star',
cancelIcon: 'pi pi-ban',
cancelIconProps: null,
onIconProps: null,
offIconProps: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, RatingBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, RatingBase.defaultProps);
}
};
function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = RatingBase.getProps(inProps);
var elementRef = React.useRef(null);
var enabled = !props.disabled && !props.readOnly;
var tabIndex = enabled ? 0 : null;
var rate = function rate(event, i) {
if (enabled && props.onChange) {
props.onChange({
originalEvent: event,
value: i,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: i
}
});
}
event.preventDefault();
};
var clear = function clear(event) {
if (enabled && props.onChange) {
props.onChange({
originalEvent: event,
value: null,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: null
}
});
}
event.preventDefault();
};
var onStarKeyDown = function onStarKeyDown(event, value) {
if (event.key === 'Enter') {
rate(event, value);
}
};
var onCancelKeyDown = function onCancelKeyDown(event) {
if (event.key === 'Enter') {
clear(event);
}
};
var createIcons = function createIcons() {
return Array.from({
length: props.stars
}, function (_, i) {
return i + 1;
}).map(function (value) {
var active = value <= props.value;
var className = classNames('p-rating-item', {
'p-rating-item-active': active
});
var icon = active ? {
type: props.onIcon,
props: props.onIconProps
} : {
type: props.offIcon,
props: props.offIconProps
};
var content = IconUtils.getJSXIcon(icon.type, _objectSpread$a({
className: 'p-rating-icon'
}, icon.props), {
props: props
});
return /*#__PURE__*/React.createElement("div", {
key: value,
className: className,
tabIndex: tabIndex,
onClick: function onClick(e) {
return rate(e, value);
},
onKeyDown: function onKeyDown(e) {
return onStarKeyDown(e, value);
}
}, content);
});
};
var createCancelIcon = function createCancelIcon() {
if (props.cancel) {
var content = IconUtils.getJSXIcon(props.cancelIcon, _objectSpread$a({
className: 'p-rating-icon p-rating-cancel'
}, props.cancelIconProps), {
props: props
});
return /*#__PURE__*/React.createElement("div", {
className: "p-rating-item p-rating-cancel-item",
onClick: clear,
tabIndex: tabIndex,
onKeyDown: onCancelKeyDown
}, content);
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = RatingBase.getOtherProps(props);
var className = classNames('p-rating', {
'p-disabled': props.disabled,
'p-readonly': props.readOnly
}, props.className);
var cancelIcon = createCancelIcon();
var icons = createIcons();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), cancelIcon, icons), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
Rating.displayName = 'Rating';
var Row = function Row(inProps) {
var props = RowBase.getProps(inProps);
var otherProps = RowBase.getOtherProps(props);
return /*#__PURE__*/React.createElement("tr", _extends({
className: props.className,
style: props.style
}, otherProps), props.children);
};
Row.displayName = 'Row';
var ScrollPanelBase = {
defaultProps: {
__TYPE: 'ScrollPanel',
id: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ScrollPanelBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ScrollPanelBase.defaultProps);
}
};
var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ScrollPanelBase.getProps(inProps);
var containerRef = React.useRef(null);
var contentRef = React.useRef(null);
var xBarRef = React.useRef(null);
var yBarRef = React.useRef(null);
var isXBarClicked = React.useRef(false);
var isYBarClicked = React.useRef(false);
var lastPageX = React.useRef(null);
var lastPageY = React.useRef(null);
var scrollXRatio = React.useRef(null);
var scrollYRatio = React.useRef(null);
var frame = React.useRef(null);
var initialized = React.useRef(false);
var calculateContainerHeight = function calculateContainerHeight() {
var containerStyles = getComputedStyle(containerRef.current);
var xBarStyles = getComputedStyle(xBarRef.current);
var pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles['height'], 10);
if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
if (contentRef.current.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
containerRef.current.style.height = containerStyles['max-height'];
} else {
containerRef.current.style.height = contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
}
}
};
var moveBar = function moveBar() {
// horizontal scroll
var totalWidth = contentRef.current.scrollWidth;
var ownWidth = contentRef.current.clientWidth;
var bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
scrollXRatio.current = ownWidth / totalWidth;
// vertical scroll
var totalHeight = contentRef.current.scrollHeight;
var ownHeight = contentRef.current.clientHeight;
var right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
scrollYRatio.current = ownHeight / totalHeight;
frame.current = window.requestAnimationFrame(function () {
if (scrollXRatio.current >= 1) {
DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
xBarRef.current.style.cssText = 'width:' + Math.max(scrollXRatio.current * 100, 10) + '%; left:' + contentRef.current.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
}
if (scrollYRatio.current >= 1) {
DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
} else {
DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
yBarRef.current.style.cssText = 'height:' + Math.max(scrollYRatio.current * 100, 10) + '%; top: calc(' + contentRef.current.scrollTop / totalHeight * 100 + '% - ' + xBarRef.current.clientHeight + 'px);right:' + right + 'px;';
}
});
};
var onYBarMouseDown = function onYBarMouseDown(event) {
isYBarClicked.current = true;
lastPageY.current = event.pageY;
DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', onDocumentMouseUp);
event.preventDefault();
};
var onXBarMouseDown = function onXBarMouseDown(event) {
isXBarClicked.current = true;
lastPageX.current = event.pageX;
DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', onDocumentMouseUp);
event.preventDefault();
};
var onDocumentMouseMove = function onDocumentMouseMove(event) {
if (isXBarClicked.current) {
onMouseMoveForXBar(event);
} else if (isYBarClicked.current) {
onMouseMoveForYBar(event);
} else {
onMouseMoveForXBar(event);
onMouseMoveForYBar(event);
}
};
var onMouseMoveForXBar = function onMouseMoveForXBar(event) {
var deltaX = event.pageX - lastPageX.current;
lastPageX.current = event.pageX;
frame.current = window.requestAnimationFrame(function () {
contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
});
};
var onMouseMoveForYBar = function onMouseMoveForYBar(event) {
var deltaY = event.pageY - lastPageY.current;
lastPageY.current = event.pageY;
frame.current = window.requestAnimationFrame(function () {
contentRef.current.scrollTop += deltaY / scrollYRatio.current;
});
};
var onDocumentMouseUp = function onDocumentMouseUp(event) {
DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', onDocumentMouseUp);
isXBarClicked.current = false;
isYBarClicked.current = false;
};
var refresh = function refresh() {
moveBar();
};
useMountEffect(function () {
moveBar();
window.addEventListener('resize', moveBar);
calculateContainerHeight();
initialized.current = true;
});
useUnmountEffect(function () {
if (initialized.current) {
window.removeEventListener('resize', moveBar);
}
if (frame.current) {
window.cancelAnimationFrame(frame.current);
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
refresh: refresh,
getElement: function getElement() {
return containerRef.current;
},
getContent: function getContent() {
return contentRef.current;
},
getXBar: function getXBar() {
return xBarRef.current;
},
getYBar: function getYBar() {
return yBarRef.current;
}
};
});
var otherProps = ScrollPanelBase.getOtherProps(props);
var className = classNames('p-scrollpanel p-component', props.className);
return /*#__PURE__*/React.createElement("div", _extends({
ref: containerRef,
id: props.id,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-scrollpanel-wrapper"
}, /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: "p-scrollpanel-content",
onScroll: moveBar,
onMouseEnter: moveBar
}, props.children)), /*#__PURE__*/React.createElement("div", {
ref: xBarRef,
className: "p-scrollpanel-bar p-scrollpanel-bar-x",
onMouseDown: onXBarMouseDown
}), /*#__PURE__*/React.createElement("div", {
ref: yBarRef,
className: "p-scrollpanel-bar p-scrollpanel-bar-y",
onMouseDown: onYBarMouseDown
}));
});
ScrollPanel.displayName = 'ScrollPanel';
var ScrollTopBase = {
defaultProps: {
__TYPE: 'ScrollTop',
target: 'window',
threshold: 400,
icon: 'pi pi-chevron-up',
behavior: 'smooth',
className: null,
style: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ScrollTopBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ScrollTopBase.defaultProps);
}
};
var ScrollTop = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ScrollTopBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var scrollElementRef = React.useRef(null);
var helperRef = React.useRef(null);
var isTargetParent = props.target === 'parent';
var _useEventListener = useEventListener({
target: function target() {
return helperRef.current && helperRef.current.parentElement;
},
type: 'scroll',
listener: function listener(event) {
checkVisibility(event.currentTarget.scrollTop);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindParentScrollListener = _useEventListener2[0];
var _useEventListener3 = useEventListener({
target: 'window',
type: 'scroll',
listener: function listener() {
checkVisibility(DomHandler.getWindowScrollTop());
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 1),
bindDocumentScrollListener = _useEventListener4[0];
var onClick = function onClick() {
var scrollElement = props.target === 'window' ? window : helperRef.current.parentElement;
scrollElement.scroll({
top: 0,
behavior: props.behavior
});
};
var checkVisibility = function checkVisibility(scrollY) {
setVisibleState(scrollY > props.threshold);
};
var onEnter = function onEnter() {
ZIndexUtils.set('overlay', scrollElementRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExited = function onExited() {
ZIndexUtils.clear(scrollElementRef.current);
props.onHide && props.onHide();
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (props.target === 'window') bindDocumentScrollListener();else if (props.target === 'parent') bindParentScrollListener();
});
useUnmountEffect(function () {
ZIndexUtils.clear(scrollElementRef.current);
});
var otherProps = ScrollTopBase.getOtherProps(props);
var className = classNames('p-scrolltop p-link p-component', {
'p-scrolltop-sticky': props.target !== 'window'
}, props.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: scrollElementRef,
classNames: "p-scrolltop",
"in": visibleState,
timeout: {
enter: 150,
exit: 150
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExited: onExited
}, /*#__PURE__*/React.createElement("button", _extends({
ref: scrollElementRef,
type: "button",
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), IconUtils.getJSXIcon(props.icon, {
className: 'p-scrolltop-icon'
}, {
props: props
}), /*#__PURE__*/React.createElement(Ripple, null))), isTargetParent && /*#__PURE__*/React.createElement("span", {
ref: helperRef,
className: "p-scrolltop-helper"
}));
}));
ScrollTop.displayName = 'ScrollTop';
var SelectButtonBase = {
defaultProps: {
__TYPE: 'SelectButton',
id: null,
value: null,
options: null,
optionLabel: null,
optionValue: null,
optionDisabled: null,
tabIndex: null,
multiple: false,
unselectable: true,
disabled: false,
style: null,
className: null,
dataKey: null,
tooltip: null,
tooltipOptions: null,
itemTemplate: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SelectButtonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SelectButtonBase.defaultProps);
}
};
var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: props.option
});
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(event) {
var keyCode = event.which;
if (keyCode === 32) {
onClick(event);
event.preventDefault();
}
};
var createContent = function createContent() {
return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : /*#__PURE__*/React.createElement("span", {
className: "p-button-label p-c"
}, props.label);
};
var className = classNames('p-button p-component', {
'p-highlight': props.selected,
'p-disabled': props.disabled,
'p-focus': focusedState
}, props.className);
var content = createContent();
return /*#__PURE__*/React.createElement("div", {
className: className,
role: "button",
"aria-label": props.label,
"aria-pressed": props.selected,
onClick: onClick,
onKeyDown: onKeyDown,
tabIndex: props.tabIndex,
onFocus: onFocus,
onBlur: onBlur
}, content, !props.disabled && /*#__PURE__*/React.createElement(Ripple, null));
});
SelectButtonItem.displayName = 'SelectButtonItem';
var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SelectButtonBase.getProps(inProps);
var elementRef = React.useRef(null);
var onOptionClick = function onOptionClick(event) {
if (props.disabled || isOptionDisabled(event.option)) {
return;
}
var selected = isSelected(event.option);
if (selected && !props.unselectable) {
return;
}
var optionValue = getOptionValue(event.option);
var newValue;
if (props.multiple) {
var currentValue = props.value ? _toConsumableArray(props.value) : [];
newValue = selected ? currentValue.filter(function (val) {
return !ObjectUtils.equals(val, optionValue, props.dataKey);
}) : [].concat(_toConsumableArray(currentValue), [optionValue]);
} else {
newValue = selected ? null : optionValue;
}
if (props.onChange) {
props.onChange({
originalEvent: event.originalEvent,
value: newValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var getOptionLabel = function getOptionLabel(option) {
return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
};
var getOptionValue = function getOptionValue(option) {
return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
};
var isOptionDisabled = function isOptionDisabled(option) {
if (props.optionDisabled) {
return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
}
return option && option['disabled'] !== undefined ? option['disabled'] : false;
};
var isSelected = function isSelected(option) {
var optionValue = getOptionValue(option);
if (props.multiple) {
if (props.value && props.value.length) {
return props.value.some(function (val) {
return ObjectUtils.equals(val, optionValue, props.dataKey);
});
}
} else {
return ObjectUtils.equals(props.value, optionValue, props.dataKey);
}
return false;
};
var createItems = function createItems() {
if (props.options && props.options.length) {
return props.options.map(function (option, index) {
var isDisabled = props.disabled || isOptionDisabled(option);
var optionLabel = getOptionLabel(option);
var tabIndex = isDisabled ? null : 0;
var selected = isSelected(option);
var key = optionLabel + '_' + index;
return /*#__PURE__*/React.createElement(SelectButtonItem, {
key: key,
label: optionLabel,
className: option.className,
option: option,
onClick: onOptionClick,
template: props.itemTemplate,
selected: selected,
tabIndex: tabIndex,
disabled: isDisabled
});
});
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = SelectButtonBase.getOtherProps(props);
var className = classNames('p-selectbutton p-buttonset p-component', props.className);
var items = createItems();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
role: "group"
}), items), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
SelectButton.displayName = 'SelectButton';
var SidebarBase = {
defaultProps: {
__TYPE: 'Sidebar',
id: null,
style: null,
className: null,
maskStyle: null,
maskClassName: null,
visible: false,
position: 'left',
fullScreen: false,
blockScroll: false,
baseZIndex: 0,
dismissable: true,
showCloseIcon: true,
ariaCloseLabel: null,
closeOnEscape: true,
icons: null,
modal: true,
appendTo: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SidebarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SidebarBase.defaultProps);
}
};
var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SidebarBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
maskVisibleState = _React$useState2[0],
setMaskVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var sidebarRef = React.useRef(null);
var maskRef = React.useRef(null);
var closeIconRef = React.useRef(null);
var _useEventListener = useEventListener({
type: 'keydown',
listener: function listener(event) {
if (event.which === 27) {
if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) {
onClose(event);
}
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentEscapeListener = _useEventListener2[0],
unbindDocumentEscapeListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'click',
listener: function listener(event) {
if (event.which === 2) {
// left click
return;
}
if (isOutsideClicked(event)) {
onClose(event);
}
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentClickListener = _useEventListener4[0],
unbindDocumentClickListener = _useEventListener4[1];
var isOutsideClicked = function isOutsideClicked(event) {
return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
};
var getPositionClass = function getPositionClass() {
var positions = ['left', 'right', 'top', 'bottom'];
var pos = positions.find(function (item) {
return item === props.position;
});
return pos ? "p-sidebar-".concat(pos) : '';
};
var focus = function focus() {
var activeElement = document.activeElement;
var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
if (!isActiveElementInDialog && props.showCloseIcon) {
closeIconRef.current.focus();
}
};
var onMaskClick = function onMaskClick(event) {
if (props.dismissable && props.modal && maskRef.current === event.target) {
onClose(event);
}
};
var onClose = function onClose(event) {
props.onHide();
event.preventDefault();
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
focus();
enableDocumentSettings();
};
var onExiting = function onExiting() {
if (props.modal) {
DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
}
};
var onExited = function onExited() {
ZIndexUtils.clear(maskRef.current);
setMaskVisibleState(false);
disableDocumentSettings();
};
var enableDocumentSettings = function enableDocumentSettings() {
if (props.closeOnEscape) {
bindDocumentEscapeListener();
}
if (props.dismissable && !props.modal) {
bindDocumentClickListener();
}
if (props.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
};
var disableDocumentSettings = function disableDocumentSettings() {
unbindDocumentEscapeListener();
unbindDocumentClickListener();
if (props.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return sidebarRef.current;
},
gteMask: function gteMask() {
return maskRef.current;
},
getCloseIcon: function getCloseIcon() {
return closeIconRef.current;
}
};
});
useMountEffect(function () {
if (props.visible) {
setMaskVisibleState(true);
}
});
useUpdateEffect(function () {
if (props.visible && !maskVisibleState) {
setMaskVisibleState(true);
}
if (props.visible !== visibleState && maskVisibleState) {
setVisibleState(props.visible);
}
});
useUpdateEffect(function () {
if (maskVisibleState) {
ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']);
setVisibleState(true);
}
}, [maskVisibleState]);
useUpdateEffect(function () {
// #3811 if dismissible state is toggled while open we must unregister and re-regisetr
if (visibleState) {
unbindDocumentClickListener();
if (props.dismissable && !props.modal) {
bindDocumentClickListener();
}
}
}, [props.dismissable, props.modal, visibleState]);
useUnmountEffect(function () {
disableDocumentSettings();
maskRef.current && ZIndexUtils.clear(maskRef.current);
});
var createCloseIcon = function createCloseIcon() {
if (props.showCloseIcon) {
var ariaLabel = props.ariaCloseLabel || localeOption('close');
return /*#__PURE__*/React.createElement("button", {
type: "button",
ref: closeIconRef,
className: "p-sidebar-close p-sidebar-icon p-link",
onClick: onClose,
"aria-label": ariaLabel
}, /*#__PURE__*/React.createElement("span", {
className: "p-sidebar-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createIcons = function createIcons() {
return props.icons ? ObjectUtils.getJSXElement(props.icons, props) : null;
};
var createElement = function createElement() {
var otherProps = SidebarBase.getOtherProps(props);
var className = classNames('p-sidebar p-component', props.className, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
var maskClassName = classNames('p-sidebar-mask', {
'p-component-overlay p-component-overlay-enter': props.modal,
'p-sidebar-mask-scrollblocker': props.blockScroll,
'p-sidebar-visible': maskVisibleState,
'p-sidebar-full': props.fullScreen
}, getPositionClass(), props.maskClassName);
var closeIcon = createCloseIcon();
var icons = createIcons();
var transitionTimeout = {
enter: props.fullScreen ? 150 : 300,
exit: props.fullScreen ? 150 : 300
};
return /*#__PURE__*/React.createElement("div", {
ref: maskRef,
style: props.maskStyle,
className: maskClassName,
onMouseDown: onMaskClick
}, /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: sidebarRef,
classNames: "p-sidebar",
"in": visibleState,
timeout: transitionTimeout,
options: props.transitionOptions,
unmountOnExit: true,
onEntered: onEntered,
onExiting: onExiting,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: sidebarRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
role: "complementary"
}), /*#__PURE__*/React.createElement("div", {
className: "p-sidebar-header"
}, icons, closeIcon), /*#__PURE__*/React.createElement("div", {
className: "p-sidebar-content"
}, props.children))));
};
var createSidebar = function createSidebar() {
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo,
visible: true
});
};
return maskVisibleState && createSidebar();
});
Sidebar.displayName = 'Sidebar';
var SkeletonBase = {
defaultProps: {
__TYPE: 'Skeleton',
shape: 'rectangle',
size: null,
width: '100%',
height: '1rem',
borderRadius: null,
animation: 'wave',
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SkeletonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SkeletonBase.defaultProps);
}
};
var Skeleton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SkeletonBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = SkeletonBase.getOtherProps(props);
var style = props.size ? {
width: props.size,
height: props.size,
borderRadius: props.borderRadius
} : {
width: props.width,
height: props.height,
borderRadius: props.borderRadius
};
var className = classNames('p-skeleton p-component', {
'p-skeleton-circle': props.shape === 'circle',
'p-skeleton-none': props.animation === 'none'
}, props.className);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
style: style,
className: className
}, otherProps));
}));
Skeleton.displayName = 'Skeleton';
var SlideMenuBase = {
defaultProps: {
__TYPE: 'SlideMenu',
appendTo: null,
autoZIndex: true,
backLabel: 'Back',
baseZIndex: 0,
className: null,
easing: 'ease-out',
effectDuration: 250,
id: null,
menuWidth: 190,
model: null,
onHide: null,
onShow: null,
onNavigate: null,
popup: false,
style: null,
transitionOptions: null,
viewportHeight: 175,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SlideMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SlideMenuBase.defaultProps);
}
};
function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var _React$useState3 = React.useState({}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
renderSubMenu = _React$useState4[0],
setRenderSubMenu = _React$useState4[1];
var onItemClick = function onItemClick(event, item, index) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (item.items) {
var key = createKey(item, index);
setRenderSubMenu(_objectSpread$9(_objectSpread$9({}, renderSubMenu), {}, _defineProperty({}, key, true)));
setActiveItemState(item);
props.onForward();
}
};
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator"
});
};
var createSubmenu = function createSubmenu(item, index) {
var shouldRender = renderSubMenu[createKey(item, index)];
if (item.items && shouldRender) {
return /*#__PURE__*/React.createElement(SlideMenuSub, {
menuProps: props.menuProps,
model: item.items,
index: props.index + 1,
menuWidth: props.menuWidth,
effectDuration: props.effectDuration,
onForward: props.onForward,
parentActive: item === activeItemState
});
}
return null;
};
var createKey = function createKey(item, index) {
return item.label + '_' + index;
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var key = createKey(item, index);
var active = activeItemState === item;
var className = classNames('p-menuitem', {
'p-menuitem-active': active,
'p-disabled': item.disabled
}, item.className);
var iconClassName = classNames('p-menuitem-icon', item.icon);
var submenuIconClassName = 'p-submenu-icon pi pi-fw pi-angle-right';
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props.menuProps
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, item.label);
var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var submenu = createSubmenu(item, index);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: "p-menuitem-link",
target: item.target,
onClick: function onClick(event) {
return onItemClick(event, item, index);
},
"aria-disabled": item.disabled
}, icon, label, submenuIcon);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
active: active
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
id: item.id,
className: className,
style: item.style
}, content, submenu);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : createMenuitem(item, index);
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var style = {
width: props.menuWidth + 'px',
left: props.root ? -1 * props.level * props.menuWidth + 'px' : props.menuWidth + 'px',
transitionProperty: props.root ? 'left' : 'none',
transitionDuration: props.effectDuration + 'ms',
transitionTimingFunction: props.easing
};
var className = classNames({
'p-slidemenu-rootlist': props.root,
'p-submenu-list': !props.root,
'p-active-submenu': props.parentActive
});
var items = createItems();
return /*#__PURE__*/React.createElement("ul", {
className: className,
style: style
}, items);
});
SlideMenuSub.displayName = 'SlideMenuSub';
var SlideMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SlideMenuBase.getProps(inProps);
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
levelState = _React$useState2[0],
setLevelState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
visibleState = _React$useState4[0],
setVisibleState = _React$useState4[1];
var menuRef = React.useRef(null);
var targetRef = React.useRef(null);
var backward = React.useRef(null);
var slideMenuContent = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: targetRef,
overlay: menuRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide(event);
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var navigateForward = function navigateForward() {
setLevelState(function (prevLevel) {
return prevLevel + 1;
});
};
var navigateBack = function navigateBack() {
setLevelState(function (prevLevel) {
return prevLevel - 1;
});
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
};
var hide = function hide(event) {
targetRef.current = event.currentTarget;
setVisibleState(false);
props.onHide && props.onHide(event);
};
var onEnter = function onEnter() {
if (props.autoZIndex) {
ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
}
DomHandler.absolutePosition(menuRef.current, targetRef.current);
};
var onEntered = function onEntered() {
bindOverlayListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
setLevelState(0);
};
useUpdateEffect(function () {
setLevelState(0);
}, [props.model]);
useUpdateEffect(function () {
props.onNavigate && props.onNavigate({
level: levelState
});
}, [levelState]);
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
navigateForward: navigateForward,
navigateBack: navigateBack,
setLevelState: setLevelState,
getElement: function getElement() {
return menuRef.current;
}
};
});
var createBackward = function createBackward() {
var className = classNames('p-slidemenu-backward', {
'p-hidden': levelState === 0
});
return /*#__PURE__*/React.createElement("div", {
ref: backward,
className: className,
onClick: navigateBack
}, /*#__PURE__*/React.createElement("span", {
className: "p-slidemenu-backward-icon pi pi-fw pi-chevron-left"
}), /*#__PURE__*/React.createElement("span", null, props.backLabel));
};
var createElement = function createElement() {
var otherProps = SlideMenuBase.getOtherProps(props);
var className = classNames('p-slidemenu p-component', {
'p-slidemenu-overlay': props.popup
}, props.className);
var wrapperStyle = {
height: props.viewportHeight + 'px'
};
var backward = createBackward();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: menuRef,
classNames: "p-connected-overlay",
"in": !props.popup || visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: menuRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onPanelClick
}), /*#__PURE__*/React.createElement("div", {
className: "p-slidemenu-wrapper",
style: wrapperStyle
}, /*#__PURE__*/React.createElement("div", {
className: "p-slidemenu-content",
ref: slideMenuContent
}, /*#__PURE__*/React.createElement(SlideMenuSub, {
menuProps: props,
model: props.model,
root: true,
index: 0,
menuWidth: props.menuWidth,
effectDuration: props.effectDuration,
level: levelState,
parentActive: levelState === 0,
onForward: navigateForward
})), backward)));
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
SlideMenu.displayName = 'SlideMenu';
var SliderBase = {
defaultProps: {
__TYPE: 'Slider',
id: null,
value: null,
min: 0,
max: 100,
orientation: 'horizontal',
step: null,
range: false,
style: null,
className: null,
disabled: false,
tabIndex: 0,
onChange: null,
onSlideEnd: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SliderBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SliderBase.defaultProps);
}
};
var Slider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SliderBase.getProps(inProps);
var elementRef = React.useRef(null);
var handleIndex = React.useRef(0);
var sliderHandleClick = React.useRef(false);
var dragging = React.useRef(false);
var initX = React.useRef(0);
var initY = React.useRef(0);
var barWidth = React.useRef(0);
var barHeight = React.useRef(0);
var value = props.range ? props.value || [props.min, props.max] : props.value || 0;
var horizontal = props.orientation === 'horizontal';
var vertical = props.orientation === 'vertical';
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'touchmove',
listener: function listener(event) {
return onDrag(event);
}
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentTouchMoveListener = _useEventListener6[0],
unbindDocumentTouchMoveListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'touchend',
listener: function listener(event) {
return onDragEnd(event);
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindDocumentTouchEndListener = _useEventListener8[0],
unbindDocumentTouchEndListener = _useEventListener8[1];
var spin = function spin(event, dir) {
var val = props.range ? value[handleIndex.current] : value;
var step = (props.step || 1) * dir;
updateValue(event, val + step);
event.preventDefault();
};
var onDragStart = function onDragStart(event, index) {
if (props.disabled) {
return;
}
dragging.current = true;
updateDomData();
sliderHandleClick.current = true;
handleIndex.current = index;
//event.preventDefault();
};
var onDrag = function onDrag(event) {
if (dragging.current) {
setValue(event);
event.preventDefault();
}
};
var onDragEnd = function onDragEnd(event) {
if (dragging.current) {
dragging.current = false;
props.onSlideEnd && props.onSlideEnd({
originalEvent: event,
value: props.value
});
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
unbindDocumentTouchMoveListener();
unbindDocumentTouchEndListener();
}
};
var _onMouseDown = function onMouseDown(event, index) {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
onDragStart(event, index);
};
var _onTouchStart = function onTouchStart(event, index) {
bindDocumentTouchMoveListener();
bindDocumentTouchEndListener();
onDragStart(event, index);
};
var _onKeyDown = function onKeyDown(event, index) {
if (props.disabled) {
return;
}
handleIndex.current = index;
var key = event.key;
if (key === 'ArrowRight' || key === 'ArrowUp') {
spin(event, 1);
} else if (key === 'ArrowLeft' || key === 'ArrowDown') {
spin(event, -1);
}
};
var onBarClick = function onBarClick(event) {
if (props.disabled) {
return;
}
if (!sliderHandleClick.current) {
updateDomData();
var _value = setValue(event);
props.onSlideEnd && props.onSlideEnd({
originalEvent: event,
value: _value
});
}
sliderHandleClick.current = false;
};
var updateDomData = function updateDomData() {
var rect = elementRef.current.getBoundingClientRect();
initX.current = rect.left + DomHandler.getWindowScrollLeft();
initY.current = rect.top + DomHandler.getWindowScrollTop();
barWidth.current = elementRef.current.offsetWidth;
barHeight.current = elementRef.current.offsetHeight;
};
var setValue = function setValue(event) {
var handleValue;
var pageX = event.touches ? event.touches[0].pageX : event.pageX;
var pageY = event.touches ? event.touches[0].pageY : event.pageY;
if (horizontal) handleValue = (pageX - initX.current) * 100 / barWidth.current;else handleValue = (initY.current + barHeight.current - pageY) * 100 / barHeight.current;
var newValue = (props.max - props.min) * (handleValue / 100) + props.min;
if (props.step) {
var oldValue = props.range ? value[handleIndex.current] : value;
var diff = newValue - oldValue;
if (diff < 0) newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;else if (diff > 0) newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
} else {
newValue = Math.floor(newValue);
}
return updateValue(event, newValue);
};
var updateValue = function updateValue(event, val) {
var parsedValue = parseFloat(val.toFixed(10));
var newValue = parsedValue;
if (props.range) {
if (handleIndex.current === 0) {
if (parsedValue < props.min) parsedValue = props.min;else if (parsedValue > value[1]) parsedValue = value[1];
} else {
if (parsedValue > props.max) parsedValue = props.max;else if (parsedValue < value[0]) parsedValue = value[0];
}
newValue = _toConsumableArray(value);
newValue[handleIndex.current] = parsedValue;
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue
});
}
} else {
if (parsedValue < props.min) parsedValue = props.min;else if (parsedValue > props.max) parsedValue = props.max;
newValue = parsedValue;
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue
});
}
}
return newValue;
};
var createHandle = function createHandle(leftValue, bottomValue, index) {
var style = {
transition: dragging.current ? 'none' : null,
left: leftValue !== null && leftValue + '%',
bottom: bottomValue && bottomValue + '%'
};
var className = classNames('p-slider-handle', {
'p-slider-handle-start': index === 0,
'p-slider-handle-end': index === 1,
'p-slider-handle-active': handleIndex.current === index
});
return /*#__PURE__*/React.createElement("span", _extends({
className: className,
style: style,
tabIndex: props.tabIndex,
role: "slider",
onMouseDown: function onMouseDown(event) {
return _onMouseDown(event, index);
},
onTouchStart: function onTouchStart(event) {
return _onTouchStart(event, index);
},
onKeyDown: function onKeyDown(event) {
return _onKeyDown(event, index);
},
"aria-valuemin": props.min,
"aria-valuemax": props.max,
"aria-valuenow": leftValue || bottomValue,
"aria-orientation": props.orientation
}, ariaProps));
};
var createRangeSlider = function createRangeSlider() {
var handleValueStart = (value[0] < props.min ? props.min : value[0] - props.min) * 100 / (props.max - props.min);
var handleValueEnd = (value[1] > props.max ? props.max : value[1] - props.min) * 100 / (props.max - props.min);
var rangeStartHandle = horizontal ? createHandle(handleValueStart, null, 0) : createHandle(null, handleValueStart, 0);
var rangeEndHandle = horizontal ? createHandle(handleValueEnd, null, 1) : createHandle(null, handleValueEnd, 1);
var rangeStyle = horizontal ? {
left: handleValueStart + '%',
width: handleValueEnd - handleValueStart + '%'
} : {
bottom: handleValueStart + '%',
height: handleValueEnd - handleValueStart + '%'
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: "p-slider-range",
style: rangeStyle
}), rangeStartHandle, rangeEndHandle);
};
var createSingleSlider = function createSingleSlider() {
var handleValue;
if (value < props.min) handleValue = props.min;else if (value > props.max) handleValue = props.max;else handleValue = (value - props.min) * 100 / (props.max - props.min);
var rangeStyle = horizontal ? {
width: handleValue + '%'
} : {
height: handleValue + '%'
};
var handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: "p-slider-range",
style: rangeStyle
}), handle);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = SliderBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-slider p-component', props.className, {
'p-disabled': props.disabled,
'p-slider-horizontal': horizontal,
'p-slider-vertical': vertical
});
var content = props.range ? createRangeSlider() : createSingleSlider();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
style: props.style,
className: className
}, otherProps, {
onClick: onBarClick
}), content);
}));
Slider.displayName = 'Slider';
var SpeedDialBase = {
defaultProps: {
__TYPE: 'SpeedDial',
id: null,
model: null,
visible: false,
style: null,
className: null,
direction: 'up',
transitionDelay: 30,
type: 'linear',
radius: 0,
mask: false,
disabled: false,
hideOnClickOutside: true,
buttonStyle: null,
buttonClassName: null,
buttonTemplate: null,
'aria-label': null,
maskStyle: null,
maskClassName: null,
showIcon: 'pi pi-plus',
hideIcon: null,
rotateAnimation: true,
onVisibleChange: null,
onClick: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SpeedDialBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SpeedDialBase.defaultProps);
}
};
function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var SpeedDial = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames2;
var props = SpeedDialBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var isItemClicked = React.useRef(false);
var elementRef = React.useRef(null);
var listRef = React.useRef(null);
var visible = props.onVisibleChange ? props.visible : visibleState;
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (!isItemClicked.current && isOutsideClicked(event)) {
hide();
}
isItemClicked.current = false;
},
when: visibleState
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var show = function show() {
props.onVisibleChange ? props.onVisibleChange(true) : setVisibleState(true);
props.onShow && props.onShow();
};
var hide = function hide() {
props.onVisibleChange ? props.onVisibleChange(false) : setVisibleState(false);
props.onHide && props.onHide();
};
var onClick = function onClick(e) {
visible ? hide() : show();
props.onClick && props.onClick(e);
isItemClicked.current = true;
};
var onItemClick = function onItemClick(e, item) {
item.command && item.command({
originalEvent: e,
item: item
});
hide();
isItemClicked.current = true;
e.preventDefault();
};
var isOutsideClicked = function isOutsideClicked(event) {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target));
};
var calculateTransitionDelay = function calculateTransitionDelay(index) {
var length = props.model.length;
return (visible ? index : length - index - 1) * props.transitionDelay;
};
var calculatePointStyle = function calculatePointStyle(index) {
var type = props.type;
if (type !== 'linear') {
var length = props.model.length;
var radius = props.radius || length * 20;
if (type === 'circle') {
var step = 2 * Math.PI / length;
return {
left: "calc(".concat(radius * Math.cos(step * index), "px + var(--item-diff-x, 0px))"),
top: "calc(".concat(radius * Math.sin(step * index), "px + var(--item-diff-y, 0px))")
};
} else if (type === 'semi-circle') {
var direction = props.direction;
var _step = Math.PI / (length - 1);
var x = "calc(".concat(radius * Math.cos(_step * index), "px + var(--item-diff-x, 0px))");
var y = "calc(".concat(radius * Math.sin(_step * index), "px + var(--item-diff-y, 0px))");
if (direction === 'up') {
return {
left: x,
bottom: y
};
} else if (direction === 'down') {
return {
left: x,
top: y
};
} else if (direction === 'left') {
return {
right: y,
top: x
};
} else if (direction === 'right') {
return {
left: y,
top: x
};
}
} else if (type === 'quarter-circle') {
var _direction = props.direction;
var _step2 = Math.PI / (2 * (length - 1));
var _x = "calc(".concat(radius * Math.cos(_step2 * index), "px + var(--item-diff-x, 0px))");
var _y = "calc(".concat(radius * Math.sin(_step2 * index), "px + var(--item-diff-y, 0px))");
if (_direction === 'up-left') {
return {
right: _x,
bottom: _y
};
} else if (_direction === 'up-right') {
return {
left: _x,
bottom: _y
};
} else if (_direction === 'down-left') {
return {
right: _y,
top: _x
};
} else if (_direction === 'down-right') {
return {
left: _y,
top: _x
};
}
}
}
return {};
};
var getItemStyle = function getItemStyle(index) {
var transitionDelay = calculateTransitionDelay(index);
var pointStyle = calculatePointStyle(index);
return _objectSpread$8({
transitionDelay: "".concat(transitionDelay, "ms")
}, pointStyle);
};
useMountEffect(function () {
if (props.type !== 'linear') {
var _button = DomHandler.findSingle(elementRef.current, '.p-speeddial-button');
var firstItem = DomHandler.findSingle(listRef.current, '.p-speeddial-item');
if (_button && firstItem) {
var wDiff = Math.abs(_button.offsetWidth - firstItem.offsetWidth);
var hDiff = Math.abs(_button.offsetHeight - firstItem.offsetHeight);
listRef.current.style.setProperty('--item-diff-x', "".concat(wDiff / 2, "px"));
listRef.current.style.setProperty('--item-diff-y', "".concat(hDiff / 2, "px"));
}
}
});
useUpdateEffect(function () {
if (visibleState) {
props.hideOnClickOutside && bindDocumentClickListener();
}
return function () {
props.hideOnClickOutside && unbindDocumentClickListener();
};
}, [visibleState]);
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var style = getItemStyle(index);
var disabled = item.disabled,
_icon = item.icon,
label = item.label,
template = item.template,
url = item.url,
target = item.target;
var contentClassName = classNames('p-speeddial-action', {
'p-disabled': disabled
});
var iconClassName = classNames('p-speeddial-action-icon', _icon);
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-speeddial-action-icon'
}, {
props: props
});
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
role: "menuitem",
className: contentClassName,
target: target,
"data-pr-tooltip": label,
onClick: function onClick(e) {
return onItemClick(e, item);
}
}, icon, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(e) {
return onItemClick(e, item);
},
className: contentClassName,
iconClassName: iconClassName,
element: content,
props: props,
visible: visible
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: index,
className: "p-speeddial-item",
style: style,
role: "none"
}, content);
};
var createItems = function createItems() {
return props.model ? props.model.map(createItem) : null;
};
var createList = function createList() {
var items = createItems();
return /*#__PURE__*/React.createElement("ul", {
ref: listRef,
className: "p-speeddial-list",
role: "menu"
}, items);
};
var createButton = function createButton() {
var _classNames;
var showIconVisible = !visible && !!props.showIcon || !props.hideIcon;
var hideIconVisible = visible && !!props.hideIcon;
var className = classNames('p-speeddial-button p-button-rounded', {
'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
}, props.buttonClassName);
var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(props.showIcon), !visible && !!props.showIcon || !props.hideIcon), _defineProperty(_classNames, "".concat(props.hideIcon), visible && !!props.hideIcon), _classNames));
var icon = IconUtils.getJSXIcon(showIconVisible ? props.showIcon : hideIconVisible ? props.hideIcon : null, undefined, {
props: props
});
var content = /*#__PURE__*/React.createElement(Button, {
type: "button",
style: props.buttonStyle,
className: className,
icon: icon,
onClick: onClick,
disabled: props.disabled,
"aria-label": props['aria-label']
});
if (props.buttonTemplate) {
var defaultContentOptions = {
onClick: onClick,
className: className,
iconClassName: iconClassName,
element: content,
props: props,
visible: visible
};
return ObjectUtils.getJSXElement(props.buttonTemplate, defaultContentOptions);
}
return content;
};
var createMask = function createMask() {
if (props.mask) {
var _className = classNames('p-speeddial-mask', {
'p-speeddial-mask-visible': visible
}, props.maskClassName);
return /*#__PURE__*/React.createElement("div", {
className: _className,
style: props.maskStyle
});
}
return null;
};
var otherProps = SpeedDialBase.getOtherProps(props);
var className = classNames("p-speeddial p-component p-speeddial-".concat(props.type), (_classNames2 = {}, _defineProperty(_classNames2, "p-speeddial-direction-".concat(props.direction), props.type !== 'circle'), _defineProperty(_classNames2, 'p-speeddial-opened', visible), _defineProperty(_classNames2, 'p-disabled', props.disabled), _classNames2), props.className);
var button = createButton();
var list = createList();
var mask = createMask();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), button, list), mask);
}));
SpeedDial.displayName = 'SpeedDial';
var SplitButtonBase = {
defaultProps: {
__TYPE: 'SplitButton',
id: null,
label: null,
icon: null,
loading: false,
loadingIcon: 'pi pi-spinner pi-spin',
model: null,
disabled: null,
style: null,
className: null,
buttonClassName: null,
menuStyle: null,
menuClassName: null,
menuButtonClassName: null,
buttonProps: null,
menuButtonProps: null,
tabIndex: null,
severity: null,
rounded: false,
raised: false,
outlined: false,
text: false,
size: null,
appendTo: null,
tooltip: null,
tooltipOptions: null,
buttonTemplate: null,
transitionOptions: null,
dropdownIcon: 'pi pi-chevron-down',
onClick: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SplitButtonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SplitButtonBase.defaultProps);
}
};
var SplitButtonItem = /*#__PURE__*/React.memo(function (props) {
var onClick = function onClick(e) {
if (props.menuitem.command) {
props.menuitem.command({
originalEvent: e,
item: props.menuitem
});
}
if (props.onItemClick) {
props.onItemClick(e);
}
e.preventDefault();
};
var createSeparator = function createSeparator() {
return /*#__PURE__*/React.createElement("li", {
className: "p-menu-separator",
role: "separator"
});
};
var createMenuitem = function createMenuitem() {
if (props.menuitem.visible === false) {
return null;
}
var _props$menuitem = props.menuitem,
disabled = _props$menuitem.disabled,
_icon = _props$menuitem.icon,
_label = _props$menuitem.label,
template = _props$menuitem.template,
url = _props$menuitem.url,
target = _props$menuitem.target,
_className = _props$menuitem.className;
var className = classNames('p-menuitem-link', _className, {
'p-disabled': disabled
});
var iconClassName = classNames('p-menuitem-icon', _icon);
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-menuitem-icon'
}, {
props: props.splitButtonProps
});
var label = _label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, _label);
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
role: "menuitem",
className: className,
target: target,
onClick: onClick,
"aria-label": _label
}, icon, label);
if (template) {
var defaultContentOptions = {
onClick: onClick,
className: className,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props
};
content = ObjectUtils.getJSXElement(template, props.menuitem, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
className: "p-menuitem",
role: "none"
}, content);
};
var createItem = function createItem() {
return props.menuitem.separator ? createSeparator() : createMenuitem();
};
var item = createItem();
return item;
});
SplitButtonItem.displayName = 'SplitButtonItem';
var SplitButtonPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var createElement = function createElement() {
var className = classNames('p-menu p-menu-overlay p-component', props.menuClassName);
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: props.menuStyle,
onClick: props.onClick
}, /*#__PURE__*/React.createElement("ul", {
id: props.menuId,
className: "p-menu-list p-reset",
role: "menu"
}, props.children)));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
SplitButtonPanel.displayName = 'SplitButtonPanel';
var SplitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames;
var props = SplitButtonBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var elementRef = React.useRef(null);
var defaultButtonRef = React.useRef(null);
var overlayRef = React.useRef(null);
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onDropdownButtonClick = function onDropdownButtonClick() {
overlayVisibleState ? hide() : show();
};
var onItemClick = function onItemClick() {
hide();
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
hide: hide,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createItems = function createItems() {
if (props.model) {
return props.model.map(function (menuitem, index) {
return /*#__PURE__*/React.createElement(SplitButtonItem, {
splitButtonProps: props,
menuitem: menuitem,
key: index,
onItemClick: onItemClick
});
});
}
return null;
};
if (props.visible === false) {
return null;
}
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = SplitButtonBase.getOtherProps(props);
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var className = classNames('p-splitbutton p-component', props.className, (_classNames = {
'p-disabled': props.disabled,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, _defineProperty(_classNames, "p-button-".concat(props.severity), props.severity), _defineProperty(_classNames, 'p-button-raised', props.raised), _defineProperty(_classNames, 'p-button-rounded', props.rounded), _defineProperty(_classNames, 'p-button-text', props.text), _defineProperty(_classNames, 'p-button-outlined', props.outlined), _defineProperty(_classNames, "p-button-".concat(size), size), _classNames));
var buttonClassName = classNames('p-splitbutton-defaultbutton', props.buttonClassName);
var menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
var buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
var items = createItems();
var menuId = idState + '_menu';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: idState,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement(Button, _extends({
ref: defaultButtonRef,
type: "button",
className: buttonClassName,
icon: props.icon,
loading: props.loading,
loadingIcon: props.loadingIcon,
label: props.label,
onClick: props.onClick,
disabled: props.disabled,
tabIndex: props.tabIndex
}, props.buttonProps), buttonContent), /*#__PURE__*/React.createElement(Button, _extends({
type: "button",
className: menuButtonClassName,
icon: props.dropdownIcon,
onClick: onDropdownButtonClick,
disabled: props.disabled,
"aria-expanded": overlayVisibleState,
"aria-haspopup": "true",
"aria-controls": overlayVisibleState ? menuId : null
}, props.menuButtonProps)), /*#__PURE__*/React.createElement(SplitButtonPanel, {
ref: overlayRef,
appendTo: props.appendTo,
menuId: menuId,
menuStyle: props.menuStyle,
menuClassName: props.menuClassName,
onClick: onPanelClick,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited,
transitionOptions: props.transitionOptions
}, items)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
SplitButton.displayName = 'SplitButton';
var SplitterBase = {
defaultProps: {
__TYPE: 'Splitter',
className: null,
gutterSize: 4,
id: null,
layout: 'horizontal',
onResizeEnd: null,
stateKey: null,
stateStorage: 'session',
style: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, SplitterBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, SplitterBase.defaultProps);
}
};
var SplitterPanelBase = {
defaultProps: {
__TYPE: 'SplitterPanel',
className: null,
minSize: null,
size: null,
style: null,
children: undefined
},
getCProps: function getCProps(panel) {
return ObjectUtils.getComponentProps(panel, SplitterPanelBase.defaultProps);
},
getCOtherProps: function getCOtherProps(panel) {
return ObjectUtils.getComponentDiffProps(panel, SplitterPanelBase.defaultProps);
},
getCProp: function getCProp(panel, name) {
return ObjectUtils.getComponentProp(panel, name, SplitterPanelBase.defaultProps);
}
};
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 SplitterPanel = function SplitterPanel() {};
var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = SplitterBase.getProps(inProps);
var elementRef = React.useRef(null);
var gutterRef = React.useRef();
var gutterRefs = React.useRef({});
var size = React.useRef(null);
var dragging = React.useRef(null);
var startPos = React.useRef(null);
var prevPanelElement = React.useRef(null);
var nextPanelElement = React.useRef(null);
var prevPanelSize = React.useRef(null);
var prevPanelSizeNew = React.useRef(null);
var nextPanelSize = React.useRef(null);
var nextPanelSizeNew = React.useRef(null);
var prevPanelIndex = React.useRef(null);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
panelSizes = _React$useState2[0],
setPanelSizes = _React$useState2[1];
var isStateful = props.stateKey != null;
var childrenLength = props.children && props.children.length || 1;
var panelSize = function panelSize(sizes, index) {
return index in sizes ? sizes[index] : props.children && [].concat(props.children)[index].props.size || 100 / childrenLength;
};
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
return onResize(event);
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
onResizeEnd(event);
unbindMouseListeners();
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var bindMouseListeners = function bindMouseListeners() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindMouseListeners = function unbindMouseListeners() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var getPanelProp = function getPanelProp(panel, name) {
return SplitterPanelBase.getCProp(panel, name);
};
var validateResize = function validateResize(newPrevPanelSize, newNextPanelSize) {
if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
return false;
}
if (props.children[prevPanelIndex.current + 1].props && props.children[prevPanelIndex.current + 1].props.minSize && props.children[prevPanelIndex.current + 1].props.minSize > newNextPanelSize) {
return false;
}
return true;
};
var clear = function clear() {
dragging.current = false;
size.current = null;
startPos.current = null;
prevPanelElement.current = null;
nextPanelElement.current = null;
prevPanelSize.current = null;
prevPanelSizeNew.current = null;
nextPanelSize.current = null;
nextPanelSizeNew.current = null;
prevPanelIndex.current = null;
};
var getStorage = React.useCallback(function () {
switch (props.stateStorage) {
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
default:
throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
}
}, [props.stateStorage]);
var saveState = function saveState(sizes) {
getStorage().setItem(props.stateKey, JSON.stringify(sizes));
};
var restoreState = React.useCallback(function () {
var stateString = getStorage().getItem(props.stateKey);
if (stateString) setPanelSizes(JSON.parse(stateString));
}, [getStorage, props.stateKey]);
var onResizeStart = function onResizeStart(event, index) {
gutterRef.current = gutterRefs.current[index];
var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
size.current = props.layout === 'horizontal' ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
dragging.current = true;
startPos.current = props.layout === 'horizontal' ? pageX : pageY;
prevPanelElement.current = gutterRef.current.previousElementSibling;
nextPanelElement.current = gutterRef.current.nextElementSibling;
prevPanelSize.current = 100 * (props.layout === 'horizontal' ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true)) / size.current;
prevPanelSizeNew.current = prevPanelSize.current;
nextPanelSize.current = 100 * (props.layout === 'horizontal' ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true)) / size.current;
nextPanelSizeNew.current = nextPanelSize.current;
prevPanelIndex.current = index;
DomHandler.addClass(gutterRef.current, 'p-splitter-gutter-resizing');
DomHandler.addClass(elementRef.current, 'p-splitter-resizing');
};
var onResize = function onResize(event) {
var newPos;
var pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
var pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
if (props.layout === 'horizontal') newPos = pageX * 100 / size.current - startPos.current * 100 / size.current;else newPos = pageY * 100 / size.current - startPos.current * 100 / size.current;
var newPrevPanelSize = prevPanelSize.current + newPos;
var newNextPanelSize = nextPanelSize.current - newPos;
if (validateResize(newPrevPanelSize, newNextPanelSize)) {
prevPanelSizeNew.current = newPrevPanelSize;
nextPanelSizeNew.current = newNextPanelSize;
prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
}
};
var onResizeEnd = function onResizeEnd(event) {
setPanelSizes(function (prev) {
var sizes = [];
for (var index = 0; index < props.children.length; index++) sizes[index] = panelSize(prev, index);
sizes[prevPanelIndex.current] = prevPanelSizeNew.current;
sizes[prevPanelIndex.current + 1] = nextPanelSizeNew.current;
if (props.onResizeEnd) {
props.onResizeEnd({
originalEvent: event,
sizes: sizes
});
}
if (isStateful) saveState(sizes);
return sizes;
});
DomHandler.removeClass(gutterRef.current, 'p-splitter-gutter-resizing');
DomHandler.removeClass(elementRef.current, 'p-splitter-resizing');
clear();
};
var onGutterMouseDown = function onGutterMouseDown(event, index) {
onResizeStart(event, index);
bindMouseListeners();
};
var onGutterTouchStart = function onGutterTouchStart(event, index) {
onResizeStart(event, index);
window.addEventListener('touchmove', onGutterTouchMove, {
passive: false,
cancelable: false
});
window.addEventListener('touchend', onGutterTouchEnd);
};
var onGutterTouchMove = function onGutterTouchMove(event) {
onResize(event);
};
var onGutterTouchEnd = function onGutterTouchEnd(event) {
onResizeEnd(event);
window.removeEventListener('touchmove', onGutterTouchMove);
window.removeEventListener('touchend', onGutterTouchEnd);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
var panelElements = _toConsumableArray(elementRef.current.children).filter(function (child) {
return DomHandler.hasClass(child, 'p-splitter-panel');
});
panelElements.map(function (panelElement) {
if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, '.p-splitter'))) {
DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
}
});
}, []);
React.useEffect(function () {
if (isStateful) restoreState();
}, [restoreState, isStateful]);
var createPanel = function createPanel(panel, index) {
var otherProps = SplitterPanelBase.getCOtherProps(panel);
var panelClassName = classNames('p-splitter-panel', getPanelProp(panel, 'className'));
var gutterStyle = props.layout === 'horizontal' ? {
width: props.gutterSize + 'px'
} : {
height: props.gutterSize + 'px'
};
var gutter = index !== props.children.length - 1 && /*#__PURE__*/React.createElement("div", {
ref: function ref(el) {
return gutterRefs.current[index] = el;
},
className: "p-splitter-gutter",
style: gutterStyle,
onMouseDown: function onMouseDown(event) {
return onGutterMouseDown(event, index);
},
onTouchStart: function onTouchStart(event) {
return onGutterTouchStart(event, index);
},
onTouchMove: function onTouchMove(event) {
return onGutterTouchMove(event);
},
onTouchEnd: function onTouchEnd(event) {
return onGutterTouchEnd(event);
}
}, /*#__PURE__*/React.createElement("div", {
className: "p-splitter-gutter-handle"
}));
var flexBasis = 'calc(' + panelSize(panelSizes, index) + '% - ' + (childrenLength - 1) * props.gutterSize + 'px)';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
key: index,
className: panelClassName,
style: _objectSpread$7(_objectSpread$7({}, getPanelProp(panel, 'style')), {}, {
flexBasis: flexBasis
})
}, otherProps), getPanelProp(panel, 'children')), gutter);
};
var createPanels = function createPanels() {
return React.Children.map(props.children, createPanel);
};
var otherProps = SplitterBase.getOtherProps(props);
var className = classNames("p-splitter p-component p-splitter-".concat(props.layout), props.className);
var panels = createPanels();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps), panels);
}));
SplitterPanel.displayName = 'SplitterPanel';
Splitter.displayName = 'Splitter';
var StepsBase = {
defaultProps: {
__TYPE: 'Steps',
id: null,
model: null,
activeIndex: 0,
readOnly: true,
style: null,
className: null,
onSelect: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, StepsBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, StepsBase.defaultProps);
}
};
var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = StepsBase.getProps(inProps);
var elementRef = React.useRef(null);
var itemClick = function itemClick(event, item, index) {
if (props.readOnly || item.disabled) {
event.preventDefault();
return;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
item: item,
index: index
});
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item,
index: index
});
}
};
var createItem = function createItem(item, index) {
if (item.visible === false) {
return null;
}
var key = item.label + '_' + index;
var active = index === props.activeIndex;
var disabled = item.disabled || index !== props.activeIndex && props.readOnly;
var tabIndex = disabled ? -1 : '';
var className = classNames('p-steps-item', item.className, {
'p-highlight p-steps-current': active,
'p-disabled': disabled
});
var iconClassName = classNames('p-menuitem-icon', item.icon);
var icon = IconUtils.getJSXIcon(item.icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var label = item.label && /*#__PURE__*/React.createElement("span", {
className: "p-steps-title"
}, item.label);
var content = /*#__PURE__*/React.createElement("a", {
href: item.url || '#',
className: "p-menuitem-link",
role: "presentation",
target: item.target,
onClick: function onClick(event) {
return itemClick(event, item, index);
},
tabIndex: tabIndex
}, /*#__PURE__*/React.createElement("span", {
className: "p-steps-number"
}, index + 1), icon, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-steps-title',
numberClassName: 'p-steps-number',
iconClassName: iconClassName,
element: content,
props: props,
tabIndex: tabIndex,
active: active,
disabled: disabled
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
id: item.id,
className: className,
style: item.style,
role: "tab",
"aria-selected": active,
"aria-expanded": active
}, content);
};
var createItems = function createItems() {
if (props.model) {
var _items = props.model.map(createItem);
return /*#__PURE__*/React.createElement("ul", {
role: "tablist"
}, _items);
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = StepsBase.getOtherProps(props);
var className = classNames('p-steps p-component', {
'p-readonly': props.readOnly
}, props.className);
var items = createItems();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), items);
}));
Steps.displayName = 'Steps';
var StyleClassBase = {
defaultProps: {
__TYPE: 'StyleClass',
nodeRef: null,
selector: null,
enterClassName: null,
enterActiveClassName: null,
enterToClassName: null,
leaveClassName: null,
leaveActiveClassName: null,
leaveToClassName: null,
hideOnOutsideClick: false,
toggleClassName: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, StyleClassBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, StyleClassBase.defaultProps);
}
};
var StyleClass = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = StyleClassBase.getProps(inProps);
var targetRef = React.useRef(null);
var animating = React.useRef(false);
var elementRef = React.useRef(null);
var _useEventListener = useEventListener({
type: 'animationend',
listener: function listener() {
DomHandler.removeClass(targetRef.current, props.enterActiveClassName);
if (props.enterToClassName) {
DomHandler.addClass(targetRef.current, props.enterToClassName);
}
unbindTargetEnterListener();
if (props.enterActiveClassName === 'slidedown') {
targetRef.current.style.maxHeight = '';
}
animating.current = false;
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindTargetEnterListener = _useEventListener2[0],
unbindTargetEnterListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'animationend',
listener: function listener() {
DomHandler.removeClass(targetRef.current, props.leaveActiveClassName);
if (props.leaveToClassName) {
DomHandler.addClass(targetRef.current, props.leaveToClassName);
}
unbindTargetLeaveListener();
animating.current = false;
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindTargetLeaveListener = _useEventListener4[0],
unbindTargetLeaveListener = _useEventListener4[1];
var _useEventListener5 = useEventListener({
type: 'click',
listener: function listener(event) {
if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
unbindDocumentClickListener();
} else if (isOutsideClick(event)) {
leave();
}
},
when: props.hideOnOutsideClick
}),
_useEventListener6 = _slicedToArray(_useEventListener5, 2),
bindDocumentClickListener = _useEventListener6[0],
unbindDocumentClickListener = _useEventListener6[1];
var _useEventListener7 = useEventListener({
type: 'click',
listener: function listener() {
targetRef.current = resolveTarget();
if (props.toggleClassName) {
if (DomHandler.hasClass(targetRef.current, props.toggleClassName)) DomHandler.removeClass(targetRef.current, props.toggleClassName);else DomHandler.addClass(targetRef.current, props.toggleClassName);
} else {
DomHandler.isVisible(targetRef.current) ? leave() : enter();
}
}
}),
_useEventListener8 = _slicedToArray(_useEventListener7, 2),
bindClickListener = _useEventListener8[0],
unbindClickListener = _useEventListener8[1];
var enter = function enter() {
if (props.enterActiveClassName) {
if (!animating.current) {
animating.current = true;
if (props.enterActiveClassName === 'slidedown') {
targetRef.current.style.height = '0px';
DomHandler.removeClass(targetRef.current, 'hidden');
targetRef.current.style.maxHeight = targetRef.current.scrollHeight + 'px';
DomHandler.addClass(targetRef.current, 'hidden');
targetRef.current.style.height = '';
}
DomHandler.addClass(targetRef.current, props.enterActiveClassName);
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
bindTargetEnterListener({
target: targetRef.current
});
}
} else {
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
if (props.enterToClassName) {
DomHandler.addClass(targetRef.current, props.enterToClassName);
}
}
bindDocumentClickListener({
target: elementRef.current && elementRef.current.ownerDocument
});
};
var leave = function leave() {
if (props.leaveActiveClassName) {
if (!animating.current) {
animating.current = true;
DomHandler.addClass(targetRef.current, props.leaveActiveClassName);
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
bindTargetLeaveListener({
target: targetRef.current
});
}
} else {
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
if (props.leaveToClassName) {
DomHandler.addClass(targetRef.current, props.leaveToClassName);
}
}
if (props.hideOnOutsideClick) {
unbindDocumentClickListener();
}
};
var resolveTarget = function resolveTarget() {
if (targetRef.current) {
return targetRef.current;
}
switch (props.selector) {
case '@next':
return elementRef.current.nextElementSibling;
case '@prev':
return elementRef.current.previousElementSibling;
case '@parent':
return elementRef.current.parentElement;
case '@grandparent':
return elementRef.current.parentElement.parentElement;
default:
return document.querySelector(props.selector);
}
};
var init = function init() {
elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
bindClickListener({
target: elementRef.current
});
};
var destroy = function destroy() {
unbindClickListener();
unbindDocumentClickListener();
targetRef.current = null;
};
var isVisible = function isVisible(target) {
return target.offsetParent !== null;
};
var isOutsideClick = function isOutsideClick(event) {
return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
},
getTarget: function getTarget() {
return targetRef.current;
}
};
});
useMountEffect(function () {
init();
});
useUpdateEffect(function () {
init();
return function () {
unbindClickListener();
};
});
useUnmountEffect(function () {
destroy();
});
return props.children;
});
StyleClass.displayName = 'StyleClass';
var TabMenuBase = {
defaultProps: {
__TYPE: 'TabMenu',
id: null,
model: null,
activeIndex: 0,
style: null,
className: null,
onTabChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TabMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TabMenuBase.defaultProps);
}
};
var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TabMenuBase.getProps(inProps);
var _React$useState = React.useState(props.activeIndex),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeIndexState = _React$useState2[0],
setActiveIndexState = _React$useState2[1];
var elementRef = React.useRef(null);
var inkbarRef = React.useRef(null);
var navRef = React.useRef(null);
var tabsRef = React.useRef({});
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var itemClick = function itemClick(event, item, index) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
value: item,
index: index
});
} else {
setActiveIndexState(index);
}
};
var isSelected = function isSelected(index) {
return index === (activeIndex || 0);
};
var updateInkBar = function updateInkBar() {
if (props.model) {
var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
updateInkBar();
});
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
var _className = item.className,
style = item.style,
disabled = item.disabled,
_icon = item.icon,
_label = item.label,
template = item.template,
url = item.url,
target = item.target;
var key = _label + '_' + index;
var active = isSelected(index);
var className = classNames('p-tabmenuitem', {
'p-highlight': active,
'p-disabled': disabled
}, _className);
var iconClassName = classNames('p-menuitem-icon', _icon);
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-menuitem-icon'
}, {
props: props
});
var label = _label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, _label);
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
className: "p-menuitem-link",
target: target,
onClick: function onClick(event) {
return itemClick(event, item, index);
},
role: "presentation"
}, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item, index);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
element: content,
props: props,
active: active,
index: index,
disabled: disabled
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
ref: tabsRef.current["tab_".concat(index)],
key: key,
className: className,
style: style,
role: "tab",
"aria-selected": active,
"aria-expanded": active,
"aria-disabled": disabled
}, content);
};
var createItems = function createItems() {
return props.model.map(createMenuItem);
};
if (props.model) {
var otherProps = TabMenuBase.getOtherProps(props);
var className = classNames('p-tabmenu p-component', props.className);
var items = createItems();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement("ul", {
ref: navRef,
className: "p-tabmenu-nav p-reset",
role: "tablist"
}, items, /*#__PURE__*/React.createElement("li", {
ref: inkbarRef,
className: "p-tabmenu-ink-bar"
})));
}
return null;
}));
TabMenu.displayName = 'TabMenu';
var TabViewBase = {
defaultProps: {
__TYPE: 'TabView',
id: null,
activeIndex: 0,
className: null,
onBeforeTabChange: null,
onBeforeTabClose: null,
onTabChange: null,
onTabClose: null,
panelContainerClassName: null,
panelContainerStyle: null,
renderActiveOnly: true,
scrollable: false,
style: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TabViewBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TabViewBase.defaultProps);
}
};
var TabPanelBase = {
defaultProps: {
__TYPE: 'TabPanel',
className: null,
closable: false,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
leftIcon: null,
rightIcon: null,
style: null,
children: undefined
},
getCProp: function getCProp(tab, name) {
return ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps);
},
getCProps: function getCProps(tab) {
return ObjectUtils.getComponentProps(tab, TabPanelBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return ObjectUtils.getComponentDiffProps(tab, TabPanelBase.defaultProps);
}
};
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 TabPanel = function TabPanel() {};
var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TabViewBase.getProps(inProps);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(true),
_React$useState4 = _slicedToArray(_React$useState3, 2),
backwardIsDisabledState = _React$useState4[0],
setBackwardIsDisabledState = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
forwardIsDisabledState = _React$useState6[0],
setForwardIsDisabledState = _React$useState6[1];
var _React$useState7 = React.useState([]),
_React$useState8 = _slicedToArray(_React$useState7, 2),
hiddenTabsState = _React$useState8[0],
setHiddenTabsState = _React$useState8[1];
var _React$useState9 = React.useState(props.activeIndex),
_React$useState10 = _slicedToArray(_React$useState9, 2),
activeIndexState = _React$useState10[0],
setActiveIndexState = _React$useState10[1];
var elementRef = React.useRef(null);
var contentRef = React.useRef(null);
var navRef = React.useRef(null);
var inkbarRef = React.useRef(null);
var prevBtnRef = React.useRef(null);
var nextBtnRef = React.useRef(null);
var tabsRef = React.useRef({});
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var isSelected = function isSelected(index) {
return index === activeIndex;
};
var getTabProp = function getTabProp(tab, name) {
return TabPanelBase.getCProp(tab, name);
};
var shouldUseTab = function shouldUseTab(tab, index) {
return ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
return _i !== index;
});
};
var findVisibleActiveTab = function findVisibleActiveTab(i) {
var tabsInfo = React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab, index)) {
return {
tab: tab,
index: index
};
}
});
return tabsInfo.find(function (_ref) {
var tab = _ref.tab,
index = _ref.index;
return !getTabProp(tab, 'disabled') && index >= i;
}) || tabsInfo.reverse().find(function (_ref2) {
var tab = _ref2.tab,
index = _ref2.index;
return !getTabProp(tab, 'disabled') && i > index;
});
};
var onTabHeaderClose = function onTabHeaderClose(event, index) {
event.preventDefault();
// give caller a chance to stop the selection
if (props.onBeforeTabClose && props.onBeforeTabClose({
originalEvent: event,
index: index
}) === false) {
return;
}
setHiddenTabsState([].concat(_toConsumableArray(hiddenTabsState), [index]));
if (props.onTabClose) {
props.onTabClose({
originalEvent: event,
index: index
});
}
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
if (event) {
event.preventDefault();
}
if (!getTabProp(tab, 'disabled')) {
// give caller a chance to stop the selection
if (props.onBeforeTabChange && props.onBeforeTabChange({
originalEvent: event,
index: index
}) === false) {
return;
}
if (props.onTabChange) props.onTabChange({
originalEvent: event,
index: index
});else setActiveIndexState(index);
}
updateScrollBar(index);
};
var _onKeyDown = function onKeyDown(event, tab, index) {
if (event.key === 'Enter') {
onTabHeaderClick(event, tab, index);
}
};
var updateInkBar = function updateInkBar() {
var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
};
var updateScrollBar = function updateScrollBar(index) {
var tabHeader = tabsRef.current["tab_".concat(index)];
if (tabHeader && tabHeader.scrollIntoView) {
tabHeader.scrollIntoView({
block: 'nearest'
});
}
};
var updateButtonState = function updateButtonState() {
var _contentRef$current = contentRef.current,
scrollLeft = _contentRef$current.scrollLeft,
scrollWidth = _contentRef$current.scrollWidth;
var width = DomHandler.getWidth(contentRef.current);
setBackwardIsDisabledState(scrollLeft === 0);
setForwardIsDisabledState(scrollLeft === scrollWidth - width);
};
var onScroll = function onScroll(event) {
props.scrollable && updateButtonState();
event.preventDefault();
};
var getVisibleButtonWidths = function getVisibleButtonWidths() {
return [prevBtnRef.current, nextBtnRef.current].reduce(function (acc, el) {
return el ? acc + DomHandler.getWidth(el) : acc;
}, 0);
};
var navBackward = function navBackward() {
var width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
var pos = contentRef.current.scrollLeft - width;
contentRef.current.scrollLeft = pos <= 0 ? 0 : pos;
};
var navForward = function navForward() {
var width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
var pos = contentRef.current.scrollLeft + width;
var lastPos = contentRef.current.scrollWidth - width;
contentRef.current.scrollLeft = pos >= lastPos ? lastPos : pos;
};
var reset = function reset() {
setBackwardIsDisabledState(true);
setForwardIsDisabledState(false);
setHiddenTabsState([]);
if (props.onTabChange) props.onTabChange({
index: activeIndex
});else setActiveIndexState(props.activeIndex);
};
React.useEffect(function () {
updateInkBar();
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (ObjectUtils.isNotEmpty(hiddenTabsState)) {
var tabInfo = findVisibleActiveTab(hiddenTabsState[hiddenTabsState.length - 1]);
tabInfo && onTabHeaderClick(null, tabInfo.tab, tabInfo.index);
}
}, [hiddenTabsState]);
useUpdateEffect(function () {
updateScrollBar(props.activeIndex);
}, [props.activeIndex]);
React.useImperativeHandle(ref, function () {
return {
props: props,
reset: reset,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createTabHeader = function createTabHeader(tab, index) {
var selected = isSelected(index);
var _TabPanelBase$getCPro = TabPanelBase.getCProps(tab),
headerStyle = _TabPanelBase$getCPro.headerStyle,
headerClassName = _TabPanelBase$getCPro.headerClassName,
_style = _TabPanelBase$getCPro.style,
_className = _TabPanelBase$getCPro.className,
disabled = _TabPanelBase$getCPro.disabled,
leftIcon = _TabPanelBase$getCPro.leftIcon,
rightIcon = _TabPanelBase$getCPro.rightIcon,
header = _TabPanelBase$getCPro.header,
headerTemplate = _TabPanelBase$getCPro.headerTemplate,
closable = _TabPanelBase$getCPro.closable;
var style = _objectSpread$6(_objectSpread$6({}, headerStyle || {}), _style || {});
var className = classNames('p-unselectable-text', {
'p-tabview-selected p-highlight': selected,
'p-disabled': disabled
}, headerClassName, _className);
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = disabled ? null : 0;
var leftIconElement = leftIcon && /*#__PURE__*/React.createElement("i", {
className: leftIcon
});
var titleElement = /*#__PURE__*/React.createElement("span", {
className: "p-tabview-title"
}, header);
var rightIconElement = rightIcon && /*#__PURE__*/React.createElement("i", {
className: rightIcon
});
var closableIconElement = closable && /*#__PURE__*/React.createElement("i", {
className: "p-tabview-close pi pi-times",
onClick: function onClick(e) {
return onTabHeaderClose(e, index);
}
});
var content =
/*#__PURE__*/
// eslint-disable /
React.createElement("a", {
role: "tab",
className: "p-tabview-nav-link",
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
id: headerId,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e, tab, index);
},
"aria-controls": ariaControls,
"aria-selected": selected,
tabIndex: tabIndex
}, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React.createElement(Ripple, null))
// eslint-enable /
;
if (headerTemplate) {
var defaultContentOptions = {
className: 'p-tabview-nav-link',
titleClassName: 'p-tabview-title',
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e, tab, index);
},
leftIconElement: leftIconElement,
titleElement: titleElement,
rightIconElement: rightIconElement,
element: content,
props: props,
index: index,
selected: selected,
ariaControls: ariaControls
};
content = ObjectUtils.getJSXElement(headerTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
ref: function ref(el) {
return tabsRef.current["tab_".concat(index)] = el;
},
className: className,
style: style,
role: "presentation"
}, content);
};
var createTabHeaders = function createTabHeaders() {
return React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab, index)) {
return createTabHeader(tab, index);
}
});
};
var createNavigator = function createNavigator() {
var headers = createTabHeaders();
return /*#__PURE__*/React.createElement("div", {
ref: contentRef,
id: idState,
className: "p-tabview-nav-content",
style: props.style,
onScroll: onScroll
}, /*#__PURE__*/React.createElement("ul", {
ref: navRef,
className: "p-tabview-nav",
role: "tablist"
}, headers, /*#__PURE__*/React.createElement("li", {
ref: inkbarRef,
className: "p-tabview-ink-bar"
})));
};
var createContent = function createContent() {
var className = classNames('p-tabview-panels', props.panelContainerClassName);
var contents = React.Children.map(props.children, function (tab, index) {
if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
var selected = isSelected(index);
var style = _objectSpread$6(_objectSpread$6({}, getTabProp(tab, 'contentStyle') || {}), getTabProp(tab, 'style') || {});
var _className2 = classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', {
'p-hidden': !selected
});
var contentId = idState + '_content_' + index;
var ariaLabelledBy = idState + '_header_' + index;
var _otherProps = TabPanelBase.getCOtherProps(tab);
return /*#__PURE__*/React.createElement("div", _extends({}, _otherProps, {
id: contentId,
"aria-labelledby": ariaLabelledBy,
"aria-hidden": !selected,
className: _className2,
style: style,
role: "tabpanel"
}), !props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children'));
}
});
return /*#__PURE__*/React.createElement("div", {
className: className,
style: props.panelContainerStyle
}, contents);
};
var createPrevButton = function createPrevButton() {
if (props.scrollable && !backwardIsDisabledState) {
return /*#__PURE__*/React.createElement("button", {
ref: prevBtnRef,
className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
onClick: navBackward,
type: "button",
"aria-label": ariaLabel('previousPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-left"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
return null;
};
var createNextButton = function createNextButton() {
if (props.scrollable && !forwardIsDisabledState) {
return /*#__PURE__*/React.createElement("button", {
ref: nextBtnRef,
className: "p-tabview-nav-next p-tabview-nav-btn p-link",
onClick: navForward,
type: "button",
"aria-label": ariaLabel('nextPageLabel')
}, /*#__PURE__*/React.createElement("span", {
className: "pi pi-chevron-right",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
}
};
var otherProps = TabViewBase.getOtherProps(props);
var className = classNames('p-tabview p-component', {
'p-tabview-scrollable': props.scrollable
}, props.className);
var navigator = createNavigator();
var content = createContent();
var prevButton = createPrevButton();
var nextButton = createNextButton();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-tabview-nav-container"
}, prevButton, navigator, nextButton), content);
});
TabPanel.displayName = 'TabPanel';
TabView.displayName = 'TabView';
var TagBase = {
defaultProps: {
__TYPE: 'Tag',
value: null,
severity: null,
rounded: false,
icon: null,
style: null,
className: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TagBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TagBase.defaultProps);
}
};
var Tag = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames;
var props = TagBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = TagBase.getOtherProps(props);
var className = classNames('p-tag p-component', (_classNames = {}, _defineProperty(_classNames, "p-tag-".concat(props.severity), props.severity !== null), _defineProperty(_classNames, 'p-tag-rounded', props.rounded), _classNames), props.className);
var icon = IconUtils.getJSXIcon(props.icon, {
className: 'p-tag-icon'
}, {
props: props
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("span", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps), icon, /*#__PURE__*/React.createElement("span", {
className: "p-tag-value"
}, props.value), /*#__PURE__*/React.createElement("span", null, props.children));
});
Tag.displayName = 'Tag';
var TerminalService = EventBus();
var TerminalBase = {
defaultProps: {
__TYPE: 'Terminal',
id: null,
style: null,
className: null,
welcomeMessage: null,
prompt: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TerminalBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TerminalBase.defaultProps);
}
};
var Terminal = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TerminalBase.getProps(inProps);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
commandTextState = _React$useState2[0],
setCommandTextState = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
commandsState = _React$useState4[0],
setCommandsState = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
indexState = _React$useState6[0],
setIndexState = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
emittedTextState = _React$useState8[0],
setEmittedTextState = _React$useState8[1];
var elementRef = React.useRef(null);
var inputRef = React.useRef(null);
var isEmitted = React.useRef(false);
var onClick = function onClick() {
DomHandler.focus(inputRef.current);
};
var onInputChange = function onInputChange(e) {
setCommandTextState(e.target.value);
};
var onInputKeyDown = function onInputKeyDown(e) {
var code = e.which || e.keyCode;
switch (code) {
//up
case 38:
if (commandsState && commandsState.length) {
var prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
var command = commandsState[prevIndex];
setIndexState(prevIndex);
setCommandTextState(command.text);
}
break;
//enter
case 13:
if (!!commandTextState) {
var newCommands = _toConsumableArray(commandsState);
newCommands.push({
text: commandTextState
});
setIndexState(function (prevIndex) {
return prevIndex + 1;
});
setCommandTextState('');
setCommandsState(newCommands);
setEmittedTextState(commandTextState);
isEmitted.current = true;
}
break;
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
var response = function response(res) {
if (commandsState && commandsState.length > 0) {
var commands = _toConsumableArray(commandsState);
commands[commands.length - 1].response = res;
setCommandsState(commands);
}
};
var clear = function clear() {
setCommandsState([]);
setIndexState(0);
};
TerminalService.on('response', response);
TerminalService.on('clear', clear);
return function () {
TerminalService.off('response', response);
TerminalService.off('clear', clear);
};
}, [commandsState]);
React.useEffect(function () {
if (isEmitted.current) {
TerminalService.emit('command', emittedTextState);
isEmitted.current = false;
}
elementRef.current.scrollTop = elementRef.current.scrollHeight;
});
var createWelcomeMessage = function createWelcomeMessage() {
if (props.welcomeMessage) {
return /*#__PURE__*/React.createElement("div", null, props.welcomeMessage);
}
return null;
};
var createCommand = function createCommand(command, index) {
var text = command.text,
response = command.response;
var key = text + '_' + index;
return /*#__PURE__*/React.createElement("div", {
key: key
}, /*#__PURE__*/React.createElement("span", {
className: "p-terminal-prompt"
}, props.prompt, "\xA0"), /*#__PURE__*/React.createElement("span", {
className: "p-terminal-command"
}, text), /*#__PURE__*/React.createElement("div", {
className: "p-terminal-response"
}, response));
};
var createContent = function createContent() {
var content = commandsState.map(createCommand);
return /*#__PURE__*/React.createElement("div", {
className: "p-terminal-content"
}, content);
};
var createPromptContainer = function createPromptContainer() {
return /*#__PURE__*/React.createElement("div", {
className: "p-terminal-prompt-container"
}, /*#__PURE__*/React.createElement("span", {
className: "p-terminal-prompt"
}, props.prompt, "\xA0"), /*#__PURE__*/React.createElement("input", {
ref: inputRef,
type: "text",
value: commandTextState,
className: "p-terminal-input",
autoComplete: "off",
onChange: onInputChange,
onKeyDown: onInputKeyDown
}));
};
var otherProps = TerminalBase.getOtherProps(props);
var className = classNames('p-terminal p-component', props.className);
var welcomeMessage = createWelcomeMessage();
var content = createContent();
var prompt = createPromptContainer();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), welcomeMessage, content, prompt);
}));
Terminal.displayName = 'Terminal';
var TieredMenuBase = {
defaultProps: {
__TYPE: 'TieredMenu',
id: null,
model: null,
popup: false,
style: null,
className: null,
autoZIndex: true,
baseZIndex: 0,
breakpoint: undefined,
scrollHeight: '400px',
appendTo: null,
transitionOptions: null,
onShow: null,
onHide: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TieredMenuBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TieredMenuBase.defaultProps);
}
};
var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeItemState = _React$useState2[0],
setActiveItemState = _React$useState2[1];
var elementRef = React.useRef(null);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(event) {
if (!props.isMobileMode && elementRef.current && !elementRef.current.contains(event.target)) {
setActiveItemState(null);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 1),
bindDocumentClickListener = _useEventListener2[0];
var _useResizeListener = useResizeListener({
listener: function listener() {
!props.isMobileMode && setActiveItemState(null);
}
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindDocumentResizeListener = _useResizeListener2[0];
var position = function position() {
if (elementRef.current) {
var parentItem = elementRef.current.parentElement;
var containerOffset = DomHandler.getOffset(parentItem);
var viewport = DomHandler.getViewport();
var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(elementRef.current);
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
var top = parseInt(containerOffset.top, 10) + elementRef.current.offsetHeight - DomHandler.getWindowScrollTop();
if (top > viewport.height) {
elementRef.current.style.top = viewport.height - top + 'px';
} else {
elementRef.current.style.top = '0px';
}
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
DomHandler.addClass(elementRef.current, 'p-submenu-list-flipped');
}
}
};
var onItemMouseEnter = function onItemMouseEnter(event, item) {
if (item.disabled || props.isMobileMode) {
event.preventDefault();
return;
}
if (props.root) {
if (activeItemState || props.popup) {
setActiveItemState(item);
}
} else {
setActiveItemState(item);
}
};
var onItemClick = function onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (props.root || props.isMobileMode) {
if (item.items) {
if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
}
}
if (!item.items) {
onLeafClick(event);
}
};
var onItemKeyDown = function onItemKeyDown(event, item) {
var listItem = event.currentTarget.parentElement;
switch (event.which) {
//down
case 40:
var nextItem = findNextItem(listItem);
nextItem && nextItem.children[0].focus();
event.preventDefault();
break;
//up
case 38:
var prevItem = findPrevItem(listItem);
prevItem && prevItem.children[0].focus();
event.preventDefault();
break;
//right
case 39:
if (item.items) {
setActiveItemState(item);
setTimeout(function () {
listItem.children[1].children[0].children[0].focus();
}, 50);
}
event.preventDefault();
break;
}
props.onKeyDown && props.onKeyDown(event, listItem);
};
var onChildItemKeyDown = function onChildItemKeyDown(event, childListItem) {
//left
if (event.which === 37) {
setActiveItemState(null);
childListItem.parentElement.previousElementSibling.focus();
}
};
var findNextItem = function findNextItem(item) {
var nextItem = item.nextElementSibling;
return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem : null;
};
var findPrevItem = function findPrevItem(item) {
var prevItem = item.previousElementSibling;
return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
};
var onLeafClick = function onLeafClick(event) {
if (!props.isMobileMode || props.popup) {
setActiveItemState(null);
props.onLeafClick && props.onLeafClick(event);
props.onHide && props.onHide(event);
}
};
useMountEffect(function () {
bindDocumentClickListener();
bindDocumentResizeListener();
});
useUpdateEffect(function () {
if (!props.parentActive) {
setActiveItemState(null);
}
if (!props.root && props.parentActive && !props.isMobileMode) {
position();
}
}, [props.parentActive]);
useUpdateEffect(function () {
props.onItemToggle && props.onItemToggle();
}, [activeItemState]);
var createSeparator = function createSeparator(index) {
var key = 'separator_' + index;
return /*#__PURE__*/React.createElement("li", {
key: key,
className: "p-menu-separator",
role: "separator"
});
};
var createSubmenu = function createSubmenu(item) {
if (item.items) {
return /*#__PURE__*/React.createElement(TieredMenuSub, {
menuProps: props.menuProps,
model: item.items,
onLeafClick: onLeafClick,
popup: props.popup,
onKeyDown: onChildItemKeyDown,
parentActive: item === activeItemState,
isMobileMode: props.isMobileMode,
onItemToggle: props.onItemToggle
});
}
return null;
};
var createMenuItem = function createMenuItem(item, index) {
if (item.visible === false) {
return null;
}
item.id;
var _className = item.className,
style = item.style,
disabled = item.disabled,
_icon = item.icon,
_label = item.label,
items = item.items,
target = item.target,
url = item.url,
template = item.template;
var key = _label + '_' + index;
var active = activeItemState === item;
var className = classNames('p-menuitem', {
'p-menuitem-active': active
}, _className);
var linkClassName = classNames('p-menuitem-link', {
'p-disabled': disabled
});
var iconClassName = classNames('p-menuitem-icon', _icon);
var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
var icon = IconUtils.getJSXIcon(_icon, {
className: 'p-menuitem-icon'
}, {
props: props.menuProps
});
var label = _label && /*#__PURE__*/React.createElement("span", {
className: "p-menuitem-text"
}, _label);
var submenuIcon = items && /*#__PURE__*/React.createElement("span", {
className: submenuIconClassName
});
var submenu = createSubmenu(item);
var content = /*#__PURE__*/React.createElement("a", {
href: url || '#',
className: linkClassName,
target: target,
role: "menuitem",
"aria-haspopup": items != null,
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event, item);
},
"aria-disabled": disabled
}, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return onItemClick(event, item);
},
onKeyDown: function onKeyDown(event) {
return onItemKeyDown(event, item);
},
className: linkClassName,
labelClassName: 'p-menuitem-text',
iconClassName: iconClassName,
submenuIconClassName: submenuIconClassName,
element: content,
props: props,
active: active,
disabled: disabled
};
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("li", {
key: key,
id: item,
className: className,
style: style,
onMouseEnter: function onMouseEnter(event) {
return onItemMouseEnter(event, item);
},
role: "none"
}, content, submenu);
};
var createItem = function createItem(item, index) {
return item.separator ? createSeparator(index) : createMenuItem(item, index);
};
var createMenu = function createMenu() {
return props.model ? props.model.map(createItem) : null;
};
var className = classNames({
'p-submenu-list': !props.root
});
var submenu = createMenu();
return /*#__PURE__*/React.createElement("ul", {
ref: elementRef,
className: className,
role: props.root ? 'menubar' : 'menu',
"aria-orientation": "horizontal"
}, submenu);
});
TieredMenuSub.displayName = 'TieredMenuSub';
var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TieredMenuBase.getProps(inProps);
var _React$useState = React.useState(!props.popup),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
attributeSelectorState = _React$useState4[0],
setAttributeSelectorState = _React$useState4[1];
var menuRef = React.useRef(null);
var targetRef = React.useRef(null);
var styleElementRef = React.useRef(null);
var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
var _useOverlayListener = useOverlayListener({
target: targetRef,
overlay: menuRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide(event);
},
when: visibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onPanelClick = function onPanelClick(event) {
if (props.popup) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: targetRef.current
});
}
};
var toggle = function toggle(event) {
if (props.popup) {
visibleState ? hide(event) : show(event);
}
};
var show = function show(event) {
targetRef.current = event.currentTarget;
setVisibleState(true);
props.onShow && props.onShow(event);
};
var hide = function hide(event) {
if (props.popup) {
targetRef.current = event.currentTarget;
setVisibleState(false);
props.onHide && props.onHide(event);
}
};
var onItemToggle = function onItemToggle() {
if (props.popup && isMobileMode) {
DomHandler.absolutePosition(menuRef.current, targetRef.current);
}
};
var createStyle = function createStyle() {
if (!styleElementRef.current) {
styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
var selector = "".concat(attributeSelectorState);
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-tieredmenu[").concat(selector, "] > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-tieredmenu[").concat(selector, "] .p-submenu-list {\n position: relative;\n }\n\n .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-tieredmenu[").concat(selector, "] .p-submenu-icon:before {\n content: \"\\e930\";\n }\n\n ").concat(!props.popup ? ".p-tieredmenu[".concat(selector, "] { width: 100%; }") : '', "\n}\n");
styleElementRef.current.innerHTML = innerHTML;
}
};
var destroyStyle = function destroyStyle() {
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};
var onEnter = function onEnter() {
if (props.autoZIndex) {
ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
}
DomHandler.absolutePosition(menuRef.current, targetRef.current);
if (attributeSelectorState && props.breakpoint) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
};
var onEntered = function onEntered() {
bindOverlayListener();
};
var onExit = function onExit() {
targetRef.current = null;
unbindOverlayListener();
};
var onExited = function onExited() {
ZIndexUtils.clear(menuRef.current);
destroyStyle();
};
useMountEffect(function () {
if (props.breakpoint) {
!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
}
});
useUpdateEffect(function () {
if (attributeSelectorState && menuRef.current) {
menuRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}
return function () {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);
useUnmountEffect(function () {
ZIndexUtils.clear(menuRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
toggle: toggle,
show: show,
hide: hide,
getElement: function getElement() {
return menuRef.current;
}
};
});
var createElement = function createElement() {
var otherProps = TieredMenuBase.getOtherProps(props);
var className = classNames('p-tieredmenu p-component', {
'p-tieredmenu-overlay': props.popup,
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
}, props.className);
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: menuRef,
classNames: "p-connected-overlay",
"in": visibleState,
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited
}, /*#__PURE__*/React.createElement("div", _extends({
ref: menuRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onPanelClick
}), /*#__PURE__*/React.createElement(TieredMenuSub, {
menuProps: props,
model: props.model,
root: true,
popup: props.popup,
onHide: hide,
isMobileMode: isMobileMode,
onItemToggle: onItemToggle
})));
};
var element = createElement();
return props.popup ? /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
}) : element;
}));
TieredMenu.displayName = 'TieredMenu';
var TimelineBase = {
defaultProps: {
__TYPE: 'Timeline',
align: 'left',
className: null,
content: null,
dataKey: null,
layout: 'vertical',
marker: null,
opposite: null,
value: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TimelineBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TimelineBase.defaultProps);
}
};
var Timeline = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var _classNames;
var props = TimelineBase.getProps(inProps);
var elementRef = React.useRef(null);
var getKey = function getKey(item, index) {
return props.dataKey ? ObjectUtils.resolveFieldData(item, props.dataKey) : "pr_id__".concat(index);
};
var createEvents = function createEvents() {
return props.value && props.value.map(function (item, index) {
var opposite = ObjectUtils.getJSXElement(props.opposite, item, index);
var marker = ObjectUtils.getJSXElement(props.marker, item, index) || /*#__PURE__*/React.createElement("div", {
className: "p-timeline-event-marker"
});
var connector = index !== props.value.length - 1 && /*#__PURE__*/React.createElement("div", {
className: "p-timeline-event-connector"
});
var content = ObjectUtils.getJSXElement(props.content, item, index);
return /*#__PURE__*/React.createElement("div", {
key: getKey(item, index),
className: "p-timeline-event"
}, /*#__PURE__*/React.createElement("div", {
className: "p-timeline-event-opposite"
}, opposite), /*#__PURE__*/React.createElement("div", {
className: "p-timeline-event-separator"
}, marker, connector), /*#__PURE__*/React.createElement("div", {
className: "p-timeline-event-content"
}, content));
});
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var otherProps = TimelineBase.getOtherProps(props);
var className = classNames('p-timeline p-component', (_classNames = {}, _defineProperty(_classNames, "p-timeline-".concat(props.align), true), _defineProperty(_classNames, "p-timeline-".concat(props.layout), true), _classNames), props.className);
var events = createEvents();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className
}, otherProps), events);
}));
Timeline.displayName = 'Timeline';
var ToastBase = {
defaultProps: {
__TYPE: 'Toast',
id: null,
className: null,
style: null,
baseZIndex: 0,
position: 'top-right',
transitionOptions: null,
appendTo: 'self',
onClick: null,
onRemove: null,
onShow: null,
onHide: null,
onMouseEnter: null,
onMouseLeave: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ToastBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ToastBase.defaultProps);
}
};
var ToastMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
var messageInfo = props.messageInfo;
var _messageInfo$message = messageInfo.message,
severity = _messageInfo$message.severity,
content = _messageInfo$message.content,
summary = _messageInfo$message.summary,
detail = _messageInfo$message.detail,
closable = _messageInfo$message.closable,
life = _messageInfo$message.life,
sticky = _messageInfo$message.sticky,
_className = _messageInfo$message.className,
style = _messageInfo$message.style,
_contentClassName = _messageInfo$message.contentClassName,
contentStyle = _messageInfo$message.contentStyle;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focused = _React$useState2[0],
setFocused = _React$useState2[1];
var _useTimeout = useTimeout(function () {
onClose();
}, life || 3000, !sticky && !focused),
_useTimeout2 = _slicedToArray(_useTimeout, 1),
clearTimer = _useTimeout2[0];
var onClose = function onClose() {
clearTimer();
props.onClose && props.onClose(messageInfo);
};
var onClick = function onClick(event) {
if (props.onClick && !(DomHandler.hasClass(event.target, 'p-toast-icon-close') || DomHandler.hasClass(event.target, 'p-toast-icon-close-icon'))) {
props.onClick(messageInfo.message);
}
};
var onMouseEnter = function onMouseEnter(event) {
props.onMouseEnter && props.onMouseEnter(event);
// do not continue if the user has canceled the event
if (event.defaultPrevented) {
return;
}
// stop timer while user has focused message
if (!sticky) {
clearTimer();
setFocused(true);
}
};
var onMouseLeave = function onMouseLeave(event) {
props.onMouseLeave && props.onMouseLeave(event);
// do not continue if the user has canceled the event
if (event.defaultPrevented) {
return;
}
// restart timer when user has left message
if (!sticky) {
setFocused(false);
}
};
var createCloseIcon = function createCloseIcon() {
if (closable !== false) {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-toast-icon-close p-link",
onClick: onClose,
"aria-label": localeOption('close')
}, /*#__PURE__*/React.createElement("span", {
className: "p-toast-icon-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null)));
}
return null;
};
var createMessage = function createMessage() {
if (messageInfo) {
var contentEl = ObjectUtils.getJSXElement(content, {
message: messageInfo.message,
onClick: onClick,
onClose: onClose
});
var iconClassName = classNames('p-toast-message-icon pi', {
'pi-info-circle': severity === 'info',
'pi-exclamation-triangle': severity === 'warn',
'pi-times': severity === 'error',
'pi-check': severity === 'success'
});
return contentEl || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}), /*#__PURE__*/React.createElement("div", {
className: "p-toast-message-text"
}, /*#__PURE__*/React.createElement("span", {
className: "p-toast-summary"
}, summary), detail && /*#__PURE__*/React.createElement("div", {
className: "p-toast-detail"
}, detail)));
}
return null;
};
var className = classNames('p-toast-message', _defineProperty({}, "p-toast-message-".concat(severity), severity), _className);
var contentClassName = classNames('p-toast-message-content', _contentClassName);
var message = createMessage();
var closeIcon = createCloseIcon();
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: style,
role: "alert",
"aria-live": "assertive",
"aria-atomic": "true",
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, /*#__PURE__*/React.createElement("div", {
className: contentClassName,
style: contentStyle
}, message, closeIcon));
}));
ToastMessage.displayName = 'ToastMessage';
var messageIdx = 0;
var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ToastBase.getProps(inProps);
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
messagesState = _React$useState2[0],
setMessagesState = _React$useState2[1];
var containerRef = React.useRef(null);
var show = function show(messageInfo) {
if (messageInfo) {
var messages = assignIdentifiers(messageInfo, true);
setMessagesState(messages);
}
};
var assignIdentifiers = function assignIdentifiers(messageInfo, copy) {
var messages;
if (Array.isArray(messageInfo)) {
var multipleMessages = messageInfo.reduce(function (acc, message) {
acc.push({
_pId: messageIdx++,
message: message
});
return acc;
}, []);
if (copy) {
messages = messagesState ? [].concat(_toConsumableArray(messagesState), _toConsumableArray(multipleMessages)) : multipleMessages;
} else {
messages = multipleMessages;
}
} else {
var message = {
_pId: messageIdx++,
message: messageInfo
};
if (copy) {
messages = messagesState ? [].concat(_toConsumableArray(messagesState), [message]) : [message];
} else {
messages = [message];
}
}
return messages;
};
var clear = function clear() {
ZIndexUtils.clear(containerRef.current);
setMessagesState([]);
};
var replace = function replace(messageInfo) {
var replaced = assignIdentifiers(messageInfo, false);
setMessagesState(replaced);
};
var remove = function remove(messageInfo) {
var messages = messagesState.filter(function (msg) {
return msg._pId !== messageInfo._pId;
});
setMessagesState(messages);
props.onRemove && props.onRemove(messageInfo.message);
};
var onClose = function onClose(messageInfo) {
remove(messageInfo);
};
var onEntered = function onEntered() {
props.onShow && props.onShow();
};
var onExited = function onExited() {
messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
props.onHide && props.onHide();
};
useUpdateEffect(function () {
ZIndexUtils.set('toast', containerRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['toast']);
}, [messagesState, props.baseZIndex]);
useUnmountEffect(function () {
ZIndexUtils.clear(containerRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
show: show,
replace: replace,
remove: remove,
clear: clear,
getElement: function getElement() {
return containerRef.current;
}
};
});
var createElement = function createElement() {
var otherProps = ToastBase.getOtherProps(props);
var className = classNames('p-toast p-component p-toast-' + props.position, props.className, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
return /*#__PURE__*/React.createElement("div", _extends({
ref: containerRef,
id: props.id,
className: className,
style: props.style
}, otherProps), /*#__PURE__*/React.createElement(TransitionGroup, null, messagesState && messagesState.map(function (messageInfo) {
var messageRef = /*#__PURE__*/React.createRef();
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: messageRef,
key: messageInfo._pId,
classNames: "p-toast-message",
unmountOnExit: true,
timeout: {
enter: 300,
exit: 300
},
onEntered: onEntered,
onExited: onExited,
options: props.transitionOptions
}, /*#__PURE__*/React.createElement(ToastMessage, {
ref: messageRef,
messageInfo: messageInfo,
onClick: props.onClick,
onClose: onClose,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave
}));
})));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
Toast.displayName = 'Toast';
var ToggleButtonBase = {
defaultProps: {
__TYPE: 'ToggleButton',
id: null,
onIcon: null,
offIcon: null,
onLabel: 'Yes',
offLabel: 'No',
iconPos: 'left',
style: null,
className: null,
checked: false,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
onChange: null,
onFocus: null,
onBlur: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps);
}
};
var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ToggleButtonBase.getProps(inProps);
var elementRef = React.useRef(null);
var hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
var hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
var label = hasLabel ? props.checked ? props.onLabel : props.offLabel : ' ';
var icon = props.checked ? props.onIcon : props.offIcon;
var toggle = function toggle(e) {
if (!props.disabled && props.onChange) {
props.onChange({
originalEvent: e,
value: !props.checked,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: !props.checked
}
});
}
};
var onKeyDown = function onKeyDown(event) {
if (event.keyCode === 32) {
toggle(event);
event.preventDefault();
}
};
var createIcon = function createIcon() {
if (hasIcon) {
var iconClassName = classNames('p-button-icon p-c', {
'p-button-icon-left': props.iconPos === 'left' && label,
'p-button-icon-right': props.iconPos === 'right' && label
});
return IconUtils.getJSXIcon(icon, {
className: iconClassName
}, {
props: props
});
}
return null;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var tabIndex = props.disabled ? -1 : props.tabIndex;
var otherProps = ToggleButtonBase.getOtherProps(props);
var className = classNames('p-button p-togglebutton p-component', {
'p-button-icon-only': hasIcon && !hasLabel,
'p-highlight': props.checked,
'p-disabled': props.disabled
}, props.className);
var iconElement = createIcon();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: toggle,
onFocus: props.onFocus,
onBlur: props.onBlur,
onKeyDown: onKeyDown,
tabIndex: tabIndex,
role: "button",
"aria-pressed": props.checked
}), iconElement, /*#__PURE__*/React.createElement("span", {
className: "p-button-label"
}, label), /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
ToggleButton.displayName = 'ToggleButton';
var ToolbarBase = {
defaultProps: {
__TYPE: 'Toolbar',
id: null,
style: null,
className: null,
left: null,
right: null,
start: null,
center: null,
end: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, ToolbarBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, ToolbarBase.defaultProps);
}
};
var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = ToolbarBase.getProps(inProps);
var elementRef = React.useRef(null);
var otherProps = ToolbarBase.getOtherProps(props);
var toolbarClass = classNames('p-toolbar p-component', props.className);
var start = ObjectUtils.getJSXElement(props.left || props.start, props);
var center = ObjectUtils.getJSXElement(props.center, props);
var end = ObjectUtils.getJSXElement(props.right || props.end, props);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: toolbarClass,
style: props.style,
role: "toolbar"
}, otherProps), /*#__PURE__*/React.createElement("div", {
className: "p-toolbar-group-start p-toolbar-group-left"
}, start), /*#__PURE__*/React.createElement("div", {
className: "p-toolbar-group-center"
}, center), /*#__PURE__*/React.createElement("div", {
className: "p-toolbar-group-end p-toolbar-group-right"
}, end));
}));
Toolbar.displayName = 'Toolbar';
var TreeBase = {
defaultProps: {
__TYPE: 'Tree',
id: null,
value: null,
disabled: false,
selectionMode: null,
selectionKeys: null,
onSelectionChange: null,
contextMenuSelectionKey: null,
onContextMenuSelectionChange: null,
expandedKeys: null,
style: null,
className: null,
contentStyle: null,
contentClassName: null,
metaKeySelection: true,
propagateSelectionUp: true,
propagateSelectionDown: true,
loading: false,
loadingIcon: 'pi pi-spinner',
dragdropScope: null,
header: null,
footer: null,
showHeader: true,
filter: false,
filterValue: null,
filterBy: 'label',
filterMode: 'lenient',
filterPlaceholder: null,
filterLocale: undefined,
filterTemplate: null,
nodeTemplate: null,
togglerTemplate: null,
onSelect: null,
onUnselect: null,
onExpand: null,
onCollapse: null,
onToggle: null,
onDragDrop: null,
onContextMenu: null,
onFilterValueChange: null,
onNodeClick: null,
onNodeDoubleClick: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TreeBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TreeBase.defaultProps);
}
};
function _createForOfIteratorHelper$6(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$6(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$6(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$6(o, minLen); }
function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys$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; }
var UITreeNode = /*#__PURE__*/React.memo(function (props) {
var contentRef = React.useRef(null);
var nodeTouched = React.useRef(false);
var isLeaf = props.isNodeLeaf(props.node);
var expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded;
var expand = function expand(event) {
var expandedKeys = props.expandedKeys ? _objectSpread$5({}, props.expandedKeys) : {};
expandedKeys[props.node.key] = true;
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, true);
};
var collapse = function collapse(event) {
var expandedKeys = _objectSpread$5({}, props.expandedKeys);
delete expandedKeys[props.node.key];
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, false);
};
var onTogglerClick = function onTogglerClick(event) {
if (props.disabled) {
return;
}
expanded ? collapse(event) : expand(event);
event.preventDefault();
event.stopPropagation();
};
var invokeToggleEvents = function invokeToggleEvents(event, isExpanded) {
if (isExpanded) {
if (props.onExpand) {
props.onExpand({
originalEvent: event,
node: props.node
});
}
} else {
if (props.onCollapse) {
props.onCollapse({
originalEvent: event,
node: props.node
});
}
}
};
var onNodeKeyDown = function onNodeKeyDown(event) {
if (props.disabled) {
return;
}
var nodeElement = event.target.parentElement;
if (!DomHandler.hasClass(nodeElement, 'p-treenode')) {
return;
}
switch (event.which) {
//down arrow
case 40:
var listElement = nodeElement.children[1];
if (listElement) {
focusNode(listElement.children[0]);
} else {
var nextNodeElement = nodeElement.nextElementSibling;
while (nextNodeElement) {
if (!DomHandler.hasClass(nextNodeElement, 'p-treenode-droppoint')) {
break;
}
nextNodeElement = nextNodeElement.nextElementSibling;
}
if (nextNodeElement) {
focusNode(nextNodeElement);
} else {
var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
nextSiblingAncestor && focusNode(nextSiblingAncestor);
}
}
event.preventDefault();
break;
//up arrow
case 38:
if (nodeElement.previousElementSibling) {
focusNode(findLastVisibleDescendant(nodeElement.previousElementSibling));
} else {
var parentNodeElement = getParentNodeElement(nodeElement);
parentNodeElement && focusNode(parentNodeElement);
}
event.preventDefault();
break;
//right arrow
case 39:
if (!expanded) {
expand(event);
}
event.preventDefault();
break;
//left arrow
case 37:
if (expanded) {
collapse(event);
}
event.preventDefault();
break;
//enter
case 13:
onClick(event);
event.preventDefault();
break;
}
};
var findNextSiblingOfAncestor = function findNextSiblingOfAncestor(nodeElement) {
var parentNodeElement = getParentNodeElement(nodeElement);
return parentNodeElement ? parentNodeElement.nextElementSibling || findNextSiblingOfAncestor(parentNodeElement) : null;
};
var findLastVisibleDescendant = function findLastVisibleDescendant(nodeElement) {
var childrenListElement = nodeElement.children[1];
if (childrenListElement) {
var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
return findLastVisibleDescendant(lastChildElement);
} else {
return nodeElement;
}
};
var getParentNodeElement = function getParentNodeElement(nodeElement) {
var parentNodeElement = nodeElement.parentElement.parentElement;
return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
};
var focusNode = function focusNode(element) {
element && element.children[0] && element.children[0].focus();
};
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick({
originalEvent: event,
node: props.node
});
}
var targetNode = event.target.nodeName;
if (props.disabled || targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')) {
return;
}
if (props.selectionMode && props.node.selectable !== false) {
var selectionKeys;
if (isCheckboxSelectionMode()) {
var checked = isChecked();
selectionKeys = props.selectionKeys ? _objectSpread$5({}, props.selectionKeys) : {};
if (checked) {
if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);else delete selectionKeys[props.node.key];
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: false,
selectionKeys: selectionKeys
});
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);else selectionKeys[props.node.key] = {
checked: true
};
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: true,
selectionKeys: selectionKeys
});
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else {
var selected = isSelected();
var metaSelection = nodeTouched.current ? false : props.metaKeySelection;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
if (isSingleSelectionMode()) {
selectionKeys = null;
} else {
selectionKeys = _objectSpread$5({}, props.selectionKeys);
delete selectionKeys[props.node.key];
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (isSingleSelectionMode()) {
selectionKeys = props.node.key;
} else if (isMultipleSelectionMode()) {
selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$5({}, props.selectionKeys) : {};
selectionKeys[props.node.key] = true;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else {
if (isSingleSelectionMode()) {
if (selected) {
selectionKeys = null;
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
selectionKeys = props.node.key;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
} else {
if (selected) {
selectionKeys = _objectSpread$5({}, props.selectionKeys);
delete selectionKeys[props.node.key];
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
selectionKeys = props.selectionKeys ? _objectSpread$5({}, props.selectionKeys) : {};
selectionKeys[props.node.key] = true;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
}
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
}
nodeTouched.current = false;
};
var onDoubleClick = function onDoubleClick(event) {
if (props.onDoubleClick) {
props.onDoubleClick({
originalEvent: event,
node: props.node
});
}
};
var onRightClick = function onRightClick(event) {
if (props.disabled) {
return;
}
DomHandler.clearSelection();
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event,
value: props.node.key
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event,
node: props.node
});
}
};
var propagateUp = function propagateUp(event) {
var check = event.check;
var selectionKeys = event.selectionKeys;
var checkedChildCount = 0;
var childPartialSelected = false;
var _iterator = _createForOfIteratorHelper$6(props.node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;else if (selectionKeys[child.key] && selectionKeys[child.key].partialChecked) childPartialSelected = true;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (check && checkedChildCount === props.node.children.length) {
selectionKeys[props.node.key] = {
checked: true,
partialChecked: false
};
} else {
if (!check) {
delete selectionKeys[props.node.key];
}
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== props.node.children.length) selectionKeys[props.node.key] = {
checked: false,
partialChecked: true
};else delete selectionKeys[props.node.key];
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp(event);
}
};
var propagateDown = function propagateDown(node, check, selectionKeys) {
if (check) selectionKeys[node.key] = {
checked: true,
partialChecked: false
};else delete selectionKeys[node.key];
if (node.children && node.children.length) {
for (var i = 0; i < node.children.length; i++) {
propagateDown(node.children[i], check, selectionKeys);
}
}
};
var isSelected = function isSelected() {
if (props.selectionMode && props.selectionKeys) return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;else return false;
};
var isChecked = function isChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false;
};
var isPartialChecked = function isPartialChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
};
var isSingleSelectionMode = function isSingleSelectionMode() {
return props.selectionMode && props.selectionMode === 'single';
};
var isMultipleSelectionMode = function isMultipleSelectionMode() {
return props.selectionMode && props.selectionMode === 'multiple';
};
var isCheckboxSelectionMode = function isCheckboxSelectionMode() {
return props.selectionMode && props.selectionMode === 'checkbox';
};
var onTouchEnd = function onTouchEnd() {
nodeTouched.current = true;
};
var onDropPoint = function onDropPoint(event, position) {
event.preventDefault();
if (props.node.droppable !== false) {
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
if (props.onDropPoint) {
var dropIndex = position === -1 ? props.index : props.index + 1;
props.onDropPoint({
originalEvent: event,
path: props.path,
index: dropIndex,
position: position
});
}
}
};
var onDropPointDragOver = function onDropPointDragOver(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
}
};
var onDropPointDragEnter = function onDropPointDragEnter(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
}
};
var onDropPointDragLeave = function onDropPointDragLeave(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
}
};
var onDrop = function onDrop(event) {
if (props.dragdropScope && props.node.droppable !== false) {
DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
event.preventDefault();
event.stopPropagation();
if (props.onDrop) {
props.onDrop({
originalEvent: event,
path: props.path,
index: props.index
});
}
}
};
var onDragOver = function onDragOver(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
event.stopPropagation();
}
};
var onDragEnter = function onDragEnter(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
DomHandler.addClass(contentRef.current, 'p-treenode-dragover');
}
};
var onDragLeave = function onDragLeave(event) {
if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
var rect = event.currentTarget.getBoundingClientRect();
if (event.nativeEvent.x > rect.left + rect.width || event.nativeEvent.x < rect.left || event.nativeEvent.y >= Math.floor(rect.top + rect.height) || event.nativeEvent.y < rect.top) {
DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
}
}
};
var onDragStart = function onDragStart(event) {
event.dataTransfer.setData('text', props.dragdropScope);
event.dataTransfer.setData(props.dragdropScope, props.dragdropScope);
if (props.onDragStart) {
props.onDragStart({
originalEvent: event,
path: props.path,
index: props.index
});
}
};
var onDragEnd = function onDragEnd(event) {
if (props.onDragEnd) {
props.onDragEnd({
originalEvent: event
});
}
};
var createLabel = function createLabel() {
var content = /*#__PURE__*/React.createElement("span", {
className: "p-treenode-label"
}, props.node.label);
if (props.nodeTemplate) {
var defaultContentOptions = {
onTogglerClick: onTogglerClick,
className: 'p-treenode-label',
element: content,
props: props,
expanded: expanded
};
content = ObjectUtils.getJSXElement(props.nodeTemplate, props.node, defaultContentOptions);
}
return content;
};
var createCheckbox = function createCheckbox() {
if (isCheckboxSelectionMode() && props.node.selectable !== false) {
var checked = isChecked();
var partialChecked = isPartialChecked();
var className = classNames('p-checkbox-box', {
'p-highlight': checked,
'p-indeterminate': partialChecked,
'p-disabled': props.disabled
});
var icon = classNames('p-checkbox-icon p-c', {
'pi pi-check': checked,
'pi pi-minus': partialChecked
});
return /*#__PURE__*/React.createElement("div", {
className: "p-checkbox p-component"
}, /*#__PURE__*/React.createElement("div", {
className: className,
role: "checkbox",
"aria-checked": checked
}, /*#__PURE__*/React.createElement("span", {
className: icon
})));
}
return null;
};
var createIcon = function createIcon() {
var icon = props.node.icon || (expanded ? props.node.expandedIcon : props.node.collapsedIcon);
if (icon) {
var className = classNames('p-treenode-icon', icon);
return /*#__PURE__*/React.createElement("span", {
className: className
});
}
return null;
};
var createToggler = function createToggler() {
var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
var iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {
'pi-chevron-right': !expanded,
'pi-chevron-down': expanded
});
var content = /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-tree-toggler p-link",
tabIndex: -1,
onClick: onTogglerClick,
"aria-label": label
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
if (props.togglerTemplate) {
var defaultContentOptions = {
onClick: onTogglerClick,
containerClassName: 'p-tree-toggler p-link',
iconClassName: 'p-tree-toggler-icon',
element: content,
props: props,
expanded: expanded
};
content = ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
}
return content;
};
var createDropPoint = function createDropPoint(position) {
if (props.dragdropScope) {
return /*#__PURE__*/React.createElement("li", {
className: "p-treenode-droppoint",
onDrop: function onDrop(event) {
return onDropPoint(event, position);
},
onDragOver: onDropPointDragOver,
onDragEnter: onDropPointDragEnter,
onDragLeave: onDropPointDragLeave
});
}
return null;
};
var createContent = function createContent() {
var selected = isSelected();
var checked = isChecked();
var className = classNames('p-treenode-content', props.node.className, {
'p-treenode-selectable': props.selectionMode && props.node.selectable !== false,
'p-highlight': isCheckboxSelectionMode() ? checked : selected,
'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
'p-disabled': props.disabled
});
var toggler = createToggler();
var checkbox = createCheckbox();
var icon = createIcon();
var label = createLabel();
var tabIndex = props.disabled ? undefined : 0;
return /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: className,
style: props.node.style,
onClick: onClick,
onDoubleClick: onDoubleClick,
onContextMenu: onRightClick,
onTouchEnd: onTouchEnd,
draggable: props.dragdropScope && props.node.draggable !== false && !props.disabled,
onDrop: onDrop,
onDragOver: onDragOver,
onDragEnter: onDragEnter,
onDragLeave: onDragLeave,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
tabIndex: tabIndex,
onKeyDown: onNodeKeyDown,
role: "treeitem",
"aria-posinset": props.index + 1,
"aria-expanded": expanded,
"aria-selected": checked || selected
}, toggler, checkbox, icon, label);
};
var createChildren = function createChildren() {
if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
return /*#__PURE__*/React.createElement("ul", {
className: "p-treenode-children",
role: "group"
}, props.node.children.map(function (childNode, index) {
return /*#__PURE__*/React.createElement(UITreeNode, {
key: childNode.key || childNode.label,
node: childNode,
parent: props.node,
index: index,
last: index === props.node.children.length - 1,
path: props.path + '-' + index,
disabled: props.disabled,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
propagateSelectionDown: props.propagateSelectionDown,
propagateSelectionUp: props.propagateSelectionUp,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
onClick: props.onClick,
onDoubleClick: props.onDoubleClick,
expandedKeys: props.expandedKeys,
onToggle: props.onToggle,
onPropagateUp: propagateUp,
nodeTemplate: props.nodeTemplate,
togglerTemplate: props.togglerTemplate,
isNodeLeaf: props.isNodeLeaf,
dragdropScope: props.dragdropScope,
onDragStart: props.onDragStart,
onDragEnd: props.onDragEnd,
onDrop: props.onDrop,
onDropPoint: props.onDropPoint
});
}));
}
return null;
};
var createNode = function createNode() {
var className = classNames('p-treenode', {
'p-treenode-leaf': isLeaf
}, props.node.className);
var content = createContent();
var children = createChildren();
return /*#__PURE__*/React.createElement("li", {
className: className,
style: props.node.style
}, content, children);
};
var node = createNode();
if (props.dragdropScope && !props.disabled) {
var beforeDropPoint = createDropPoint(-1);
var afterDropPoint = props.last ? createDropPoint(1) : null;
return /*#__PURE__*/React.createElement(React.Fragment, null, beforeDropPoint, node, afterDropPoint);
}
return node;
});
UITreeNode.displayName = 'UITreeNode';
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 _createForOfIteratorHelper$5(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$5(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$5(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$5(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$5(o, minLen); }
function _arrayLikeToArray$5(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TreeBase.getProps(inProps);
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
filterValueState = _React$useState2[0],
setFilterValueState = _React$useState2[1];
var _React$useState3 = React.useState(props.expandedKeys),
_React$useState4 = _slicedToArray(_React$useState3, 2),
expandedKeysState = _React$useState4[0],
setExpandedKeysState = _React$useState4[1];
var elementRef = React.useRef(null);
var filteredNodes = React.useRef([]);
var dragState = React.useRef(null);
var filterChanged = React.useRef(false);
var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return resetFilter();
}
};
var getRootNode = function getRootNode() {
return props.filter && filteredNodes.current ? filteredNodes.current : props.value;
};
var onToggle = function onToggle(event) {
if (props.onToggle) {
props.onToggle(event);
} else {
setExpandedKeysState(event.value);
}
};
var onDragStart = function onDragStart(event) {
dragState.current = {
path: event.path,
index: event.index
};
};
var onDragEnd = function onDragEnd() {
dragState.current = null;
};
var onDrop = function onDrop(event) {
if (validateDropNode(dragState.current.path, event.path)) {
var value = JSON.parse(JSON.stringify(props.value));
var dragPaths = dragState.current.path.split('-');
dragPaths.pop();
var dragNodeParent = findNode(value, dragPaths);
var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
var dropNode = findNode(value, event.path.split('-'));
if (dropNode.children) dropNode.children.push(dragNode);else dropNode.children = [dragNode];
if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);else value.splice(dragState.current.index, 1);
if (props.onDragDrop) {
props.onDragDrop({
originalEvent: event.originalEvent,
value: value,
dragNode: dragNode,
dropNode: dropNode,
dropIndex: event.index
});
}
}
};
var onDropPoint = function onDropPoint(event) {
if (validateDropPoint(event)) {
var value = JSON.parse(JSON.stringify(props.value));
var dragPaths = dragState.current.path.split('-');
dragPaths.pop();
var dropPaths = event.path.split('-');
dropPaths.pop();
var dragNodeParent = findNode(value, dragPaths);
var dropNodeParent = findNode(value, dropPaths);
var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
var siblings = areSiblings(dragState.current.path, event.path);
if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);else value.splice(dragState.current.index, 1);
if (event.position < 0) {
var dropIndex = siblings ? dragState.current.index > event.index ? event.index : event.index - 1 : event.index;
if (dropNodeParent) dropNodeParent.children.splice(dropIndex, 0, dragNode);else value.splice(dropIndex, 0, dragNode);
} else {
if (dropNodeParent) dropNodeParent.children.push(dragNode);else value.push(dragNode);
}
if (props.onDragDrop) {
props.onDragDrop({
originalEvent: event.originalEvent,
value: value,
dragNode: dragNode,
dropNode: dropNodeParent,
dropIndex: event.index
});
}
}
};
var validateDrop = function validateDrop(dragPath, dropPath) {
if (!dragPath) {
return false;
} else {
//same node
if (dragPath === dropPath) {
return false;
}
//parent dropped on an descendant
if (dropPath.indexOf(dragPath) === 0) {
return false;
}
return true;
}
};
var validateDropNode = function validateDropNode(dragPath, dropPath) {
var _validateDrop = validateDrop(dragPath, dropPath);
if (_validateDrop) {
//child dropped on parent
if (dragPath.indexOf('-') > 0 && dragPath.substring(0, dragPath.lastIndexOf('-')) === dropPath) {
return false;
}
return true;
} else {
return false;
}
};
var validateDropPoint = function validateDropPoint(event) {
var _validateDrop = validateDrop(dragState.current.path, event.path);
if (_validateDrop) {
//child dropped to next sibling's drop point
if (event.position === -1 && areSiblings(dragState.current.path, event.path) && dragState.current.index + 1 === event.index) {
return false;
}
return true;
} else {
return false;
}
};
var areSiblings = function areSiblings(path1, path2) {
if (path1.length === 1 && path2.length === 1) return true;else return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
};
var findNode = function findNode(value, path) {
if (path.length === 0) {
return null;
} else {
var index = parseInt(path[0], 10);
var nextSearchRoot = value.children ? value.children[index] : value[index];
if (path.length === 1) {
return nextSearchRoot;
} else {
path.shift();
return findNode(nextSearchRoot, path);
}
}
};
var isNodeLeaf = function isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
var onFilterInputChange = function onFilterInputChange(event) {
filterChanged.current = true;
var value = event.target.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: event,
value: value
});
} else {
setFilterValueState(value);
}
};
var filter = function filter(value) {
setFilterValueState(ObjectUtils.isNotEmpty(value) ? value : '');
_filter();
};
var _filter = function _filter() {
if (!filterChanged.current) {
return;
}
if (ObjectUtils.isEmpty(filteredValue)) {
filteredNodes.current = props.value;
} else {
filteredNodes.current = [];
var searchFields = props.filterBy.split(',');
var filterText = filteredValue.toLocaleLowerCase(props.filterLocale);
var isStrictMode = props.filterMode === 'strict';
var _iterator = _createForOfIteratorHelper$5(props.value),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
var copyNode = _objectSpread$4({}, node);
var paramsWithoutNode = {
searchFields: searchFields,
filterText: filterText,
isStrictMode: isStrictMode
};
if (isStrictMode && (findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && (isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode))) {
filteredNodes.current.push(copyNode);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
filterChanged.current = false;
};
var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
if (node) {
var matched = false;
if (node.children) {
var childNodes = _toConsumableArray(node.children);
node.children = [];
var _iterator2 = _createForOfIteratorHelper$5(childNodes),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var childNode = _step2.value;
var copyChildNode = _objectSpread$4({}, childNode);
if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
matched = true;
node.children.push(copyChildNode);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
if (matched) {
node.expanded = true;
return true;
}
}
};
var isFilterMatched = function isFilterMatched(node, _ref) {
var searchFields = _ref.searchFields,
filterText = _ref.filterText,
isStrictMode = _ref.isStrictMode;
var matched = false;
var _iterator3 = _createForOfIteratorHelper$5(searchFields),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var field = _step3.value;
var fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(props.filterLocale);
if (fieldValue.indexOf(filterText) > -1) {
matched = true;
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
if (!matched || isStrictMode && !isNodeLeaf(node)) {
matched = findFilteredNodes(node, {
searchFields: searchFields,
filterText: filterText,
isStrictMode: isStrictMode
}) || matched;
}
return matched;
};
var resetFilter = function resetFilter() {
setFilterValueState('');
};
React.useImperativeHandle(ref, function () {
return {
props: props,
filter: filter,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createRootChild = function createRootChild(node, index, last) {
return /*#__PURE__*/React.createElement(UITreeNode, {
key: node.key || node.label,
node: node,
index: index,
last: last,
path: String(index),
disabled: props.disabled,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu,
propagateSelectionDown: props.propagateSelectionDown,
propagateSelectionUp: props.propagateSelectionUp,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
expandedKeys: expandedKeys,
onToggle: onToggle,
nodeTemplate: props.nodeTemplate,
togglerTemplate: props.togglerTemplate,
isNodeLeaf: isNodeLeaf,
dragdropScope: props.dragdropScope,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onDrop: onDrop,
onDropPoint: onDropPoint,
onClick: props.onNodeClick,
onDoubleClick: props.onNodeDoubleClick
});
};
var createRootChildren = function createRootChildren() {
if (props.filter) {
filterChanged.current = true;
_filter();
}
var value = getRootNode();
return value.map(function (node, index) {
return createRootChild(node, index, index === value.length - 1);
});
};
var createModel = function createModel() {
if (props.value) {
var rootNodes = createRootChildren();
var contentClass = classNames('p-tree-container', props.contentClassName);
return /*#__PURE__*/React.createElement("ul", _extends({
className: contentClass,
role: "tree",
style: props.contentStyle
}, ariaProps), rootNodes);
}
return null;
};
var createLoader = function createLoader() {
if (props.loading) {
var icon = classNames('p-tree-loading-icon pi-spin', props.loadingIcon);
return /*#__PURE__*/React.createElement("div", {
className: "p-tree-loading-overlay p-component-overlay"
}, /*#__PURE__*/React.createElement("i", {
className: icon
}));
}
return null;
};
var createFilter = function createFilter() {
if (props.filter) {
var value = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
var _content = /*#__PURE__*/React.createElement("div", {
className: "p-tree-filter-container"
}, /*#__PURE__*/React.createElement("input", {
type: "text",
value: value,
autoComplete: "off",
className: "p-tree-filter p-inputtext p-component",
placeholder: props.filterPlaceholder,
onKeyDown: onFilterInputKeyDown,
onChange: onFilterInputChange,
disabled: props.disabled
}), /*#__PURE__*/React.createElement("span", {
className: "p-tree-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-tree-filter-container',
element: _content,
filterOptions: filterOptions,
filterInputKeyDown: onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
props: props
};
_content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, _content);
}
return null;
};
var createHeader = function createHeader() {
if (props.showHeader) {
var filterElement = createFilter();
var _content2 = filterElement;
if (props.header) {
var defaultContentOptions = {
filterContainerClassName: 'p-tree-filter-container',
filterIconClasssName: 'p-tree-filter-icon pi pi-search',
filterInput: {
className: 'p-tree-filter p-inputtext p-component',
onKeyDown: onFilterInputKeyDown,
onChange: onFilterInputChange
},
filterElement: filterElement,
element: _content2,
props: props
};
_content2 = ObjectUtils.getJSXElement(props.header, defaultContentOptions);
}
return /*#__PURE__*/React.createElement("div", {
className: "p-tree-header"
}, _content2);
}
return null;
};
var createFooter = function createFooter() {
var content = ObjectUtils.getJSXElement(props.footer, props);
return /*#__PURE__*/React.createElement("div", {
className: "p-tree-footer"
}, content);
};
var otherProps = TreeBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-tree p-component', props.className, {
'p-tree-selectable': props.selectionMode,
'p-tree-loading': props.loading,
'p-disabled': props.disabled
});
var loader = createLoader();
var content = createModel();
var header = createHeader();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", _extends({
id: props.id,
ref: elementRef,
className: className,
style: props.style
}, otherProps), loader, header, content, footer);
}));
Tree.displayName = 'Tree';
var TreeSelectBase = {
defaultProps: {
__TYPE: 'TreeSelect',
appendTo: null,
ariaLabel: null,
ariaLabelledBy: null,
className: null,
disabled: false,
display: 'comma',
dropdownIcon: 'pi pi-chevron-down',
emptyMessage: null,
expandedKeys: null,
filter: false,
filterBy: 'label',
filterInputAutoFocus: true,
filterLocale: undefined,
filterMode: 'lenient',
filterPlaceholder: null,
filterTemplate: null,
filterValue: null,
inputId: null,
inputRef: null,
metaKeySelection: true,
name: null,
onChange: null,
onFilterValueChange: null,
onHide: null,
onNodeCollapse: null,
onNodeExpand: null,
onNodeSelect: null,
onNodeUnselect: null,
onShow: null,
options: null,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
panelStyle: null,
placeholder: null,
resetFilterOnHide: false,
scrollHeight: '400px',
selectionMode: 'single',
style: null,
tabIndex: null,
transitionOptions: null,
value: null,
valueTemplate: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TreeSelectBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TreeSelectBase.defaultProps);
}
};
var TreeSelectPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var createElement = function createElement() {
var wrapperStyle = {
maxHeight: props.scrollHeight || 'auto'
};
var className = classNames('p-treeselect-panel p-component', props.panelClassName, {
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
return /*#__PURE__*/React.createElement(CSSTransition, {
nodeRef: ref,
classNames: "p-connected-overlay",
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: props.onEnter,
onEntering: props.onEntering,
onEntered: props.onEntered,
onExit: props.onExit,
onExited: props.onExited
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: className,
style: props.panelStyle,
onClick: props.onClick
}, props.header, /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-items-wrapper",
style: wrapperStyle
}, props.children), props.footer));
};
var element = createElement();
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
});
TreeSelectPanel.displayName = 'TreeSelectPanel';
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 _createForOfIteratorHelper$4(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$4(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$4(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$4(o, minLen); }
function _arrayLikeToArray$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TreeSelectBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
overlayVisibleState = _React$useState4[0],
setOverlayVisibleState = _React$useState4[1];
var _React$useState5 = React.useState(props.expandedKeys),
_React$useState6 = _slicedToArray(_React$useState5, 2),
expandedKeysState = _React$useState6[0],
setExpandedKeysState = _React$useState6[1];
var _React$useState7 = React.useState(''),
_React$useState8 = _slicedToArray(_React$useState7, 2),
filterValueState = _React$useState8[0],
setFilterValueState = _React$useState8[1];
var elementRef = React.useRef(null);
var overlayRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var focusInputRef = React.useRef(props.inputRef);
var triggerRef = React.useRef(null);
var selfChange = React.useRef(null);
var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
var isValueEmpty = ObjectUtils.isEmpty(props.value);
var hasNoOptions = ObjectUtils.isEmpty(props.options);
var isSingleSelectionMode = props.selectionMode === 'single';
var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return resetFilter();
}
};
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var valid = _ref.valid;
valid && hide();
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var getLabel = function getLabel() {
return selectedNodes.length ? selectedNodes.map(function (node) {
return node.label;
}).join(', ') : props.placeholder;
};
var show = function show() {
setOverlayVisibleState(true);
};
var hide = function hide() {
setOverlayVisibleState(false);
};
var onInputFocus = function onInputFocus() {
setFocusedState(true);
};
var onInputBlur = function onInputBlur() {
setFocusedState(false);
};
var onClick = function onClick(event) {
if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
DomHandler.focus(focusInputRef.current);
overlayVisibleState ? hide() : show();
}
};
var onSelectionChange = function onSelectionChange(event) {
if (props.onChange) {
selfChange.current = true;
props.onChange({
originalEvent: event.originalEvent,
value: event.value,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: event.value
}
});
}
};
var onNodeSelect = function onNodeSelect(node) {
props.onNodeSelect && props.onNodeSelect(node);
isSingleSelectionMode && hide();
};
var onNodeUnselect = function onNodeUnselect(node) {
props.onNodeUnselect && props.onNodeUnselect(node);
};
var onNodeToggle = function onNodeToggle(e) {
if (props.onToggle) {
props.onToggle(e);
} else {
setExpandedKeysState(e.value);
}
};
var onFilterValueChange = function onFilterValueChange(e) {
setFilterValueState(e.value);
};
var onOverlayClick = function onOverlayClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onInputKeyDown = function onInputKeyDown(event) {
switch (event.which) {
//down
case 40:
if (!overlayVisibleState && event.altKey) {
show();
}
break;
//space
case 32:
if (!overlayVisibleState) {
show();
event.preventDefault();
}
break;
//enter and escape
case 13:
case 27:
if (overlayVisibleState) {
hide();
event.preventDefault();
}
break;
//tab
case 9:
hide();
break;
}
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
//enter
if (event.which === 13) {
event.preventDefault();
}
};
var onFilterInputChange = function onFilterInputChange(event) {
var value = event.target.value;
if (props.onFilterValueChange) {
props.onFilterValueChange({
originalEvent: event,
value: value
});
} else {
setFilterValueState(value);
}
};
var resetFilter = function resetFilter() {
setFilterValueState('');
};
var onOverlayEnter = function onOverlayEnter() {
ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
alignOverlay();
scrollInView();
};
var onOverlayEntered = function onOverlayEntered() {
bindOverlayListener();
if (props.filter && props.filterInputAutoFocus) {
DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
}
props.onShow && props.onShow();
};
var onOverlayExit = function onOverlayExit() {
unbindOverlayListener();
};
var onOverlayExited = function onOverlayExited() {
if (props.filter && props.resetFilterOnHide) {
resetFilter();
}
ZIndexUtils.clear(overlayRef.current);
props.onHide && props.onHide();
};
var alignOverlay = function alignOverlay() {
DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
};
var scrollInView = function scrollInView() {
var highlightItem = DomHandler.findSingle(overlayRef.current, '.p-treenode-content.p-highlight');
if (highlightItem && highlightItem.scrollIntoView) {
highlightItem.scrollIntoView({
block: 'nearest',
inline: 'start'
});
}
};
var findSelectedNodes = function findSelectedNodes(node, keys, selectedNodes) {
if (node) {
if (isSelected(node, keys)) {
selectedNodes.push(node);
delete keys[node.key];
}
if (Object.keys(keys).length && node.children) {
var _iterator = _createForOfIteratorHelper$4(node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var childNode = _step.value;
findSelectedNodes(childNode, keys, selectedNodes);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
} else {
var _iterator2 = _createForOfIteratorHelper$4(props.options),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _childNode = _step2.value;
findSelectedNodes(_childNode, keys, selectedNodes);
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
};
var isSelected = function isSelected(node, keys) {
return isCheckboxSelectionMode ? keys[node.key] && keys[node.key].checked : keys[node.key];
};
var updateTreeState = function updateTreeState() {
var keys = isSingleSelectionMode ? _defineProperty({}, "".concat(props.value), true) : _objectSpread$3({}, props.value);
setExpandedKeysState({});
if (keys && props.options) {
updateTreeBranchState(null, null, keys);
}
};
var updateTreeBranchState = function updateTreeBranchState(node, path, keys) {
if (node) {
if (isSelected(node, keys)) {
expandPath(path);
delete keys[node.key];
}
if (Object.keys(keys).length && node.children) {
var _iterator3 = _createForOfIteratorHelper$4(node.children),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var childNode = _step3.value;
path.push(node.key);
updateTreeBranchState(childNode, path, keys);
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
}
} else {
var _iterator4 = _createForOfIteratorHelper$4(props.options),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var _childNode2 = _step4.value;
updateTreeBranchState(_childNode2, [], keys);
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
}
};
var expandPath = function expandPath(path) {
if (path.length > 0) {
var _expandedKeys = _objectSpread$3({}, expandedKeysState || {});
var _iterator5 = _createForOfIteratorHelper$4(path),
_step5;
try {
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
var key = _step5.value;
_expandedKeys[key] = true;
}
} catch (err) {
_iterator5.e(err);
} finally {
_iterator5.f();
}
setExpandedKeysState(_expandedKeys);
}
};
var getSelectedNodes = function getSelectedNodes() {
var selectedNodes = [];
if (ObjectUtils.isNotEmpty(props.value) && props.options) {
var keys = isSingleSelectionMode ? _defineProperty({}, "".concat(props.value), true) : _objectSpread$3({}, props.value);
findSelectedNodes(null, keys, selectedNodes);
}
return selectedNodes;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(focusInputRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(focusInputRef, props.inputRef);
}, [focusInputRef, props.inputRef]);
useMountEffect(function () {
updateTreeState();
});
useUpdateEffect(function () {
if (overlayVisibleState && props.filter) {
alignOverlay();
}
});
useUpdateEffect(function () {
updateTreeState();
}, [props.options]);
useUpdateEffect(function () {
if (overlayVisibleState && expandedKeysState) {
alignOverlay();
}
}, [expandedKeysState]);
useUpdateEffect(function () {
if (overlayVisibleState) {
if (!selfChange.current) {
updateTreeState();
}
selfChange.current = false;
}
}, [props.value]);
useUnmountEffect(function () {
ZIndexUtils.clear(overlayRef.current);
});
var createKeyboardHelper = function createKeyboardHelper() {
return /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", _extends({
ref: focusInputRef,
role: "listbox",
id: props.inputId,
type: "text",
readOnly: true,
"aria-expanded": overlayVisibleState,
onFocus: onInputFocus,
onBlur: onInputBlur,
onKeyDown: onInputKeyDown,
disabled: props.disabled,
tabIndex: props.tabIndex
}, ariaProps)));
};
var createLabel = function createLabel() {
var labelClassName = classNames('p-treeselect-label', {
'p-placeholder': getLabel() === props.placeholder,
'p-treeselect-label-empty': !props.placeholder && isValueEmpty
});
var content = null;
if (props.valueTemplate) {
content = ObjectUtils.getJSXElement(props.valueTemplate, selectedNodes, props);
} else {
if (props.display === 'comma') {
content = getLabel() || 'empty';
} else if (props.display === 'chip') {
content = /*#__PURE__*/React.createElement(React.Fragment, null, selectedNodes && selectedNodes.map(function (node, index) {
return /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-token",
key: "".concat(node.key, "_").concat(index)
}, /*#__PURE__*/React.createElement("span", {
className: "p-treeselect-token-label"
}, node.label));
}), isValueEmpty && (props.placeholder || 'empty'));
}
}
return /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-label-container"
}, /*#__PURE__*/React.createElement("div", {
className: labelClassName
}, content));
};
var createDropdownIcon = function createDropdownIcon() {
var iconClassName = classNames('p-treeselect-trigger-icon p-clickable', props.dropdownIcon);
return /*#__PURE__*/React.createElement("div", {
ref: triggerRef,
className: "p-treeselect-trigger",
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": overlayVisibleState
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}));
};
var createContent = function createContent() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tree, {
value: props.options,
selectionMode: props.selectionMode,
selectionKeys: props.value,
metaKeySelection: props.metaKeySelection,
onSelectionChange: onSelectionChange,
onSelect: onNodeSelect,
onUnselect: onNodeUnselect,
expandedKeys: expandedKeys,
onToggle: onNodeToggle,
onExpand: props.onNodeExpand,
onCollapse: props.onNodeCollapse,
filter: props.filter,
filterValue: filteredValue,
filterBy: props.filterBy,
filterMode: props.filterMode,
filterPlaceholder: props.filterPlaceholder,
filterLocale: props.filterLocale,
showHeader: false,
onFilterValueChange: onFilterValueChange
}), hasNoOptions && /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-empty-message"
}, props.emptyMessage || localeOption('emptyMessage')));
};
var createFilterElement = function createFilterElement() {
if (props.filter) {
var filterValue = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
var filterContent = /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-filter-container"
}, /*#__PURE__*/React.createElement("input", {
ref: filterInputRef,
type: "text",
value: filterValue,
autoComplete: "off",
className: "p-treeselect-filter p-inputtext p-component",
placeholder: props.filterPlaceholder,
onKeyDown: onFilterInputKeyDown,
onChange: onFilterInputChange,
disabled: props.disabled
}), /*#__PURE__*/React.createElement("span", {
className: "p-treeselect-filter-icon pi pi-search"
}));
if (props.filterTemplate) {
var defaultContentOptions = {
className: 'p-treeselect-filter-container',
element: filterContent,
filterOptions: filterOptions,
filterInputKeyDown: onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
props: props
};
filterContent = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, filterContent);
}
};
var createHeader = function createHeader() {
var filterElement = createFilterElement();
var closeElement = /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-treeselect-close p-link",
onClick: hide,
"aria-label": localeOption('close')
}, /*#__PURE__*/React.createElement("span", {
className: "p-treeselect-close-icon pi pi-times",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
var content = /*#__PURE__*/React.createElement("div", {
className: "p-treeselect-header"
}, filterElement, closeElement);
if (props.panelHeaderTemplate) {
var defaultOptions = {
className: 'p-treeselect-header',
filterElement: filterElement,
closeElement: closeElement,
closeElementClassName: 'p-treeselect-close p-link',
closeIconClassName: 'p-treeselect-close-icon pi pi-times',
onCloseClick: hide,
element: content,
props: props
};
return ObjectUtils.getJSXElement(props.panelHeaderTemplate, defaultOptions);
}
return content;
};
var createFooter = function createFooter() {
return ObjectUtils.getJSXElement(props.panelFooterTemplate, props);
};
var selectedNodes = getSelectedNodes();
var otherProps = TreeSelectBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-treeselect p-component p-inputwrapper', {
'p-treeselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': !isValueEmpty,
'p-inputwrapper-focus': focusedState || overlayVisibleState
}, props.className);
var keyboardHelper = createKeyboardHelper();
var labelElement = createLabel();
var dropdownIcon = createDropdownIcon();
var content = createContent();
var header = createHeader();
var footer = createFooter();
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), keyboardHelper, labelElement, dropdownIcon, /*#__PURE__*/React.createElement(TreeSelectPanel, {
ref: overlayRef,
appendTo: props.appendTo,
panelStyle: props.panelStyle,
panelClassName: props.panelClassName,
scrollHeight: props.scrollHeight,
onClick: onOverlayClick,
header: header,
footer: footer,
transitionOptions: props.transitionOptions,
"in": overlayVisibleState,
onEnter: onOverlayEnter,
onEntered: onOverlayEntered,
onExit: onOverlayExit,
onExited: onOverlayExited
}, content));
}));
TreeSelect.displayName = 'TreeSelect';
var TreeTableBase = {
defaultProps: {
__TYPE: 'TreeTable',
alwaysShowPaginator: true,
className: null,
columnResizeMode: 'fit',
contextMenuSelectionKey: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
defaultSortOrder: 1,
emptyMessage: null,
expandedKeys: null,
filterDelay: 300,
filterLocale: undefined,
filterMode: 'lenient',
filters: null,
first: null,
footer: null,
footerColumnGroup: null,
frozenFooterColumnGroup: null,
frozenHeaderColumnGroup: null,
frozenWidth: null,
globalFilter: null,
globalFilterMatchMode: FilterMatchMode.CONTAINS,
header: null,
headerColumnGroup: null,
id: null,
lazy: false,
loading: false,
loadingIcon: 'pi pi-spinner',
metaKeySelection: true,
multiSortMeta: null,
onColReorder: null,
onCollapse: null,
onColumnResizeEnd: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onExpand: null,
onFilter: null,
onPage: null,
onRowClick: null,
onSelect: null,
onSelectionChange: null,
onSort: null,
onToggle: null,
onUnselect: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
propagateSelectionDown: true,
propagateSelectionUp: true,
removableSort: false,
reorderableColumns: false,
resizableColumns: false,
rowClassName: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectOnEdit: true,
selectionKeys: null,
selectionMode: null,
showGridlines: false,
sortField: null,
sortMode: 'single',
sortOrder: null,
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps);
}
};
var TreeTableBodyCell = function TreeTableBodyCell(props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var elementRef = React.useRef(null);
var keyHelperRef = React.useRef(null);
var selfClick = React.useRef(false);
var overlayEventListener = React.useRef(null);
var tabIndexTimeout = React.useRef(null);
var _useEventListener = useEventListener({
type: 'click',
listener: function listener(e) {
if (!selfClick.current && isOutsideClicked(e.target)) {
switchCellToViewMode(e);
}
selfClick.current = false;
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var onClick = function onClick() {
if (props.editor && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
selfClick.current = true;
setEditingState(true);
bindDocumentClickListener();
overlayEventListener.current = function (e) {
if (!isOutsideClicked(e.target)) {
selfClick.current = true;
}
};
OverlayService.on('overlay-click', overlayEventListener.current);
}
};
var onKeyDown = function onKeyDown(event) {
if (event.which === 13 || event.which === 9) {
switchCellToViewMode(event);
}
};
var isOutsideClicked = function isOutsideClicked(target) {
return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
};
var closeCell = function closeCell() {
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
setTimeout(function () {
setEditingState(false);
unbindDocumentClickListener();
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}, 1);
};
var onEditorFocus = function onEditorFocus(event) {
onClick();
};
var switchCellToViewMode = function switchCellToViewMode(event) {
if (props.cellEditValidator) {
var valid = props.cellEditValidator({
originalEvent: event,
columnProps: props
});
if (valid) {
closeCell();
}
} else {
closeCell();
}
};
React.useEffect(function () {
if (elementRef.current && props.editor) {
clearTimeout(tabIndexTimeout.current);
if (editingState) {
var focusable = DomHandler.findSingle(elementRef.current, 'input');
if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
focusable.setAttribute('data-isCellEditing', true);
focusable.focus();
}
keyHelperRef.current.tabIndex = -1;
} else {
tabIndexTimeout.current = setTimeout(function () {
if (keyHelperRef.current) {
keyHelperRef.current.setAttribute('tabindex', 0);
}
}, 50);
}
}
});
useUnmountEffect(function () {
if (overlayEventListener.current) {
OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
}
});
var bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, {
field: props.field,
rowIndex: props.rowIndex,
props: props
});
var className = classNames(bodyClassName || props.className, {
'p-editable-column': props.editor,
'p-cell-editing': props.editor ? editingState : false
});
var style = props.bodyStyle || props.style;
var content;
if (editingState) {
if (props.editor) content = ObjectUtils.getJSXElement(props.editor, {
node: props.node,
rowData: props.node.data,
value: ObjectUtils.resolveFieldData(props.node.data, props.field),
field: props.field,
rowIndex: props.rowIndex,
props: props
});else throw new Error('Editor is not found on column.');
} else {
if (props.body) content = ObjectUtils.getJSXElement(props.body, props.node, {
field: props.field,
rowIndex: props.rowIndex,
props: props
});else content = ObjectUtils.resolveFieldData(props.node.data, props.field);
}
/* eslint-disable */
var editorKeyHelper = props.editor && /*#__PURE__*/React.createElement("a", {
tabIndex: 0,
ref: keyHelperRef,
className: "p-cell-editor-key-helper p-hidden-accessible",
onFocus: onEditorFocus
}, /*#__PURE__*/React.createElement("span", null));
/* eslint-enable */
return /*#__PURE__*/React.createElement("td", {
ref: elementRef,
className: className,
style: style,
onClick: onClick,
onKeyDown: onKeyDown
}, props.children, editorKeyHelper, content);
};
TreeTableBodyCell.displayName = 'TreeTableBodyCell';
function _createForOfIteratorHelper$3(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); }
function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
var elementRef = React.useRef(null);
var checkboxRef = React.useRef(null);
var checkboxBoxRef = React.useRef(null);
var nodeTouched = React.useRef(false);
var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var onTogglerClick = function onTogglerClick(event) {
expanded ? collapse(event) : expand(event);
event.preventDefault();
event.stopPropagation();
};
var expand = function expand(event) {
var expandedKeys = props.expandedKeys ? _objectSpread$2({}, props.expandedKeys) : {};
expandedKeys[props.node.key] = true;
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, true);
};
var collapse = function collapse(event) {
var expandedKeys = _objectSpread$2({}, props.expandedKeys);
delete expandedKeys[props.node.key];
props.onToggle({
originalEvent: event,
value: expandedKeys
});
invokeToggleEvents(event, false);
};
var invokeToggleEvents = function invokeToggleEvents(event, expanded) {
if (expanded) {
if (props.onExpand) {
props.onExpand({
originalEvent: event,
node: props.node
});
}
} else {
if (props.onCollapse) {
props.onCollapse({
originalEvent: event,
node: props.node
});
}
}
};
var onClick = function onClick(event) {
if (props.onRowClick) {
props.onRowClick(event, props.node);
}
nodeTouched.current = false;
};
var onTouchEnd = function onTouchEnd() {
nodeTouched.current = true;
};
var onCheckboxChange = function onCheckboxChange(event) {
var checked = isChecked();
var selectionKeys = props.selectionKeys ? _objectSpread$2({}, props.selectionKeys) : {};
if (checked) {
if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);else delete selectionKeys[props.node.key];
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: false,
selectionKeys: selectionKeys
});
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: props.node
});
}
} else {
if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);else selectionKeys[props.node.key] = {
checked: true
};
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp({
originalEvent: event,
check: true,
selectionKeys: selectionKeys
});
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: props.node
});
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
DomHandler.clearSelection();
};
var onCheckboxFocus = function onCheckboxFocus() {
DomHandler.addClass(checkboxBoxRef.current, 'p-focus');
DomHandler.addClass(checkboxRef.current, 'p-checkbox-focused');
};
var onCheckboxBlur = function onCheckboxBlur() {
DomHandler.removeClass(checkboxBoxRef.current, 'p-focus');
DomHandler.removeClass(checkboxRef.current, 'p-checkbox-focused');
};
var propagateUp = function propagateUp(event) {
var check = event.check;
var selectionKeys = event.selectionKeys;
var checkedChildCount = 0;
var childPartialSelected = false;
var _iterator = _createForOfIteratorHelper$3(props.node.children),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;else if (selectionKeys[child.key] && selectionKeys[child.key].partialChecked) childPartialSelected = true;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (check && checkedChildCount === props.node.children.length) {
selectionKeys[props.node.key] = {
checked: true,
partialChecked: false
};
} else {
if (!check) {
delete selectionKeys[props.node.key];
}
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== props.node.children.length) selectionKeys[props.node.key] = {
checked: false,
partialChecked: true
};else selectionKeys[props.node.key] = {
checked: false,
partialChecked: false
};
}
if (props.propagateSelectionUp && props.onPropagateUp) {
props.onPropagateUp(event);
}
};
var propagateDown = function propagateDown(node, check, selectionKeys) {
if (check) selectionKeys[node.key] = {
checked: true,
partialChecked: false
};else delete selectionKeys[node.key];
if (node.children && node.children.length) {
for (var i = 0; i < node.children.length; i++) {
propagateDown(node.children[i], check, selectionKeys);
}
}
};
var onRightClick = function onRightClick(event) {
DomHandler.clearSelection();
if (props.onContextMenuSelectionChange) {
props.onContextMenuSelectionChange({
originalEvent: event,
value: props.node.key
});
}
if (props.onContextMenu) {
props.onContextMenu({
originalEvent: event,
node: props.node
});
}
};
var onKeyDown = function onKeyDown(event) {
if (event.target === elementRef.current) {
var rowElement = event.currentTarget;
switch (event.which) {
//down arrow
case 40:
var nextRow = rowElement.nextElementSibling;
if (nextRow) {
nextRow.focus();
}
event.preventDefault();
break;
//up arrow
case 38:
var previousRow = rowElement.previousElementSibling;
if (previousRow) {
previousRow.focus();
}
event.preventDefault();
break;
//right arrow
case 39:
if (!expanded) {
expand(event);
}
event.preventDefault();
break;
//left arrow
case 37:
if (expanded) {
collapse(event);
}
event.preventDefault();
break;
//enter
case 13:
onClick(event);
event.preventDefault();
break;
}
}
};
var isSelected = function isSelected() {
if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;else return false;
};
var isChecked = function isChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false;
};
var isPartialChecked = function isPartialChecked() {
return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
};
var createToggler = function createToggler() {
var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
var iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', {
'pi-chevron-right': !expanded,
'pi-chevron-down': expanded
});
var style = {
marginLeft: props.level * 16 + 'px',
visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden'
};
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: "p-treetable-toggler p-link p-unselectable-text",
onClick: onTogglerClick,
tabIndex: -1,
style: style,
"aria-label": label
}, /*#__PURE__*/React.createElement("i", {
className: iconClassName,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Ripple, null));
};
var createCheckbox = function createCheckbox() {
if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
var checked = isChecked();
var partialChecked = isPartialChecked();
var _className = classNames('p-checkbox-box', {
'p-highlight': checked,
'p-indeterminate': partialChecked
});
var icon = classNames('p-checkbox-icon p-c', {
'pi pi-check': checked,
'pi pi-minus': partialChecked
});
return /*#__PURE__*/React.createElement("div", {
className: "p-checkbox p-treetable-checkbox p-component",
ref: checkboxRef,
onClick: onCheckboxChange,
role: "checkbox",
"aria-checked": checked
}, /*#__PURE__*/React.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.createElement("input", {
type: "checkbox",
onFocus: onCheckboxFocus,
onBlur: onCheckboxBlur
})), /*#__PURE__*/React.createElement("div", {
className: _className,
ref: checkboxBoxRef
}, /*#__PURE__*/React.createElement("span", {
className: icon
})));
} else {
return null;
}
};
var createCell = function createCell(column, index) {
var toggler, checkbox;
if (getColumnProp(column, 'expander')) {
toggler = createToggler();
checkbox = createCheckbox();
}
return /*#__PURE__*/React.createElement(TreeTableBodyCell, _extends({
key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
}, ColumnBase.getCProps(column), {
column: column,
selectOnEdit: props.selectOnEdit,
selected: isSelected(),
node: props.node,
rowIndex: props.rowIndex
}), toggler, checkbox);
};
var createChildren = function createChildren() {
if (expanded && props.node.children) {
return props.node.children.map(function (childNode, index) {
return /*#__PURE__*/React.createElement(TreeTableRow, {
key: "".concat(childNode.key || JSON.stringify(childNode.data), "_").concat(index),
level: props.level + 1,
rowIndex: props.rowIndex + '_' + index,
node: childNode,
columns: props.columns,
expandedKeys: props.expandedKeys,
selectOnEdit: props.selectOnEdit,
onToggle: props.onToggle,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
onRowClick: props.onRowClick,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
propagateSelectionUp: props.propagateSelectionUp,
propagateSelectionDown: props.propagateSelectionDown,
onPropagateUp: propagateUp,
rowClassName: props.rowClassName,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu
});
});
} else {
return null;
}
};
var cells = props.columns.map(createCell);
var children = createChildren();
var className = {
'p-highlight': isSelected(),
'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key
};
if (props.rowClassName) {
var rowClassName = props.rowClassName(props.node);
className = _objectSpread$2(_objectSpread$2({}, className), rowClassName);
}
className = classNames(className, props.node.className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
ref: elementRef,
tabIndex: 0,
className: className,
style: props.node.style,
onClick: onClick,
onTouchEnd: onTouchEnd,
onContextMenu: onRightClick,
onKeyDown: onKeyDown
}, cells), children);
});
TreeTableRow.displayName = 'TreeTableRow';
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
var isSingleSelectionMode = props.selectionMode === 'single';
var isMultipleSelectionMode = props.selectionMode === 'multiple';
var flattenizeTree = function flattenizeTree(nodes) {
var rows = [];
nodes = nodes || props.value;
var _iterator = _createForOfIteratorHelper$2(nodes),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
rows.push(node.key);
if (isExpandedKey(node.key)) {
rows = rows.concat(flattenizeTree(node.children));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return rows;
};
var isExpandedKey = function isExpandedKey(key) {
return props.expandedKeys && !!props.expandedKeys[key];
};
var onRowClick = function onRowClick(event, node) {
if (props.onRowClick) {
props.onRowClick({
originalEvent: event,
node: node
});
}
var targetNode = event.target.nodeName;
if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')) {
return;
}
if ((isSingleSelectionMode || isMultipleSelectionMode) && node.selectable !== false) {
var selectionKeys;
var selected = isSelected(node);
var metaSelection = props.metaKeySelection;
var flatKeys = flattenizeTree();
var rowIndex = flatKeys.findIndex(function (key) {
return key === node.key;
});
if (isMultipleSelectionMode && event.shiftKey) {
DomHandler.clearSelection();
// find first selected row
var anchorRowIndex = flatKeys.findIndex(function (key) {
return props.selectionKeys[key];
});
var rangeStart = Math.min(rowIndex, anchorRowIndex);
var rangeEnd = Math.max(rowIndex, anchorRowIndex);
selectionKeys = _objectSpread$1({}, props.selectionKeys);
for (var i = rangeStart; i <= rangeEnd; i++) {
var rowKey = flatKeys[i];
selectionKeys[rowKey] = true;
}
} else {
//anchorRowIndex = rowIndex;
if (metaSelection) {
var metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
if (isSingleSelectionMode) {
selectionKeys = null;
} else {
selectionKeys = _objectSpread$1({}, props.selectionKeys);
delete selectionKeys[node.key];
}
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
if (isSingleSelectionMode) {
selectionKeys = node.key;
} else if (isMultipleSelectionMode) {
selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
selectionKeys[node.key] = true;
}
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
} else {
if (isSingleSelectionMode) {
if (selected) {
selectionKeys = null;
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
selectionKeys = node.key;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
} else {
if (selected) {
selectionKeys = _objectSpread$1({}, props.selectionKeys);
delete selectionKeys[node.key];
if (props.onUnselect) {
props.onUnselect({
originalEvent: event,
node: node
});
}
} else {
selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
selectionKeys[node.key] = true;
if (props.onSelect) {
props.onSelect({
originalEvent: event,
node: node
});
}
}
}
}
}
if (props.onSelectionChange) {
props.onSelectionChange({
originalEvent: event,
value: selectionKeys
});
}
}
};
var isSelected = function isSelected(node) {
if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;else return false;
};
var createRow = function createRow(node, index) {
return /*#__PURE__*/React.createElement(TreeTableRow, {
key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
level: 0,
rowIndex: index,
selectOnEdit: props.selectOnEdit,
node: node,
columns: props.columns,
expandedKeys: props.expandedKeys,
onToggle: props.onToggle,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
onRowClick: onRowClick,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
propagateSelectionUp: props.propagateSelectionUp,
propagateSelectionDown: props.propagateSelectionDown,
rowClassName: props.rowClassName,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu
});
};
var createRows = function createRows() {
if (props.paginator && !props.lazy) {
var rpp = props.rows || 0;
var startIndex = props.first || 0;
var endIndex = startIndex + rpp;
var rows = [];
for (var i = startIndex; i < endIndex; i++) {
var rowData = props.value[i];
if (rowData) rows.push(createRow(props.value[i]));else break;
}
return rows;
} else {
return props.value.map(createRow);
}
};
var createEmptyMessage = function createEmptyMessage() {
if (props.loading) {
return null;
} else {
var colSpan = props.columns ? props.columns.length : null;
var _content = props.emptyMessage || localeOption('emptyMessage');
return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
className: "p-treetable-emptymessage",
colSpan: colSpan
}, _content));
}
};
var content = props.value && props.value.length ? createRows() : createEmptyMessage();
return /*#__PURE__*/React.createElement("tbody", {
className: "p-treetable-tbody"
}, content);
});
TreeTableBody.displayName = 'TreeTableBody';
var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var createFooterCell = function createFooterCell(column, index) {
return /*#__PURE__*/React.createElement("td", {
key: column.field || index,
className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan')
}, getColumnProp(column, 'footer'));
};
var createFooterRow = function createFooterRow(row, index) {
var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
var rowFooterCells = rowColumns.map(createFooterCell);
return /*#__PURE__*/React.createElement("tr", {
key: index
}, rowFooterCells);
};
var createColumnGroup = function createColumnGroup() {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
return rows.map(createFooterRow);
};
var createColumns = function createColumns(columns) {
if (columns) {
var headerCells = columns.map(createFooterCell);
return /*#__PURE__*/React.createElement("tr", null, headerCells);
} else {
return null;
}
};
var hasFooter = function hasFooter() {
if (props.columnGroup) {
return true;
} else {
for (var i = 0; i < props.columns.length; i++) {
if (getColumnProp(props.columns[i], 'footer')) {
return true;
}
}
}
return false;
};
var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
if (hasFooter()) {
return /*#__PURE__*/React.createElement("tfoot", {
className: "p-treetable-tfoot"
}, content);
} else {
return null;
}
});
TreeTableFooter.displayName = 'TreeTableFooter';
function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
var filterTimeout = React.useRef(null);
var onHeaderClick = function onHeaderClick(event, column) {
if (getColumnProp(column, 'sortable')) {
var targetNode = event.target;
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
props.onSort({
originalEvent: event,
sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'),
sortFunction: getColumnProp(column, 'sortFunction'),
sortable: getColumnProp(column, 'sortable')
});
DomHandler.clearSelection();
}
}
};
var onHeaderMouseDown = function onHeaderMouseDown(event, column) {
if (props.reorderableColumns && getColumnProp(column, 'reorderable')) {
if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false;
}
};
var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
if (event.key === 'Enter') {
onHeaderClick(event, column);
event.preventDefault();
}
};
var getMultiSortMetaDataIndex = function getMultiSortMetaDataIndex(column) {
if (props.multiSortMeta) {
for (var i = 0; i < props.multiSortMeta.length; i++) {
if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) {
return i;
}
}
}
return -1;
};
var onResizerMouseDown = function onResizerMouseDown(event, column) {
if (props.resizableColumns && props.onResizeStart) {
props.onResizeStart({
originalEvent: event,
columnEl: event.target.parentElement,
column: column
});
}
};
var _onDragStart = function onDragStart(event, column) {
if (props.onDragStart) {
props.onDragStart({
originalEvent: event,
column: column
});
}
};
var _onDragOver = function onDragOver(event, column) {
if (props.onDragOver) {
props.onDragOver({
originalEvent: event,
column: column
});
}
};
var _onDragLeave = function onDragLeave(event, column) {
if (props.onDragLeave) {
props.onDragLeave({
originalEvent: event,
column: column
});
}
};
var _onDrop = function onDrop(event, column) {
if (props.onDrop) {
props.onDrop({
originalEvent: event,
column: column
});
}
};
var onFilterInput = function onFilterInput(e, column) {
if (getColumnProp(column, 'filter') && props.onFilter) {
if (filterTimeout.current) {
clearTimeout(filterTimeout.current);
}
var filterValue = e.target.value;
filterTimeout.current = setTimeout(function () {
props.onFilter({
value: filterValue,
field: getColumnProp(column, 'field'),
matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith'
});
filterTimeout.current = null;
}, props.filterDelay);
}
};
var hasColumnFilter = function hasColumnFilter(columns) {
if (columns) {
var _iterator = _createForOfIteratorHelper$1(columns),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var col = _step.value;
if (getColumnProp(col, 'filter')) {
return true;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
return false;
};
var getAriaSort = function getAriaSort(column, sorted, sortOrder) {
if (getColumnProp(column, 'sortable')) {
var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up' : 'pi-sort';
if (sortIcon === 'pi-sort-down') return 'descending';else if (sortIcon === 'pi-sort-up') return 'ascending';else return 'none';
} else {
return null;
}
};
var getColumnProp = function getColumnProp(column) {
return column ? typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'string' ? ColumnBase.getCProp(column, arguments.length <= 1 ? undefined : arguments[1]) : ColumnBase.getCProp((arguments.length <= 1 ? undefined : arguments[1]) || column, arguments.length <= 2 ? undefined : arguments[2]) : null;
};
var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
if (getColumnProp(column, 'sortable')) {
var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
var sortIconClassName = classNames('p-sortable-column-icon', 'pi pi-fw', sortIcon);
return /*#__PURE__*/React.createElement("span", {
className: sortIconClassName
});
} else {
return null;
}
};
var createResizer = function createResizer(column) {
if (props.resizableColumns) {
return /*#__PURE__*/React.createElement("span", {
className: "p-column-resizer p-clickable",
onMouseDown: function onMouseDown(e) {
return onResizerMouseDown(e, column);
}
});
} else {
return null;
}
};
var createSortBadge = function createSortBadge(sortMetaDataIndex) {
if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
return /*#__PURE__*/React.createElement("span", {
className: "p-sortable-column-badge"
}, sortMetaDataIndex + 1);
}
return null;
};
var createHeaderCell = function createHeaderCell(column, options) {
var filterElement;
if (getColumnProp(column, 'filter') && options.renderFilter) {
filterElement = getColumnProp(column, 'filterElement') || /*#__PURE__*/React.createElement(InputText, {
onInput: function onInput(e) {
return onFilterInput(e, column);
},
type: props.filterType,
defaultValue: props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null,
className: "p-column-filter",
placeholder: getColumnProp(column, 'filterPlaceholder'),
maxLength: getColumnProp(column, 'filterMaxLength')
});
}
if (options.filterOnly) {
return /*#__PURE__*/React.createElement("th", {
key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
className: classNames('p-filter-column', getColumnProp(column, 'filterHeaderClassName')),
style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'),
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan')
}, filterElement);
} else {
var headerCellRef = /*#__PURE__*/React.createRef(null);
var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
var multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
var singleSorted = getColumnProp(column, 'field') === props.sortField;
var multipleSorted = multiSortMetaData !== null;
var sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
var sortOrder = 0;
if (singleSorted) sortOrder = props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
var sortIconElement = createSortIcon(column, sorted, sortOrder);
var ariaSortData = getAriaSort(column, sorted, sortOrder);
var sortBadge = createSortBadge(sortMetaDataIndex);
var className = classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), {
'p-sortable-column': getColumnProp(column, 'sortable'),
'p-highlight': sorted,
'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
});
var headerTooltip = getColumnProp(column, 'headerTooltip');
var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
var resizer = createResizer(column);
return /*#__PURE__*/React.createElement(React.Fragment, {
key: column.columnKey || column.field || options.index
}, /*#__PURE__*/React.createElement("th", {
ref: headerCellRef,
className: className,
style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
onClick: function onClick(e) {
return onHeaderClick(e, column);
},
onMouseDown: function onMouseDown(e) {
return onHeaderMouseDown(e, column);
},
onKeyDown: function onKeyDown(e) {
return onHeaderKeyDown(e, column);
},
rowSpan: getColumnProp(column, 'rowSpan'),
colSpan: getColumnProp(column, 'colSpan'),
"aria-sort": ariaSortData,
onDragStart: function onDragStart(e) {
return _onDragStart(e, column);
},
onDragOver: function onDragOver(e) {
return _onDragOver(e, column);
},
onDragLeave: function onDragLeave(e) {
return _onDragLeave(e, column);
},
onDrop: function onDrop(e) {
return _onDrop(e, column);
}
}, resizer, /*#__PURE__*/React.createElement("span", {
className: "p-column-title"
}, getColumnProp(column, 'header')), sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: headerCellRef,
content: headerTooltip
}, getColumnProp(column, 'headerTooltipOptions'))));
}
};
var createHeaderRow = function createHeaderRow(row, index) {
var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
var rowHeaderCells = rowColumns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: true
});
});
return /*#__PURE__*/React.createElement("tr", {
key: index
}, rowHeaderCells);
};
var createColumnGroup = function createColumnGroup() {
var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
return rows.map(createHeaderRow);
};
var createColumns = function createColumns(columns) {
if (columns) {
if (hasColumnFilter(columns)) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: false
});
})), /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: true,
renderFilter: true
});
})));
} else {
return /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
return createHeaderCell(col, {
index: i,
filterOnly: false,
renderFilter: false
});
}));
}
} else {
return null;
}
};
var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
return /*#__PURE__*/React.createElement("thead", {
className: "p-treetable-thead"
}, content);
});
TreeTableHeader.displayName = 'TreeTableHeader';
var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
var elementRef = React.useRef(null);
var scrollHeaderRef = React.useRef(null);
var scrollHeaderBoxRef = React.useRef(null);
var scrollBodyRef = React.useRef(null);
var scrollTableRef = React.useRef(null);
var scrollFooterRef = React.useRef(null);
var scrollFooterBoxRef = React.useRef(null);
var setScrollHeight = function setScrollHeight() {
if (props.scrollHeight) {
if (props.scrollHeight.indexOf('%') !== -1) {
var datatableContainer = findDataTableContainer(elementRef.current);
scrollBodyRef.current.style.visibility = 'hidden';
scrollBodyRef.current.style.height = '100px'; //temporary height to calculate static height
var containerHeight = DomHandler.getOuterHeight(datatableContainer);
var relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(props.scrollHeight, 10) / 100;
var staticHeight = containerHeight - 100; //total height of headers, footers, paginators
var scrollBodyHeight = relativeHeight - staticHeight;
scrollBodyRef.current.style.height = 'auto';
scrollBodyRef.current.style.maxHeight = scrollBodyHeight + 'px';
scrollBodyRef.current.style.visibility = 'visible';
} else {
scrollBodyRef.current.style.maxHeight = props.scrollHeight;
}
}
};
var findDataTableContainer = function findDataTableContainer(element) {
if (element) {
var el = element;
while (el && !DomHandler.hasClass(el, 'p-treetable')) {
el = el.parentElement;
}
return el;
} else {
return null;
}
};
var onHeaderScroll = function onHeaderScroll() {
scrollHeaderRef.current.scrollLeft = 0;
};
var onBodyScroll = function onBodyScroll() {
var frozenView = elementRef.current.previousElementSibling;
var frozenScrollBody;
if (frozenView) {
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
}
scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
if (scrollFooterBoxRef.current) {
scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
}
if (frozenScrollBody) {
frozenScrollBody.scrollTop = scrollBodyRef.current.scrollTop;
}
};
useMountEffect(function () {
if (!props.frozen) {
var scrollBarWidth = DomHandler.calculateScrollbarWidth();
scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';
if (scrollFooterBoxRef.current) {
scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
}
} else {
scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
}
});
React.useEffect(function () {
setScrollHeight();
});
var createColGroup = function createColGroup() {
if (ObjectUtils.isNotEmpty(props.columns)) {
var cols = props.columns.map(function (col, i) {
return /*#__PURE__*/React.createElement("col", {
key: col.field + '_' + i
});
});
return /*#__PURE__*/React.createElement("colgroup", {
className: "p-treetable-scrollable-colgroup"
}, cols);
} else {
return null;
}
};
var className = classNames('p-treetable-scrollable-view', {
'p-treetable-frozen-view': props.frozen,
'p-treetable-unfrozen-view': !props.frozen && props.frozenWidth
});
var width = props.frozen ? props.frozenWidth : 'calc(100% - ' + props.frozenWidth + ')';
var left = props.frozen ? null : props.frozenWidth;
var colGroup = createColGroup();
var scrollableBodyStyle = !props.frozen && props.scrollHeight ? {
overflowY: 'scroll'
} : null;
return /*#__PURE__*/React.createElement("div", {
className: className,
style: {
width: width,
left: left
},
ref: elementRef
}, /*#__PURE__*/React.createElement("div", {
className: "p-treetable-scrollable-header",
ref: scrollHeaderRef,
onScroll: onHeaderScroll
}, /*#__PURE__*/React.createElement("div", {
className: "p-treetable-scrollable-header-box",
ref: scrollHeaderBoxRef
}, /*#__PURE__*/React.createElement("table", {
className: "p-treetable-scrollable-header-table"
}, colGroup, props.header))), /*#__PURE__*/React.createElement("div", {
className: "p-treetable-scrollable-body",
ref: scrollBodyRef,
style: scrollableBodyStyle,
onScroll: onBodyScroll
}, /*#__PURE__*/React.createElement("table", {
ref: scrollTableRef,
style: {
top: '0'
},
className: "p-treetable-scrollable-body-table"
}, colGroup, props.body)), /*#__PURE__*/React.createElement("div", {
className: "p-treetable-scrollable-footer",
ref: scrollFooterRef
}, /*#__PURE__*/React.createElement("div", {
className: "p-treetable-scrollable-footer-box",
ref: scrollFooterBoxRef
}, /*#__PURE__*/React.createElement("table", {
className: "p-treetable-scrollable-footer-table"
}, colGroup, props.footer))));
});
TreeTableScrollableView.displayName = 'TreeTableScrollableView';
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(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 _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 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; }
var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TreeTableBase.getProps(inProps);
var _React$useState = React.useState(props.expandedKeys),
_React$useState2 = _slicedToArray(_React$useState, 2),
expandedKeysState = _React$useState2[0],
setExpandedKeysState = _React$useState2[1];
var _React$useState3 = React.useState(props.first),
_React$useState4 = _slicedToArray(_React$useState3, 2),
firstState = _React$useState4[0],
setFirstState = _React$useState4[1];
var _React$useState5 = React.useState(props.rows),
_React$useState6 = _slicedToArray(_React$useState5, 2),
rowsState = _React$useState6[0],
setRowsState = _React$useState6[1];
var _React$useState7 = React.useState(props.sortField),
_React$useState8 = _slicedToArray(_React$useState7, 2),
sortFieldState = _React$useState8[0],
setSortFieldState = _React$useState8[1];
var _React$useState9 = React.useState(props.sortOrder),
_React$useState10 = _slicedToArray(_React$useState9, 2),
sortOrderState = _React$useState10[0],
setSortOrderState = _React$useState10[1];
var _React$useState11 = React.useState(props.multiSortMeta),
_React$useState12 = _slicedToArray(_React$useState11, 2),
multiSortMetaState = _React$useState12[0],
setMultiSortMetaState = _React$useState12[1];
var _React$useState13 = React.useState(props.filters),
_React$useState14 = _slicedToArray(_React$useState13, 2),
filtersState = _React$useState14[0],
setFiltersState = _React$useState14[1];
var _React$useState15 = React.useState([]),
_React$useState16 = _slicedToArray(_React$useState15, 2),
columnOrderState = _React$useState16[0],
setColumnOrderState = _React$useState16[1];
var elementRef = React.useRef(null);
var tableRef = React.useRef(null);
var resizerHelperRef = React.useRef(null);
var reorderIndicatorUpRef = React.useRef(null);
var reorderIndicatorDownRef = React.useRef(null);
var columnResizing = React.useRef(null);
var resizeColumn = React.useRef(null);
var resizeColumnProps = React.useRef(null);
var lastResizerHelperX = React.useRef(0);
var iconWidth = React.useRef(0);
var iconHeight = React.useRef(0);
var draggedColumnEl = React.useRef(null);
var draggedColumn = React.useRef(null);
var dropPosition = React.useRef(null);
var columnSortable = React.useRef(null);
var columnSortFunction = React.useRef(null);
var columnField = React.useRef(null);
var _useEventListener = useEventListener({
type: 'mousemove',
listener: function listener(event) {
if (columnResizing.current) {
onColumnResize(event);
}
}
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentMouseMoveListener = _useEventListener2[0],
unbindDocumentMouseMoveListener = _useEventListener2[1];
var _useEventListener3 = useEventListener({
type: 'mouseup',
listener: function listener(event) {
if (columnResizing.current) {
columnResizing.current = false;
onColumnResizeEnd();
}
}
}),
_useEventListener4 = _slicedToArray(_useEventListener3, 2),
bindDocumentMouseUpListener = _useEventListener4[0],
unbindDocumentMouseUpListener = _useEventListener4[1];
var onToggle = function onToggle(event) {
if (props.onToggle) {
props.onToggle(event);
} else {
setExpandedKeysState(event.value);
}
};
var onPageChange = function onPageChange(event) {
if (props.onPage) {
props.onPage(event);
} else {
setFirstState(event.first);
setRowsState(event.rows);
}
};
var onSort = function onSort(event) {
var sortField = event.sortField;
var sortOrder = props.defaultSortOrder;
var multiSortMeta;
var eventMeta;
columnSortable.current = event.sortable;
columnSortFunction.current = event.sortFunction;
columnField.current = event.sortField;
if (props.sortMode === 'multiple') {
var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
multiSortMeta = _toConsumableArray(getMultiSortMeta());
if (multiSortMeta && multiSortMeta instanceof Array) {
var sortMeta = multiSortMeta.find(function (sortMeta) {
return sortMeta.field === sortField;
});
sortOrder = sortMeta ? getCalculatedSortOrder(sortMeta.order) : sortOrder;
}
var newMetaData = {
field: sortField,
order: sortOrder
};
if (sortOrder) {
if (!multiSortMeta || !metaKey) {
multiSortMeta = [];
}
addSortMeta(newMetaData, multiSortMeta);
} else if (props.removableSort && multiSortMeta) {
removeSortMeta(newMetaData, multiSortMeta);
}
eventMeta = {
multiSortMeta: multiSortMeta
};
} else {
sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
if (props.removableSort) {
sortField = sortOrder ? sortField : null;
}
eventMeta = {
sortField: sortField,
sortOrder: sortOrder
};
}
if (props.onSort) {
props.onSort(eventMeta);
} else {
setFirstState(0);
setSortFieldState(eventMeta.sortField);
setSortOrderState(eventMeta.sortOrder);
setMultiSortMetaState(eventMeta.multiSortMeta);
}
};
var getCalculatedSortOrder = function getCalculatedSortOrder(currentOrder) {
return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
};
var addSortMeta = function addSortMeta(meta, multiSortMeta) {
var index = -1;
for (var i = 0; i < multiSortMeta.length; i++) {
if (multiSortMeta[i].field === meta.field) {
index = i;
break;
}
}
if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta);
};
var removeSortMeta = function removeSortMeta(meta, multiSortMeta) {
var index = -1;
for (var i = 0; i < multiSortMeta.length; i++) {
if (multiSortMeta[i].field === meta.field) {
index = i;
break;
}
}
if (index >= 0) {
multiSortMeta.splice(index, 1);
}
multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
};
var sortSingle = function sortSingle(data) {
return sortNodes(data);
};
var sortNodes = function sortNodes(data) {
var value = _toConsumableArray(data);
if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
value = columnSortFunction.current({
data: data,
field: getSortField(),
order: getSortOrder()
});
} else {
value.sort(function (node1, node2) {
var sortField = getSortField();
var value1 = ObjectUtils.resolveFieldData(node1.data, sortField);
var value2 = ObjectUtils.resolveFieldData(node2.data, sortField);
return compareValuesOnSort(value1, value2, getSortOrder());
});
for (var i = 0; i < value.length; i++) {
if (value[i].children && value[i].children.length) {
value[i].children = sortNodes(value[i].children);
}
}
}
return value;
};
var sortMultiple = function sortMultiple(data) {
var multiSortMeta = getMultiSortMeta();
if (multiSortMeta) return sortMultipleNodes(data, multiSortMeta);else return data;
};
var sortMultipleNodes = function sortMultipleNodes(data, multiSortMeta) {
var value = _toConsumableArray(data);
value.sort(function (node1, node2) {
return multisortField(node1, node2, multiSortMeta, 0);
});
for (var i = 0; i < value.length; i++) {
if (value[i].children && value[i].children.length) {
value[i].children = sortMultipleNodes(value[i].children, multiSortMeta);
}
}
return value;
};
var multisortField = function multisortField(node1, node2, multiSortMeta, index) {
var value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
var value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
// check if they are equal handling dates and locales
if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
return multiSortMeta.length - 1 > index ? multisortField(node1, node2, multiSortMeta, index + 1) : 0;
}
return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
};
var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
};
var filter = function filter(value, field, mode) {
onFilter({
value: value,
field: field,
matchMode: mode
});
};
var onFilter = function onFilter(event) {
var filters = getFilters();
var newFilters = filters ? _objectSpread({}, filters) : {};
if (!isFilterBlank(event.value)) newFilters[event.field] = {
value: event.value,
matchMode: event.matchMode
};else if (newFilters[event.field]) delete newFilters[event.field];
if (props.onFilter) {
props.onFilter({
filters: newFilters
});
} else {
setFirstState(0);
setFiltersState(newFilters);
}
};
var isFilterBlank = function isFilterBlank(filter) {
if (filter !== null && filter !== undefined) {
if (typeof filter === 'string' && filter.trim().length === 0 || filter instanceof Array && filter.length === 0) return true;else return false;
}
return true;
};
var onColumnResizeStart = function onColumnResizeStart(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
resizeColumn.current = event.columnEl;
resizeColumnProps.current = event.column;
columnResizing.current = true;
lastResizerHelperX.current = event.originalEvent.pageX - containerLeft + elementRef.current.scrollLeft;
bindColumnResizeEvents();
};
var onColumnResize = function onColumnResize(event) {
var containerLeft = DomHandler.getOffset(elementRef.current).left;
DomHandler.addClass(elementRef.current, 'p-unselectable-text');
resizerHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
resizerHelperRef.current.style.top = 0 + 'px';
resizerHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
resizerHelperRef.current.style.display = 'block';
};
var onColumnResizeEnd = function onColumnResizeEnd(event) {
var delta = resizerHelperRef.current.offsetLeft - lastResizerHelperX.current;
var columnWidth = resizeColumn.current.offsetWidth;
var newColumnWidth = columnWidth + delta;
var minWidth = resizeColumn.current.style.minWidth || 15;
if (columnWidth + delta > parseInt(minWidth, 10)) {
if (props.columnResizeMode === 'fit') {
var nextColumn = resizeColumn.current.nextElementSibling;
var nextColumnWidth = nextColumn.offsetWidth - delta;
if (newColumnWidth > 15 && nextColumnWidth > 15) {
if (props.scrollable) {
var scrollableView = findParentScrollableView(resizeColumn.current);
var scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
var scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
var scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
var resizeColumnIndex = DomHandler.index(resizeColumn.current);
resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
} else {
resizeColumn.current.style.width = newColumnWidth + 'px';
if (nextColumn) {
nextColumn.style.width = nextColumnWidth + 'px';
}
}
}
} else if (props.columnResizeMode === 'expand') {
if (props.scrollable) {
var _scrollableView = findParentScrollableView(resizeColumn.current);
var _scrollableBodyTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-body-table');
var _scrollableHeaderTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-header-table');
var _scrollableFooterTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-footer-table');
_scrollableBodyTable.style.width = _scrollableBodyTable.offsetWidth + delta + 'px';
_scrollableHeaderTable.style.width = _scrollableHeaderTable.offsetWidth + delta + 'px';
if (_scrollableFooterTable) {
_scrollableFooterTable.style.width = _scrollableHeaderTable.offsetWidth + delta + 'px';
}
var _resizeColumnIndex = DomHandler.index(resizeColumn.current);
resizeColGroup(_scrollableHeaderTable, _resizeColumnIndex, newColumnWidth, null);
resizeColGroup(_scrollableBodyTable, _resizeColumnIndex, newColumnWidth, null);
resizeColGroup(_scrollableFooterTable, _resizeColumnIndex, newColumnWidth, null);
} else {
tableRef.current.style.width = tableRef.current.offsetWidth + delta + 'px';
resizeColumn.current.style.width = newColumnWidth + 'px';
}
}
if (props.onColumnResizeEnd) {
props.onColumnResizeEnd({
element: resizeColumn.current,
column: resizeColumnProps.current,
delta: delta
});
}
}
resizerHelperRef.current.style.display = 'none';
resizeColumn.current = null;
resizeColumnProps.current = null;
DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
unbindColumnResizeEvents();
};
var findParentScrollableView = function findParentScrollableView(column) {
if (column) {
var parent = column.parentElement;
while (parent && !DomHandler.hasClass(parent, 'p-treetable-scrollable-view')) {
parent = parent.parentElement;
}
return parent;
} else {
return null;
}
};
var resizeColGroup = function resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
if (table) {
var colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
if (colGroup) {
var col = colGroup.children[resizeColumnIndex];
var nextCol = col.nextElementSibling;
col.style.width = newColumnWidth + 'px';
if (nextCol && nextColumnWidth) {
nextCol.style.width = nextColumnWidth + 'px';
}
} else {
throw new Error('Scrollable tables require a colgroup to support resizable columns');
}
}
};
var bindColumnResizeEvents = function bindColumnResizeEvents() {
bindDocumentMouseMoveListener();
bindDocumentMouseUpListener();
};
var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
unbindDocumentMouseMoveListener();
unbindDocumentMouseUpListener();
};
var onColumnDragStart = function onColumnDragStart(e) {
var event = e.originalEvent,
column = e.column;
if (columnResizing.current) {
event.preventDefault();
return;
}
iconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
iconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
draggedColumnEl.current = findParentHeader(event.currentTarget);
draggedColumn.current = column;
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
};
var onColumnDragOver = function onColumnDragOver(e) {
var event = e.originalEvent;
var dropHeader = findParentHeader(event.currentTarget);
if (props.reorderableColumns && draggedColumnEl.current && dropHeader) {
event.preventDefault();
var containerOffset = DomHandler.getOffset(elementRef.current);
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
if (draggedColumnEl.current !== dropHeader) {
var targetLeft = dropHeaderOffset.left - containerOffset.left;
//let targetTop = containerOffset.top - dropHeaderOffset.top;
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (iconHeight.current - 1) + 'px';
reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
if (event.pageX > columnCenter) {
reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
dropPosition.current = 1;
} else {
reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
dropPosition.current = -1;
}
reorderIndicatorUpRef.current.style.display = 'block';
reorderIndicatorDownRef.current.style.display = 'block';
}
}
};
var onColumnDragLeave = function onColumnDragLeave(e) {
var event = e.originalEvent;
if (props.reorderableColumns && draggedColumnEl.current) {
event.preventDefault();
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
}
};
var onColumnDrop = function onColumnDrop(e) {
var event = e.originalEvent,
column = e.column;
event.preventDefault();
if (draggedColumnEl.current) {
var dragIndex = DomHandler.index(draggedColumnEl.current);
var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
var allowDrop = dragIndex !== dropIndex;
if (allowDrop && (dropIndex - dragIndex === 1 && dropPosition.current === -1 || dragIndex - dropIndex === 1 && dropPosition.current === 1)) {
allowDrop = false;
}
if (allowDrop) {
var columns = columnOrderState ? getColumns() : React.Children.toArray(props.children);
var isSameColumn = function isSameColumn(col1, col2) {
return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field');
};
var dragColIndex = columns.findIndex(function (child) {
return isSameColumn(child, draggedColumn.current);
});
var dropColIndex = columns.findIndex(function (child) {
return isSameColumn(child, column);
});
if (dropColIndex < dragColIndex && dropPosition.current === 1) {
dropColIndex++;
}
if (dropColIndex > dragColIndex && dropPosition.current === -1) {
dropColIndex--;
}
ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
var columnOrder = [];
var _iterator = _createForOfIteratorHelper(columns),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _column = _step.value;
columnOrder.push(getColumnProp(_column, 'columnKey') || getColumnProp(_column, 'field'));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
setColumnOrderState(columnOrder);
if (props.onColReorder) {
props.onColReorder({
dragIndex: dragColIndex,
dropIndex: dropColIndex,
columns: columns
});
}
}
reorderIndicatorUpRef.current.style.display = 'none';
reorderIndicatorDownRef.current.style.display = 'none';
draggedColumnEl.current.draggable = false;
draggedColumnEl.current = null;
dropPosition.current = null;
}
};
var findParentHeader = 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;
}
};
var getColumnProp = function getColumnProp(column, name) {
return ColumnBase.getCProp(column, name);
};
var getExpandedKeys = function getExpandedKeys() {
return props.onToggle ? props.expandedKeys : expandedKeysState;
};
var getFirst = function getFirst() {
return props.onPage ? props.first : firstState;
};
var getRows = function getRows() {
return props.onPage ? props.rows : rowsState;
};
var getSortField = function getSortField() {
return props.onSort ? props.sortField : sortFieldState;
};
var getSortOrder = function getSortOrder() {
return props.onSort ? props.sortOrder : sortOrderState;
};
var getMultiSortMeta = function getMultiSortMeta() {
return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
};
var getFilters = function getFilters() {
return props.onFilter ? props.filters : filtersState;
};
var findColumnByKey = function findColumnByKey(columns, key) {
if (columns && columns.length) {
for (var i = 0; i < columns.length; i++) {
var child = columns[i];
if (getColumnProp(child, 'columnKey') === key || getColumnProp(child, 'field') === key) {
return child;
}
}
}
return null;
};
var getColumns = function getColumns() {
var columns = React.Children.toArray(props.children);
if (columns && columns.length) {
if (props.reorderableColumns && columnOrderState) {
var orderedColumns = [];
var _iterator2 = _createForOfIteratorHelper(columnOrderState),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var columnKey = _step2.value;
var column = findColumnByKey(columns, columnKey);
if (column) {
orderedColumns.push(column);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return [].concat(orderedColumns, _toConsumableArray(columns.filter(function (item) {
return orderedColumns.indexOf(item) < 0;
})));
} else {
return columns;
}
}
return null;
};
var getTotalRecords = function getTotalRecords(data) {
return props.lazy ? props.totalRecords : data ? data.length : 0;
};
var isSingleSelectionMode = function isSingleSelectionMode() {
return props.selectionMode && props.selectionMode === 'single';
};
var isMultipleSelectionMode = function isMultipleSelectionMode() {
return props.selectionMode && props.selectionMode === 'multiple';
};
var isRowSelectionMode = function isRowSelectionMode() {
return isSingleSelectionMode() || isMultipleSelectionMode();
};
var getFrozenColumns = function getFrozenColumns(columns) {
var frozenColumns = null;
var _iterator3 = _createForOfIteratorHelper(columns),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var col = _step3.value;
if (getColumnProp(col, 'frozen')) {
frozenColumns = frozenColumns || [];
frozenColumns.push(col);
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return frozenColumns;
};
var getScrollableColumns = function getScrollableColumns(columns) {
var scrollableColumns = null;
var _iterator4 = _createForOfIteratorHelper(columns),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var col = _step4.value;
if (!getColumnProp(col, 'frozen')) {
scrollableColumns = scrollableColumns || [];
scrollableColumns.push(col);
}
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return scrollableColumns;
};
var filterLocal = function filterLocal(value) {
var filteredNodes = [];
var filters = getFilters();
var columns = React.Children.toArray(props.children);
var isStrictMode = props.filterMode === 'strict';
var _iterator5 = _createForOfIteratorHelper(value),
_step5;
try {
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
var node = _step5.value;
var copyNode = _objectSpread({}, node);
var localMatch = true;
var globalMatch = false;
for (var j = 0; j < columns.length; j++) {
var col = columns[j];
var filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
var filterField = getColumnProp(col, 'field');
var filterValue = void 0,
filterConstraint = void 0,
paramsWithoutNode = void 0,
options = void 0;
//local
if (filterMeta) {
var filterMatchMode = filterMeta.matchMode || getColumnProp(col, 'filterMatchMode') || 'startsWith';
filterValue = filterMeta.value;
filterConstraint = filterMatchMode === 'custom' ? getColumnProp(col, 'filterFunction') : FilterService.filters[filterMatchMode];
options = {
rowData: node,
filters: filters,
props: props,
column: {
filterMeta: filterMeta,
filterField: filterField,
props: ColumnBase.getCProps(col)
}
};
paramsWithoutNode = {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode,
options: options
};
if (isStrictMode && !(findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && !(isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode))) {
localMatch = false;
}
if (!localMatch) {
break;
}
}
//global
if (props.globalFilter && !globalMatch) {
var copyNodeForGlobal = _objectSpread({}, copyNode);
filterValue = props.globalFilter;
filterConstraint = FilterService.filters[props.globalFilterMatchMode];
paramsWithoutNode = {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode
};
if (isStrictMode && (findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || isFilterMatched(copyNodeForGlobal, paramsWithoutNode)) || !isStrictMode && (isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || findFilteredNodes(copyNodeForGlobal, paramsWithoutNode))) {
globalMatch = true;
copyNode = copyNodeForGlobal;
}
}
}
var matches = localMatch;
if (props.globalFilter) {
matches = localMatch && globalMatch;
}
if (matches) {
filteredNodes.push(copyNode);
}
}
} catch (err) {
_iterator5.e(err);
} finally {
_iterator5.f();
}
return filteredNodes;
};
var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
if (node) {
var matched = false;
if (node.children) {
var childNodes = _toConsumableArray(node.children);
node.children = [];
var _iterator6 = _createForOfIteratorHelper(childNodes),
_step6;
try {
for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
var childNode = _step6.value;
var copyChildNode = _objectSpread({}, childNode);
if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
matched = true;
node.children.push(copyChildNode);
}
}
} catch (err) {
_iterator6.e(err);
} finally {
_iterator6.f();
}
}
if (matched) {
return true;
}
}
};
var isFilterMatched = function isFilterMatched(node, _ref) {
var filterField = _ref.filterField,
filterValue = _ref.filterValue,
filterConstraint = _ref.filterConstraint,
isStrictMode = _ref.isStrictMode,
options = _ref.options;
var matched = false;
var dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
if (filterConstraint(dataFieldValue, filterValue, props.filterLocale, options)) {
matched = true;
}
if (!matched || isStrictMode && !isNodeLeaf(node)) {
matched = findFilteredNodes(node, {
filterField: filterField,
filterValue: filterValue,
filterConstraint: filterConstraint,
isStrictMode: isStrictMode
}) || matched;
}
return matched;
};
var isNodeLeaf = function isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
};
var processData = function processData() {
var data = props.value || [];
if (!props.lazy) {
if (data && data.length) {
var filters = getFilters();
var sortField = getSortField();
var multiSortMeta = getMultiSortMeta();
if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
data = filterLocal(data);
}
if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
if (props.sortMode === 'single') data = sortSingle(data);else if (props.sortMode === 'multiple') data = sortMultiple(data);
}
}
}
return data;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
filter: filter,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createTableHeader = function createTableHeader(columns, columnGroup) {
var sortField = getSortField();
var sortOrder = getSortOrder();
var multiSortMeta = _toConsumableArray(getMultiSortMeta());
var filters = getFilters();
return /*#__PURE__*/React.createElement(TreeTableHeader, {
columns: columns,
columnGroup: columnGroup,
tabIndex: props.tabIndex,
onSort: onSort,
sortField: sortField,
sortOrder: sortOrder,
multiSortMeta: multiSortMeta,
resizableColumns: props.resizableColumns,
onResizeStart: onColumnResizeStart,
reorderableColumns: props.reorderableColumns,
onDragStart: onColumnDragStart,
onDragOver: onColumnDragOver,
onDragLeave: onColumnDragLeave,
onDrop: onColumnDrop,
onFilter: onFilter,
filters: filters,
filterDelay: props.filterDelay
});
};
var createTableFooter = function createTableFooter(columns, columnGroup) {
return /*#__PURE__*/React.createElement(TreeTableFooter, {
columns: columns,
columnGroup: columnGroup
});
};
var createTableBody = function createTableBody(value, columns) {
return /*#__PURE__*/React.createElement(TreeTableBody, {
value: value,
columns: columns,
expandedKeys: getExpandedKeys(),
selectOnEdit: props.selectOnEdit,
onToggle: onToggle,
onExpand: props.onExpand,
onCollapse: props.onCollapse,
paginator: props.paginator,
first: getFirst(),
rows: getRows(),
selectionMode: props.selectionMode,
selectionKeys: props.selectionKeys,
onSelectionChange: props.onSelectionChange,
metaKeySelection: props.metaKeySelection,
onRowClick: props.onRowClick,
onSelect: props.onSelect,
onUnselect: props.onUnselect,
propagateSelectionUp: props.propagateSelectionUp,
propagateSelectionDown: props.propagateSelectionDown,
lazy: props.lazy,
rowClassName: props.rowClassName,
emptyMessage: props.emptyMessage,
loading: props.loading,
contextMenuSelectionKey: props.contextMenuSelectionKey,
onContextMenuSelectionChange: props.onContextMenuSelectionChange,
onContextMenu: props.onContextMenu
});
};
var createPaginator = function createPaginator(position, totalRecords) {
var className = classNames('p-paginator-' + position, props.paginatorClassName);
return /*#__PURE__*/React.createElement(Paginator, {
first: getFirst(),
rows: getRows(),
pageLinkSize: props.pageLinkSize,
className: className,
onPageChange: onPageChange,
template: props.paginatorTemplate,
totalRecords: totalRecords,
rowsPerPageOptions: props.rowsPerPageOptions,
currentPageReportTemplate: props.currentPageReportTemplate,
leftContent: props.paginatorLeft,
rightContent: props.paginatorRight,
alwaysShow: props.alwaysShowPaginator,
dropdownAppendTo: props.paginatorDropdownAppendTo
});
};
var createScrollableView = function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
var header = createTableHeader(columns, headerColumnGroup);
var footer = createTableFooter(columns, footerColumnGroup);
var body = createTableBody(value, columns);
return /*#__PURE__*/React.createElement(TreeTableScrollableView, {
columns: columns,
header: header,
body: body,
footer: footer,
scrollHeight: props.scrollHeight,
frozen: frozen,
frozenWidth: props.frozenWidth
});
};
var createScrollableTable = function createScrollableTable(value) {
var columns = getColumns();
var frozenColumns = getFrozenColumns(columns);
var scrollableColumns = frozenColumns ? getScrollableColumns(columns) : columns;
var frozenView, scrollableView;
if (frozenColumns) {
frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
}
scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
return /*#__PURE__*/React.createElement("div", {
className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
}, frozenView, scrollableView);
};
var createRegularTable = function createRegularTable(value) {
var columns = getColumns();
var header = createTableHeader(columns, props.headerColumnGroup);
var footer = createTableFooter(columns, props.footerColumnGroup);
var body = createTableBody(value, columns);
var tableClassName = classNames('p-treetable-table', {
'p-treetable-scrollable-table': props.scrollable,
'p-treetable-resizable-table': props.resizableColumns,
'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
}, props.tableClassName);
return /*#__PURE__*/React.createElement("div", {
className: "p-treetable-wrapper"
}, /*#__PURE__*/React.createElement("table", {
ref: tableRef,
style: props.tableStyle,
className: tableClassName
}, header, footer, body));
};
var createTable = function createTable(value) {
return props.scrollable ? createScrollableTable(value) : createRegularTable(value);
};
var createLoader = function createLoader() {
if (props.loading) {
var iconClassName = classNames('p-treetable-loading-icon pi-spin', props.loadingIcon);
return /*#__PURE__*/React.createElement("div", {
className: "p-treetable-loading"
}, /*#__PURE__*/React.createElement("div", {
className: "p-treetable-loading-overlay p-component-overlay"
}, /*#__PURE__*/React.createElement("i", {
className: iconClassName
})));
}
return null;
};
var data = processData();
var otherProps = ObjectUtils.findDiffKeys(props, TreeTable.defaultProps);
var className = classNames('p-treetable p-component', {
'p-treetable-hoverable-rows': props.rowHover,
'p-treetable-selectable': isRowSelectionMode(),
'p-treetable-resizable': props.resizableColumns,
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-treetable-striped': props.stripedRows,
'p-treetable-gridlines': props.showGridlines
}, props.className);
var table = createTable(data);
var totalRecords = getTotalRecords(data);
var headerFacet = props.header && /*#__PURE__*/React.createElement("div", {
className: "p-treetable-header"
}, props.header);
var footerFacet = props.footer && /*#__PURE__*/React.createElement("div", {
className: "p-treetable-footer"
}, props.footer);
var paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
var paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
var loader = createLoader();
var resizeHelper = props.resizableColumns && /*#__PURE__*/React.createElement("div", {
ref: resizerHelperRef,
className: "p-column-resizer-helper",
style: {
display: 'none'
}
});
var reorderIndicatorUp = props.reorderableColumns && /*#__PURE__*/React.createElement("span", {
ref: reorderIndicatorUpRef,
className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
style: {
position: 'absolute',
display: 'none'
}
});
var reorderIndicatorDown = props.reorderableColumns && /*#__PURE__*/React.createElement("span", {
ref: reorderIndicatorDownRef,
className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
style: {
position: 'absolute',
display: 'none'
}
});
return /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style,
"data-scrollselectors": ".p-treetable-wrapper"
}, otherProps), loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
});
TreeTable.displayName = 'TreeTable';
var TriStateCheckboxBase = {
defaultProps: {
__TYPE: 'TriStateCheckbox',
id: null,
value: null,
style: null,
className: null,
disabled: false,
readOnly: false,
tabIndex: '0',
tooltip: null,
tooltipOptions: null,
onChange: null,
children: undefined
},
getProps: function getProps(props) {
return ObjectUtils.getMergedProps(props, TriStateCheckboxBase.defaultProps);
},
getOtherProps: function getOtherProps(props) {
return ObjectUtils.getDiffProps(props, TriStateCheckboxBase.defaultProps);
}
};
var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var props = TriStateCheckboxBase.getProps(inProps);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var elementRef = React.useRef(null);
var onClick = function onClick(event) {
if (!props.disabled && !props.readOnly) {
toggle(event);
}
};
var toggle = function toggle(event) {
var newValue;
if (props.value === null || props.value === undefined) newValue = true;else if (props.value === true) newValue = false;else if (props.value === false) newValue = null;
if (props.onChange) {
props.onChange({
originalEvent: event,
value: newValue,
stopPropagation: function stopPropagation() {},
preventDefault: function preventDefault() {},
target: {
name: props.name,
id: props.id,
value: newValue
}
});
}
};
var onFocus = function onFocus() {
setFocusedState(true);
};
var onBlur = function onBlur() {
setFocusedState(false);
};
var onKeyDown = function onKeyDown(e) {
if (e.keyCode === 32) {
toggle(e);
e.preventDefault();
}
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focusFirstElement(elementRef.current);
},
getElement: function getElement() {
return elementRef.current;
}
};
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = TriStateCheckboxBase.getOtherProps(props);
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var className = classNames('p-tristatecheckbox p-checkbox p-component', props.className, {
'p-checkbox-disabled': props.disabled
});
var boxClassName = classNames('p-checkbox-box', {
'p-highlight': (props.value || !props.value) && props.value !== null,
'p-disabled': props.disabled,
'p-focus': focusedState
});
var iconClassName = classNames('p-checkbox-icon p-c', {
'pi pi-check': props.value === true,
'pi pi-times': props.value === false
});
var ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
var ariaChecked = props.value ? 'true' : 'false';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef,
id: props.id,
className: className,
style: props.style
}, otherProps, {
onClick: onClick
}), /*#__PURE__*/React.createElement("div", _extends({
className: boxClassName,
tabIndex: props.tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
role: "checkbox",
"aria-checked": ariaChecked
}, ariaProps), /*#__PURE__*/React.createElement("span", {
className: iconClassName
})), focusedState && /*#__PURE__*/React.createElement("span", {
className: "p-sr-only",
"aria-live": "polite"
}, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip
}, props.tooltipOptions)));
}));
TriStateCheckbox.displayName = 'TriStateCheckbox';
export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortOrder, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useEventListener, useFavicon, useIntersectionObserver, useInterval, useLocalStorage, useMatchMedia, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };