51560 lines
1.8 MiB
51560 lines
1.8 MiB
var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
|
|
'use strict';
|
|
|
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
|
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
|
|
function _arrayLikeToArray$j(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$j(arr);
|
|
}
|
|
|
|
function _iterableToArray(iter) {
|
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
}
|
|
|
|
function _unsupportedIterableToArray$j(o, minLen) {
|
|
if (!o) return;
|
|
if (typeof o === "string") return _arrayLikeToArray$j(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$j(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$j(arr) || _nonIterableSpread();
|
|
}
|
|
|
|
function _defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
Object.defineProperty(Constructor, "prototype", {
|
|
writable: false
|
|
});
|
|
return Constructor;
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _setPrototypeOf(o, p) {
|
|
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
o.__proto__ = p;
|
|
return o;
|
|
};
|
|
|
|
return _setPrototypeOf(o, p);
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function");
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
Object.defineProperty(subClass, "prototype", {
|
|
writable: false
|
|
});
|
|
if (superClass) _setPrototypeOf(subClass, superClass);
|
|
}
|
|
|
|
function _typeof(obj) {
|
|
"@babel/helpers - typeof";
|
|
|
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
|
|
return typeof obj;
|
|
} : function (obj) {
|
|
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
}, _typeof(obj);
|
|
}
|
|
|
|
function _assertThisInitialized(self) {
|
|
if (self === void 0) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return self;
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
|
return call;
|
|
} else if (call !== void 0) {
|
|
throw new TypeError("Derived constructors may only return object or undefined");
|
|
}
|
|
|
|
return _assertThisInitialized(self);
|
|
}
|
|
|
|
function _getPrototypeOf(o) {
|
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
|
return o.__proto__ || Object.getPrototypeOf(o);
|
|
};
|
|
return _getPrototypeOf(o);
|
|
}
|
|
|
|
function _defineProperty(obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
function _arrayWithHoles(arr) {
|
|
if (Array.isArray(arr)) return arr;
|
|
}
|
|
|
|
function _iterableToArrayLimit(arr, i) {
|
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
|
|
if (_i == null) return;
|
|
var _arr = [];
|
|
var _n = true;
|
|
var _d = false;
|
|
|
|
var _s, _e;
|
|
|
|
try {
|
|
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
_arr.push(_s.value);
|
|
|
|
if (i && _arr.length === i) break;
|
|
}
|
|
} catch (err) {
|
|
_d = true;
|
|
_e = err;
|
|
} finally {
|
|
try {
|
|
if (!_n && _i["return"] != null) _i["return"]();
|
|
} finally {
|
|
if (_d) throw _e;
|
|
}
|
|
}
|
|
|
|
return _arr;
|
|
}
|
|
|
|
function _nonIterableRest() {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
function _slicedToArray(arr, i) {
|
|
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$j(arr, i) || _nonIterableRest();
|
|
}
|
|
|
|
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 _createForOfIteratorHelper$i(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$i(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$i(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$i(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$i(o, minLen); }
|
|
|
|
function _arrayLikeToArray$i(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: 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: "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.offsetWidth || el.getBoundingClientRect().width;
|
|
|
|
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.offsetHeight || el.getBoundingClientRect().height;
|
|
|
|
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);
|
|
}
|
|
}
|
|
}, {
|
|
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) {
|
|
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) {
|
|
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;
|
|
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$i(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$i(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 !== 9 && 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: "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) {
|
|
return element && element.offsetParent != null;
|
|
}
|
|
}, {
|
|
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$i(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;
|
|
}
|
|
}, {
|
|
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;
|
|
}
|
|
}]);
|
|
|
|
return DomHandler;
|
|
}();
|
|
|
|
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$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; }
|
|
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$V(_objectSpread$V({}, 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();
|
|
updateModel(e);
|
|
|
|
if (options.onBlur) {
|
|
options.onBlur(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;
|
|
var iPhone = /iphone/i.test(DomHandler.getUserAgent());
|
|
oldVal = el.value; //backspace, delete, and escape get special treatment
|
|
|
|
if (k === 8 || k === 46 || iPhone && 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 (/android/i.test(DomHandler.getUserAgent())) {
|
|
//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]'
|
|
};
|
|
var ua = DomHandler.getUserAgent();
|
|
androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
|
|
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 (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: "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;
|
|
}, {});
|
|
}
|
|
}, {
|
|
key: "reorderArray",
|
|
value: function reorderArray(value, from, to) {
|
|
var target;
|
|
|
|
if (value && from !== to) {
|
|
if (to >= value.length) {
|
|
target = to - value.length;
|
|
|
|
while (target-- + 1) {
|
|
value.push(undefined);
|
|
}
|
|
}
|
|
|
|
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: "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];
|
|
}
|
|
|
|
return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
|
|
}
|
|
}, {
|
|
key: "getRefElement",
|
|
value: function getRefElement(ref) {
|
|
if (ref) {
|
|
return _typeof(ref) === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
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);
|
|
}
|
|
}]);
|
|
|
|
return ObjectUtils;
|
|
}();
|
|
|
|
function _extends() {
|
|
_extends = Object.assign || function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
return _extends.apply(this, arguments);
|
|
}
|
|
|
|
function 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 IconUtils = /*#__PURE__*/function () {
|
|
function IconUtils() {
|
|
_classCallCheck(this, IconUtils);
|
|
}
|
|
|
|
_createClass(IconUtils, null, [{
|
|
key: "getJSXIcon",
|
|
value: function getJSXIcon(icon, iconProps, options) {
|
|
var content = null;
|
|
|
|
if (icon) {
|
|
var iconType = _typeof(icon);
|
|
|
|
var className = classNames(iconProps.className, iconType === 'string' && icon);
|
|
content = /*#__PURE__*/React__default["default"].createElement("span", _extends({}, iconProps, {
|
|
className: className
|
|
}));
|
|
|
|
if (iconType !== 'string') {
|
|
var defaultContentOptions = _objectSpread$U({
|
|
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();
|
|
|
|
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 PrimeReact = /*#__PURE__*/_createClass(function PrimeReact() {
|
|
_classCallCheck(this, PrimeReact);
|
|
});
|
|
|
|
_defineProperty(PrimeReact, "ripple", false);
|
|
|
|
_defineProperty(PrimeReact, "inputStyle", 'outlined');
|
|
|
|
_defineProperty(PrimeReact, "locale", 'en');
|
|
|
|
_defineProperty(PrimeReact, "appendTo", null);
|
|
|
|
_defineProperty(PrimeReact, "cssTransition", true);
|
|
|
|
_defineProperty(PrimeReact, "autoZIndex", true);
|
|
|
|
_defineProperty(PrimeReact, "nonce", null);
|
|
|
|
_defineProperty(PrimeReact, "zIndex", {
|
|
modal: 1100,
|
|
overlay: 1000,
|
|
menu: 1000,
|
|
tooltip: 1100,
|
|
toast: 1200
|
|
});
|
|
|
|
_defineProperty(PrimeReact, "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]
|
|
});
|
|
|
|
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 locales = {
|
|
'en': {
|
|
startsWith: 'Starts with',
|
|
contains: 'Contains',
|
|
notContains: 'Not contains',
|
|
endsWith: 'Ends with',
|
|
equals: 'Equals',
|
|
notEquals: 'Not equals',
|
|
noFilter: 'No 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',
|
|
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 results found',
|
|
emptyMessage: 'No available options'
|
|
}
|
|
};
|
|
|
|
function locale(locale) {
|
|
locale && (PrimeReact.locale = locale);
|
|
return {
|
|
locale: PrimeReact.locale,
|
|
options: locales[PrimeReact.locale]
|
|
};
|
|
}
|
|
|
|
function addLocale(locale, options) {
|
|
locales[locale] = _objectSpread$T(_objectSpread$T({}, locales['en']), options);
|
|
}
|
|
|
|
function updateLocaleOption(key, value, locale) {
|
|
localeOptions(locale)[key] = value;
|
|
}
|
|
|
|
function updateLocaleOptions(options, locale) {
|
|
var _locale = locale || PrimeReact.locale;
|
|
|
|
locales[_locale] = _objectSpread$T(_objectSpread$T({}, locales[_locale]), options);
|
|
}
|
|
|
|
function localeOption(key, locale) {
|
|
var _locale = locale || PrimeReact.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 localeOptions(locale) {
|
|
var _locale = locale || PrimeReact.locale;
|
|
|
|
return locales[_locale];
|
|
}
|
|
|
|
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',
|
|
ARROW_H: 'pi pi-arrow-h',
|
|
ARROW_V: 'pi pi-arrow-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 MessageSeverity = Object.freeze({
|
|
SUCCESS: 'success',
|
|
INFO: 'info',
|
|
WARN: 'warn',
|
|
ERROR: 'error'
|
|
});
|
|
|
|
var FilterOperator = Object.freeze({
|
|
AND: 'and',
|
|
OR: 'or'
|
|
});
|
|
|
|
function _createForOfIteratorHelper$h(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$h(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$h(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$h(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$h(o, minLen); }
|
|
|
|
function _arrayLikeToArray$h(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) {
|
|
var _iterator = _createForOfIteratorHelper$h(value),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var item = _step.value;
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$h(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 false;
|
|
}
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
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; }
|
|
|
|
function _createSuper$2l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2l(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var CSSTransition = /*#__PURE__*/function (_Component) {
|
|
_inherits(CSSTransition, _Component);
|
|
|
|
var _super = _createSuper$2l(CSSTransition);
|
|
|
|
function CSSTransition(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, CSSTransition);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntering = _this.onEntering.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(CSSTransition, [{
|
|
key: "disabled",
|
|
get: function get() {
|
|
return this.props.disabled || this.props.options && this.props.options.disabled || !PrimeReact.cssTransition;
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter(node, isAppearing) {
|
|
this.props.onEnter && this.props.onEnter(node, isAppearing); // component
|
|
|
|
this.props.options && this.props.options.onEnter && this.props.options.onEnter(node, isAppearing); // user option
|
|
}
|
|
}, {
|
|
key: "onEntering",
|
|
value: function onEntering(node, isAppearing) {
|
|
this.props.onEntering && this.props.onEntering(node, isAppearing); // component
|
|
|
|
this.props.options && this.props.options.onEntering && this.props.options.onEntering(node, isAppearing); // user option
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered(node, isAppearing) {
|
|
this.props.onEntered && this.props.onEntered(node, isAppearing); // component
|
|
|
|
this.props.options && this.props.options.onEntered && this.props.options.onEntered(node, isAppearing); // user option
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit(node) {
|
|
this.props.onExit && this.props.onExit(node); // component
|
|
|
|
this.props.options && this.props.options.onExit && this.props.options.onExit(node); // user option
|
|
}
|
|
}, {
|
|
key: "onExiting",
|
|
value: function onExiting(node) {
|
|
this.props.onExiting && this.props.onExiting(node); // component
|
|
|
|
this.props.options && this.props.options.onExiting && this.props.options.onExiting(node); // user option
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited(node) {
|
|
this.props.onExited && this.props.onExited(node); // component
|
|
|
|
this.props.options && this.props.options.onExited && this.props.options.onExited(node); // user option
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props["in"] !== prevProps["in"] && this.disabled) {
|
|
// no animation
|
|
var node = ObjectUtils.getRefElement(this.props.nodeRef);
|
|
|
|
if (this.props["in"]) {
|
|
this.onEnter(node, true);
|
|
this.onEntering(node, true);
|
|
this.onEntered(node, true);
|
|
} else {
|
|
this.onExit(node);
|
|
this.onExiting(node);
|
|
this.onExited(node);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.disabled) {
|
|
return this.props["in"] ? this.props.children : null;
|
|
} else {
|
|
var immutableProps = {
|
|
nodeRef: this.props.nodeRef,
|
|
"in": this.props["in"],
|
|
onEnter: this.onEnter,
|
|
onEntering: this.onEntering,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
};
|
|
var mutableProps = {
|
|
classNames: this.props.classNames,
|
|
timeout: this.props.timeout,
|
|
unmountOnExit: this.props.unmountOnExit
|
|
};
|
|
|
|
var props = _objectSpread$S(_objectSpread$S(_objectSpread$S({}, mutableProps), this.props.options || {}), immutableProps);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, props, this.props.children);
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return CSSTransition;
|
|
}(React.Component);
|
|
|
|
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; }
|
|
|
|
function _createSuper$2k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2k(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var AccordionTab = /*#__PURE__*/function (_Component) {
|
|
_inherits(AccordionTab, _Component);
|
|
|
|
var _super = _createSuper$2k(AccordionTab);
|
|
|
|
function AccordionTab() {
|
|
_classCallCheck(this, AccordionTab);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
return _createClass(AccordionTab);
|
|
}(React.Component);
|
|
|
|
_defineProperty(AccordionTab, "defaultProps", {
|
|
header: null,
|
|
disabled: false,
|
|
style: null,
|
|
className: null,
|
|
headerStyle: null,
|
|
headerClassName: null,
|
|
headerTemplate: null,
|
|
contentStyle: null,
|
|
contentClassName: null
|
|
});
|
|
|
|
var Accordion = /*#__PURE__*/function (_Component2) {
|
|
_inherits(Accordion, _Component2);
|
|
|
|
var _super2 = _createSuper$2k(Accordion);
|
|
|
|
function Accordion(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Accordion);
|
|
|
|
_this = _super2.call(this, props);
|
|
var state = {
|
|
id: _this.props.id
|
|
};
|
|
|
|
if (!_this.props.onTabChange) {
|
|
state = _objectSpread$R(_objectSpread$R({}, state), {}, {
|
|
activeIndex: props.activeIndex
|
|
});
|
|
}
|
|
|
|
_this.state = state;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Accordion, [{
|
|
key: "shouldTabRender",
|
|
value: function shouldTabRender(tab) {
|
|
return tab && tab.type === AccordionTab;
|
|
}
|
|
}, {
|
|
key: "onTabHeaderClick",
|
|
value: function onTabHeaderClick(event, tab, index) {
|
|
if (!tab.props.disabled) {
|
|
var selected = this.isSelected(index);
|
|
var newActiveIndex = null;
|
|
|
|
if (this.props.multiple) {
|
|
var indexes = (this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex) || [];
|
|
if (selected) indexes = indexes.filter(function (i) {
|
|
return i !== index;
|
|
});else indexes = [].concat(_toConsumableArray(indexes), [index]);
|
|
newActiveIndex = indexes;
|
|
} else {
|
|
newActiveIndex = selected ? null : index;
|
|
}
|
|
|
|
var callback = selected ? this.props.onTabClose : this.props.onTabOpen;
|
|
|
|
if (callback) {
|
|
callback({
|
|
originalEvent: event,
|
|
index: index
|
|
});
|
|
}
|
|
|
|
if (this.props.onTabChange) {
|
|
this.props.onTabChange({
|
|
originalEvent: event,
|
|
index: newActiveIndex
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeIndex: newActiveIndex
|
|
});
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(index) {
|
|
var activeIndex = this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
|
|
return this.props.multiple ? activeIndex && activeIndex.indexOf(index) >= 0 : activeIndex === index;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTabHeader",
|
|
value: function renderTabHeader(tab, selected, index) {
|
|
var _this2 = this;
|
|
|
|
var style = _objectSpread$R(_objectSpread$R({}, tab.props.headerStyle || {}), tab.props.style || {});
|
|
|
|
var className = classNames('p-accordion-header', {
|
|
'p-highlight': selected,
|
|
'p-disabled': tab.props.disabled
|
|
}, tab.props.headerClassName, tab.props.className);
|
|
var id = this.state.id + '_header_' + index;
|
|
var ariaControls = this.state.id + '_content_' + index;
|
|
var tabIndex = tab.props.disabled ? -1 : null;
|
|
var header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-accordion-header-text"
|
|
}, tab.props.header);
|
|
var icon = selected ? this.props.collapseIcon : this.props.expandIcon;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: style
|
|
}, /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: '#' + ariaControls,
|
|
id: id,
|
|
className: "p-accordion-header-link",
|
|
"aria-controls": ariaControls,
|
|
role: "tab",
|
|
"aria-expanded": selected,
|
|
onClick: function onClick(event) {
|
|
return _this2.onTabHeaderClick(event, tab, index);
|
|
},
|
|
tabIndex: tabIndex
|
|
}, IconUtils.getJSXIcon(icon, {
|
|
className: 'p-accordion-toggle-icon'
|
|
}, {
|
|
props: this.props,
|
|
selected: selected
|
|
}), header));
|
|
}
|
|
}, {
|
|
key: "renderTabContent",
|
|
value: function renderTabContent(tab, selected, index) {
|
|
var style = _objectSpread$R(_objectSpread$R({}, tab.props.contentStyle || {}), tab.props.style || {});
|
|
|
|
var className = classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
|
|
var id = this.state.id + '_content_' + index;
|
|
var toggleableContentRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: toggleableContentRef,
|
|
classNames: "p-toggleable-content",
|
|
timeout: {
|
|
enter: 1000,
|
|
exit: 450
|
|
},
|
|
"in": selected,
|
|
unmountOnExit: true,
|
|
options: this.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: toggleableContentRef,
|
|
id: id,
|
|
className: className,
|
|
style: style,
|
|
role: "region",
|
|
"aria-labelledby": this.state.id + '_header_' + index
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-accordion-content"
|
|
}, tab.props.children)));
|
|
}
|
|
}, {
|
|
key: "renderTab",
|
|
value: function renderTab(tab, index) {
|
|
var selected = this.isSelected(index);
|
|
var tabHeader = this.renderTabHeader(tab, selected, index);
|
|
var tabContent = this.renderTabContent(tab, selected, index);
|
|
var tabClassName = classNames('p-accordion-tab', {
|
|
'p-accordion-tab-active': selected
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: tab.props.header,
|
|
className: tabClassName
|
|
}, tabHeader, tabContent);
|
|
}
|
|
}, {
|
|
key: "renderTabs",
|
|
value: function renderTabs() {
|
|
var _this3 = this;
|
|
|
|
return React__default["default"].Children.map(this.props.children, function (tab, index) {
|
|
if (_this3.shouldTabRender(tab)) {
|
|
return _this3.renderTab(tab, index);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-accordion p-component', this.props.className);
|
|
var tabs = this.renderTabs();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
id: this.state.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, tabs);
|
|
}
|
|
}]);
|
|
|
|
return Accordion;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Accordion, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
var KeyFilter = /*#__PURE__*/function () {
|
|
function KeyFilter() {
|
|
_classCallCheck(this, KeyFilter);
|
|
}
|
|
|
|
_createClass(KeyFilter, null, [{
|
|
key: "isNavKeyPress",
|
|
value:
|
|
/* eslint-disable */
|
|
|
|
/* eslint-enable */
|
|
function isNavKeyPress(e) {
|
|
var k = e.keyCode;
|
|
k = DomHandler.getBrowser().safari ? KeyFilter.SAFARI_KEYS[k] || k : k;
|
|
return k >= 33 && k <= 40 || k === KeyFilter.KEYS.RETURN || k === KeyFilter.KEYS.TAB || k === KeyFilter.KEYS.ESC;
|
|
}
|
|
}, {
|
|
key: "isSpecialKey",
|
|
value: function isSpecialKey(e) {
|
|
var k = e.keyCode;
|
|
return k === 9 || k === 13 || k === 27 || k === 16 || k === 17 || k >= 18 && k <= 20 || DomHandler.getBrowser().opera && !e.shiftKey && (k === 8 || k >= 33 && k <= 35 || k >= 36 && k <= 39 || k >= 44 && k <= 45);
|
|
}
|
|
}, {
|
|
key: "getKey",
|
|
value: function getKey(e) {
|
|
var k = e.keyCode || e.charCode;
|
|
return DomHandler.getBrowser().safari ? KeyFilter.SAFARI_KEYS[k] || k : k;
|
|
}
|
|
}, {
|
|
key: "getCharCode",
|
|
value: function getCharCode(e) {
|
|
return e.charCode || e.keyCode || e.which;
|
|
}
|
|
}, {
|
|
key: "onKeyPress",
|
|
value: function onKeyPress(e, keyfilter, validateOnly) {
|
|
if (validateOnly) {
|
|
return;
|
|
}
|
|
|
|
var regex = KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
|
|
var browser = DomHandler.getBrowser();
|
|
|
|
if (e.ctrlKey || e.altKey) {
|
|
return;
|
|
}
|
|
|
|
var k = this.getKey(e);
|
|
|
|
if (browser.mozilla && (this.isNavKeyPress(e) || k === KeyFilter.KEYS.BACKSPACE || k === KeyFilter.KEYS.DELETE && e.charCode === 0)) {
|
|
return;
|
|
}
|
|
|
|
var c = this.getCharCode(e);
|
|
var cc = String.fromCharCode(c);
|
|
|
|
if (browser.mozilla && (this.isSpecialKey(e) || !cc)) {
|
|
return;
|
|
}
|
|
|
|
if (!regex.test(cc)) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "validate",
|
|
value: function validate(e, keyfilter) {
|
|
var value = e.target.value,
|
|
validatePattern = true;
|
|
|
|
if (value && !keyfilter.test(value)) {
|
|
validatePattern = false;
|
|
}
|
|
|
|
return validatePattern;
|
|
}
|
|
}]);
|
|
|
|
return KeyFilter;
|
|
}();
|
|
|
|
_defineProperty(KeyFilter, "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
|
|
});
|
|
|
|
_defineProperty(KeyFilter, "KEYS", {
|
|
TAB: 9,
|
|
RETURN: 13,
|
|
ESC: 27,
|
|
BACKSPACE: 8,
|
|
DELETE: 46
|
|
});
|
|
|
|
_defineProperty(KeyFilter, "SAFARI_KEYS", {
|
|
63234: 37,
|
|
// left
|
|
63235: 39,
|
|
// right
|
|
63232: 38,
|
|
// up
|
|
63233: 40,
|
|
// down
|
|
63276: 33,
|
|
// page up
|
|
63277: 34,
|
|
// page down
|
|
63272: 46,
|
|
// delete
|
|
63273: 36,
|
|
// home
|
|
63275: 35 // end
|
|
|
|
});
|
|
|
|
function _createSuper$2j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2j(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Portal = /*#__PURE__*/function (_Component) {
|
|
_inherits(Portal, _Component);
|
|
|
|
var _super = _createSuper$2j(Portal);
|
|
|
|
function Portal(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Portal);
|
|
|
|
_this = _super.call(this, props);
|
|
var mounted = props.visible && DomHandler.hasDOM();
|
|
_this.state = {
|
|
mounted: mounted
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Portal, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (DomHandler.hasDOM() && !this.state.mounted) {
|
|
this.setState({
|
|
mounted: true
|
|
}, this.props.onMounted);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.props.onUnmounted && this.props.onUnmounted();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.props.element || this.props.children;
|
|
|
|
if (element && this.state.mounted) {
|
|
var appendTo = this.props.appendTo || PrimeReact.appendTo || document.body;
|
|
return appendTo === 'self' ? element : /*#__PURE__*/ReactDOM__default["default"].createPortal(element, appendTo);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return Portal;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Portal, "defaultProps", {
|
|
element: null,
|
|
appendTo: null,
|
|
visible: false,
|
|
onMounted: null,
|
|
onUnmounted: null
|
|
});
|
|
|
|
function _createSuper$2i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2i(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2i() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
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; }
|
|
function tip(props) {
|
|
var appendTo = props.appendTo || document.body;
|
|
var tooltipWrapper = document.createDocumentFragment();
|
|
DomHandler.appendChild(tooltipWrapper, appendTo);
|
|
props = _objectSpread$Q(_objectSpread$Q({}, props), props.options);
|
|
var tooltipEl = /*#__PURE__*/React__default["default"].createElement(Tooltip, props);
|
|
ReactDOM__default["default"].render(tooltipEl, tooltipWrapper);
|
|
|
|
var updateTooltip = function updateTooltip(newProps) {
|
|
props = _objectSpread$Q(_objectSpread$Q({}, props), newProps);
|
|
ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].cloneElement(tooltipEl, props), tooltipWrapper);
|
|
};
|
|
|
|
return {
|
|
destroy: function destroy() {
|
|
ReactDOM__default["default"].unmountComponentAtNode(tooltipWrapper);
|
|
},
|
|
updateContent: function updateContent(newContent) {
|
|
console.warn("The 'updateContent' method has been deprecated on Tooltip. Use update(newProps) method.");
|
|
updateTooltip({
|
|
content: newContent
|
|
});
|
|
},
|
|
update: function update(newProps) {
|
|
updateTooltip(newProps);
|
|
}
|
|
};
|
|
}
|
|
var Tooltip = /*#__PURE__*/function (_Component) {
|
|
_inherits(Tooltip, _Component);
|
|
|
|
var _super = _createSuper$2i(Tooltip);
|
|
|
|
function Tooltip(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Tooltip);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false,
|
|
position: _this.props.position
|
|
};
|
|
_this.show = _this.show.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.onMouseEnter = _this.onMouseEnter.bind(_assertThisInitialized(_this));
|
|
_this.onMouseLeave = _this.onMouseLeave.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Tooltip, [{
|
|
key: "isTargetContentEmpty",
|
|
value: function isTargetContentEmpty(target) {
|
|
return !(this.props.content || this.getTargetOption(target, 'tooltip'));
|
|
}
|
|
}, {
|
|
key: "isContentEmpty",
|
|
value: function isContentEmpty(target) {
|
|
return !(this.props.content || this.getTargetOption(target, 'tooltip') || this.props.children);
|
|
}
|
|
}, {
|
|
key: "isMouseTrack",
|
|
value: function isMouseTrack(target) {
|
|
return this.getTargetOption(target, 'mousetrack') || this.props.mouseTrack;
|
|
}
|
|
}, {
|
|
key: "isDisabled",
|
|
value: function isDisabled(target) {
|
|
return this.getTargetOption(target, 'disabled') === 'true' || this.hasTargetOption(target, 'disabled') || this.props.disabled;
|
|
}
|
|
}, {
|
|
key: "isShowOnDisabled",
|
|
value: function isShowOnDisabled(target) {
|
|
return this.getTargetOption(target, 'showondisabled') || this.props.showOnDisabled;
|
|
}
|
|
}, {
|
|
key: "isAutoHide",
|
|
value: function isAutoHide() {
|
|
return this.getTargetOption(this.currentTarget, 'autohide') || this.props.autoHide;
|
|
}
|
|
}, {
|
|
key: "getTargetOption",
|
|
value: function getTargetOption(target, option) {
|
|
if (this.hasTargetOption(target, "data-pr-".concat(option))) {
|
|
return target.getAttribute("data-pr-".concat(option));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "hasTargetOption",
|
|
value: function hasTargetOption(target, option) {
|
|
return target && target.hasAttribute(option);
|
|
}
|
|
}, {
|
|
key: "getEvents",
|
|
value: function getEvents(target) {
|
|
var showEvent = this.getTargetOption(target, 'showevent') || this.props.showEvent;
|
|
var hideEvent = this.getTargetOption(target, 'hideevent') || this.props.hideEvent;
|
|
|
|
if (this.isMouseTrack(target)) {
|
|
showEvent = 'mousemove';
|
|
hideEvent = 'mouseleave';
|
|
} else {
|
|
var event = this.getTargetOption(target, 'event') || this.props.event;
|
|
|
|
if (event === 'focus') {
|
|
showEvent = 'focus';
|
|
hideEvent = 'blur';
|
|
}
|
|
}
|
|
|
|
return {
|
|
showEvent: showEvent,
|
|
hideEvent: hideEvent
|
|
};
|
|
}
|
|
}, {
|
|
key: "getPosition",
|
|
value: function getPosition(target) {
|
|
return this.getTargetOption(target, 'position') || this.state.position;
|
|
}
|
|
}, {
|
|
key: "getMouseTrackPosition",
|
|
value: function getMouseTrackPosition(target) {
|
|
var top = this.getTargetOption(target, 'mousetracktop') || this.props.mouseTrackTop;
|
|
var left = this.getTargetOption(target, 'mousetrackleft') || this.props.mouseTrackLeft;
|
|
return {
|
|
top: top,
|
|
left: left
|
|
};
|
|
}
|
|
}, {
|
|
key: "updateText",
|
|
value: function updateText(target, callback) {
|
|
if (this.tooltipTextEl) {
|
|
var content = this.getTargetOption(target, 'tooltip') || this.props.content;
|
|
|
|
if (content) {
|
|
this.tooltipTextEl.innerHTML = ''; // remove children
|
|
|
|
this.tooltipTextEl.appendChild(document.createTextNode(content));
|
|
callback();
|
|
} else if (this.props.children) {
|
|
callback();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(e) {
|
|
var _this2 = this;
|
|
|
|
this.currentTarget = e.currentTarget;
|
|
var disabled = this.isDisabled(this.currentTarget);
|
|
var empty = this.isContentEmpty(this.isShowOnDisabled(this.currentTarget) && disabled ? this.currentTarget.firstChild : this.currentTarget);
|
|
|
|
if (empty || disabled) {
|
|
return;
|
|
}
|
|
|
|
var updateTooltipState = function updateTooltipState() {
|
|
_this2.updateText(_this2.currentTarget, function () {
|
|
if (_this2.props.autoZIndex && !ZIndexUtils.get(_this2.containerEl)) {
|
|
ZIndexUtils.set('tooltip', _this2.containerEl, PrimeReact.autoZIndex, _this2.props.baseZIndex || PrimeReact.zIndex['tooltip']);
|
|
}
|
|
|
|
_this2.containerEl.style.left = '';
|
|
_this2.containerEl.style.top = '';
|
|
|
|
if (_this2.isMouseTrack(_this2.currentTarget) && !_this2.containerSize) {
|
|
_this2.containerSize = {
|
|
width: DomHandler.getOuterWidth(_this2.containerEl),
|
|
height: DomHandler.getOuterHeight(_this2.containerEl)
|
|
};
|
|
}
|
|
|
|
_this2.align(_this2.currentTarget, {
|
|
x: e.pageX,
|
|
y: e.pageY
|
|
});
|
|
});
|
|
};
|
|
|
|
if (this.state.visible) {
|
|
this.applyDelay('updateDelay', updateTooltipState);
|
|
} else {
|
|
this.sendCallback(this.props.onBeforeShow, {
|
|
originalEvent: e,
|
|
target: this.currentTarget
|
|
});
|
|
this.applyDelay('showDelay', function () {
|
|
_this2.setState({
|
|
visible: true,
|
|
position: _this2.getPosition(_this2.currentTarget)
|
|
}, function () {
|
|
updateTooltipState();
|
|
|
|
_this2.sendCallback(_this2.props.onShow, {
|
|
originalEvent: e,
|
|
target: _this2.currentTarget
|
|
});
|
|
});
|
|
|
|
_this2.bindDocumentResizeListener();
|
|
|
|
_this2.bindScrollListener();
|
|
|
|
DomHandler.addClass(_this2.currentTarget, _this2.getTargetOption(_this2.currentTarget, 'classname'));
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(e) {
|
|
var _this3 = this;
|
|
|
|
this.clearTimeouts();
|
|
|
|
if (this.state.visible) {
|
|
DomHandler.removeClass(this.currentTarget, this.getTargetOption(this.currentTarget, 'classname'));
|
|
this.sendCallback(this.props.onBeforeHide, {
|
|
originalEvent: e,
|
|
target: this.currentTarget
|
|
});
|
|
this.applyDelay('hideDelay', function () {
|
|
ZIndexUtils.clear(_this3.containerEl);
|
|
DomHandler.removeClass(_this3.containerEl, 'p-tooltip-active');
|
|
|
|
if (!_this3.isAutoHide() && _this3.allowHide === false) {
|
|
return;
|
|
}
|
|
|
|
_this3.setState({
|
|
visible: false,
|
|
position: _this3.props.position
|
|
}, function () {
|
|
if (_this3.tooltipTextEl) {
|
|
ReactDOM__default["default"].unmountComponentAtNode(_this3.tooltipTextEl);
|
|
}
|
|
|
|
_this3.unbindDocumentResizeListener();
|
|
|
|
_this3.unbindScrollListener();
|
|
|
|
_this3.currentTarget = null;
|
|
_this3.scrollHandler = null;
|
|
_this3.containerSize = null;
|
|
_this3.allowHide = true;
|
|
|
|
_this3.sendCallback(_this3.props.onHide, {
|
|
originalEvent: e,
|
|
target: _this3.currentTarget
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "align",
|
|
value: function align(target, coordinate) {
|
|
var _this4 = this;
|
|
|
|
var left = 0,
|
|
top = 0;
|
|
|
|
if (this.isMouseTrack(target) && coordinate) {
|
|
var containerSize = {
|
|
width: DomHandler.getOuterWidth(this.containerEl),
|
|
height: DomHandler.getOuterHeight(this.containerEl)
|
|
};
|
|
left = coordinate.x;
|
|
top = coordinate.y;
|
|
|
|
var _this$getMouseTrackPo = this.getMouseTrackPosition(target),
|
|
mouseTrackTop = _this$getMouseTrackPo.top,
|
|
mouseTrackLeft = _this$getMouseTrackPo.left;
|
|
|
|
switch (this.state.position) {
|
|
case 'left':
|
|
left -= containerSize.width + mouseTrackLeft;
|
|
top -= containerSize.height / 2 - mouseTrackTop;
|
|
break;
|
|
|
|
case 'right':
|
|
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 || this.containerSize.width > containerSize.width) {
|
|
this.containerEl.style.left = '0px';
|
|
this.containerEl.style.right = window.innerWidth - containerSize.width - left + 'px';
|
|
} else {
|
|
this.containerEl.style.right = '';
|
|
this.containerEl.style.left = left + 'px';
|
|
}
|
|
|
|
this.containerEl.style.top = top + 'px';
|
|
DomHandler.addClass(this.containerEl, 'p-tooltip-active');
|
|
} else {
|
|
var pos = DomHandler.findCollisionPosition(this.state.position);
|
|
var my = this.getTargetOption(target, 'my') || this.props.my || pos.my;
|
|
var at = this.getTargetOption(target, 'at') || this.props.at || pos.at;
|
|
this.containerEl.style.padding = '0px';
|
|
DomHandler.flipfitCollision(this.containerEl, target, my, at, function (currentPosition) {
|
|
var _currentPosition$at = currentPosition.at,
|
|
atX = _currentPosition$at.x,
|
|
atY = _currentPosition$at.y;
|
|
var myX = currentPosition.my.x;
|
|
var position = _this4.props.at ? atX !== 'center' && atX !== myX ? atX : atY : currentPosition.at["".concat(pos.axis)];
|
|
_this4.containerEl.style.padding = '';
|
|
|
|
_this4.setState({
|
|
position: position
|
|
}, function () {
|
|
_this4.updateContainerPosition();
|
|
|
|
DomHandler.addClass(_this4.containerEl, 'p-tooltip-active');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateContainerPosition",
|
|
value: function updateContainerPosition() {
|
|
if (this.containerEl) {
|
|
var style = getComputedStyle(this.containerEl);
|
|
if (this.state.position === 'left') this.containerEl.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';else if (this.state.position === 'top') this.containerEl.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseEnter",
|
|
value: function onMouseEnter() {
|
|
if (!this.isAutoHide()) {
|
|
this.allowHide = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseLeave",
|
|
value: function onMouseLeave(e) {
|
|
if (!this.isAutoHide()) {
|
|
this.allowHide = true;
|
|
this.hide(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListener",
|
|
value: function bindDocumentResizeListener() {
|
|
var _this5 = this;
|
|
|
|
this.documentResizeListener = function (e) {
|
|
if (!DomHandler.isTouchDevice()) {
|
|
_this5.hide(e);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListener",
|
|
value: function unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this6 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.currentTarget, function (e) {
|
|
if (_this6.state.visible) {
|
|
_this6.hide(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindTargetEvent",
|
|
value: function bindTargetEvent(target) {
|
|
if (target) {
|
|
var _this$getEvents = this.getEvents(target),
|
|
showEvent = _this$getEvents.showEvent,
|
|
hideEvent = _this$getEvents.hideEvent;
|
|
|
|
var currentTarget = this.getTarget(target);
|
|
currentTarget.addEventListener(showEvent, this.show);
|
|
currentTarget.addEventListener(hideEvent, this.hide);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindTargetEvent",
|
|
value: function unbindTargetEvent(target) {
|
|
if (target) {
|
|
var _this$getEvents2 = this.getEvents(target),
|
|
showEvent = _this$getEvents2.showEvent,
|
|
hideEvent = _this$getEvents2.hideEvent;
|
|
|
|
var currentTarget = this.getTarget(target);
|
|
currentTarget.removeEventListener(showEvent, this.show);
|
|
currentTarget.removeEventListener(hideEvent, this.hide);
|
|
}
|
|
}
|
|
}, {
|
|
key: "applyDelay",
|
|
value: function applyDelay(delayProp, callback) {
|
|
this.clearTimeouts();
|
|
var delay = this.getTargetOption(this.currentTarget, delayProp.toLowerCase()) || this.props[delayProp];
|
|
|
|
if (!!delay) {
|
|
this["".concat(delayProp, "Timeout")] = setTimeout(function () {
|
|
return callback();
|
|
}, delay);
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
}, {
|
|
key: "sendCallback",
|
|
value: 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];
|
|
}
|
|
|
|
callback.apply(void 0, params);
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearTimeouts",
|
|
value: function clearTimeouts() {
|
|
clearTimeout(this.showDelayTimeout);
|
|
clearTimeout(this.updateDelayTimeout);
|
|
clearTimeout(this.hideDelayTimeout);
|
|
}
|
|
}, {
|
|
key: "getTarget",
|
|
value: function getTarget(target) {
|
|
if (target) {
|
|
if (this.isShowOnDisabled(target)) {
|
|
var wrapper = document.createElement('span');
|
|
target.parentNode.insertBefore(wrapper, target);
|
|
wrapper.appendChild(target);
|
|
return wrapper;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "updateTargetEvents",
|
|
value: function updateTargetEvents(target) {
|
|
this.unloadTargetEvents(target);
|
|
this.loadTargetEvents(target);
|
|
}
|
|
}, {
|
|
key: "loadTargetEvents",
|
|
value: function loadTargetEvents(target) {
|
|
this.setTargetEventOperations(target || this.props.target, 'bindTargetEvent');
|
|
}
|
|
}, {
|
|
key: "unloadTargetEvents",
|
|
value: function unloadTargetEvents(target) {
|
|
this.setTargetEventOperations(target || this.props.target, 'unbindTargetEvent');
|
|
}
|
|
}, {
|
|
key: "setTargetEventOperations",
|
|
value: function setTargetEventOperations(target, operation) {
|
|
var _this7 = this;
|
|
|
|
if (target) {
|
|
if (DomHandler.isElement(target)) {
|
|
this[operation](target);
|
|
} else {
|
|
var setEvent = function setEvent(target) {
|
|
var element = DomHandler.find(document, target);
|
|
element.forEach(function (el) {
|
|
_this7[operation](el);
|
|
});
|
|
};
|
|
|
|
if (target instanceof Array) {
|
|
target.forEach(function (t) {
|
|
setEvent(t);
|
|
});
|
|
} else {
|
|
setEvent(target);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.target) {
|
|
this.loadTargetEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var _this8 = this;
|
|
|
|
if (prevProps.target !== this.props.target) {
|
|
this.unloadTargetEvents(prevProps.target);
|
|
this.loadTargetEvents();
|
|
}
|
|
|
|
if (this.state.visible) {
|
|
if (prevProps.content !== this.props.content) {
|
|
this.applyDelay('updateDelay', function () {
|
|
_this8.updateText(_this8.currentTarget, function () {
|
|
_this8.align(_this8.currentTarget);
|
|
});
|
|
});
|
|
}
|
|
|
|
if (this.currentTarget && this.isDisabled(this.currentTarget)) {
|
|
this.hide();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.clearTimeouts();
|
|
this.unbindDocumentResizeListener();
|
|
this.unloadTargetEvents();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.containerEl);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this9 = this;
|
|
|
|
var tooltipClassName = classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(this.state.position), true), this.props.className);
|
|
var isTargetContentEmpty = this.isTargetContentEmpty(this.currentTarget);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this9.containerEl = el;
|
|
},
|
|
className: tooltipClassName,
|
|
style: this.props.style,
|
|
role: "tooltip",
|
|
"aria-hidden": this.state.visible,
|
|
onMouseEnter: this.onMouseEnter,
|
|
onMouseLeave: this.onMouseLeave
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tooltip-arrow"
|
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this9.tooltipTextEl = el;
|
|
},
|
|
className: "p-tooltip-text"
|
|
}, isTargetContentEmpty && this.props.children));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.state.visible) {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo,
|
|
visible: true
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return Tooltip;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Tooltip, "defaultProps", {
|
|
id: null,
|
|
target: null,
|
|
content: null,
|
|
disabled: false,
|
|
className: null,
|
|
style: null,
|
|
appendTo: null,
|
|
position: 'right',
|
|
my: null,
|
|
at: null,
|
|
event: null,
|
|
showEvent: 'mouseenter',
|
|
hideEvent: 'mouseleave',
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
mouseTrack: false,
|
|
mouseTrackTop: 5,
|
|
mouseTrackLeft: 5,
|
|
showDelay: 0,
|
|
updateDelay: 0,
|
|
hideDelay: 0,
|
|
autoHide: true,
|
|
showOnDisabled: false,
|
|
onBeforeShow: null,
|
|
onBeforeHide: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$2h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2h(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2h() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var InputTextComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(InputTextComponent, _Component);
|
|
|
|
var _super = _createSuper$2h(InputTextComponent);
|
|
|
|
function InputTextComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, InputTextComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.onKeyPress = _this.onKeyPress.bind(_assertThisInitialized(_this));
|
|
_this.elementRef = /*#__PURE__*/React.createRef(_this.props.forwardRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(InputTextComponent, [{
|
|
key: "isFilled",
|
|
value: function isFilled() {
|
|
return this.props.value != null && this.props.value.toString().length > 0 || this.props.defaultValue != null && this.props.defaultValue.toString().length > 0 || this.elementRef && this.elementRef.current && this.elementRef.current.value != null && this.elementRef.current.value.toString().length > 0;
|
|
}
|
|
}, {
|
|
key: "onKeyPress",
|
|
value: function onKeyPress(event) {
|
|
if (this.props.onKeyPress) {
|
|
this.props.onKeyPress(event);
|
|
}
|
|
|
|
if (this.props.keyfilter) {
|
|
KeyFilter.onKeyPress(event, this.props.keyfilter, this.props.validateOnly);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(event) {
|
|
var validatePattern = true;
|
|
|
|
if (this.props.keyfilter && this.props.validateOnly) {
|
|
validatePattern = KeyFilter.validate(event, this.props.keyfilter);
|
|
}
|
|
|
|
if (this.props.onInput) {
|
|
this.props.onInput(event, validatePattern);
|
|
}
|
|
|
|
if (!this.props.onChange) {
|
|
if (event.target.value.length > 0) DomHandler.addClass(event.target, 'p-filled');else DomHandler.removeClass(event.target, 'p-filled');
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateForwardRef",
|
|
value: function updateForwardRef() {
|
|
var ref = this.props.forwardRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.elementRef.current);
|
|
} else {
|
|
ref.current = this.elementRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateForwardRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$P({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.elementRef.current,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-inputtext p-component', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-filled': this.isFilled()
|
|
}, this.props.className);
|
|
var inputProps = ObjectUtils.findDiffKeys(this.props, InputTextComponent.defaultProps);
|
|
return /*#__PURE__*/React__default["default"].createElement("input", _extends({
|
|
ref: this.elementRef
|
|
}, inputProps, {
|
|
className: className,
|
|
onInput: this.onInput,
|
|
onKeyPress: this.onKeyPress
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return InputTextComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(InputTextComponent, "defaultProps", {
|
|
keyfilter: null,
|
|
validateOnly: false,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
onInput: null,
|
|
onKeyPress: null,
|
|
forwardRef: null
|
|
});
|
|
|
|
var InputText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(InputTextComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$2g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Ripple = /*#__PURE__*/function (_Component) {
|
|
_inherits(Ripple, _Component);
|
|
|
|
var _super = _createSuper$2g(Ripple);
|
|
|
|
function Ripple(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Ripple);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Ripple, [{
|
|
key: "getTarget",
|
|
value: function getTarget() {
|
|
return this.ink && this.ink.parentElement;
|
|
}
|
|
}, {
|
|
key: "bindEvents",
|
|
value: function bindEvents() {
|
|
if (this.target) {
|
|
this.target.addEventListener('mousedown', this.onMouseDown);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindEvents",
|
|
value: function unbindEvents() {
|
|
if (this.target) {
|
|
this.target.removeEventListener('mousedown', this.onMouseDown);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event) {
|
|
if (!this.ink || getComputedStyle(this.ink, null).display === 'none') {
|
|
return;
|
|
}
|
|
|
|
DomHandler.removeClass(this.ink, 'p-ink-active');
|
|
|
|
if (!DomHandler.getHeight(this.ink) && !DomHandler.getWidth(this.ink)) {
|
|
var d = Math.max(DomHandler.getOuterWidth(this.target), DomHandler.getOuterHeight(this.target));
|
|
this.ink.style.height = d + 'px';
|
|
this.ink.style.width = d + 'px';
|
|
}
|
|
|
|
var offset = DomHandler.getOffset(this.target);
|
|
var x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(this.ink) / 2;
|
|
var y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(this.ink) / 2;
|
|
this.ink.style.top = y + 'px';
|
|
this.ink.style.left = x + 'px';
|
|
DomHandler.addClass(this.ink, 'p-ink-active');
|
|
}
|
|
}, {
|
|
key: "onAnimationEnd",
|
|
value: function onAnimationEnd(event) {
|
|
DomHandler.removeClass(event.currentTarget, 'p-ink-active');
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.ink) {
|
|
this.target = this.getTarget();
|
|
this.bindEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
if (this.ink && !this.target) {
|
|
this.target = this.getTarget();
|
|
this.bindEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.ink) {
|
|
this.target = null;
|
|
this.unbindEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return PrimeReact.ripple ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this2.ink = el;
|
|
},
|
|
className: "p-ink",
|
|
onAnimationEnd: this.onAnimationEnd
|
|
}) : null;
|
|
}
|
|
}]);
|
|
|
|
return Ripple;
|
|
}(React.Component);
|
|
|
|
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 _createSuper$2f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2f(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2f() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ButtonComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(ButtonComponent, _Component);
|
|
|
|
var _super = _createSuper$2f(ButtonComponent);
|
|
|
|
function ButtonComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ButtonComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.elementRef = /*#__PURE__*/React.createRef(_this.props.forwardRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ButtonComponent, [{
|
|
key: "updateForwardRef",
|
|
value: function updateForwardRef() {
|
|
var ref = this.props.forwardRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.elementRef.current);
|
|
} else {
|
|
ref.current = this.elementRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isDisabled",
|
|
value: function isDisabled() {
|
|
return this.props.disabled || this.props.loading;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateForwardRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$O({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.elementRef.current,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderIcon",
|
|
value: function renderIcon() {
|
|
var icon = this.props.loading ? this.props.loadingIcon : this.props.icon;
|
|
var className = classNames('p-button-icon p-c', {
|
|
'p-button-loading-icon': this.props.loading,
|
|
'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
|
|
'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
|
|
'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
|
|
'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label
|
|
});
|
|
return IconUtils.getJSXIcon(icon, {
|
|
className: className
|
|
}, {
|
|
props: this.props
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel() {
|
|
if (this.props.label) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-button-label p-c"
|
|
}, this.props.label);
|
|
}
|
|
|
|
return !this.props.children && !this.props.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-button-label p-c",
|
|
dangerouslySetInnerHTML: {
|
|
__html: " "
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderBadge",
|
|
value: function renderBadge() {
|
|
if (this.props.badge) {
|
|
var badgeClassName = classNames('p-badge', this.props.badgeClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: badgeClassName
|
|
}, this.props.badge);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var disabled = this.isDisabled();
|
|
var className = classNames('p-button p-component', this.props.className, _defineProperty({
|
|
'p-button-icon-only': (this.props.icon || this.props.loading && this.props.loadingIcon) && !this.props.label,
|
|
'p-button-vertical': (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') && this.props.label,
|
|
'p-disabled': disabled,
|
|
'p-button-loading': this.props.loading,
|
|
'p-button-loading-label-only': this.props.loading && !this.props.icon && this.props.label
|
|
}, "p-button-loading-".concat(this.props.iconPos), this.props.loading && this.props.loadingIcon && this.props.label));
|
|
var icon = this.renderIcon();
|
|
var label = this.renderLabel();
|
|
var badge = this.renderBadge();
|
|
var buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);
|
|
return /*#__PURE__*/React__default["default"].createElement("button", _extends({
|
|
ref: this.elementRef
|
|
}, buttonProps, {
|
|
className: className,
|
|
disabled: disabled
|
|
}), icon, label, this.props.children, badge, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return ButtonComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ButtonComponent, "defaultProps", {
|
|
label: null,
|
|
icon: null,
|
|
iconPos: 'left',
|
|
badge: null,
|
|
badgeClassName: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
forwardRef: null,
|
|
disabled: false,
|
|
loading: false,
|
|
loadingIcon: 'pi pi-spinner pi-spin'
|
|
});
|
|
|
|
var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$2e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2e(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2e() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var VirtualScroller = /*#__PURE__*/function (_Component) {
|
|
_inherits(VirtualScroller, _Component);
|
|
|
|
var _super = _createSuper$2e(VirtualScroller);
|
|
|
|
function VirtualScroller(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, VirtualScroller);
|
|
|
|
_this = _super.call(this, props);
|
|
|
|
var isBoth = _this.isBoth();
|
|
|
|
_this.state = {
|
|
first: isBoth ? {
|
|
rows: 0,
|
|
cols: 0
|
|
} : 0,
|
|
last: isBoth ? {
|
|
rows: 0,
|
|
cols: 0
|
|
} : 0,
|
|
numItemsInViewport: isBoth ? {
|
|
rows: 0,
|
|
cols: 0
|
|
} : 0,
|
|
numToleratedItems: props.numToleratedItems,
|
|
loading: props.loading,
|
|
loaderArr: []
|
|
};
|
|
_this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
|
|
_this.lastScrollPos = isBoth ? {
|
|
top: 0,
|
|
left: 0
|
|
} : 0;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(VirtualScroller, [{
|
|
key: "scrollTo",
|
|
value: function scrollTo(options) {
|
|
this.el && this.el.scrollTo(options);
|
|
}
|
|
}, {
|
|
key: "scrollToIndex",
|
|
value: function scrollToIndex(index) {
|
|
var _this2 = this;
|
|
|
|
var behavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var first = this.state.first;
|
|
|
|
var _this$calculateNumIte = this.calculateNumItems(),
|
|
numToleratedItems = _this$calculateNumIte.numToleratedItems;
|
|
|
|
var itemSize = this.props.itemSize;
|
|
var contentPos = this.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 scrollTo = function scrollTo() {
|
|
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
return _this2.scrollTo({
|
|
left: left,
|
|
top: top,
|
|
behavior: behavior
|
|
});
|
|
};
|
|
|
|
if (isBoth) {
|
|
var newFirst = {
|
|
rows: calculateFirst(index[0], numToleratedItems[0]),
|
|
cols: calculateFirst(index[1], numToleratedItems[1])
|
|
};
|
|
|
|
if (newFirst.rows !== first.rows || newFirst.cols !== first.cols) {
|
|
scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));
|
|
this.setState({
|
|
first: newFirst
|
|
});
|
|
}
|
|
} else {
|
|
var _newFirst = calculateFirst(index, numToleratedItems);
|
|
|
|
if (_newFirst !== first) {
|
|
isHorizontal ? scrollTo(calculateCoord(_newFirst, itemSize, contentPos.left), 0) : scrollTo(0, calculateCoord(_newFirst, itemSize, contentPos.top));
|
|
this.setState({
|
|
first: _newFirst
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: function scrollInView(index, to) {
|
|
var _this3 = this;
|
|
|
|
var behavior = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
|
|
|
|
if (to) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
|
|
var _this$getRenderedRang = this.getRenderedRange(),
|
|
first = _this$getRenderedRang.first,
|
|
viewport = _this$getRenderedRang.viewport;
|
|
|
|
var itemSize = this.props.itemSize;
|
|
|
|
var scrollTo = function scrollTo() {
|
|
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
return _this3.scrollTo({
|
|
left: left,
|
|
top: top,
|
|
behavior: behavior
|
|
});
|
|
};
|
|
|
|
var isToStart = to === 'to-start';
|
|
var isToEnd = to === 'to-end';
|
|
|
|
if (isToStart) {
|
|
if (isBoth) {
|
|
if (viewport.first.rows - first.rows > index[0]) {
|
|
scrollTo(viewport.first.cols * itemSize, (viewport.first.rows - 1) * itemSize);
|
|
} else if (viewport.first.cols - first.cols > index[1]) {
|
|
scrollTo((viewport.first.cols - 1) * itemSize, viewport.first.rows * itemSize);
|
|
}
|
|
} else {
|
|
if (viewport.first - first > index) {
|
|
var pos = (viewport.first - 1) * itemSize;
|
|
isHorizontal ? scrollTo(pos, 0) : scrollTo(0, pos);
|
|
}
|
|
}
|
|
} else if (isToEnd) {
|
|
if (isBoth) {
|
|
if (viewport.last.rows - first.rows <= index[0] + 1) {
|
|
scrollTo(viewport.first.cols * itemSize, (viewport.first.rows + 1) * itemSize);
|
|
} else if (viewport.last.cols - first.cols <= index[1] + 1) {
|
|
scrollTo((viewport.first.cols + 1) * itemSize, viewport.first.rows * itemSize);
|
|
}
|
|
} else {
|
|
if (viewport.last - first <= index + 1) {
|
|
var _pos2 = (viewport.first + 1) * itemSize;
|
|
|
|
isHorizontal ? scrollTo(_pos2, 0) : scrollTo(0, _pos2);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
this.scrollToIndex(index, behavior);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getRows",
|
|
value: function getRows() {
|
|
return this.state.loading ? this.props.loaderDisabled ? this.state.loaderArr : [] : this.loadedItems();
|
|
}
|
|
}, {
|
|
key: "getColumns",
|
|
value: function getColumns() {
|
|
if (this.props.columns) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
|
|
if (isBoth || isHorizontal) {
|
|
return this.state.loading && this.props.loaderDisabled ? isBoth ? this.state.loaderArr[0] : this.state.loaderArr : this.props.columns.slice(isBoth ? this.state.first.cols : this.state.first, isBoth ? this.state.last.cols : this.state.last);
|
|
}
|
|
}
|
|
|
|
return this.props.columns;
|
|
}
|
|
}, {
|
|
key: "getRenderedRange",
|
|
value: function getRenderedRange() {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var _this$state = this.state,
|
|
first = _this$state.first,
|
|
last = _this$state.last,
|
|
numItemsInViewport = _this$state.numItemsInViewport;
|
|
var itemSize = this.props.itemSize;
|
|
|
|
var calculateFirstInViewport = function calculateFirstInViewport(_pos, _size) {
|
|
return Math.floor(_pos / (_size || _pos));
|
|
};
|
|
|
|
var firstInViewport = first;
|
|
var lastInViewport = 0;
|
|
|
|
if (this.el) {
|
|
var scrollTop = this.el.scrollTop;
|
|
var scrollLeft = this.el.scrollLeft;
|
|
|
|
if (isBoth) {
|
|
firstInViewport = {
|
|
rows: calculateFirstInViewport(scrollTop, itemSize[0]),
|
|
cols: calculateFirstInViewport(scrollLeft, itemSize[1])
|
|
};
|
|
lastInViewport = {
|
|
rows: firstInViewport.rows + numItemsInViewport.rows,
|
|
cols: firstInViewport.cols + numItemsInViewport.cols
|
|
};
|
|
} else {
|
|
var scrollPos = isHorizontal ? scrollLeft : scrollTop;
|
|
firstInViewport = calculateFirstInViewport(scrollPos, itemSize);
|
|
lastInViewport = firstInViewport + numItemsInViewport;
|
|
}
|
|
}
|
|
|
|
return {
|
|
first: first,
|
|
last: last,
|
|
viewport: {
|
|
first: firstInViewport,
|
|
last: lastInViewport
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
value: function isVertical() {
|
|
return this.props.orientation === 'vertical';
|
|
}
|
|
}, {
|
|
key: "isHorizontal",
|
|
value: function isHorizontal() {
|
|
return this.props.orientation === 'horizontal';
|
|
}
|
|
}, {
|
|
key: "isBoth",
|
|
value: function isBoth() {
|
|
return this.props.orientation === 'both';
|
|
}
|
|
}, {
|
|
key: "calculateNumItems",
|
|
value: function calculateNumItems() {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var itemSize = this.props.itemSize;
|
|
var contentPos = this.getContentPosition();
|
|
var contentWidth = this.el ? this.el.offsetWidth - contentPos.left : 0;
|
|
var contentHeight = this.el ? this.el.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 = isBoth ? {
|
|
rows: calculateNumItemsInViewport(contentHeight, itemSize[0]),
|
|
cols: calculateNumItemsInViewport(contentWidth, itemSize[1])
|
|
} : calculateNumItemsInViewport(isHorizontal ? contentWidth : contentHeight, itemSize);
|
|
var numToleratedItems = this.state.numToleratedItems || (isBoth ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
|
|
return {
|
|
numItemsInViewport: numItemsInViewport,
|
|
numToleratedItems: numToleratedItems
|
|
};
|
|
}
|
|
}, {
|
|
key: "calculateOptions",
|
|
value: function calculateOptions() {
|
|
var _this4 = this;
|
|
|
|
var isBoth = this.isBoth();
|
|
var first = this.state.first;
|
|
|
|
var _this$calculateNumIte2 = this.calculateNumItems(),
|
|
numItemsInViewport = _this$calculateNumIte2.numItemsInViewport,
|
|
numToleratedItems = _this$calculateNumIte2.numToleratedItems;
|
|
|
|
var calculateLast = function calculateLast(_first, _num, _numT, _isCols) {
|
|
return _this4.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
|
|
};
|
|
|
|
var last = isBoth ? {
|
|
rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]),
|
|
cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true)
|
|
} : calculateLast(first, numItemsInViewport, numToleratedItems);
|
|
var state = {
|
|
numItemsInViewport: numItemsInViewport,
|
|
last: last,
|
|
numToleratedItems: numToleratedItems
|
|
};
|
|
|
|
if (this.props.showLoader) {
|
|
state['loaderArr'] = isBoth ? Array.from({
|
|
length: numItemsInViewport.rows
|
|
}).map(function () {
|
|
return Array.from({
|
|
length: numItemsInViewport.cols
|
|
});
|
|
}) : Array.from({
|
|
length: numItemsInViewport
|
|
});
|
|
}
|
|
|
|
this.setState(state, function () {
|
|
if (_this4.props.lazy) {
|
|
_this4.props.onLazyLoad && _this4.props.onLazyLoad({
|
|
first: _this4.state.first,
|
|
last: _this4.state.last
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "getLast",
|
|
value: function getLast() {
|
|
var last = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
var isCols = arguments.length > 1 ? arguments[1] : undefined;
|
|
|
|
if (this.props.items) {
|
|
return Math.min(isCols ? (this.props.columns || this.props.items[0]).length : this.props.items.length, last);
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
}, {
|
|
key: "getContentPosition",
|
|
value: function getContentPosition() {
|
|
if (this.content) {
|
|
var style = getComputedStyle(this.content);
|
|
var left = parseInt(style.paddingLeft, 10) + Math.max(parseInt(style.left, 10), 0);
|
|
var right = parseInt(style.paddingRight, 10) + Math.max(parseInt(style.right, 10), 0);
|
|
var top = parseInt(style.paddingTop, 10) + Math.max(parseInt(style.top, 10), 0);
|
|
var bottom = parseInt(style.paddingBottom, 10) + Math.max(parseInt(style.bottom, 10), 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
|
|
};
|
|
}
|
|
}, {
|
|
key: "setSize",
|
|
value: function setSize() {
|
|
var _this5 = this;
|
|
|
|
if (this.el) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var parentElement = this.el.parentElement;
|
|
var width = this.props.scrollWidth || "".concat(this.el.offsetWidth || parentElement.offsetWidth, "px");
|
|
var height = this.props.scrollHeight || "".concat(this.el.offsetHeight || parentElement.offsetHeight, "px");
|
|
|
|
var setProp = function setProp(_name, _value) {
|
|
return _this5.el.style[_name] = _value;
|
|
};
|
|
|
|
if (isBoth || isHorizontal) {
|
|
setProp('height', height);
|
|
setProp('width', width);
|
|
} else {
|
|
setProp('height', height);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "setSpacerSize",
|
|
value: function setSpacerSize() {
|
|
var _this6 = this;
|
|
|
|
var items = this.props.items;
|
|
|
|
if (this.spacer && items) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var itemSize = this.props.itemSize;
|
|
var contentPos = this.getContentPosition();
|
|
|
|
var setProp = function setProp(_name, _value, _size) {
|
|
var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
|
|
|
return _this6.spacer.style[_name] = (_value || []).length * _size + _cpos + 'px';
|
|
};
|
|
|
|
if (isBoth) {
|
|
setProp('height', items, itemSize[0], contentPos.y);
|
|
setProp('width', this.props.columns || items[1], itemSize[1], contentPos.x);
|
|
} else {
|
|
isHorizontal ? setProp('width', this.props.columns || items, itemSize, contentPos.x) : setProp('height', items, itemSize, contentPos.y);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "setContentPosition",
|
|
value: function setContentPosition(pos) {
|
|
var _this7 = this;
|
|
|
|
if (this.content) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var first = pos ? pos.first : this.state.first;
|
|
var itemSize = this.props.itemSize;
|
|
|
|
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;
|
|
|
|
_this7.sticky && (_this7.sticky.style.top = "-".concat(_y, "px"));
|
|
_this7.content.style.transform = "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)");
|
|
};
|
|
|
|
if (isBoth) {
|
|
setTransform(calculateTranslateVal(first.cols, itemSize[1]), calculateTranslateVal(first.rows, itemSize[0]));
|
|
} else {
|
|
var translateVal = calculateTranslateVal(first, itemSize);
|
|
isHorizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onScrollPositionChange",
|
|
value: function onScrollPositionChange(event) {
|
|
var _this8 = this;
|
|
|
|
var target = event.target;
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var _this$state2 = this.state,
|
|
first = _this$state2.first,
|
|
last = _this$state2.last,
|
|
numItemsInViewport = _this$state2.numItemsInViewport,
|
|
numToleratedItems = _this$state2.numToleratedItems;
|
|
var itemSize = this.props.itemSize;
|
|
var contentPos = this.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 _this8.getLast(lastValue, _isCols);
|
|
};
|
|
|
|
var scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
|
|
var scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
|
|
var newFirst = 0;
|
|
var newLast = last;
|
|
var isRangeChanged = false;
|
|
|
|
if (isBoth) {
|
|
var isScrollDown = this.lastScrollPos.top <= scrollTop;
|
|
var isScrollRight = this.lastScrollPos.left <= scrollLeft;
|
|
var currentIndex = {
|
|
rows: calculateCurrentIndex(scrollTop, itemSize[0]),
|
|
cols: calculateCurrentIndex(scrollLeft, itemSize[1])
|
|
};
|
|
var triggerIndex = {
|
|
rows: calculateTriggerIndex(currentIndex.rows, first.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0], isScrollDown),
|
|
cols: calculateTriggerIndex(currentIndex.cols, first.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], isScrollRight)
|
|
};
|
|
newFirst = {
|
|
rows: calculateFirst(currentIndex.rows, triggerIndex.rows, first.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0], isScrollDown),
|
|
cols: calculateFirst(currentIndex.cols, triggerIndex.cols, first.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], isScrollRight)
|
|
};
|
|
newLast = {
|
|
rows: calculateLast(currentIndex.rows, newFirst.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0]),
|
|
cols: calculateLast(currentIndex.cols, newFirst.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], true)
|
|
};
|
|
isRangeChanged = newFirst.rows !== first.rows && newLast.rows !== last.rows || newFirst.cols !== first.cols && newLast.cols !== last.cols;
|
|
this.lastScrollPos = {
|
|
top: scrollTop,
|
|
left: scrollLeft
|
|
};
|
|
} else {
|
|
var scrollPos = isHorizontal ? scrollLeft : scrollTop;
|
|
var isScrollDownOrRight = this.lastScrollPos <= scrollPos;
|
|
|
|
var _currentIndex2 = calculateCurrentIndex(scrollPos, itemSize);
|
|
|
|
var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, first, last, numItemsInViewport, numToleratedItems, isScrollDownOrRight);
|
|
|
|
newFirst = calculateFirst(_currentIndex2, _triggerIndex2, first, last, numItemsInViewport, numToleratedItems, isScrollDownOrRight);
|
|
newLast = calculateLast(_currentIndex2, newFirst, last, numItemsInViewport, numToleratedItems);
|
|
isRangeChanged = newFirst !== first && newLast !== last;
|
|
this.lastScrollPos = scrollPos;
|
|
}
|
|
|
|
return {
|
|
first: newFirst,
|
|
last: newLast,
|
|
isRangeChanged: isRangeChanged
|
|
};
|
|
}
|
|
}, {
|
|
key: "onScrollChange",
|
|
value: function onScrollChange(event) {
|
|
var _this9 = this;
|
|
|
|
var _this$onScrollPositio = this.onScrollPositionChange(event),
|
|
first = _this$onScrollPositio.first,
|
|
last = _this$onScrollPositio.last,
|
|
isRangeChanged = _this$onScrollPositio.isRangeChanged;
|
|
|
|
if (isRangeChanged) {
|
|
var newState = {
|
|
first: first,
|
|
last: last
|
|
};
|
|
this.setContentPosition(newState);
|
|
this.setState(newState, function () {
|
|
_this9.props.onScrollIndexChange && _this9.props.onScrollIndexChange(newState);
|
|
|
|
if (_this9.props.lazy) {
|
|
_this9.props.onLazyLoad && _this9.props.onLazyLoad(newState);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onScroll",
|
|
value: function onScroll(event) {
|
|
var _this10 = this;
|
|
|
|
this.props.onScroll && this.props.onScroll(event);
|
|
|
|
if (this.props.delay) {
|
|
if (this.scrollTimeout) {
|
|
clearTimeout(this.scrollTimeout);
|
|
}
|
|
|
|
if (!this.state.loading && this.props.showLoader) {
|
|
var _this$onScrollPositio2 = this.onScrollPositionChange(event),
|
|
changed = _this$onScrollPositio2.isRangeChanged;
|
|
|
|
changed && this.setState({
|
|
loading: true
|
|
});
|
|
}
|
|
|
|
this.scrollTimeout = setTimeout(function () {
|
|
_this10.onScrollChange(event);
|
|
|
|
if (_this10.state.loading && _this10.props.showLoader && !_this10.props.lazy) {
|
|
_this10.setState({
|
|
loading: false
|
|
});
|
|
}
|
|
}, this.props.delay);
|
|
} else {
|
|
this.onScrollChange(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getOptions",
|
|
value: function getOptions(renderedIndex) {
|
|
var first = this.state.first;
|
|
var count = (this.props.items || []).length;
|
|
var index = this.isBoth() ? first.rows + renderedIndex : first + renderedIndex;
|
|
return {
|
|
index: index,
|
|
count: count,
|
|
first: index === 0,
|
|
last: index === count - 1,
|
|
even: index % 2 === 0,
|
|
odd: index % 2 !== 0,
|
|
props: this.props
|
|
};
|
|
}
|
|
}, {
|
|
key: "loaderOptions",
|
|
value: function loaderOptions(index, extOptions) {
|
|
var count = this.state.loaderArr.length;
|
|
return _objectSpread$N({
|
|
index: index,
|
|
count: count,
|
|
first: index === 0,
|
|
last: index === count - 1,
|
|
even: index % 2 === 0,
|
|
odd: index % 2 !== 0,
|
|
props: this.props
|
|
}, extOptions);
|
|
}
|
|
}, {
|
|
key: "loadedItems",
|
|
value: function loadedItems() {
|
|
var _this11 = this;
|
|
|
|
var items = this.props.items;
|
|
|
|
if (items && !this.state.loading) {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var _this$state3 = this.state,
|
|
first = _this$state3.first,
|
|
last = _this$state3.last;
|
|
if (isBoth) return items.slice(first.rows, last.rows).map(function (item) {
|
|
return _this11.props.columns ? item : item.slice(first.cols, last.cols);
|
|
});else if (isHorizontal && this.props.columns) return items;else return items.slice(first, last);
|
|
}
|
|
|
|
return [];
|
|
}
|
|
}, {
|
|
key: "isPropChanged",
|
|
value: function isPropChanged(prevProps) {
|
|
var _this12 = this;
|
|
|
|
var props = ['itemSize', 'scrollHeight'];
|
|
return props.some(function (p) {
|
|
return !ObjectUtils.equals(prevProps[p], _this12.props[p]);
|
|
});
|
|
}
|
|
}, {
|
|
key: "init",
|
|
value: function init() {
|
|
this.setSize();
|
|
this.calculateOptions();
|
|
this.setSpacerSize();
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.init();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (!prevProps.items || prevProps.items.length !== (this.props.items || []).length || this.isPropChanged(prevProps)) {
|
|
this.init();
|
|
}
|
|
|
|
if (this.props.lazy && prevProps.loading !== this.props.loading && this.state.loading !== this.props.loading) {
|
|
this.setState({
|
|
loading: this.props.loading
|
|
});
|
|
}
|
|
|
|
if (prevProps.orientation !== this.props.orientation) {
|
|
this.lastScrollPos = this.isBoth() ? {
|
|
top: 0,
|
|
left: 0
|
|
} : 0;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderLoaderItem",
|
|
value: function renderLoaderItem(index) {
|
|
var extOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
var options = this.loaderOptions(index, extOptions);
|
|
var content = ObjectUtils.getJSXElement(this.props.loadingTemplate, options);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: index
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
var _this13 = this;
|
|
|
|
if (!this.props.loaderDisabled && this.props.showLoader && this.state.loading) {
|
|
var className = classNames('p-virtualscroller-loader', {
|
|
'p-component-overlay': !this.props.loadingTemplate
|
|
});
|
|
var content = /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-virtualscroller-loading-icon pi pi-spinner pi-spin"
|
|
});
|
|
|
|
if (this.props.loadingTemplate) {
|
|
var isBoth = this.isBoth();
|
|
var numItemsInViewport = this.state.numItemsInViewport;
|
|
content = this.state.loaderArr.map(function (_, index) {
|
|
return _this13.renderLoaderItem(index, isBoth && {
|
|
numCols: numItemsInViewport.cols
|
|
});
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderSpacer",
|
|
value: function renderSpacer() {
|
|
var _this14 = this;
|
|
|
|
if (this.props.showSpacer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this14.spacer = el;
|
|
},
|
|
className: "p-virtualscroller-spacer"
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
var options = this.getOptions(index);
|
|
var content = ObjectUtils.getJSXElement(this.props.itemTemplate, item, options);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: options.index
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems(loadedItems) {
|
|
var _this15 = this;
|
|
|
|
return loadedItems.map(function (item, index) {
|
|
return _this15.renderItem(item, index);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this16 = this;
|
|
|
|
var loadedItems = this.loadedItems();
|
|
var items = this.renderItems(loadedItems);
|
|
var className = classNames('p-virtualscroller-content', {
|
|
'p-virtualscroller-loading': this.state.loading
|
|
});
|
|
var content = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
ref: function ref(el) {
|
|
return _this16.content = el;
|
|
}
|
|
}, items);
|
|
|
|
if (this.props.contentTemplate) {
|
|
var defaultOptions = {
|
|
className: className,
|
|
contentRef: function contentRef(el) {
|
|
return _this16.content = el;
|
|
},
|
|
spacerRef: function spacerRef(el) {
|
|
return _this16.spacer = el;
|
|
},
|
|
stickyRef: function stickyRef(el) {
|
|
return _this16.sticky = el;
|
|
},
|
|
items: loadedItems,
|
|
getItemOptions: function getItemOptions(index) {
|
|
return _this16.getOptions(index);
|
|
},
|
|
children: items,
|
|
element: content,
|
|
props: this.props,
|
|
loading: this.state.loading,
|
|
getLoaderOptions: function getLoaderOptions(index, ext) {
|
|
return _this16.loaderOptions(index, ext);
|
|
},
|
|
loadingTemplate: this.props.loadingTemplate,
|
|
itemSize: this.props.itemSize,
|
|
rows: this.getRows(),
|
|
columns: this.getColumns(),
|
|
vertical: this.isVertical(),
|
|
horizontal: this.isHorizontal(),
|
|
both: this.isBoth()
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.contentTemplate, defaultOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this17 = this;
|
|
|
|
if (this.props.disabled) {
|
|
var content = ObjectUtils.getJSXElement(this.props.contentTemplate, {
|
|
items: this.props.items,
|
|
rows: this.props.items,
|
|
columns: this.props.columns
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, this.props.children, content);
|
|
} else {
|
|
var isBoth = this.isBoth();
|
|
var isHorizontal = this.isHorizontal();
|
|
var className = classNames('p-virtualscroller', {
|
|
'p-both-scroll': isBoth,
|
|
'p-horizontal-scroll': isHorizontal
|
|
}, this.props.className);
|
|
var loader = this.renderLoader();
|
|
|
|
var _content = this.renderContent();
|
|
|
|
var spacer = this.renderSpacer();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this17.el = el;
|
|
},
|
|
className: className,
|
|
tabIndex: 0,
|
|
style: this.props.style,
|
|
onScroll: this.onScroll
|
|
}, _content, spacer, loader);
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return VirtualScroller;
|
|
}(React.Component);
|
|
|
|
_defineProperty(VirtualScroller, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
items: null,
|
|
itemSize: 0,
|
|
scrollHeight: null,
|
|
scrollWidth: null,
|
|
orientation: 'vertical',
|
|
numToleratedItems: null,
|
|
delay: 0,
|
|
lazy: false,
|
|
disabled: false,
|
|
loaderDisabled: false,
|
|
columns: null,
|
|
loading: false,
|
|
showSpacer: true,
|
|
showLoader: false,
|
|
loadingTemplate: null,
|
|
itemTemplate: null,
|
|
contentTemplate: null,
|
|
onScroll: null,
|
|
onScrollIndexChange: null,
|
|
onLazyLoad: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$2d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var AutoCompletePanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(AutoCompletePanelComponent, _Component);
|
|
|
|
var _super = _createSuper$2d(AutoCompletePanelComponent);
|
|
|
|
function AutoCompletePanelComponent() {
|
|
_classCallCheck(this, AutoCompletePanelComponent);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(AutoCompletePanelComponent, [{
|
|
key: "getOptionGroupRenderKey",
|
|
value: function getOptionGroupRenderKey(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "renderGroupChildren",
|
|
value: function renderGroupChildren(optionGroup, i) {
|
|
var _this = this;
|
|
|
|
var groupChildren = this.props.getOptionGroupChildren(optionGroup);
|
|
return groupChildren.map(function (item, j) {
|
|
var itemContent = _this.props.itemTemplate ? ObjectUtils.getJSXElement(_this.props.itemTemplate, item, j) : _this.props.field ? ObjectUtils.resolveFieldData(item, _this.props.field) : item;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: j + '_item',
|
|
role: "option",
|
|
"aria-selected": _this.props.ariaSelected === item,
|
|
className: "p-autocomplete-item",
|
|
onClick: function onClick(e) {
|
|
return _this.props.onItemClick(e, item);
|
|
},
|
|
"data-group": i,
|
|
"data-index": j
|
|
}, itemContent, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(suggestion, index) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var groupContent = this.props.optionGroupTemplate ? ObjectUtils.getJSXElement(this.props.optionGroupTemplate, suggestion, index) : this.props.getOptionGroupLabel(suggestion);
|
|
var groupChildrenContent = this.renderGroupChildren(suggestion, index);
|
|
var key = index + '_' + this.getOptionGroupRenderKey(suggestion);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: key
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-autocomplete-item-group"
|
|
}, groupContent), groupChildrenContent);
|
|
} else {
|
|
var itemContent = this.props.itemTemplate ? ObjectUtils.getJSXElement(this.props.itemTemplate, suggestion, index) : this.props.field ? ObjectUtils.resolveFieldData(suggestion, this.props.field) : suggestion;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index + '_item',
|
|
role: "option",
|
|
"aria-selected": this.props.ariaSelected === suggestion,
|
|
className: "p-autocomplete-item",
|
|
onClick: function onClick(e) {
|
|
return _this2.props.onItemClick(e, suggestion);
|
|
}
|
|
}, itemContent, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.suggestions) {
|
|
return this.props.suggestions.map(function (suggestion, index) {
|
|
return _this3.renderItem(suggestion, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.virtualScrollerOptions) {
|
|
var virtualScrollerProps = _objectSpread$M(_objectSpread$M({}, this.props.virtualScrollerOptions), {
|
|
style: _objectSpread$M(_objectSpread$M({}, this.props.virtualScrollerOptions.style), {
|
|
height: this.props.scrollHeight
|
|
}),
|
|
items: this.props.suggestions,
|
|
itemTemplate: function itemTemplate(item, options) {
|
|
return item && _this4.renderItem(item, options.index);
|
|
},
|
|
contentTemplate: function contentTemplate(options) {
|
|
var className = classNames('p-autocomplete-items', options.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: options.contentRef,
|
|
className: className,
|
|
role: "listbox",
|
|
id: _this4.props.listId
|
|
}, options.children);
|
|
}
|
|
});
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(VirtualScroller, _extends({
|
|
ref: this.props.virtualScrollerRef
|
|
}, virtualScrollerProps));
|
|
} else {
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-autocomplete-items",
|
|
role: "listbox",
|
|
id: this.props.listId
|
|
}, items);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var panelClassName = classNames('p-autocomplete-panel p-component', this.props.panelClassName);
|
|
|
|
var panelStyle = _objectSpread$M({
|
|
maxHeight: this.props.scrollHeight
|
|
}, this.props.panelStyle);
|
|
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.props.onEnter,
|
|
onEntering: this.props.onEntering,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: panelClassName,
|
|
style: panelStyle,
|
|
onClick: this.props.onClick
|
|
}, content));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return AutoCompletePanelComponent;
|
|
}(React.Component);
|
|
|
|
var AutoCompletePanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(AutoCompletePanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
var OverlayService = EventBus();
|
|
|
|
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; }
|
|
|
|
function _createForOfIteratorHelper$g(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$g(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$g(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$g(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$g(o, minLen); }
|
|
|
|
function _arrayLikeToArray$g(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 _createSuper$2c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var AutoComplete = /*#__PURE__*/function (_Component) {
|
|
_inherits(AutoComplete, _Component);
|
|
|
|
var _super = _createSuper$2c(AutoComplete);
|
|
|
|
function AutoComplete(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, AutoComplete);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
id: _this.props.id,
|
|
searching: false,
|
|
focused: false,
|
|
overlayVisible: false
|
|
};
|
|
_this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onDropdownClick = _this.onDropdownClick.bind(_assertThisInitialized(_this));
|
|
_this.onMultiContainerClick = _this.onMultiContainerClick.bind(_assertThisInitialized(_this));
|
|
_this.onMultiInputFocus = _this.onMultiInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onMultiInputBlur = _this.onMultiInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.selectItem = _this.selectItem.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupLabel = _this.getOptionGroupLabel.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupChildren = _this.getOptionGroupChildren.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntering = _this.onOverlayEntering.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.virtualScrollerRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(AutoComplete, [{
|
|
key: "onInputChange",
|
|
value: function onInputChange(event) {
|
|
var _this2 = this;
|
|
|
|
//Cancel the search request if user types within the timeout
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
var query = event.target.value;
|
|
|
|
if (!this.props.multiple) {
|
|
this.updateModel(event, query);
|
|
}
|
|
|
|
if (query.length === 0) {
|
|
this.hideOverlay();
|
|
|
|
if (this.props.onClear) {
|
|
this.props.onClear(event);
|
|
}
|
|
} else {
|
|
if (query.length >= this.props.minLength) {
|
|
this.timeout = setTimeout(function () {
|
|
_this2.search(event, query, 'input');
|
|
}, this.props.delay);
|
|
} else {
|
|
this.hideOverlay();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "search",
|
|
value: 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 (this.props.completeMethod) {
|
|
this.setState({
|
|
searching: true
|
|
});
|
|
this.props.completeMethod({
|
|
originalEvent: event,
|
|
query: query
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "selectItem",
|
|
value: function selectItem(event, option, preventInputFocus) {
|
|
if (this.props.multiple) {
|
|
this.inputRef.current.value = '';
|
|
|
|
if (!this.isSelected(option)) {
|
|
var newValue = this.props.value ? [].concat(_toConsumableArray(this.props.value), [option]) : [option];
|
|
this.updateModel(event, newValue);
|
|
}
|
|
} else {
|
|
this.updateInputField(option);
|
|
this.updateModel(event, option);
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
value: option
|
|
});
|
|
}
|
|
|
|
if (!preventInputFocus) {
|
|
this.inputRef.current.focus();
|
|
this.hideOverlay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(event, value) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.state.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
|
|
this.ariaSelected = value;
|
|
}
|
|
}, {
|
|
key: "formatValue",
|
|
value: function formatValue(value) {
|
|
if (value) {
|
|
if (this.props.selectedItemTemplate && (this.props.multiple ? this.isSelected(value) : this.findOptionIndex(value) > -1)) {
|
|
var resolvedFieldData = ObjectUtils.getJSXElement(this.props.selectedItemTemplate, value);
|
|
return resolvedFieldData ? resolvedFieldData : value;
|
|
} else if (this.props.field) {
|
|
var _resolvedFieldData = ObjectUtils.resolveFieldData(value, this.props.field);
|
|
|
|
return _resolvedFieldData !== null && _resolvedFieldData !== undefined ? _resolvedFieldData : value;
|
|
} else return value;
|
|
} else return '';
|
|
}
|
|
}, {
|
|
key: "updateInputField",
|
|
value: function updateInputField(value) {
|
|
var formattedValue = this.formatValue(value);
|
|
this.inputRef.current.value = formattedValue;
|
|
}
|
|
}, {
|
|
key: "showOverlay",
|
|
value: function showOverlay() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hideOverlay",
|
|
value: function hideOverlay() {
|
|
this.setState({
|
|
overlayVisible: false,
|
|
searching: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntering",
|
|
value: function onOverlayEntering() {
|
|
if (this.props.autoHighlight && this.props.suggestions && this.props.suggestions.length) {
|
|
DomHandler.addClass(this.overlayRef.current.firstChild.firstChild, 'p-highlight');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
var target = this.props.multiple ? this.multiContainer : this.inputRef.current;
|
|
DomHandler.alignOverlay(this.overlayRef.current, target, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDropdownClick",
|
|
value: function onDropdownClick(event) {
|
|
this.inputRef.current.focus();
|
|
if (this.props.dropdownMode === 'blank') this.search(event, '', 'dropdown');else if (this.props.dropdownMode === 'current') this.search(event, this.inputRef.current.value, 'dropdown');
|
|
|
|
if (this.props.onDropdownClick) {
|
|
this.props.onDropdownClick({
|
|
originalEvent: event,
|
|
query: this.inputRef.current.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "removeItem",
|
|
value: function removeItem(event, index) {
|
|
var removedValue = this.props.value[index];
|
|
var newValue = this.props.value.filter(function (val, i) {
|
|
return index !== i;
|
|
});
|
|
this.updateModel(event, newValue);
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
value: removedValue
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
if (this.state.overlayVisible) {
|
|
var highlightItem = DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (highlightItem) {
|
|
var nextElement = this.findNextItem(highlightItem);
|
|
|
|
if (nextElement) {
|
|
DomHandler.addClass(nextElement, 'p-highlight');
|
|
DomHandler.removeClass(highlightItem, 'p-highlight');
|
|
DomHandler.scrollInView(this.overlayRef.current, nextElement);
|
|
}
|
|
} else {
|
|
highlightItem = DomHandler.findSingle(this.overlayRef.current, 'li');
|
|
|
|
if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
|
|
highlightItem = this.findNextItem(highlightItem);
|
|
}
|
|
|
|
if (highlightItem) {
|
|
DomHandler.addClass(highlightItem, 'p-highlight');
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
if (highlightItem) {
|
|
var previousElement = this.findPrevItem(highlightItem);
|
|
|
|
if (previousElement) {
|
|
DomHandler.addClass(previousElement, 'p-highlight');
|
|
DomHandler.removeClass(highlightItem, 'p-highlight');
|
|
DomHandler.scrollInView(this.overlayRef.current, previousElement);
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
if (highlightItem) {
|
|
this.selectHighlightItem(event, highlightItem);
|
|
this.hideOverlay();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//escape
|
|
|
|
case 27:
|
|
this.hideOverlay();
|
|
event.preventDefault();
|
|
break;
|
|
//tab
|
|
|
|
case 9:
|
|
if (highlightItem) {
|
|
this.selectHighlightItem(event, highlightItem);
|
|
}
|
|
|
|
this.hideOverlay();
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.multiple) {
|
|
switch (event.which) {
|
|
//backspace
|
|
case 8:
|
|
if (this.props.value && this.props.value.length && !this.inputRef.current.value) {
|
|
var removedValue = this.props.value[this.props.value.length - 1];
|
|
var newValue = this.props.value.slice(0, -1);
|
|
this.updateModel(event, newValue);
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
value: removedValue
|
|
});
|
|
}
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "selectHighlightItem",
|
|
value: function selectHighlightItem(event, item) {
|
|
if (this.props.optionGroupLabel) {
|
|
var optionGroup = this.props.suggestions[item.dataset.group];
|
|
this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
|
|
} else {
|
|
this.selectItem(event, this.props.suggestions[DomHandler.index(item)]);
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
return nextItem ? DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? this.findNextItem(nextItem) : nextItem : null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
return prevItem ? DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? this.findPrevItem(prevItem) : prevItem : null;
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus(event) {
|
|
var _this3 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this3.props.onFocus) {
|
|
_this3.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "forceItemSelection",
|
|
value: function forceItemSelection(event) {
|
|
var valid = false;
|
|
var inputValue = event.target.value.trim();
|
|
|
|
if (this.props.suggestions) {
|
|
var _iterator = _createForOfIteratorHelper$g(this.props.suggestions),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var item = _step.value;
|
|
var itemValue = this.props.field ? ObjectUtils.resolveFieldData(item, this.props.field) : item;
|
|
|
|
if (itemValue && inputValue === itemValue.trim()) {
|
|
valid = true;
|
|
this.selectItem(event, item, true);
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
|
|
if (!valid) {
|
|
this.inputRef.current.value = '';
|
|
this.updateModel(event, null);
|
|
|
|
if (this.props.onClear) {
|
|
this.props.onClear(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur(event) {
|
|
var _this4 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this4.props.forceSelection) {
|
|
_this4.forceItemSelection(event);
|
|
}
|
|
|
|
if (_this4.props.onBlur) {
|
|
_this4.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onMultiContainerClick",
|
|
value: function onMultiContainerClick(event) {
|
|
this.inputRef.current.focus();
|
|
|
|
if (this.props.onClick) {
|
|
this.props.onClick(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMultiInputFocus",
|
|
value: function onMultiInputFocus(event) {
|
|
this.onInputFocus(event);
|
|
DomHandler.addClass(this.multiContainer, 'p-focus');
|
|
}
|
|
}, {
|
|
key: "onMultiInputBlur",
|
|
value: function onMultiInputBlur(event) {
|
|
this.onInputBlur(event);
|
|
DomHandler.removeClass(this.multiContainer, 'p-focus');
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(val) {
|
|
var selected = false;
|
|
|
|
if (this.props.value && this.props.value.length) {
|
|
for (var i = 0; i < this.props.value.length; i++) {
|
|
if (ObjectUtils.equals(this.props.value[i], val)) {
|
|
selected = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return selected;
|
|
}
|
|
}, {
|
|
key: "findOptionIndex",
|
|
value: function findOptionIndex(option) {
|
|
var index = -1;
|
|
|
|
if (this.props.suggestions) {
|
|
for (var i = 0; i < this.props.suggestions.length; i++) {
|
|
if (ObjectUtils.equals(option, this.props.suggestions[i])) {
|
|
index = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return index;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupLabel",
|
|
value: function getOptionGroupLabel(optionGroup) {
|
|
return this.props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel) : optionGroup;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (event.which === 3) {
|
|
// right click
|
|
return;
|
|
}
|
|
|
|
if (_this5.state.overlayVisible && _this5.isOutsideClicked(event)) {
|
|
_this5.hideOverlay();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this6 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this6.state.overlayVisible) {
|
|
_this6.hideOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this7 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this7.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this7.hideOverlay();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && this.overlayRef && this.overlayRef.current && !this.overlayRef.current.contains(event.target) && !this.isInputClicked(event);
|
|
}
|
|
}, {
|
|
key: "isInputClicked",
|
|
value: function isInputClicked(event) {
|
|
if (this.props.multiple) return event.target === this.multiContainer || this.multiContainer.contains(event.target);else return event.target === this.inputRef.current;
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
|
|
if (this.props.autoFocus && this.inputRef && this.inputRef.current) {
|
|
this.inputRef.current.focus();
|
|
}
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.suggestions !== this.props.suggestions && this.state.searching) {
|
|
if (this.props.suggestions && this.props.suggestions.length) {
|
|
this.showOverlay();
|
|
} else {
|
|
this.hideOverlay();
|
|
}
|
|
|
|
this.setState({
|
|
searching: false
|
|
});
|
|
}
|
|
|
|
if (this.inputRef && this.inputRef.current && !this.props.multiple) {
|
|
this.updateInputField(this.props.value);
|
|
}
|
|
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$L({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSimpleAutoComplete",
|
|
value: function renderSimpleAutoComplete() {
|
|
var inputClassName = classNames('p-autocomplete-input', this.props.inputClassName, {
|
|
'p-autocomplete-dd-input': this.props.dropdown
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
ref: this.inputRef,
|
|
id: this.props.inputId,
|
|
type: this.props.type,
|
|
name: this.props.name,
|
|
defaultValue: this.formatValue(this.props.value),
|
|
role: "searchbox",
|
|
"aria-autocomplete": "list",
|
|
"aria-controls": this.state.id + '_list',
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
className: inputClassName,
|
|
style: this.props.inputStyle,
|
|
autoComplete: "off",
|
|
readOnly: this.props.readOnly,
|
|
disabled: this.props.disabled,
|
|
placeholder: this.props.placeholder,
|
|
size: this.props.size,
|
|
maxLength: this.props.maxLength,
|
|
tabIndex: this.props.tabIndex,
|
|
onBlur: this.onInputBlur,
|
|
onFocus: this.onInputFocus,
|
|
onChange: this.onInputChange,
|
|
onMouseDown: this.props.onMouseDown,
|
|
onKeyUp: this.props.onKeyUp,
|
|
onKeyDown: this.onInputKeyDown,
|
|
onKeyPress: this.props.onKeyPress,
|
|
onContextMenu: this.props.onContextMenu,
|
|
onClick: this.props.onClick,
|
|
onDoubleClick: this.props.onDblClick
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderChips",
|
|
value: function renderChips() {
|
|
var _this8 = this;
|
|
|
|
if (this.props.value && this.props.value.length) {
|
|
return this.props.value.map(function (val, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index + 'multi-item',
|
|
className: "p-autocomplete-token p-highlight"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-autocomplete-token-label"
|
|
}, _this8.formatValue(val)), !_this8.props.disabled && IconUtils.getJSXIcon(_this8.props.removeIcon, {
|
|
className: 'p-autocomplete-token-icon',
|
|
onClick: function onClick(e) {
|
|
return _this8.removeItem(e, index);
|
|
}
|
|
}, {
|
|
props: _this8.props
|
|
}));
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMultiInput",
|
|
value: function renderMultiInput() {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-autocomplete-input-token"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: this.props.type,
|
|
disabled: this.props.disabled,
|
|
placeholder: this.props.placeholder,
|
|
role: "searchbox",
|
|
"aria-autocomplete": "list",
|
|
"aria-controls": this.state.id + '_list',
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
autoComplete: "off",
|
|
tabIndex: this.props.tabIndex,
|
|
onChange: this.onInputChange,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
style: this.props.inputStyle,
|
|
className: this.props.inputClassName,
|
|
maxLength: this.props.maxLength,
|
|
onKeyUp: this.props.onKeyUp,
|
|
onKeyDown: this.onInputKeyDown,
|
|
onKeyPress: this.props.onKeyPress,
|
|
onFocus: this.onMultiInputFocus,
|
|
onBlur: this.onMultiInputBlur
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderMultipleAutoComplete",
|
|
value: function renderMultipleAutoComplete() {
|
|
var _this9 = this;
|
|
|
|
var multiContainerClass = classNames('p-autocomplete-multiple-container p-component p-inputtext', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var tokens = this.renderChips();
|
|
var input = this.renderMultiInput();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
_this9.multiContainer = el;
|
|
},
|
|
className: multiContainerClass,
|
|
onContextMenu: this.props.onContextMenu,
|
|
onMouseDown: this.props.onMouseDown,
|
|
onClick: this.onMultiContainerClick,
|
|
onDoubleClick: this.props.onDblClick
|
|
}, tokens, input);
|
|
}
|
|
}, {
|
|
key: "renderDropdown",
|
|
value: function renderDropdown() {
|
|
var _this10 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
ref: function ref(el) {
|
|
return _this10.dropdownButton = el;
|
|
},
|
|
type: "button",
|
|
icon: this.props.dropdownIcon,
|
|
className: "p-autocomplete-dropdown",
|
|
disabled: this.props.disabled,
|
|
onClick: this.onDropdownClick
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
if (this.state.searching) {
|
|
return /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-autocomplete-loader pi pi-spinner pi-spin"
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this11 = this;
|
|
|
|
var input, dropdown;
|
|
var className = classNames('p-autocomplete p-component p-inputwrapper', this.props.className, {
|
|
'p-autocomplete-dd': this.props.dropdown,
|
|
'p-autocomplete-multiple': this.props.multiple,
|
|
'p-inputwrapper-filled': this.props.value,
|
|
'p-inputwrapper-focus': this.state.focused
|
|
});
|
|
var loader = this.renderLoader();
|
|
if (this.props.multiple) input = this.renderMultipleAutoComplete();else input = this.renderSimpleAutoComplete();
|
|
|
|
if (this.props.dropdown) {
|
|
dropdown = this.renderDropdown();
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this11.container = el;
|
|
},
|
|
id: this.state.id,
|
|
style: this.props.style,
|
|
className: className,
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": this.state.overlayVisible,
|
|
"aria-owns": this.state.id + '_list'
|
|
}, input, loader, dropdown, /*#__PURE__*/React__default["default"].createElement(AutoCompletePanel, _extends({
|
|
ref: this.overlayRef,
|
|
virtualScrollerRef: this.virtualScrollerRef
|
|
}, this.props, {
|
|
listId: this.state.id + '_list',
|
|
onItemClick: this.selectItem,
|
|
ariaSelected: this.ariaSelected,
|
|
onClick: this.onPanelClick,
|
|
getOptionGroupLabel: this.getOptionGroupLabel,
|
|
getOptionGroupChildren: this.getOptionGroupChildren,
|
|
"in": this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntering: this.onOverlayEntering,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return AutoComplete;
|
|
}(React.Component);
|
|
|
|
_defineProperty(AutoComplete, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
value: null,
|
|
name: null,
|
|
type: 'text',
|
|
suggestions: null,
|
|
field: null,
|
|
optionGroupLabel: null,
|
|
optionGroupChildren: null,
|
|
optionGroupTemplate: null,
|
|
forceSelection: false,
|
|
autoHighlight: false,
|
|
virtualScrollerOptions: null,
|
|
scrollHeight: '200px',
|
|
dropdown: false,
|
|
dropdownMode: 'blank',
|
|
multiple: false,
|
|
minLength: 1,
|
|
delay: 300,
|
|
style: null,
|
|
className: null,
|
|
inputId: null,
|
|
inputStyle: null,
|
|
inputClassName: null,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
placeholder: null,
|
|
readOnly: false,
|
|
disabled: false,
|
|
maxLength: null,
|
|
size: null,
|
|
appendTo: null,
|
|
tabIndex: null,
|
|
autoFocus: false,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
completeMethod: null,
|
|
itemTemplate: null,
|
|
selectedItemTemplate: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
removeIcon: 'pi pi-times-circle',
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onDropdownClick: null,
|
|
onClick: null,
|
|
onDblClick: null,
|
|
onMouseDown: null,
|
|
onKeyUp: null,
|
|
onKeyPress: null,
|
|
onContextMenu: null,
|
|
onClear: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$2b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2b(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Avatar = /*#__PURE__*/function (_Component) {
|
|
_inherits(Avatar, _Component);
|
|
|
|
var _super = _createSuper$2b(Avatar);
|
|
|
|
function Avatar() {
|
|
_classCallCheck(this, Avatar);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Avatar, [{
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this = this;
|
|
|
|
if (this.props.label) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-avatar-text"
|
|
}, this.props.label);
|
|
} else if (this.props.icon) {
|
|
return IconUtils.getJSXIcon(this.props.icon, {
|
|
className: 'p-avatar-icon'
|
|
}, {
|
|
props: this.props
|
|
});
|
|
} else if (this.props.image) {
|
|
var onError = function onError(e) {
|
|
if (_this.props.onImageError) {
|
|
_this.props.onImageError(e);
|
|
}
|
|
};
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("img", {
|
|
src: this.props.image,
|
|
alt: this.props.imageAlt,
|
|
onError: onError
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var containerClassName = classNames('p-avatar p-component', {
|
|
'p-avatar-image': this.props.image != null,
|
|
'p-avatar-circle': this.props.shape === 'circle',
|
|
'p-avatar-lg': this.props.size === 'large',
|
|
'p-avatar-xl': this.props.size === 'xlarge',
|
|
'p-avatar-clickable': !!this.props.onClick
|
|
}, this.props.className);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: containerClassName,
|
|
style: this.props.style,
|
|
onClick: this.props.onClick
|
|
}, content, this.props.children);
|
|
}
|
|
}]);
|
|
|
|
return Avatar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Avatar, "defaultProps", {
|
|
label: null,
|
|
icon: null,
|
|
image: null,
|
|
size: 'normal',
|
|
shape: 'square',
|
|
style: null,
|
|
className: null,
|
|
template: null,
|
|
imageAlt: 'avatar',
|
|
onImageError: null,
|
|
onClick: null
|
|
});
|
|
|
|
function _createSuper$2a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var AvatarGroup = /*#__PURE__*/function (_Component) {
|
|
_inherits(AvatarGroup, _Component);
|
|
|
|
var _super = _createSuper$2a(AvatarGroup);
|
|
|
|
function AvatarGroup() {
|
|
_classCallCheck(this, AvatarGroup);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(AvatarGroup, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var containerClassName = classNames('p-avatar-group p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, this.props.children);
|
|
}
|
|
}]);
|
|
|
|
return AvatarGroup;
|
|
}(React.Component);
|
|
|
|
_defineProperty(AvatarGroup, "defaultProps", {
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$29(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$29(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$29() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Badge = /*#__PURE__*/function (_Component) {
|
|
_inherits(Badge, _Component);
|
|
|
|
var _super = _createSuper$29(Badge);
|
|
|
|
function Badge() {
|
|
_classCallCheck(this, Badge);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Badge, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var badgeClassName = classNames('p-badge p-component', {
|
|
'p-badge-no-gutter': this.props.value && String(this.props.value).length === 1,
|
|
'p-badge-dot': !this.props.value,
|
|
'p-badge-lg': this.props.size === 'large',
|
|
'p-badge-xl': this.props.size === 'xlarge',
|
|
'p-badge-info': this.props.severity === 'info',
|
|
'p-badge-success': this.props.severity === 'success',
|
|
'p-badge-warning': this.props.severity === 'warning',
|
|
'p-badge-danger': this.props.severity === 'danger'
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: badgeClassName,
|
|
style: this.props.style
|
|
}, this.props.value);
|
|
}
|
|
}]);
|
|
|
|
return Badge;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Badge, "defaultProps", {
|
|
value: null,
|
|
severity: null,
|
|
size: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$28(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$28(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$28() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var BreadCrumb = /*#__PURE__*/function (_Component) {
|
|
_inherits(BreadCrumb, _Component);
|
|
|
|
var _super = _createSuper$28(BreadCrumb);
|
|
|
|
function BreadCrumb() {
|
|
_classCallCheck(this, BreadCrumb);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(BreadCrumb, [{
|
|
key: "itemClick",
|
|
value: function itemClick(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (!item.url) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: event,
|
|
item: item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHome",
|
|
value: function renderHome() {
|
|
var _this = this;
|
|
|
|
if (this.props.home) {
|
|
var className = classNames('p-breadcrumb-home', {
|
|
'p-disabled': this.props.home.disabled
|
|
}, this.props.home.className);
|
|
var iconClassName = classNames('p-menuitem-icon', this.props.home.icon);
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
style: this.props.home.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: this.props.home.url || '#',
|
|
className: "p-menuitem-link",
|
|
"aria-disabled": this.props.home.disabled,
|
|
target: this.props.home.target,
|
|
onClick: function onClick(event) {
|
|
return _this.itemClick(event, _this.props.home);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator() {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-breadcrumb-chevron pi pi-chevron-right"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item) {
|
|
var _this2 = this;
|
|
|
|
var className = classNames(item.className, {
|
|
'p-disabled': item.disabled
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: "p-menuitem-link",
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this2.itemClick(event, item);
|
|
},
|
|
"aria-disabled": item.disabled
|
|
}, label);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.itemClick(event, item);
|
|
},
|
|
className: 'p-menuitem-link',
|
|
labelClassName: 'p-menuitem-text',
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
style: item.style
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderMenuitems",
|
|
value: function renderMenuitems() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.model) {
|
|
var items = this.props.model.map(function (item, index) {
|
|
var menuitem = _this3.renderMenuitem(item);
|
|
|
|
var separator = index === _this3.props.model.length - 1 ? null : _this3.renderSeparator();
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: item.label + '_' + index
|
|
}, menuitem, separator);
|
|
});
|
|
return items;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-breadcrumb p-component', this.props.className);
|
|
var home = this.renderHome();
|
|
var items = this.renderMenuitems();
|
|
var separator = this.renderSeparator();
|
|
return /*#__PURE__*/React__default["default"].createElement("nav", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
"aria-label": "Breadcrumb"
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", null, home, separator, items));
|
|
}
|
|
}]);
|
|
|
|
return BreadCrumb;
|
|
}(React.Component);
|
|
|
|
_defineProperty(BreadCrumb, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
home: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$27(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$27(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$27() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var CalendarPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(CalendarPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$27(CalendarPanelComponent);
|
|
|
|
function CalendarPanelComponent() {
|
|
_classCallCheck(this, CalendarPanelComponent);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(CalendarPanelComponent, [{
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.props.onEnter,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: this.props.className,
|
|
style: this.props.style,
|
|
onClick: this.props.onClick,
|
|
onMouseUp: this.props.onMouseUp
|
|
}, this.props.children));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return this.props.inline ? element : /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return CalendarPanelComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(CalendarPanelComponent, "defaultProps", {
|
|
appendTo: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
var CalendarPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(CalendarPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createForOfIteratorHelper$f(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$f(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$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 _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 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; }
|
|
|
|
function _createSuper$26(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$26(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$26() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Calendar = /*#__PURE__*/function (_Component) {
|
|
_inherits(Calendar, _Component);
|
|
|
|
var _super = _createSuper$26(Calendar);
|
|
|
|
function Calendar(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Calendar);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false,
|
|
overlayVisible: false
|
|
};
|
|
|
|
if (!_this.props.onViewDateChange) {
|
|
var viewDate = _this.getViewDate(_this.props.viewDate);
|
|
|
|
_this.validateDate(viewDate);
|
|
|
|
_this.state = _objectSpread$K(_objectSpread$K({}, _this.state), {}, {
|
|
viewDate: viewDate
|
|
});
|
|
}
|
|
|
|
_this.navigation = null;
|
|
_this.onUserInput = _this.onUserInput.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onButtonClick = _this.onButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onPrevButtonClick = _this.onPrevButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onNextButtonClick = _this.onNextButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onMonthDropdownChange = _this.onMonthDropdownChange.bind(_assertThisInitialized(_this));
|
|
_this.onYearDropdownChange = _this.onYearDropdownChange.bind(_assertThisInitialized(_this));
|
|
_this.onTodayButtonClick = _this.onTodayButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onClearButtonClick = _this.onClearButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.onPanelMouseUp = _this.onPanelMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.incrementHour = _this.incrementHour.bind(_assertThisInitialized(_this));
|
|
_this.decrementHour = _this.decrementHour.bind(_assertThisInitialized(_this));
|
|
_this.incrementMinute = _this.incrementMinute.bind(_assertThisInitialized(_this));
|
|
_this.decrementMinute = _this.decrementMinute.bind(_assertThisInitialized(_this));
|
|
_this.incrementSecond = _this.incrementSecond.bind(_assertThisInitialized(_this));
|
|
_this.decrementSecond = _this.decrementSecond.bind(_assertThisInitialized(_this));
|
|
_this.toggleAmPm = _this.toggleAmPm.bind(_assertThisInitialized(_this));
|
|
_this.onTimePickerElementMouseDown = _this.onTimePickerElementMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onTimePickerElementMouseUp = _this.onTimePickerElementMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onTimePickerElementMouseLeave = _this.onTimePickerElementMouseLeave.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.reFocusInputField = _this.reFocusInputField.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Calendar, [{
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
|
|
if (this.props.inline) {
|
|
this.initFocusableCell();
|
|
} else if (this.props.mask) {
|
|
mask(this.inputRef.current, {
|
|
mask: this.props.mask,
|
|
readOnly: this.props.readOnlyInput || this.props.disabled,
|
|
onChange: function onChange(e) {
|
|
return _this2.updateValueOnInput(e.originalEvent, e.value);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (this.props.value) {
|
|
this.updateInputfield(this.props.value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
var _this3 = this;
|
|
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$K({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (!this.props.onViewDateChange && !this.viewStateChanged) {
|
|
var propValue = this.props.value;
|
|
|
|
if (Array.isArray(propValue)) {
|
|
propValue = propValue[0];
|
|
}
|
|
|
|
var prevPropValue = prevProps.value;
|
|
|
|
if (Array.isArray(prevPropValue)) {
|
|
prevPropValue = prevPropValue[0];
|
|
}
|
|
|
|
if (!prevPropValue && propValue || propValue && propValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
|
|
var viewDate = this.props.viewDate && this.isValidDate(this.props.viewDate) ? this.props.viewDate : propValue && this.isValidDate(propValue) ? propValue : new Date();
|
|
this.validateDate(viewDate);
|
|
this.setState({
|
|
viewDate: viewDate
|
|
}, function () {
|
|
_this3.viewStateChanged = true;
|
|
});
|
|
}
|
|
}
|
|
|
|
if (this.overlayRef && this.overlayRef.current) {
|
|
this.updateFocus();
|
|
}
|
|
|
|
if (prevProps.value !== this.props.value && (!this.viewStateChanged || !this.isVisible()) || this.isOptionChanged(prevProps)) {
|
|
this.updateInputfield(this.props.value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.hideTimeout) {
|
|
clearTimeout(this.hideTimeout);
|
|
}
|
|
|
|
if (this.touchUIMask) {
|
|
this.disableModality();
|
|
this.touchUIMask = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.inputRef.current,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "isVisible",
|
|
value: function isVisible() {
|
|
return this.props.onVisibleChange ? this.props.visible : this.state.overlayVisible;
|
|
}
|
|
}, {
|
|
key: "isOptionChanged",
|
|
value: function isOptionChanged(prevProps) {
|
|
var _this4 = this;
|
|
|
|
var optionProps = ['dateFormat', 'hourFormat', 'timeOnly', 'showSeconds', 'showMillisec'];
|
|
return optionProps.some(function (option) {
|
|
return prevProps[option] !== _this4.props[option];
|
|
});
|
|
}
|
|
}, {
|
|
key: "getDateFormat",
|
|
value: function getDateFormat() {
|
|
return this.props.dateFormat || localeOption('dateFormat', this.props.locale);
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus(event) {
|
|
var _this5 = this;
|
|
|
|
if (this.ignoreFocusFunctionality) {
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
_this5.ignoreFocusFunctionality = false;
|
|
});
|
|
} else {
|
|
event.persist();
|
|
|
|
if (this.props.showOnFocus && !this.isVisible()) {
|
|
this.showOverlay();
|
|
}
|
|
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this5.props.onFocus) {
|
|
_this5.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur(event) {
|
|
var _this6 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this6.props.onBlur) {
|
|
_this6.props.onBlur(event);
|
|
}
|
|
|
|
if (!_this6.props.keepInvalid) {
|
|
_this6.updateInputfield(_this6.props.value);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
this.isKeydown = true;
|
|
|
|
switch (event.which) {
|
|
//escape
|
|
case 27:
|
|
{
|
|
this.hideOverlay();
|
|
break;
|
|
}
|
|
//tab
|
|
|
|
case 9:
|
|
{
|
|
if (this.isVisible()) {
|
|
this.trapFocus(event);
|
|
}
|
|
|
|
if (this.props.touchUI) {
|
|
this.disableModality();
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUserInput",
|
|
value: function onUserInput(event) {
|
|
// IE 11 Workaround for input placeholder
|
|
if (!this.isKeydown) {
|
|
return;
|
|
}
|
|
|
|
this.isKeydown = false;
|
|
this.updateValueOnInput(event, event.target.value);
|
|
|
|
if (this.props.onInput) {
|
|
this.props.onInput(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateValueOnInput",
|
|
value: function updateValueOnInput(event, rawValue) {
|
|
try {
|
|
var value = this.parseValueFromString(rawValue);
|
|
|
|
if (this.isValidSelection(value)) {
|
|
this.updateModel(event, value);
|
|
this.updateViewDate(event, value.length ? value[0] : value);
|
|
}
|
|
} catch (err) {
|
|
//invalid date
|
|
var _value = this.props.keepInvalid ? rawValue : null;
|
|
|
|
this.updateModel(event, _value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "reFocusInputField",
|
|
value: function reFocusInputField() {
|
|
if (!this.props.inline && this.inputRef.current) {
|
|
this.ignoreFocusFunctionality = true;
|
|
this.inputRef.current.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "isValidSelection",
|
|
value: function isValidSelection(value) {
|
|
var _this7 = this;
|
|
|
|
var isValid = true;
|
|
|
|
if (this.isSingleSelection()) {
|
|
if (!(this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && this.isSelectableTime(value))) {
|
|
isValid = false;
|
|
}
|
|
} else if (value.every(function (v) {
|
|
return _this7.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && _this7.isSelectableTime(v);
|
|
})) {
|
|
if (this.isRangeSelection()) {
|
|
isValid = value.length > 1 && value[1] > value[0] ? true : false;
|
|
}
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
}, {
|
|
key: "onButtonClick",
|
|
value: function onButtonClick() {
|
|
if (this.isVisible()) {
|
|
this.hideOverlay();
|
|
} else {
|
|
this.showOverlay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPrevButtonClick",
|
|
value: function onPrevButtonClick(event) {
|
|
this.navigation = {
|
|
backward: true,
|
|
button: true
|
|
};
|
|
this.navBackward(event);
|
|
}
|
|
}, {
|
|
key: "onNextButtonClick",
|
|
value: function onNextButtonClick(event) {
|
|
this.navigation = {
|
|
backward: false,
|
|
button: true
|
|
};
|
|
this.navForward(event);
|
|
}
|
|
}, {
|
|
key: "onContainerButtonKeydown",
|
|
value: function onContainerButtonKeydown(event) {
|
|
switch (event.which) {
|
|
//tab
|
|
case 9:
|
|
this.trapFocus(event);
|
|
break;
|
|
//escape
|
|
|
|
case 27:
|
|
this.hideOverlay(null, this.reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "trapFocus",
|
|
value: function trapFocus(event) {
|
|
event.preventDefault();
|
|
var focusableElements = DomHandler.getFocusableElements(this.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();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateFocus",
|
|
value: function updateFocus() {
|
|
var cell;
|
|
|
|
if (this.navigation) {
|
|
if (this.navigation.button) {
|
|
this.initFocusableCell();
|
|
if (this.navigation.backward) DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-prev').focus();else DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-next').focus();
|
|
} else {
|
|
if (this.navigation.backward) {
|
|
var cells = DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
|
|
cell = cells[cells.length - 1];
|
|
} else {
|
|
cell = DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
|
|
}
|
|
|
|
if (cell) {
|
|
cell.tabIndex = '0';
|
|
cell.focus();
|
|
}
|
|
}
|
|
|
|
this.navigation = null;
|
|
} else {
|
|
this.initFocusableCell();
|
|
}
|
|
}
|
|
}, {
|
|
key: "initFocusableCell",
|
|
value: function initFocusableCell() {
|
|
var cell;
|
|
|
|
if (this.view === 'month') {
|
|
var cells = DomHandler.find(this.overlayRef.current, '.p-monthpicker .p-monthpicker-month');
|
|
var selectedCell = DomHandler.findSingle(this.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(this.overlayRef.current, 'span.p-highlight');
|
|
|
|
if (!cell) {
|
|
var todayCell = DomHandler.findSingle(this.overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
|
|
if (todayCell) cell = todayCell;else cell = DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
|
|
}
|
|
}
|
|
|
|
if (cell) {
|
|
cell.tabIndex = '0';
|
|
}
|
|
}
|
|
}, {
|
|
key: "navBackward",
|
|
value: function navBackward(event) {
|
|
if (this.props.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var newViewDate = new Date(this.getViewDate().getTime());
|
|
newViewDate.setDate(1);
|
|
|
|
if (this.props.view === 'date') {
|
|
if (newViewDate.getMonth() === 0) {
|
|
newViewDate.setMonth(11);
|
|
newViewDate.setFullYear(newViewDate.getFullYear() - 1);
|
|
} else {
|
|
newViewDate.setMonth(newViewDate.getMonth() - 1);
|
|
}
|
|
} else if (this.props.view === 'month') {
|
|
var currentYear = newViewDate.getFullYear();
|
|
var newYear = currentYear - 1;
|
|
|
|
if (this.props.yearNavigator) {
|
|
var minYear = parseInt(this.props.yearRange.split(':')[0], 10);
|
|
|
|
if (newYear < minYear) {
|
|
newYear = minYear;
|
|
}
|
|
}
|
|
|
|
newViewDate.setFullYear(newYear);
|
|
}
|
|
|
|
this.updateViewDate(event, newViewDate);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "navForward",
|
|
value: function navForward(event) {
|
|
if (this.props.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var newViewDate = new Date(this.getViewDate().getTime());
|
|
newViewDate.setDate(1);
|
|
|
|
if (this.props.view === 'date') {
|
|
if (newViewDate.getMonth() === 11) {
|
|
newViewDate.setMonth(0);
|
|
newViewDate.setFullYear(newViewDate.getFullYear() + 1);
|
|
} else {
|
|
newViewDate.setMonth(newViewDate.getMonth() + 1);
|
|
}
|
|
} else if (this.props.view === 'month') {
|
|
var currentYear = newViewDate.getFullYear();
|
|
var newYear = currentYear + 1;
|
|
|
|
if (this.props.yearNavigator) {
|
|
var maxYear = parseInt(this.props.yearRange.split(':')[1], 10);
|
|
|
|
if (newYear > maxYear) {
|
|
newYear = maxYear;
|
|
}
|
|
}
|
|
|
|
newViewDate.setFullYear(newYear);
|
|
}
|
|
|
|
this.updateViewDate(event, newViewDate);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onMonthDropdownChange",
|
|
value: function onMonthDropdownChange(event, value) {
|
|
var currentViewDate = this.getViewDate();
|
|
var newViewDate = new Date(currentViewDate.getTime());
|
|
newViewDate.setMonth(parseInt(value, 10));
|
|
this.updateViewDate(event, newViewDate);
|
|
}
|
|
}, {
|
|
key: "onYearDropdownChange",
|
|
value: function onYearDropdownChange(event, value) {
|
|
var currentViewDate = this.getViewDate();
|
|
var newViewDate = new Date(currentViewDate.getTime());
|
|
newViewDate.setFullYear(parseInt(value, 10));
|
|
this.updateViewDate(event, newViewDate);
|
|
}
|
|
}, {
|
|
key: "onTodayButtonClick",
|
|
value: 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()
|
|
};
|
|
this.updateViewDate(event, today);
|
|
this.onDateSelect(event, dateMeta, timeMeta);
|
|
|
|
if (this.props.onTodayButtonClick) {
|
|
this.props.onTodayButtonClick(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClearButtonClick",
|
|
value: function onClearButtonClick(event) {
|
|
this.updateModel(event, null);
|
|
this.updateInputfield(null);
|
|
this.hideOverlay(null, this.reFocusInputField);
|
|
|
|
if (this.props.onClearButtonClick) {
|
|
this.props.onClearButtonClick(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (!this.props.inline) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPanelMouseUp",
|
|
value: function onPanelMouseUp(event) {
|
|
this.onPanelClick(event);
|
|
}
|
|
}, {
|
|
key: "onTimePickerElementMouseDown",
|
|
value: function onTimePickerElementMouseDown(event, type, direction) {
|
|
if (!this.props.disabled) {
|
|
this.repeat(event, null, type, direction);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTimePickerElementMouseUp",
|
|
value: function onTimePickerElementMouseUp() {
|
|
if (!this.props.disabled) {
|
|
this.clearTimePickerTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTimePickerElementMouseLeave",
|
|
value: function onTimePickerElementMouseLeave() {
|
|
if (!this.props.disabled) {
|
|
this.clearTimePickerTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "repeat",
|
|
value: function repeat(event, interval, type, direction) {
|
|
var _this8 = this;
|
|
|
|
event.persist();
|
|
var i = interval || 500;
|
|
this.clearTimePickerTimer();
|
|
this.timePickerTimer = setTimeout(function () {
|
|
_this8.repeat(event, 100, type, direction);
|
|
}, i);
|
|
|
|
switch (type) {
|
|
case 0:
|
|
if (direction === 1) this.incrementHour(event);else this.decrementHour(event);
|
|
break;
|
|
|
|
case 1:
|
|
if (direction === 1) this.incrementMinute(event);else this.decrementMinute(event);
|
|
break;
|
|
|
|
case 2:
|
|
if (direction === 1) this.incrementSecond(event);else this.decrementSecond(event);
|
|
break;
|
|
|
|
case 3:
|
|
if (direction === 1) this.incrementMilliSecond(event);else this.decrementMilliSecond(event);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearTimePickerTimer",
|
|
value: function clearTimePickerTimer() {
|
|
if (this.timePickerTimer) {
|
|
clearTimeout(this.timePickerTimer);
|
|
}
|
|
}
|
|
}, {
|
|
key: "incrementHour",
|
|
value: function incrementHour(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour + this.props.stepHour;
|
|
newHour = newHour >= 24 ? newHour - 24 : newHour;
|
|
|
|
if (this.validateHour(newHour, currentTime)) {
|
|
if (this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getHours() === newHour) {
|
|
if (this.props.maxDate.getMinutes() < currentTime.getMinutes()) {
|
|
if (this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else if (this.props.maxDate.getMinutes() === currentTime.getMinutes()) {
|
|
if (this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "decrementHour",
|
|
value: function decrementHour(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour - this.props.stepHour;
|
|
newHour = newHour < 0 ? newHour + 24 : newHour;
|
|
|
|
if (this.validateHour(newHour, currentTime)) {
|
|
if (this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getHours() === newHour) {
|
|
if (this.props.minDate.getMinutes() > currentTime.getMinutes()) {
|
|
if (this.props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else if (this.props.minDate.getMinutes() === currentTime.getMinutes()) {
|
|
if (this.props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, this.props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "doStepMinute",
|
|
value: function doStepMinute(currentMinute, step) {
|
|
if (this.props.stepMinute <= 1) {
|
|
return step ? currentMinute + step : currentMinute;
|
|
}
|
|
|
|
if (!step) {
|
|
step = this.props.stepMinute;
|
|
|
|
if (currentMinute % step === 0) {
|
|
return currentMinute;
|
|
}
|
|
}
|
|
|
|
var newMinute = currentMinute + step;
|
|
newMinute = Math.floor(newMinute / step) * step;
|
|
return newMinute;
|
|
}
|
|
}, {
|
|
key: "incrementMinute",
|
|
value: function incrementMinute(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentMinute = currentTime.getMinutes();
|
|
var newMinute = this.doStepMinute(currentMinute, this.props.stepMinute);
|
|
newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
|
|
|
|
if (this.validateMinute(newMinute, currentTime)) {
|
|
if (this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getMinutes() === newMinute) {
|
|
if (this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
|
|
if (this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "decrementMinute",
|
|
value: function decrementMinute(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentMinute = currentTime.getMinutes();
|
|
var newMinute = this.doStepMinute(currentMinute, -this.props.stepMinute);
|
|
newMinute = newMinute < 0 ? newMinute + 60 : newMinute;
|
|
|
|
if (this.validateMinute(newMinute, currentTime)) {
|
|
if (this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getMinutes() === newMinute) {
|
|
if (this.props.minDate.getSeconds() > currentTime.getSeconds()) {
|
|
if (this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, this.props.minDate.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "incrementSecond",
|
|
value: function incrementSecond(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentSecond = currentTime.getSeconds();
|
|
var newSecond = currentSecond + this.props.stepSecond;
|
|
newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
|
|
|
|
if (this.validateSecond(newSecond, currentTime)) {
|
|
if (this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getSeconds() === newSecond) {
|
|
if (this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, this.props.maxDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "decrementSecond",
|
|
value: function decrementSecond(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentSecond = currentTime.getSeconds();
|
|
var newSecond = currentSecond - this.props.stepSecond;
|
|
newSecond = newSecond < 0 ? newSecond + 60 : newSecond;
|
|
|
|
if (this.validateSecond(newSecond, currentTime)) {
|
|
if (this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getSeconds() === newSecond) {
|
|
if (this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, this.props.minDate.getMilliseconds());
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
} else {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "incrementMilliSecond",
|
|
value: function incrementMilliSecond(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentMillisecond = currentTime.getMilliseconds();
|
|
var newMillisecond = currentMillisecond + this.props.stepMillisec;
|
|
newMillisecond = newMillisecond > 999 ? newMillisecond - 1000 : newMillisecond;
|
|
|
|
if (this.validateMillisecond(newMillisecond, currentTime)) {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "decrementMilliSecond",
|
|
value: function decrementMilliSecond(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentMillisecond = currentTime.getMilliseconds();
|
|
var newMillisecond = currentMillisecond - this.props.stepMillisec;
|
|
newMillisecond = newMillisecond < 0 ? newMillisecond + 999 : newMillisecond;
|
|
|
|
if (this.validateMillisecond(newMillisecond, currentTime)) {
|
|
this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "toggleAmPm",
|
|
value: function toggleAmPm(event) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var currentHour = currentTime.getHours();
|
|
var newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
|
|
this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "getViewDate",
|
|
value: function getViewDate(date) {
|
|
var propValue = this.props.value;
|
|
var viewDate = date || (this.props.onViewDateChange ? this.props.viewDate : this.state.viewDate);
|
|
|
|
if (Array.isArray(propValue)) {
|
|
propValue = propValue[0];
|
|
}
|
|
|
|
return viewDate && this.isValidDate(viewDate) ? viewDate : propValue && this.isValidDate(propValue) ? propValue : new Date();
|
|
}
|
|
}, {
|
|
key: "getCurrentDateTime",
|
|
value: function getCurrentDateTime() {
|
|
if (this.isSingleSelection()) {
|
|
return this.props.value && this.props.value instanceof Date ? this.props.value : this.getViewDate();
|
|
} else if (this.isMultipleSelection()) {
|
|
if (this.props.value && this.props.value.length) {
|
|
return this.props.value[this.props.value.length - 1];
|
|
}
|
|
} else if (this.isRangeSelection()) {
|
|
if (this.props.value && this.props.value.length) {
|
|
var startDate = this.props.value[0];
|
|
var endDate = this.props.value[1];
|
|
return endDate || startDate;
|
|
}
|
|
}
|
|
|
|
return new Date();
|
|
}
|
|
}, {
|
|
key: "isValidDate",
|
|
value: function isValidDate(date) {
|
|
return date instanceof Date && !isNaN(date);
|
|
}
|
|
}, {
|
|
key: "validateHour",
|
|
value: function validateHour(hour, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
|
|
if (this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
|
|
if (this.props.minDate.getHours() > hour) {
|
|
valid = false;
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
|
|
if (this.props.maxDate.getHours() < hour) {
|
|
valid = false;
|
|
}
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
}, {
|
|
key: "validateMinute",
|
|
value: function validateMinute(minute, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
|
|
if (this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.minDate.getHours()) {
|
|
if (this.props.minDate.getMinutes() > minute) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.maxDate.getHours()) {
|
|
if (this.props.maxDate.getMinutes() < minute) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
}, {
|
|
key: "validateSecond",
|
|
value: function validateSecond(second, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
|
|
if (this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.minDate.getHours() && value.getMinutes() === this.props.minDate.getMinutes()) {
|
|
if (this.props.minDate.getSeconds() > second) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.maxDate.getHours() && value.getMinutes() === this.props.maxDate.getMinutes()) {
|
|
if (this.props.maxDate.getSeconds() < second) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
}, {
|
|
key: "validateMillisecond",
|
|
value: function validateMillisecond(millisecond, value) {
|
|
var valid = true;
|
|
var valueDateString = value ? value.toDateString() : null;
|
|
|
|
if (this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.minDate.getHours() && value.getSeconds() === this.props.minDate.getSeconds() && value.getMinutes() === this.props.minDate.getMinutes()) {
|
|
if (this.props.minDate.getMilliseconds() > millisecond) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
|
|
if (value.getHours() === this.props.maxDate.getHours() && value.getSeconds() === this.props.maxDate.getSeconds() && value.getMinutes() === this.props.maxDate.getMinutes()) {
|
|
if (this.props.maxDate.getMilliseconds() < millisecond) {
|
|
valid = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
}, {
|
|
key: "validateDate",
|
|
value: function validateDate(value) {
|
|
if (this.props.yearNavigator) {
|
|
var viewYear = value.getFullYear();
|
|
var minRangeYear = this.props.yearRange ? parseInt(this.props.yearRange.split(':')[0], 10) : null;
|
|
var maxRangeYear = this.props.yearRange ? parseInt(this.props.yearRange.split(':')[1], 10) : null;
|
|
var minYear = this.props.minDate && minRangeYear != null ? Math.max(this.props.minDate.getFullYear(), minRangeYear) : this.props.minDate || minRangeYear;
|
|
var maxYear = this.props.maxDate && maxRangeYear != null ? Math.min(this.props.maxDate.getFullYear(), maxRangeYear) : this.props.maxDate || maxRangeYear;
|
|
|
|
if (minYear && minYear > viewYear) {
|
|
viewYear = minYear;
|
|
}
|
|
|
|
if (maxYear && maxYear < viewYear) {
|
|
viewYear = maxYear;
|
|
}
|
|
|
|
value.setFullYear(viewYear);
|
|
}
|
|
|
|
if (this.props.monthNavigator && this.props.view !== 'month') {
|
|
var viewMonth = value.getMonth();
|
|
var viewMonthWithMinMax = parseInt(this.isInMinYear(value) && Math.max(this.props.minDate.getMonth(), viewMonth).toString() || this.isInMaxYear(value) && Math.min(this.props.maxDate.getMonth(), viewMonth).toString() || viewMonth);
|
|
value.setMonth(viewMonthWithMinMax);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateTime",
|
|
value: function updateTime(event, hour, minute, second, millisecond) {
|
|
var newDateTime = this.getCurrentDateTime();
|
|
newDateTime.setHours(hour);
|
|
newDateTime.setMinutes(minute);
|
|
newDateTime.setSeconds(second);
|
|
newDateTime.setMilliseconds(millisecond);
|
|
|
|
if (this.isMultipleSelection()) {
|
|
if (this.props.value && this.props.value.length) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
value[value.length - 1] = newDateTime;
|
|
newDateTime = value;
|
|
} else {
|
|
newDateTime = [newDateTime];
|
|
}
|
|
} else if (this.isRangeSelection()) {
|
|
if (this.props.value && this.props.value.length) {
|
|
var startDate = this.props.value[0];
|
|
var endDate = this.props.value[1];
|
|
newDateTime = endDate ? [startDate, newDateTime] : [newDateTime, null];
|
|
} else {
|
|
newDateTime = [newDateTime, null];
|
|
}
|
|
}
|
|
|
|
this.updateModel(event, newDateTime);
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
value: newDateTime
|
|
});
|
|
}
|
|
|
|
this.updateInputfield(newDateTime);
|
|
}
|
|
}, {
|
|
key: "updateViewDate",
|
|
value: function updateViewDate(event, value) {
|
|
this.validateDate(value);
|
|
|
|
if (this.props.onViewDateChange) {
|
|
this.props.onViewDateChange({
|
|
originalEvent: event,
|
|
value: value
|
|
});
|
|
} else {
|
|
this.viewStateChanged = true;
|
|
this.setState({
|
|
viewDate: value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDateCellKeydown",
|
|
value: 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')) {
|
|
this.navigation = {
|
|
backward: false
|
|
};
|
|
this.navForward(event);
|
|
} else {
|
|
nextRow.children[cellIndex].children[0].tabIndex = '0';
|
|
nextRow.children[cellIndex].children[0].focus();
|
|
}
|
|
} else {
|
|
this.navigation = {
|
|
backward: false
|
|
};
|
|
this.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')) {
|
|
this.navigation = {
|
|
backward: true
|
|
};
|
|
this.navBackward(event);
|
|
} else {
|
|
_focusCell.tabIndex = '0';
|
|
|
|
_focusCell.focus();
|
|
}
|
|
} else {
|
|
this.navigation = {
|
|
backward: true
|
|
};
|
|
this.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')) {
|
|
this.navigateToMonth(true, groupIndex, event);
|
|
} else {
|
|
_focusCell2.tabIndex = '0';
|
|
|
|
_focusCell2.focus();
|
|
}
|
|
} else {
|
|
this.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')) {
|
|
this.navigateToMonth(false, groupIndex, event);
|
|
} else {
|
|
_focusCell3.tabIndex = '0';
|
|
|
|
_focusCell3.focus();
|
|
}
|
|
} else {
|
|
this.navigateToMonth(false, groupIndex, event);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//enter
|
|
|
|
case 13:
|
|
{
|
|
this.onDateSelect(event, date);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//escape
|
|
|
|
case 27:
|
|
{
|
|
this.hideOverlay(null, this.reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//tab
|
|
|
|
case 9:
|
|
{
|
|
this.trapFocus(event);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "navigateToMonth",
|
|
value: function navigateToMonth(prev, groupIndex, event) {
|
|
if (prev) {
|
|
if (this.props.numberOfMonths === 1 || groupIndex === 0) {
|
|
this.navigation = {
|
|
backward: true
|
|
};
|
|
this.navBackward(event);
|
|
} else {
|
|
var prevMonthContainer = this.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 (this.props.numberOfMonths === 1 || groupIndex === this.props.numberOfMonths - 1) {
|
|
this.navigation = {
|
|
backward: false
|
|
};
|
|
this.navForward(event);
|
|
} else {
|
|
var nextMonthContainer = this.overlayRef.current.children[groupIndex + 1];
|
|
|
|
var _focusCell4 = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
|
|
|
|
_focusCell4.tabIndex = '0';
|
|
|
|
_focusCell4.focus();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMonthCellKeydown",
|
|
value: function onMonthCellKeydown(event, index) {
|
|
var cell = event.currentTarget;
|
|
|
|
switch (event.which) {
|
|
//arrows
|
|
case 38:
|
|
case 40:
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var cells = cell.parentElement.children;
|
|
var cellIndex = DomHandler.index(cell);
|
|
var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
|
|
|
|
if (nextCell) {
|
|
nextCell.tabIndex = '0';
|
|
nextCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//left arrow
|
|
|
|
case 37:
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var prevCell = cell.previousElementSibling;
|
|
|
|
if (prevCell) {
|
|
prevCell.tabIndex = '0';
|
|
prevCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//right arrow
|
|
|
|
case 39:
|
|
{
|
|
cell.tabIndex = '-1';
|
|
var _nextCell = cell.nextElementSibling;
|
|
|
|
if (_nextCell) {
|
|
_nextCell.tabIndex = '0';
|
|
|
|
_nextCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//enter
|
|
|
|
case 13:
|
|
{
|
|
this.onMonthSelect(event, index);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//escape
|
|
|
|
case 27:
|
|
{
|
|
this.hideOverlay(null, this.reFocusInputField);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
//tab
|
|
|
|
case 9:
|
|
{
|
|
this.trapFocus(event);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDateSelect",
|
|
value: function onDateSelect(event, dateMeta, timeMeta) {
|
|
var _this9 = this;
|
|
|
|
if (this.props.disabled || !dateMeta.selectable) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(function (cell) {
|
|
return cell.tabIndex = -1;
|
|
});
|
|
event.currentTarget.focus();
|
|
|
|
if (this.isMultipleSelection()) {
|
|
if (this.isSelected(dateMeta)) {
|
|
var value = this.props.value.filter(function (date, i) {
|
|
return !_this9.isDateEquals(date, dateMeta);
|
|
});
|
|
this.updateModel(event, value);
|
|
this.updateInputfield(value);
|
|
} else if (!this.props.maxDateCount || !this.props.value || this.props.maxDateCount > this.props.value.length) {
|
|
this.selectDate(event, dateMeta, timeMeta);
|
|
}
|
|
} else {
|
|
this.selectDate(event, dateMeta, timeMeta);
|
|
}
|
|
|
|
if (!this.props.inline && this.isSingleSelection() && (!this.props.showTime || this.props.hideOnDateTimeSelect)) {
|
|
setTimeout(function () {
|
|
_this9.hideOverlay('dateselect');
|
|
}, 100);
|
|
|
|
if (this.touchUIMask) {
|
|
this.disableModality();
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "selectTime",
|
|
value: function selectTime(date, timeMeta) {
|
|
if (this.props.showTime) {
|
|
var hours, minutes, seconds, milliseconds;
|
|
|
|
if (timeMeta) {
|
|
hours = timeMeta.hours;
|
|
minutes = timeMeta.minutes;
|
|
seconds = timeMeta.seconds;
|
|
milliseconds = timeMeta.milliseconds;
|
|
} else {
|
|
var time = this.getCurrentDateTime();
|
|
var _ref = [time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()];
|
|
hours = _ref[0];
|
|
minutes = _ref[1];
|
|
seconds = _ref[2];
|
|
milliseconds = _ref[3];
|
|
}
|
|
|
|
date.setHours(hours);
|
|
date.setMinutes(minutes);
|
|
date.setSeconds(seconds);
|
|
date.setMilliseconds(milliseconds);
|
|
}
|
|
}
|
|
}, {
|
|
key: "selectDate",
|
|
value: function selectDate(event, dateMeta, timeMeta) {
|
|
var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
|
|
this.selectTime(date, timeMeta);
|
|
|
|
if (this.props.minDate && this.props.minDate > date) {
|
|
date = this.props.minDate;
|
|
}
|
|
|
|
if (this.props.maxDate && this.props.maxDate < date) {
|
|
date = this.props.maxDate;
|
|
}
|
|
|
|
var selectedValues = date;
|
|
|
|
if (this.isSingleSelection()) {
|
|
this.updateModel(event, date);
|
|
} else if (this.isMultipleSelection()) {
|
|
selectedValues = this.props.value ? [].concat(_toConsumableArray(this.props.value), [date]) : [date];
|
|
this.updateModel(event, selectedValues);
|
|
} else if (this.isRangeSelection()) {
|
|
if (this.props.value && this.props.value.length) {
|
|
var startDate = this.props.value[0];
|
|
var endDate = this.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];
|
|
this.updateModel(event, selectedValues);
|
|
} else {
|
|
selectedValues = [date, null];
|
|
this.updateModel(event, selectedValues);
|
|
}
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
value: date
|
|
});
|
|
}
|
|
|
|
this.updateInputfield(selectedValues);
|
|
}
|
|
}, {
|
|
key: "onMonthSelect",
|
|
value: function onMonthSelect(event, month) {
|
|
this.onDateSelect(event, {
|
|
year: this.getViewDate().getFullYear(),
|
|
month: month,
|
|
day: 1,
|
|
selectable: true
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(event, value) {
|
|
if (this.props.onChange) {
|
|
var newValue = value && value instanceof Date ? new Date(value.getTime()) : value;
|
|
this.viewStateChanged = true;
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: newValue
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "showOverlay",
|
|
value: function showOverlay(type) {
|
|
var _this10 = this;
|
|
|
|
if (this.props.onVisibleChange) {
|
|
this.props.onVisibleChange({
|
|
visible: true,
|
|
type: type
|
|
});
|
|
} else {
|
|
this.setState({
|
|
overlayVisible: true
|
|
}, function () {
|
|
_this10.overlayEventListener = function (e) {
|
|
if (!_this10.isOutsideClicked(e.target)) {
|
|
_this10.isOverlayClicked = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', _this10.overlayEventListener);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "hideOverlay",
|
|
value: function hideOverlay(type, callback) {
|
|
var _this11 = this;
|
|
|
|
var _hideCallback = function _hideCallback() {
|
|
_this11.viewStateChanged = false;
|
|
_this11.ignoreFocusFunctionality = false;
|
|
_this11.isOverlayClicked = false;
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
|
|
OverlayService.off('overlay-click', _this11.overlayEventListener);
|
|
_this11.overlayEventListener = null;
|
|
};
|
|
|
|
if (this.props.onVisibleChange) this.props.onVisibleChange({
|
|
visible: false,
|
|
type: type,
|
|
callback: _hideCallback
|
|
});else this.setState({
|
|
overlayVisible: false
|
|
}, _hideCallback);
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
if (this.props.autoZIndex) {
|
|
var key = this.props.touchUI ? 'modal' : 'overlay';
|
|
ZIndexUtils.set(key, this.overlayRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex[key]);
|
|
}
|
|
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindDocumentResizeListener();
|
|
this.bindScrollListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentResizeListener();
|
|
this.unbindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this12 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (!_this12.isOverlayClicked && _this12.isVisible() && _this12.isOutsideClicked(event.target)) {
|
|
_this12.hideOverlay('outside');
|
|
}
|
|
|
|
_this12.isOverlayClicked = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListener",
|
|
value: function bindDocumentResizeListener() {
|
|
if (!this.documentResizeListener && !this.props.touchUI) {
|
|
this.documentResizeListener = this.onWindowResize.bind(this);
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListener",
|
|
value: function unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this13 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this13.isVisible()) {
|
|
_this13.hideOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return this.container && !(this.container.isSameNode(target) || this.isNavIconClicked(target) || this.container.contains(target) || this.overlayRef && this.overlayRef.current.contains(target));
|
|
}
|
|
}, {
|
|
key: "isNavIconClicked",
|
|
value: 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');
|
|
}
|
|
}, {
|
|
key: "onWindowResize",
|
|
value: function onWindowResize() {
|
|
if (this.isVisible() && !DomHandler.isTouchDevice()) {
|
|
this.hideOverlay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
if (this.props.touchUI) {
|
|
this.enableModality();
|
|
} else {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.inputRef.current.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}
|
|
}, {
|
|
key: "enableModality",
|
|
value: function enableModality() {
|
|
var _this14 = this;
|
|
|
|
if (!this.touchUIMask) {
|
|
this.touchUIMask = document.createElement('div');
|
|
this.touchUIMask.style.zIndex = String(ZIndexUtils.get(this.overlayRef.current) - 1);
|
|
DomHandler.addMultipleClasses(this.touchUIMask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
|
|
|
|
this.touchUIMaskClickListener = function () {
|
|
_this14.disableModality();
|
|
};
|
|
|
|
this.touchUIMask.addEventListener('click', this.touchUIMaskClickListener);
|
|
document.body.appendChild(this.touchUIMask);
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "disableModality",
|
|
value: function disableModality() {
|
|
var _this15 = this;
|
|
|
|
if (this.touchUIMask) {
|
|
DomHandler.addClass(this.touchUIMask, 'p-component-overlay-leave');
|
|
this.touchUIMask.addEventListener('animationend', function () {
|
|
_this15.destroyMask();
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "destroyMask",
|
|
value: function destroyMask() {
|
|
this.touchUIMask.removeEventListener('click', this.touchUIMaskClickListener);
|
|
this.touchUIMaskClickListener = null;
|
|
document.body.removeChild(this.touchUIMask);
|
|
this.touchUIMask = 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');
|
|
}
|
|
}
|
|
}, {
|
|
key: "getFirstDayOfMonthIndex",
|
|
value: function getFirstDayOfMonthIndex(month, year) {
|
|
var day = new Date();
|
|
day.setDate(1);
|
|
day.setMonth(month);
|
|
day.setFullYear(year);
|
|
var dayIndex = day.getDay() + this.getSundayIndex();
|
|
return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
|
|
}
|
|
}, {
|
|
key: "getDaysCountInMonth",
|
|
value: function getDaysCountInMonth(month, year) {
|
|
return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
|
|
}
|
|
}, {
|
|
key: "getDaysCountInPrevMonth",
|
|
value: function getDaysCountInPrevMonth(month, year) {
|
|
var prev = this.getPreviousMonthAndYear(month, year);
|
|
return this.getDaysCountInMonth(prev.month, prev.year);
|
|
}
|
|
}, {
|
|
key: "daylightSavingAdjust",
|
|
value: function daylightSavingAdjust(date) {
|
|
if (!date) {
|
|
return null;
|
|
}
|
|
|
|
date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
|
|
return date;
|
|
}
|
|
}, {
|
|
key: "getPreviousMonthAndYear",
|
|
value: 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
|
|
};
|
|
}
|
|
}, {
|
|
key: "getNextMonthAndYear",
|
|
value: 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
|
|
};
|
|
}
|
|
}, {
|
|
key: "getSundayIndex",
|
|
value: function getSundayIndex() {
|
|
var firstDayOfWeek = localeOption('firstDayOfWeek', this.props.locale);
|
|
return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
|
|
}
|
|
}, {
|
|
key: "createWeekDays",
|
|
value: function createWeekDays() {
|
|
var weekDays = [];
|
|
|
|
var _localeOptions = localeOptions(this.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;
|
|
}
|
|
}, {
|
|
key: "createMonths",
|
|
value: function createMonths(month, year) {
|
|
var months = [];
|
|
|
|
for (var i = 0; i < this.props.numberOfMonths; i++) {
|
|
var m = month + i;
|
|
var y = year;
|
|
|
|
if (m > 11) {
|
|
m = m % 11 - 1;
|
|
y = year + 1;
|
|
}
|
|
|
|
months.push(this.createMonth(m, y));
|
|
}
|
|
|
|
return months;
|
|
}
|
|
}, {
|
|
key: "createMonth",
|
|
value: function createMonth(month, year) {
|
|
var dates = [];
|
|
var firstDay = this.getFirstDayOfMonthIndex(month, year);
|
|
var daysLength = this.getDaysCountInMonth(month, year);
|
|
var prevMonthDaysLength = this.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 = this.getPreviousMonthAndYear(month, year);
|
|
week.push({
|
|
day: j,
|
|
month: prev.month,
|
|
year: prev.year,
|
|
otherMonth: true,
|
|
today: this.isToday(today, j, prev.month, prev.year),
|
|
selectable: this.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: this.isToday(today, dayNo, month, year),
|
|
selectable: this.isSelectable(dayNo, month, year, false)
|
|
});
|
|
dayNo++;
|
|
}
|
|
} else {
|
|
for (var _j2 = 0; _j2 < 7; _j2++) {
|
|
if (dayNo > daysLength) {
|
|
var next = this.getNextMonthAndYear(month, year);
|
|
week.push({
|
|
day: dayNo - daysLength,
|
|
month: next.month,
|
|
year: next.year,
|
|
otherMonth: true,
|
|
today: this.isToday(today, dayNo - daysLength, next.month, next.year),
|
|
selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
|
|
});
|
|
} else {
|
|
week.push({
|
|
day: dayNo,
|
|
month: month,
|
|
year: year,
|
|
today: this.isToday(today, dayNo, month, year),
|
|
selectable: this.isSelectable(dayNo, month, year, false)
|
|
});
|
|
}
|
|
|
|
dayNo++;
|
|
}
|
|
}
|
|
|
|
if (this.props.showWeek) {
|
|
weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
|
|
}
|
|
|
|
dates.push(week);
|
|
}
|
|
|
|
return {
|
|
month: month,
|
|
year: year,
|
|
dates: dates,
|
|
weekNumbers: weekNumbers
|
|
};
|
|
}
|
|
}, {
|
|
key: "getWeekNumber",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "isSelectable",
|
|
value: function isSelectable(day, month, year, otherMonth) {
|
|
var validMin = true;
|
|
var validMax = true;
|
|
var validDate = true;
|
|
var validDay = true;
|
|
var validMonth = true;
|
|
|
|
if (this.props.minDate) {
|
|
if (this.props.minDate.getFullYear() > year) {
|
|
validMin = false;
|
|
} else if (this.props.minDate.getFullYear() === year) {
|
|
if (this.props.minDate.getMonth() > month) {
|
|
validMin = false;
|
|
} else if (this.props.minDate.getMonth() === month) {
|
|
if (this.props.minDate.getDate() > day) {
|
|
validMin = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate) {
|
|
if (this.props.maxDate.getFullYear() < year) {
|
|
validMax = false;
|
|
} else if (this.props.maxDate.getFullYear() === year) {
|
|
if (this.props.maxDate.getMonth() < month) {
|
|
validMax = false;
|
|
} else if (this.props.maxDate.getMonth() === month) {
|
|
if (this.props.maxDate.getDate() < day) {
|
|
validMax = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.disabledDates) {
|
|
validDate = !this.isDateDisabled(day, month, year);
|
|
}
|
|
|
|
if (this.props.disabledDays) {
|
|
validDay = !this.isDayDisabled(day, month, year);
|
|
}
|
|
|
|
if (this.props.selectOtherMonths === false && otherMonth) {
|
|
validMonth = false;
|
|
}
|
|
|
|
return validMin && validMax && validDate && validDay && validMonth;
|
|
}
|
|
}, {
|
|
key: "isSelectableTime",
|
|
value: function isSelectableTime(value) {
|
|
var validMin = true;
|
|
var validMax = true;
|
|
|
|
if (this.props.minDate && this.props.minDate.toDateString() === value.toDateString()) {
|
|
if (this.props.minDate.getHours() > value.getHours()) {
|
|
validMin = false;
|
|
} else if (this.props.minDate.getHours() === value.getHours()) {
|
|
if (this.props.minDate.getMinutes() > value.getMinutes()) {
|
|
validMin = false;
|
|
} else if (this.props.minDate.getMinutes() === value.getMinutes()) {
|
|
if (this.props.minDate.getSeconds() > value.getSeconds()) {
|
|
validMin = false;
|
|
} else if (this.props.minDate.getSeconds() === value.getSeconds()) {
|
|
if (this.props.minDate.getMilliseconds() > value.getMilliseconds()) {
|
|
validMin = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.maxDate && this.props.maxDate.toDateString() === value.toDateString()) {
|
|
if (this.props.maxDate.getHours() < value.getHours()) {
|
|
validMax = false;
|
|
} else if (this.props.maxDate.getHours() === value.getHours()) {
|
|
if (this.props.maxDate.getMinutes() < value.getMinutes()) {
|
|
validMax = false;
|
|
} else if (this.props.maxDate.getMinutes() === value.getMinutes()) {
|
|
if (this.props.maxDate.getSeconds() < value.getSeconds()) {
|
|
validMax = false;
|
|
} else if (this.props.maxDate.getSeconds() === value.getSeconds()) {
|
|
if (this.props.maxDate.getMilliseconds() < value.getMilliseconds()) {
|
|
validMax = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return validMin && validMax;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(dateMeta) {
|
|
if (this.props.value) {
|
|
if (this.isSingleSelection()) {
|
|
return this.isDateEquals(this.props.value, dateMeta);
|
|
} else if (this.isMultipleSelection()) {
|
|
var selected = false;
|
|
|
|
var _iterator = _createForOfIteratorHelper$f(this.props.value),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var date = _step.value;
|
|
selected = this.isDateEquals(date, dateMeta);
|
|
|
|
if (selected) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
return selected;
|
|
} else if (this.isRangeSelection()) {
|
|
if (this.props.value[1]) return this.isDateEquals(this.props.value[0], dateMeta) || this.isDateEquals(this.props.value[1], dateMeta) || this.isDateBetween(this.props.value[0], this.props.value[1], dateMeta);else {
|
|
return this.isDateEquals(this.props.value[0], dateMeta);
|
|
}
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isMonthSelected",
|
|
value: function isMonthSelected(month) {
|
|
var viewDate = this.getViewDate();
|
|
if (this.props.value && this.props.value instanceof Date) return this.props.value.getDate() === 1 && this.props.value.getMonth() === month && this.props.value.getFullYear() === viewDate.getFullYear();else return false;
|
|
}
|
|
}, {
|
|
key: "isDateEquals",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "isDateBetween",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "isSingleSelection",
|
|
value: function isSingleSelection() {
|
|
return this.props.selectionMode === 'single';
|
|
}
|
|
}, {
|
|
key: "isRangeSelection",
|
|
value: function isRangeSelection() {
|
|
return this.props.selectionMode === 'range';
|
|
}
|
|
}, {
|
|
key: "isMultipleSelection",
|
|
value: function isMultipleSelection() {
|
|
return this.props.selectionMode === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isToday",
|
|
value: function isToday(today, day, month, year) {
|
|
return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
|
|
}
|
|
}, {
|
|
key: "isDateDisabled",
|
|
value: function isDateDisabled(day, month, year) {
|
|
if (this.props.disabledDates) {
|
|
for (var i = 0; i < this.props.disabledDates.length; i++) {
|
|
var disabledDate = this.props.disabledDates[i];
|
|
|
|
if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isDayDisabled",
|
|
value: function isDayDisabled(day, month, year) {
|
|
if (this.props.disabledDays) {
|
|
var weekday = new Date(year, month, day);
|
|
var weekdayNumber = weekday.getDay();
|
|
return this.props.disabledDays.indexOf(weekdayNumber) !== -1;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "updateInputfield",
|
|
value: function updateInputfield(value) {
|
|
if (!(this.inputRef && this.inputRef.current)) {
|
|
return;
|
|
}
|
|
|
|
var formattedValue = '';
|
|
|
|
if (value) {
|
|
try {
|
|
if (this.isSingleSelection()) {
|
|
formattedValue = this.isValidDate(value) ? this.formatDateTime(value) : '';
|
|
} else if (this.isMultipleSelection()) {
|
|
for (var i = 0; i < value.length; i++) {
|
|
var selectedValue = value[i];
|
|
var dateAsString = this.isValidDate(selectedValue) ? this.formatDateTime(selectedValue) : '';
|
|
formattedValue += dateAsString;
|
|
|
|
if (i !== value.length - 1) {
|
|
formattedValue += ', ';
|
|
}
|
|
}
|
|
} else if (this.isRangeSelection()) {
|
|
if (value && value.length) {
|
|
var startDate = value[0];
|
|
var endDate = value[1];
|
|
formattedValue = this.isValidDate(startDate) ? this.formatDateTime(startDate) : '';
|
|
|
|
if (endDate) {
|
|
formattedValue += this.isValidDate(endDate) ? ' - ' + this.formatDateTime(endDate) : '';
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
formattedValue = value;
|
|
}
|
|
}
|
|
|
|
this.inputRef.current.value = formattedValue;
|
|
}
|
|
}, {
|
|
key: "formatDateTime",
|
|
value: function formatDateTime(date) {
|
|
var formattedValue = null;
|
|
|
|
if (date) {
|
|
if (this.props.timeOnly) {
|
|
formattedValue = this.formatTime(date);
|
|
} else {
|
|
formattedValue = this.formatDate(date, this.getDateFormat());
|
|
|
|
if (this.props.showTime) {
|
|
formattedValue += ' ' + this.formatTime(date);
|
|
}
|
|
}
|
|
}
|
|
|
|
return formattedValue;
|
|
}
|
|
}, {
|
|
key: "formatDate",
|
|
value: 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(this.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 + this.ticksTo1970;
|
|
break;
|
|
|
|
case '\'':
|
|
if (lookAhead('\'')) {
|
|
output += '\'';
|
|
} else {
|
|
literal = true;
|
|
}
|
|
|
|
break;
|
|
|
|
default:
|
|
output += format.charAt(iFormat);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return output;
|
|
}
|
|
}, {
|
|
key: "formatTime",
|
|
value: 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 (this.props.hourFormat === '12' && hours > 11 && hours !== 12) {
|
|
hours -= 12;
|
|
}
|
|
|
|
if (this.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 (this.props.showSeconds) {
|
|
output += ':';
|
|
output += seconds < 10 ? '0' + seconds : seconds;
|
|
}
|
|
|
|
if (this.props.showMillisec) {
|
|
output += '.';
|
|
output += milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds;
|
|
}
|
|
|
|
if (this.props.hourFormat === '12') {
|
|
output += date.getHours() > 11 ? ' PM' : ' AM';
|
|
}
|
|
|
|
return output;
|
|
}
|
|
}, {
|
|
key: "parseValueFromString",
|
|
value: function parseValueFromString(text) {
|
|
if (!text || text.trim().length === 0) {
|
|
return null;
|
|
}
|
|
|
|
var value;
|
|
|
|
if (this.isSingleSelection()) {
|
|
value = this.parseDateTime(text);
|
|
} else if (this.isMultipleSelection()) {
|
|
var tokens = text.split(',');
|
|
value = [];
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$f(tokens),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var token = _step2.value;
|
|
value.push(this.parseDateTime(token.trim()));
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
} else if (this.isRangeSelection()) {
|
|
var _tokens = text.split(' - ');
|
|
|
|
value = [];
|
|
|
|
for (var i = 0; i < _tokens.length; i++) {
|
|
value[i] = this.parseDateTime(_tokens[i].trim());
|
|
}
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "parseDateTime",
|
|
value: function parseDateTime(text) {
|
|
var date;
|
|
var parts = text.split(' ');
|
|
|
|
if (this.props.timeOnly) {
|
|
date = new Date();
|
|
this.populateTime(date, parts[0], parts[1]);
|
|
} else {
|
|
if (this.props.showTime) {
|
|
date = this.parseDate(parts[0], this.getDateFormat());
|
|
this.populateTime(date, parts[1], parts[2]);
|
|
} else {
|
|
date = this.parseDate(text, this.getDateFormat());
|
|
}
|
|
}
|
|
|
|
return date;
|
|
}
|
|
}, {
|
|
key: "populateTime",
|
|
value: function populateTime(value, timeString, ampm) {
|
|
if (this.props.hourFormat === '12' && ampm !== 'PM' && ampm !== 'AM') {
|
|
throw new Error('Invalid Time');
|
|
}
|
|
|
|
var time = this.parseTime(timeString, ampm);
|
|
value.setHours(time.hour);
|
|
value.setMinutes(time.minute);
|
|
value.setSeconds(time.second);
|
|
value.setMilliseconds(time.millisecond);
|
|
}
|
|
}, {
|
|
key: "parseTime",
|
|
value: function parseTime(value, ampm) {
|
|
value = this.props.showMillisec ? value.replace('.', ':') : value;
|
|
var tokens = value.split(':');
|
|
var validTokenLength = this.props.showSeconds ? 3 : 2;
|
|
validTokenLength = this.props.showMillisec ? validTokenLength + 1 : validTokenLength;
|
|
|
|
if (tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 || this.props.showSeconds && tokens[2].length !== 2 || this.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 = this.props.showSeconds ? parseInt(tokens[2], 10) : null;
|
|
var ms = this.props.showMillisec ? parseInt(tokens[3], 10) : null;
|
|
|
|
if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || this.props.hourFormat === '12' && h > 12 || this.props.showSeconds && (isNaN(s) || s > 59) || this.props.showMillisec && (isNaN(s) || s > 1000)) {
|
|
throw new Error('Invalid time');
|
|
} else {
|
|
if (this.props.hourFormat === '12' && h !== 12 && ampm === 'PM') {
|
|
h += 12;
|
|
}
|
|
|
|
return {
|
|
hour: h,
|
|
minute: m,
|
|
second: s,
|
|
millisecond: ms
|
|
};
|
|
}
|
|
} // Ported from jquery-ui datepicker parseDate
|
|
|
|
}, {
|
|
key: "parseDate",
|
|
value: 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 this.props.shortYearCutoff !== "string" ? this.props.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(this.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 (this.props.view === 'month') {
|
|
day = 1;
|
|
}
|
|
|
|
var _localeOptions3 = localeOptions(this.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("!") - this.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 = this.getDaysCountInMonth(year, month - 1);
|
|
|
|
if (day <= dim) {
|
|
break;
|
|
}
|
|
|
|
month++;
|
|
day -= dim;
|
|
} while (true);
|
|
}
|
|
|
|
date = this.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;
|
|
}
|
|
}, {
|
|
key: "renderBackwardNavigator",
|
|
value: function renderBackwardNavigator(isVisible) {
|
|
var _this16 = this;
|
|
|
|
var navigatorProps = isVisible ? {
|
|
'onClick': this.onPrevButtonClick,
|
|
'onKeyDown': function onKeyDown(e) {
|
|
return _this16.onContainerButtonKeydown(e);
|
|
}
|
|
} : {
|
|
'style': {
|
|
visibility: 'hidden'
|
|
}
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement("button", _extends({
|
|
type: "button",
|
|
className: "p-datepicker-prev p-link"
|
|
}, navigatorProps), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-datepicker-prev-icon pi pi-chevron-left"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderForwardNavigator",
|
|
value: function renderForwardNavigator(isVisible) {
|
|
var _this17 = this;
|
|
|
|
var navigatorProps = isVisible ? {
|
|
'onClick': this.onNextButtonClick,
|
|
'onKeyDown': function onKeyDown(e) {
|
|
return _this17.onContainerButtonKeydown(e);
|
|
}
|
|
} : {
|
|
'style': {
|
|
visibility: 'hidden'
|
|
}
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement("button", _extends({
|
|
type: "button",
|
|
className: "p-datepicker-next p-link"
|
|
}, navigatorProps), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-datepicker-next-icon pi pi-chevron-right"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "isInMinYear",
|
|
value: function isInMinYear(viewDate) {
|
|
return this.props.minDate && this.props.minDate.getFullYear() === viewDate.getFullYear();
|
|
}
|
|
}, {
|
|
key: "isInMaxYear",
|
|
value: function isInMaxYear(viewDate) {
|
|
return this.props.maxDate && this.props.maxDate.getFullYear() === viewDate.getFullYear();
|
|
}
|
|
}, {
|
|
key: "renderTitleMonthElement",
|
|
value: function renderTitleMonthElement(month) {
|
|
var _this18 = this;
|
|
|
|
var monthNames = localeOption('monthNames', this.props.locale);
|
|
|
|
if (this.props.monthNavigator && this.props.view !== 'month') {
|
|
var viewDate = this.getViewDate();
|
|
var viewMonth = viewDate.getMonth();
|
|
var displayedMonthOptions = monthNames.map(function (month, index) {
|
|
return (!_this18.isInMinYear(viewDate) || index >= _this18.props.minDate.getMonth()) && (!_this18.isInMaxYear(viewDate) || index <= _this18.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__default["default"].createElement("select", {
|
|
className: "p-datepicker-month",
|
|
onChange: function onChange(e) {
|
|
return _this18.onMonthDropdownChange(e, e.target.value);
|
|
},
|
|
value: viewMonth
|
|
}, displayedMonthOptions.map(function (option) {
|
|
return /*#__PURE__*/React__default["default"].createElement("option", {
|
|
key: option.label,
|
|
value: option.value
|
|
}, option.label);
|
|
}));
|
|
|
|
if (this.props.monthNavigatorTemplate) {
|
|
var defaultContentOptions = {
|
|
onChange: this.onMonthDropdownChange,
|
|
className: 'p-datepicker-month',
|
|
value: viewMonth,
|
|
names: displayedMonthNames,
|
|
options: displayedMonthOptions,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.monthNavigatorTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
} else {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-datepicker-month"
|
|
}, monthNames[month]);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTitleYearElement",
|
|
value: function renderTitleYearElement(year) {
|
|
var _this19 = this;
|
|
|
|
if (this.props.yearNavigator) {
|
|
var yearOptions = [];
|
|
var years = this.props.yearRange.split(':');
|
|
var yearStart = parseInt(years[0], 10);
|
|
var yearEnd = parseInt(years[1], 10);
|
|
|
|
for (var i = yearStart; i <= yearEnd; i++) {
|
|
yearOptions.push(i);
|
|
}
|
|
|
|
var viewDate = this.getViewDate();
|
|
var viewYear = viewDate.getFullYear();
|
|
var displayedYearNames = yearOptions.filter(function (year) {
|
|
return !(_this19.props.minDate && _this19.props.minDate.getFullYear() > year) && !(_this19.props.maxDate && _this19.props.maxDate.getFullYear() < year);
|
|
});
|
|
var content = /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "p-datepicker-year",
|
|
onChange: function onChange(e) {
|
|
return _this19.onYearDropdownChange(e, e.target.value);
|
|
},
|
|
value: viewYear
|
|
}, displayedYearNames.map(function (year) {
|
|
return /*#__PURE__*/React__default["default"].createElement("option", {
|
|
key: year,
|
|
value: year
|
|
}, year);
|
|
}));
|
|
|
|
if (this.props.yearNavigatorTemplate) {
|
|
var options = displayedYearNames.map(function (name, i) {
|
|
return {
|
|
label: name,
|
|
value: name,
|
|
index: i
|
|
};
|
|
});
|
|
var defaultContentOptions = {
|
|
onChange: this.onYearDropdownChange,
|
|
className: 'p-datepicker-year',
|
|
value: viewYear,
|
|
names: displayedYearNames,
|
|
options: options,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.yearNavigatorTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
} else {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-datepicker-year"
|
|
}, year);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTitle",
|
|
value: function renderTitle(monthMetaData) {
|
|
var month = this.renderTitleMonthElement(monthMetaData.month);
|
|
var year = this.renderTitleYearElement(monthMetaData.year);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-title"
|
|
}, month, year);
|
|
}
|
|
}, {
|
|
key: "renderDayNames",
|
|
value: function renderDayNames(weekDays) {
|
|
var dayNames = weekDays.map(function (weekDay, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
key: "".concat(weekDay, "-").concat(index),
|
|
scope: "col"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, weekDay));
|
|
});
|
|
|
|
if (this.props.showWeek) {
|
|
var weekHeader = /*#__PURE__*/React__default["default"].createElement("th", {
|
|
scope: "col",
|
|
key: 'wn',
|
|
className: "p-datepicker-weekheader p-disabled"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, localeOption('weekHeader', this.props.locale)));
|
|
return [weekHeader].concat(_toConsumableArray(dayNames));
|
|
} else {
|
|
return dayNames;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderDateCellContent",
|
|
value: function renderDateCellContent(date, className, groupIndex) {
|
|
var _this20 = this;
|
|
|
|
var content = this.props.dateTemplate ? this.props.dateTemplate(date) : date.day;
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className,
|
|
onClick: function onClick(e) {
|
|
return _this20.onDateSelect(e, date);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this20.onDateCellKeydown(e, date, groupIndex);
|
|
}
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderWeek",
|
|
value: function renderWeek(weekDates, weekNumber, groupIndex) {
|
|
var _this21 = this;
|
|
|
|
var week = weekDates.map(function (date) {
|
|
var selected = _this21.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 && !_this21.props.showOtherMonths ? null : _this21.renderDateCellContent(date, dateClassName, groupIndex);
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: date.day,
|
|
className: cellClassName
|
|
}, content);
|
|
});
|
|
|
|
if (this.props.showWeek) {
|
|
var weekNumberCell = /*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: 'wn' + weekNumber,
|
|
className: "p-datepicker-weeknumber"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-disabled"
|
|
}, weekNumber));
|
|
return [weekNumberCell].concat(_toConsumableArray(week));
|
|
} else {
|
|
return week;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderDates",
|
|
value: function renderDates(monthMetaData, groupIndex) {
|
|
var _this22 = this;
|
|
|
|
return monthMetaData.dates.map(function (weekDates, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
key: index
|
|
}, _this22.renderWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderDateViewGrid",
|
|
value: function renderDateViewGrid(monthMetaData, weekDays, groupIndex) {
|
|
var dayNames = this.renderDayNames(weekDays);
|
|
var dates = this.renderDates(monthMetaData, groupIndex);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-calendar-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("table", {
|
|
className: "p-datepicker-calendar"
|
|
}, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, dayNames)), /*#__PURE__*/React__default["default"].createElement("tbody", null, dates)));
|
|
}
|
|
}, {
|
|
key: "renderMonth",
|
|
value: function renderMonth(monthMetaData, index) {
|
|
var weekDays = this.createWeekDays();
|
|
var backwardNavigator = this.renderBackwardNavigator(index === 0);
|
|
var forwardNavigator = this.renderForwardNavigator(this.props.numberOfMonths === 1 || index === this.props.numberOfMonths - 1);
|
|
var title = this.renderTitle(monthMetaData);
|
|
var dateViewGrid = this.renderDateViewGrid(monthMetaData, weekDays, index);
|
|
var header = this.props.headerTemplate ? this.props.headerTemplate() : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: monthMetaData.month,
|
|
className: "p-datepicker-group"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-header"
|
|
}, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
|
|
}
|
|
}, {
|
|
key: "renderMonths",
|
|
value: function renderMonths(monthsMetaData) {
|
|
var _this23 = this;
|
|
|
|
var groups = monthsMetaData.map(function (monthMetaData, index) {
|
|
return _this23.renderMonth(monthMetaData, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-group-container"
|
|
}, groups);
|
|
}
|
|
}, {
|
|
key: "renderDateView",
|
|
value: function renderDateView() {
|
|
var viewDate = this.getViewDate();
|
|
var monthsMetaData = this.createMonths(viewDate.getMonth(), viewDate.getFullYear());
|
|
var months = this.renderMonths(monthsMetaData);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, months);
|
|
}
|
|
}, {
|
|
key: "renderMonthViewMonth",
|
|
value: function renderMonthViewMonth(index) {
|
|
var _this24 = this;
|
|
|
|
var className = classNames('p-monthpicker-month', {
|
|
'p-highlight': this.isMonthSelected(index)
|
|
});
|
|
var monthNamesShort = localeOption('monthNamesShort', this.props.locale);
|
|
var monthName = monthNamesShort[index];
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
key: monthName,
|
|
className: className,
|
|
onClick: function onClick(event) {
|
|
return _this24.onMonthSelect(event, index);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this24.onMonthCellKeydown(event, index);
|
|
}
|
|
}, monthName, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderMonthViewMonths",
|
|
value: function renderMonthViewMonths() {
|
|
var months = [];
|
|
|
|
for (var i = 0; i <= 11; i++) {
|
|
months.push(this.renderMonthViewMonth(i));
|
|
}
|
|
|
|
return months;
|
|
}
|
|
}, {
|
|
key: "renderMonthView",
|
|
value: function renderMonthView() {
|
|
var backwardNavigator = this.renderBackwardNavigator(true);
|
|
var forwardNavigator = this.renderForwardNavigator(true);
|
|
var yearElement = this.renderTitleYearElement(this.getViewDate().getFullYear());
|
|
var months = this.renderMonthViewMonths();
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-group-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-group"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-header"
|
|
}, backwardNavigator, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-title"
|
|
}, yearElement), forwardNavigator))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-monthpicker"
|
|
}, months));
|
|
}
|
|
}, {
|
|
key: "renderDatePicker",
|
|
value: function renderDatePicker() {
|
|
if (!this.props.timeOnly) {
|
|
if (this.props.view === 'date') {
|
|
return this.renderDateView();
|
|
} else if (this.props.view === 'month') {
|
|
return this.renderMonthView();
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHourPicker",
|
|
value: function renderHourPicker() {
|
|
var _this25 = this;
|
|
|
|
var currentTime = this.getCurrentDateTime();
|
|
var hour = currentTime.getHours();
|
|
|
|
if (this.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__default["default"].createElement("div", {
|
|
className: "p-hour-picker"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this25.onTimePickerElementMouseDown(e, 0, 1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this25.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-up"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, hourDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this25.onTimePickerElementMouseDown(e, 0, -1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this25.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-down"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
}, {
|
|
key: "renderMinutePicker",
|
|
value: function renderMinutePicker() {
|
|
var _this26 = this;
|
|
|
|
var currentTime = this.getCurrentDateTime();
|
|
var minute = currentTime.getMinutes();
|
|
var minuteDisplay = minute < 10 ? '0' + minute : minute;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-minute-picker"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this26.onTimePickerElementMouseDown(e, 1, 1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this26.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-up"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, minuteDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this26.onTimePickerElementMouseDown(e, 1, -1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this26.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-down"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
}, {
|
|
key: "renderSecondPicker",
|
|
value: function renderSecondPicker() {
|
|
var _this27 = this;
|
|
|
|
if (this.props.showSeconds) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var second = currentTime.getSeconds();
|
|
var secondDisplay = second < 10 ? '0' + second : second;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-second-picker"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this27.onTimePickerElementMouseDown(e, 2, 1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this27.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-up"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, secondDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this27.onTimePickerElementMouseDown(e, 2, -1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this27.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-down"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMiliSecondPicker",
|
|
value: function renderMiliSecondPicker() {
|
|
var _this28 = this;
|
|
|
|
if (this.props.showMillisec) {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var millisecond = currentTime.getMilliseconds();
|
|
var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-millisecond-picker"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this28.onTimePickerElementMouseDown(e, 3, 1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this28.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-up"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, millisecondDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this28.onTimePickerElementMouseDown(e, 3, -1);
|
|
},
|
|
onMouseUp: this.onTimePickerElementMouseUp,
|
|
onMouseLeave: this.onTimePickerElementMouseLeave,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this28.onContainerButtonKeydown(e);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-down"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderAmPmPicker",
|
|
value: function renderAmPmPicker() {
|
|
if (this.props.hourFormat === '12') {
|
|
var currentTime = this.getCurrentDateTime();
|
|
var hour = currentTime.getHours();
|
|
var display = hour > 11 ? 'PM' : 'AM';
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-ampm-picker"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onClick: this.toggleAmPm
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-up"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, display), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onClick: this.toggleAmPm
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-down"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(separator) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-separator"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", null, separator));
|
|
}
|
|
}, {
|
|
key: "renderTimePicker",
|
|
value: function renderTimePicker() {
|
|
if (this.props.showTime || this.props.timeOnly) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timepicker"
|
|
}, this.renderHourPicker(), this.renderSeparator(':'), this.renderMinutePicker(), this.props.showSeconds && this.renderSeparator(':'), this.renderSecondPicker(), this.props.showMillisec && this.renderSeparator('.'), this.renderMiliSecondPicker(), this.props.hourFormat === '12' && this.renderSeparator(':'), this.renderAmPmPicker());
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderInputElement",
|
|
value: function renderInputElement() {
|
|
if (!this.props.inline) {
|
|
return /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
ref: this.inputRef,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
type: "text",
|
|
className: this.props.inputClassName,
|
|
style: this.props.inputStyle,
|
|
readOnly: this.props.readOnlyInput,
|
|
disabled: this.props.disabled,
|
|
required: this.props.required,
|
|
autoComplete: "off",
|
|
placeholder: this.props.placeholder,
|
|
tabIndex: this.props.tabIndex,
|
|
onInput: this.onUserInput,
|
|
onFocus: this.onInputFocus,
|
|
onBlur: this.onInputBlur,
|
|
onKeyDown: this.onInputKeyDown,
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
inputMode: this.props.inputMode
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderButton",
|
|
value: function renderButton() {
|
|
if (this.props.showIcon) {
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: this.props.icon,
|
|
onClick: this.onButtonClick,
|
|
tabIndex: "-1",
|
|
disabled: this.props.disabled,
|
|
className: "p-datepicker-trigger"
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var input = this.renderInputElement();
|
|
var button = this.renderButton();
|
|
|
|
if (this.props.iconPos === 'left') {
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, button, input);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, input, button);
|
|
}
|
|
}, {
|
|
key: "renderButtonBar",
|
|
value: function renderButtonBar() {
|
|
var _this29 = this;
|
|
|
|
if (this.props.showButtonBar) {
|
|
var todayClassName = classNames('p-button-text', this.props.todayButtonClassName);
|
|
var clearClassName = classNames('p-button-text', this.props.clearButtonClassName);
|
|
|
|
var _localeOptions4 = localeOptions(this.props.locale),
|
|
today = _localeOptions4.today,
|
|
clear = _localeOptions4.clear;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-buttonbar"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
label: today,
|
|
onClick: this.onTodayButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this29.onContainerButtonKeydown(e);
|
|
},
|
|
className: todayClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
label: clear,
|
|
onClick: this.onClearButtonClick,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this29.onContainerButtonKeydown(e);
|
|
},
|
|
className: clearClassName
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footerTemplate) {
|
|
var content = this.props.footerTemplate();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datepicker-footer"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _classNames,
|
|
_this30 = this;
|
|
|
|
var className = classNames('p-calendar p-component p-inputwrapper', this.props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(this.props.iconPos), this.props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', this.props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', this.props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', this.props.value || DomHandler.hasClass(this.inputRef.current, 'p-filled') && this.inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', this.state.focused), _classNames));
|
|
var panelClassName = classNames('p-datepicker p-component', this.props.panelClassName, {
|
|
'p-datepicker-inline': this.props.inline,
|
|
'p-disabled': this.props.disabled,
|
|
'p-datepicker-timeonly': this.props.timeOnly,
|
|
'p-datepicker-multiple-month': this.props.numberOfMonths > 1,
|
|
'p-datepicker-monthpicker': this.props.view === 'month',
|
|
'p-datepicker-touch-ui': this.props.touchUI
|
|
});
|
|
var content = this.renderContent();
|
|
var datePicker = this.renderDatePicker();
|
|
var timePicker = this.renderTimePicker();
|
|
var buttonBar = this.renderButtonBar();
|
|
var footer = this.renderFooter();
|
|
var isVisible = this.props.inline || this.isVisible();
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this30.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(CalendarPanel, {
|
|
ref: this.overlayRef,
|
|
className: panelClassName,
|
|
style: this.props.panelStyle,
|
|
appendTo: this.props.appendTo,
|
|
inline: this.props.inline,
|
|
onClick: this.onPanelClick,
|
|
onMouseUp: this.onPanelMouseUp,
|
|
"in": isVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited,
|
|
transitionOptions: this.props.transitionOptions
|
|
}, datePicker, timePicker, buttonBar, footer));
|
|
}
|
|
}]);
|
|
|
|
return Calendar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Calendar, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
name: null,
|
|
value: null,
|
|
visible: false,
|
|
viewDate: null,
|
|
style: null,
|
|
className: null,
|
|
inline: false,
|
|
selectionMode: 'single',
|
|
inputId: null,
|
|
inputStyle: null,
|
|
inputClassName: null,
|
|
inputMode: 'none',
|
|
required: false,
|
|
readOnlyInput: false,
|
|
keepInvalid: false,
|
|
mask: null,
|
|
disabled: false,
|
|
tabIndex: null,
|
|
placeholder: null,
|
|
showIcon: false,
|
|
icon: 'pi pi-calendar',
|
|
iconPos: 'right',
|
|
showOnFocus: true,
|
|
numberOfMonths: 1,
|
|
view: 'date',
|
|
touchUI: false,
|
|
showTime: false,
|
|
timeOnly: false,
|
|
showSeconds: false,
|
|
showMillisec: false,
|
|
hourFormat: '24',
|
|
stepHour: 1,
|
|
stepMinute: 1,
|
|
stepSecond: 1,
|
|
stepMillisec: 1,
|
|
shortYearCutoff: '+10',
|
|
hideOnDateTimeSelect: false,
|
|
showWeek: false,
|
|
locale: null,
|
|
dateFormat: null,
|
|
panelStyle: null,
|
|
panelClassName: null,
|
|
monthNavigator: false,
|
|
yearNavigator: false,
|
|
yearRange: null,
|
|
disabledDates: null,
|
|
disabledDays: null,
|
|
minDate: null,
|
|
maxDate: null,
|
|
maxDateCount: null,
|
|
showOtherMonths: true,
|
|
selectOtherMonths: false,
|
|
showButtonBar: false,
|
|
todayButtonClassName: 'p-button-secondary',
|
|
clearButtonClassName: 'p-button-secondary',
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
dateTemplate: null,
|
|
headerTemplate: null,
|
|
footerTemplate: null,
|
|
monthNavigatorTemplate: null,
|
|
yearNavigatorTemplate: null,
|
|
transitionOptions: null,
|
|
onVisibleChange: null,
|
|
onFocus: null,
|
|
onBlur: null,
|
|
onInput: null,
|
|
onSelect: null,
|
|
onChange: null,
|
|
onViewDateChange: null,
|
|
onTodayButtonClick: null,
|
|
onClearButtonClick: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$25(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$25(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$25() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Captcha = /*#__PURE__*/function (_Component) {
|
|
_inherits(Captcha, _Component);
|
|
|
|
var _super = _createSuper$25(Captcha);
|
|
|
|
function Captcha() {
|
|
_classCallCheck(this, Captcha);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Captcha, [{
|
|
key: "init",
|
|
value: function init() {
|
|
var _this = this;
|
|
|
|
this._instance = window.grecaptcha.render(this.targetEL, {
|
|
'sitekey': this.props.siteKey,
|
|
'theme': this.props.theme,
|
|
'type': this.props.type,
|
|
'size': this.props.size,
|
|
'tabindex': this.props.tabIndex,
|
|
'hl': this.props.language,
|
|
'callback': function callback(response) {
|
|
_this.recaptchaCallback(response);
|
|
},
|
|
'expired-callback': function expiredCallback() {
|
|
_this.recaptchaExpiredCallback();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "reset",
|
|
value: function reset() {
|
|
if (this._instance === null) return;
|
|
window.grecaptcha.reset(this._instance);
|
|
}
|
|
}, {
|
|
key: "getResponse",
|
|
value: function getResponse() {
|
|
if (this._instance === null) return null;
|
|
return window.grecaptcha.getResponse(this._instance);
|
|
}
|
|
}, {
|
|
key: "recaptchaCallback",
|
|
value: function recaptchaCallback(response) {
|
|
if (this.props.onResponse) {
|
|
this.props.onResponse({
|
|
response: response
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "recaptchaExpiredCallback",
|
|
value: function recaptchaExpiredCallback() {
|
|
if (this.props.onExpire) {
|
|
this.props.onExpire();
|
|
}
|
|
}
|
|
}, {
|
|
key: "addRecaptchaScript",
|
|
value: function addRecaptchaScript() {
|
|
var _this2 = this;
|
|
|
|
this.recaptchaScript = null;
|
|
|
|
if (!window.grecaptcha) {
|
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
this.recaptchaScript = document.createElement('script');
|
|
this.recaptchaScript.src = "https://www.google.com/recaptcha/api.js?render=explicit";
|
|
this.recaptchaScript.async = true;
|
|
this.recaptchaScript.defer = true;
|
|
|
|
this.recaptchaScript.onload = function () {
|
|
if (!window.grecaptcha) {
|
|
console.warn("Recaptcha is not loaded");
|
|
return;
|
|
}
|
|
|
|
window.grecaptcha.ready(function () {
|
|
_this2.init();
|
|
});
|
|
};
|
|
|
|
head.appendChild(this.recaptchaScript);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.addRecaptchaScript();
|
|
|
|
if (window.grecaptcha) {
|
|
this.init();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.recaptchaScript) {
|
|
this.recaptchaScript.parentNode.removeChild(this.recaptchaScript);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this3.targetEL = el;
|
|
}
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return Captcha;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Captcha, "defaultProps", {
|
|
id: null,
|
|
siteKey: null,
|
|
theme: "light",
|
|
type: "image",
|
|
size: "normal",
|
|
tabIndex: 0,
|
|
language: "en",
|
|
onResponse: null,
|
|
onExpire: null
|
|
});
|
|
|
|
function _createSuper$24(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$24(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$24() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Card = /*#__PURE__*/function (_Component) {
|
|
_inherits(Card, _Component);
|
|
|
|
var _super = _createSuper$24(Card);
|
|
|
|
function Card() {
|
|
_classCallCheck(this, Card);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Card, [{
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-header"
|
|
}, ObjectUtils.getJSXElement(this.props.header, this.props));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderBody",
|
|
value: function renderBody() {
|
|
var title = this.props.title && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-title"
|
|
}, ObjectUtils.getJSXElement(this.props.title, this.props));
|
|
var subTitle = this.props.subTitle && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-subtitle"
|
|
}, ObjectUtils.getJSXElement(this.props.subTitle, this.props));
|
|
var children = this.props.children && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-content"
|
|
}, this.props.children);
|
|
var footer = this.props.footer && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-footer"
|
|
}, ObjectUtils.getJSXElement(this.props.footer, this.props));
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-card-body"
|
|
}, title, subTitle, children, footer);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var header = this.renderHeader();
|
|
var body = this.renderBody();
|
|
var className = classNames('p-card p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: this.props.style,
|
|
id: this.props.id
|
|
}, header, body);
|
|
}
|
|
}]);
|
|
|
|
return Card;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Card, "defaultProps", {
|
|
id: null,
|
|
header: null,
|
|
footer: null,
|
|
title: null,
|
|
subTitle: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$23(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$23(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$23() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var CarouselItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(CarouselItem, _Component);
|
|
|
|
var _super = _createSuper$23(CarouselItem);
|
|
|
|
function CarouselItem() {
|
|
_classCallCheck(this, CarouselItem);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(CarouselItem, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.template(this.props.item);
|
|
var itemClassName = classNames(this.props.className, 'p-carousel-item', {
|
|
'p-carousel-item-active': this.props.active,
|
|
'p-carousel-item-start': this.props.start,
|
|
'p-carousel-item-end': this.props.end
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: itemClassName
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return CarouselItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(CarouselItem, "defaultProps", {
|
|
template: null,
|
|
item: null,
|
|
active: false,
|
|
start: false,
|
|
end: false,
|
|
className: null
|
|
});
|
|
|
|
var Carousel = /*#__PURE__*/function (_Component2) {
|
|
_inherits(Carousel, _Component2);
|
|
|
|
var _super2 = _createSuper$23(Carousel);
|
|
|
|
function Carousel(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Carousel);
|
|
|
|
_this = _super2.call(this, props);
|
|
_this.state = {
|
|
numVisible: props.numVisible,
|
|
numScroll: props.numScroll,
|
|
totalShiftedItems: props.page * props.numScroll * -1
|
|
};
|
|
|
|
if (!_this.props.onPageChange) {
|
|
_this.state = _objectSpread$J(_objectSpread$J({}, _this.state), {}, {
|
|
page: props.page
|
|
});
|
|
}
|
|
|
|
_this.navBackward = _this.navBackward.bind(_assertThisInitialized(_this));
|
|
_this.navForward = _this.navForward.bind(_assertThisInitialized(_this));
|
|
_this.onTransitionEnd = _this.onTransitionEnd.bind(_assertThisInitialized(_this));
|
|
_this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_this));
|
|
_this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.totalIndicators = 0;
|
|
_this.remainingItems = 0;
|
|
_this.allowAutoplay = !!_this.props.autoplayInterval;
|
|
_this.circular = _this.props.circular || _this.allowAutoplay;
|
|
_this.attributeSelector = UniqueComponentId();
|
|
_this.swipeThreshold = 20;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Carousel, [{
|
|
key: "step",
|
|
value: function step(dir, page) {
|
|
var totalShiftedItems = this.state.totalShiftedItems;
|
|
var isCircular = this.isCircular();
|
|
|
|
if (page != null) {
|
|
totalShiftedItems = this.state.numScroll * page * -1;
|
|
|
|
if (isCircular) {
|
|
totalShiftedItems -= this.state.numVisible;
|
|
}
|
|
|
|
this.isRemainingItemsAdded = false;
|
|
} else {
|
|
totalShiftedItems += this.state.numScroll * dir;
|
|
|
|
if (this.isRemainingItemsAdded) {
|
|
totalShiftedItems += this.remainingItems - this.state.numScroll * dir;
|
|
this.isRemainingItemsAdded = false;
|
|
}
|
|
|
|
var originalShiftedItems = isCircular ? totalShiftedItems + this.state.numVisible : totalShiftedItems;
|
|
page = Math.abs(Math.floor(originalShiftedItems / this.state.numScroll));
|
|
}
|
|
|
|
if (isCircular && this.state.page === this.totalIndicators - 1 && dir === -1) {
|
|
totalShiftedItems = -1 * (this.props.value.length + this.state.numVisible);
|
|
page = 0;
|
|
} else if (isCircular && this.state.page === 0 && dir === 1) {
|
|
totalShiftedItems = 0;
|
|
page = this.totalIndicators - 1;
|
|
} else if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
|
|
totalShiftedItems += this.remainingItems * -1 - this.state.numScroll * dir;
|
|
this.isRemainingItemsAdded = true;
|
|
}
|
|
|
|
if (this.itemsContainer) {
|
|
DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
|
|
this.changePosition(totalShiftedItems);
|
|
this.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
|
|
if (this.props.onPageChange) {
|
|
this.setState({
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
this.props.onPageChange({
|
|
page: page
|
|
});
|
|
} else {
|
|
this.setState({
|
|
page: page,
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "calculatePosition",
|
|
value: function calculatePosition() {
|
|
if (this.itemsContainer && this.responsiveOptions) {
|
|
var windowWidth = window.innerWidth;
|
|
var matchedResponsiveData = {
|
|
numVisible: this.props.numVisible,
|
|
numScroll: this.props.numScroll
|
|
};
|
|
|
|
for (var i = 0; i < this.responsiveOptions.length; i++) {
|
|
var res = this.responsiveOptions[i];
|
|
|
|
if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
|
matchedResponsiveData = res;
|
|
}
|
|
}
|
|
|
|
var state = {};
|
|
|
|
if (this.state.numScroll !== matchedResponsiveData.numScroll) {
|
|
var page = this.getPage();
|
|
page = Math.floor(page * this.state.numScroll / matchedResponsiveData.numScroll);
|
|
var totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
|
|
|
|
if (this.isCircular()) {
|
|
totalShiftedItems -= matchedResponsiveData.numVisible;
|
|
}
|
|
|
|
state = {
|
|
totalShiftedItems: totalShiftedItems,
|
|
numScroll: matchedResponsiveData.numScroll
|
|
};
|
|
|
|
if (this.props.onPageChange) {
|
|
this.props.onPageChange({
|
|
page: page
|
|
});
|
|
} else {
|
|
state = _objectSpread$J(_objectSpread$J({}, state), {}, {
|
|
page: page
|
|
});
|
|
}
|
|
}
|
|
|
|
if (this.state.numVisible !== matchedResponsiveData.numVisible) {
|
|
state = _objectSpread$J(_objectSpread$J({}, state), {}, {
|
|
numVisible: matchedResponsiveData.numVisible
|
|
});
|
|
}
|
|
|
|
if (Object.keys(state).length) {
|
|
this.setState(state);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "navBackward",
|
|
value: function navBackward(e, page) {
|
|
if (this.circular || this.getPage() !== 0) {
|
|
this.step(1, page);
|
|
}
|
|
|
|
this.allowAutoplay = false;
|
|
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navForward",
|
|
value: function navForward(e, page) {
|
|
if (this.circular || this.getPage() < this.totalIndicators - 1) {
|
|
this.step(-1, page);
|
|
}
|
|
|
|
this.allowAutoplay = false;
|
|
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDotClick",
|
|
value: function onDotClick(e, page) {
|
|
var currentPage = this.getPage();
|
|
|
|
if (page > currentPage) {
|
|
this.navForward(e, page);
|
|
} else if (page < currentPage) {
|
|
this.navBackward(e, page);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTransitionEnd",
|
|
value: function onTransitionEnd(e) {
|
|
if (this.itemsContainer && e.propertyName === 'transform') {
|
|
DomHandler.addClass(this.itemsContainer, 'p-items-hidden');
|
|
this.itemsContainer.style.transition = '';
|
|
|
|
if ((this.state.page === 0 || this.state.page === this.totalIndicators - 1) && this.isCircular()) {
|
|
this.changePosition(this.state.totalShiftedItems);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchStart",
|
|
value: function onTouchStart(e) {
|
|
var touchobj = e.changedTouches[0];
|
|
this.startPos = {
|
|
x: touchobj.pageX,
|
|
y: touchobj.pageY
|
|
};
|
|
}
|
|
}, {
|
|
key: "onTouchMove",
|
|
value: function onTouchMove(e) {
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd(e) {
|
|
var touchobj = e.changedTouches[0];
|
|
|
|
if (this.isVertical()) {
|
|
this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
|
|
} else {
|
|
this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
|
|
}
|
|
}
|
|
}, {
|
|
key: "changePageOnTouch",
|
|
value: function changePageOnTouch(e, diff) {
|
|
if (Math.abs(diff) > this.swipeThreshold) {
|
|
if (diff < 0) {
|
|
// left
|
|
this.navForward(e);
|
|
} else {
|
|
// right
|
|
this.navBackward(e);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentListeners",
|
|
value: function bindDocumentListeners() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function () {
|
|
_this2.calculatePosition();
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentListeners",
|
|
value: function unbindDocumentListeners() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
value: function isVertical() {
|
|
return this.props.orientation === 'vertical';
|
|
}
|
|
}, {
|
|
key: "isCircular",
|
|
value: function isCircular() {
|
|
return this.circular && this.props.value.length >= this.state.numVisible;
|
|
}
|
|
}, {
|
|
key: "getPage",
|
|
value: function getPage() {
|
|
return this.props.onPageChange ? this.props.page : this.state.page;
|
|
}
|
|
}, {
|
|
key: "getTotalIndicators",
|
|
value: function getTotalIndicators() {
|
|
return this.props.value ? Math.ceil((this.props.value.length - this.state.numVisible) / this.state.numScroll) + 1 : 0;
|
|
}
|
|
}, {
|
|
key: "isAutoplay",
|
|
value: function isAutoplay() {
|
|
return this.props.autoplayInterval && this.allowAutoplay;
|
|
}
|
|
}, {
|
|
key: "startAutoplay",
|
|
value: function startAutoplay() {
|
|
var _this3 = this;
|
|
|
|
this.interval = setInterval(function () {
|
|
if (_this3.state.page === _this3.totalIndicators - 1) {
|
|
_this3.step(-1, 0);
|
|
} else {
|
|
_this3.step(-1, _this3.state.page + 1);
|
|
}
|
|
}, this.props.autoplayInterval);
|
|
}
|
|
}, {
|
|
key: "stopAutoplay",
|
|
value: function stopAutoplay() {
|
|
if (this.interval) {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
}, {
|
|
key: "createStyle",
|
|
value: function createStyle() {
|
|
if (!this.carouselStyle) {
|
|
this.carouselStyle = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
}
|
|
|
|
var innerHTML = "\n .p-carousel[".concat(this.attributeSelector, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / this.state.numVisible, "%\n }\n ");
|
|
|
|
if (this.props.responsiveOptions) {
|
|
this.responsiveOptions = _toConsumableArray(this.props.responsiveOptions);
|
|
this.responsiveOptions.sort(function (data1, data2) {
|
|
var value1 = data1.breakpoint;
|
|
var value2 = data2.breakpoint;
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
|
return -1 * result;
|
|
});
|
|
|
|
for (var i = 0; i < this.responsiveOptions.length; i++) {
|
|
var res = this.responsiveOptions[i];
|
|
innerHTML += "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-carousel[").concat(this.attributeSelector, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
|
|
}
|
|
}
|
|
|
|
this.carouselStyle.innerHTML = innerHTML;
|
|
}
|
|
}, {
|
|
key: "changePosition",
|
|
value: function changePosition(totalShiftedItems) {
|
|
if (this.itemsContainer) {
|
|
this.itemsContainer.style.transform = this.isVertical() ? "translate3d(0, ".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0, 0)");
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.container) {
|
|
this.container.setAttribute(this.attributeSelector, '');
|
|
}
|
|
|
|
this.createStyle();
|
|
this.calculatePosition();
|
|
this.changePosition(this.state.totalShiftedItems);
|
|
|
|
if (this.props.responsiveOptions) {
|
|
this.bindDocumentListeners();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var isCircular = this.isCircular();
|
|
var stateChanged = false;
|
|
var totalShiftedItems = this.state.totalShiftedItems;
|
|
|
|
if (this.props.autoplayInterval) {
|
|
this.stopAutoplay();
|
|
}
|
|
|
|
if (prevState.numScroll !== this.state.numScroll || prevState.numVisible !== this.state.numVisible || this.props.value && prevProps.value && prevProps.value.length !== this.props.value.length) {
|
|
this.remainingItems = (this.props.value.length - this.state.numVisible) % this.state.numScroll;
|
|
var page = this.getPage();
|
|
|
|
if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
|
|
page = this.totalIndicators - 1;
|
|
|
|
if (this.props.onPageChange) {
|
|
this.props.onPageChange({
|
|
page: page
|
|
});
|
|
} else {
|
|
this.setState({
|
|
page: page
|
|
});
|
|
}
|
|
|
|
stateChanged = true;
|
|
}
|
|
|
|
totalShiftedItems = page * this.state.numScroll * -1;
|
|
|
|
if (isCircular) {
|
|
totalShiftedItems -= this.state.numVisible;
|
|
}
|
|
|
|
if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
|
|
totalShiftedItems += -1 * this.remainingItems + this.state.numScroll;
|
|
this.isRemainingItemsAdded = true;
|
|
} else {
|
|
this.isRemainingItemsAdded = false;
|
|
}
|
|
|
|
if (totalShiftedItems !== this.state.totalShiftedItems) {
|
|
this.setState({
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
stateChanged = true;
|
|
}
|
|
|
|
this.changePosition(totalShiftedItems);
|
|
}
|
|
|
|
if (isCircular) {
|
|
if (this.state.page === 0) {
|
|
totalShiftedItems = -1 * this.state.numVisible;
|
|
} else if (totalShiftedItems === 0) {
|
|
totalShiftedItems = -1 * this.props.value.length;
|
|
|
|
if (this.remainingItems > 0) {
|
|
this.isRemainingItemsAdded = true;
|
|
}
|
|
}
|
|
|
|
if (totalShiftedItems !== this.state.totalShiftedItems) {
|
|
this.setState({
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
stateChanged = true;
|
|
}
|
|
}
|
|
|
|
if (prevProps.page !== this.props.page) {
|
|
if (this.props.page > prevProps.page && this.props.page <= this.totalIndicators - 1) {
|
|
this.step(-1, this.props.page);
|
|
} else if (this.props.page < prevProps.page) {
|
|
this.step(1, this.props.page);
|
|
}
|
|
}
|
|
|
|
if (!stateChanged && this.isAutoplay()) {
|
|
this.startAutoplay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.responsiveOptions) {
|
|
this.unbindDocumentListeners();
|
|
}
|
|
|
|
if (this.props.autoplayInterval) {
|
|
this.stopAutoplay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.value && this.props.value.length) {
|
|
var isCircular = this.isCircular();
|
|
var clonedItemsForStarting = null;
|
|
var clonedItemsForFinishing = null;
|
|
|
|
if (isCircular) {
|
|
var clonedElements = null;
|
|
clonedElements = this.props.value.slice(-1 * this.state.numVisible);
|
|
clonedItemsForStarting = clonedElements.map(function (item, index) {
|
|
var isActive = _this4.state.totalShiftedItems * -1 === _this4.props.value.length + _this4.state.numVisible,
|
|
start = index === 0,
|
|
end = index === clonedElements.length - 1;
|
|
return /*#__PURE__*/React__default["default"].createElement(CarouselItem, {
|
|
key: index + '_scloned',
|
|
className: "p-carousel-item-cloned",
|
|
template: _this4.props.itemTemplate,
|
|
item: item,
|
|
active: isActive,
|
|
start: start,
|
|
end: end
|
|
});
|
|
});
|
|
clonedElements = this.props.value.slice(0, this.state.numVisible);
|
|
clonedItemsForFinishing = clonedElements.map(function (item, index) {
|
|
var isActive = _this4.state.totalShiftedItems === 0,
|
|
start = index === 0,
|
|
end = index === clonedElements.length - 1;
|
|
return /*#__PURE__*/React__default["default"].createElement(CarouselItem, {
|
|
key: index + '_fcloned',
|
|
className: "p-carousel-item-cloned",
|
|
template: _this4.props.itemTemplate,
|
|
item: item,
|
|
active: isActive,
|
|
start: start,
|
|
end: end
|
|
});
|
|
});
|
|
}
|
|
|
|
var items = this.props.value.map(function (item, index) {
|
|
var firstIndex = isCircular ? -1 * (_this4.state.totalShiftedItems + _this4.state.numVisible) : _this4.state.totalShiftedItems * -1,
|
|
lastIndex = firstIndex + _this4.state.numVisible - 1,
|
|
isActive = firstIndex <= index && lastIndex >= index,
|
|
start = firstIndex === index,
|
|
end = lastIndex === index;
|
|
return /*#__PURE__*/React__default["default"].createElement(CarouselItem, {
|
|
key: index,
|
|
template: _this4.props.itemTemplate,
|
|
item: item,
|
|
active: isActive,
|
|
start: start,
|
|
end: end
|
|
});
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, clonedItemsForStarting, items, clonedItemsForFinishing);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-carousel-header"
|
|
}, this.props.header);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-carousel-footer"
|
|
}, this.props.footer);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this5 = this;
|
|
|
|
var items = this.renderItems();
|
|
var height = this.isVertical() ? this.props.verticalViewPortHeight : 'auto';
|
|
var backwardNavigator = this.renderBackwardNavigator();
|
|
var forwardNavigator = this.renderForwardNavigator();
|
|
var containerClassName = classNames('p-carousel-container', this.props.containerClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: containerClassName
|
|
}, backwardNavigator, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-carousel-items-content",
|
|
style: {
|
|
'height': height
|
|
},
|
|
onTouchStart: this.onTouchStart,
|
|
onTouchMove: this.onTouchMove,
|
|
onTouchEnd: this.onTouchEnd
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.itemsContainer = el;
|
|
},
|
|
className: "p-carousel-items-container",
|
|
onTransitionEnd: this.onTransitionEnd
|
|
}, items)), forwardNavigator);
|
|
}
|
|
}, {
|
|
key: "renderBackwardNavigator",
|
|
value: function renderBackwardNavigator() {
|
|
var isDisabled = (!this.circular || this.props.value && this.props.value.length < this.state.numVisible) && this.getPage() === 0;
|
|
var buttonClassName = classNames('p-carousel-prev p-link', {
|
|
'p-disabled': isDisabled
|
|
}),
|
|
iconClassName = classNames('p-carousel-prev-icon pi', {
|
|
'pi-chevron-left': !this.isVertical(),
|
|
'pi-chevron-up': this.isVertical()
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonClassName,
|
|
onClick: this.navBackward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderForwardNavigator",
|
|
value: function renderForwardNavigator() {
|
|
var isDisabled = (!this.circular || this.props.value && this.props.value.length < this.state.numVisible) && (this.getPage() === this.totalIndicators - 1 || this.totalIndicators === 0);
|
|
var buttonClassName = classNames('p-carousel-next p-link', {
|
|
'p-disabled': isDisabled
|
|
}),
|
|
iconClassName = classNames('p-carousel-next-icon pi', {
|
|
'pi-chevron-right': !this.isVertical(),
|
|
'pi-chevron-down': this.isVertical()
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonClassName,
|
|
onClick: this.navForward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderIndicator",
|
|
value: function renderIndicator(index) {
|
|
var _this6 = this;
|
|
|
|
var isActive = this.getPage() === index,
|
|
indicatorItemClassName = classNames('p-carousel-indicator', {
|
|
'p-highlight': isActive
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: indicatorItemClassName,
|
|
key: 'p-carousel-indicator-' + index
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-link",
|
|
onClick: function onClick(e) {
|
|
return _this6.onDotClick(e, index);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
}, {
|
|
key: "renderIndicators",
|
|
value: function renderIndicators() {
|
|
var indicatorsContentClassName = classNames('p-carousel-indicators p-reset', this.props.indicatorsContentClassName);
|
|
var indicators = [];
|
|
|
|
for (var i = 0; i < this.totalIndicators; i++) {
|
|
indicators.push(this.renderIndicator(i));
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: indicatorsContentClassName
|
|
}, indicators);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-carousel p-component', {
|
|
'p-carousel-vertical': this.isVertical(),
|
|
'p-carousel-horizontal': !this.isVertical()
|
|
}, this.props.className);
|
|
var contentClassName = classNames('p-carousel-content', this.props.contentClassName);
|
|
this.totalIndicators = this.getTotalIndicators();
|
|
var content = this.renderContent();
|
|
var indicators = this.renderIndicators();
|
|
var header = this.renderHeader();
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, header, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: contentClassName
|
|
}, content, indicators), footer);
|
|
}
|
|
}]);
|
|
|
|
return Carousel;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Carousel, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
page: 0,
|
|
header: null,
|
|
footer: null,
|
|
style: null,
|
|
className: null,
|
|
itemTemplate: null,
|
|
circular: false,
|
|
autoplayInterval: 0,
|
|
numVisible: 1,
|
|
numScroll: 1,
|
|
responsiveOptions: null,
|
|
orientation: "horizontal",
|
|
verticalViewPortHeight: "300px",
|
|
contentClassName: null,
|
|
containerClassName: null,
|
|
indicatorsContentClassName: null,
|
|
onPageChange: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$22(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$22(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$22() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var CascadeSelectSub = /*#__PURE__*/function (_Component) {
|
|
_inherits(CascadeSelectSub, _Component);
|
|
|
|
var _super = _createSuper$22(CascadeSelectSub);
|
|
|
|
function CascadeSelectSub(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, CascadeSelectSub);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeOption: null
|
|
};
|
|
_this.onOptionSelect = _this.onOptionSelect.bind(_assertThisInitialized(_this));
|
|
_this.onOptionGroupSelect = _this.onOptionGroupSelect.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(CascadeSelectSub, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.selectionPath && this.props.options && !this.props.dirty) {
|
|
var _iterator = _createForOfIteratorHelper$e(this.props.options),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var option = _step.value;
|
|
|
|
if (this.props.selectionPath.includes(option)) {
|
|
this.setState({
|
|
activeOption: option
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
|
|
if (!this.props.root) {
|
|
this.position();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.parentActive !== this.props.parentActive) {
|
|
this.setState({
|
|
activeOption: null
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "position",
|
|
value: function position() {
|
|
var parentItem = this.element.parentElement;
|
|
var containerOffset = DomHandler.getOffset(parentItem);
|
|
var viewport = DomHandler.getViewport();
|
|
var sublistWidth = this.element.offsetParent ? this.element.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.element);
|
|
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
|
|
|
|
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
|
|
this.element.style.left = '-100%';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOptionSelect",
|
|
value: function onOptionSelect(event) {
|
|
if (this.props.onOptionSelect) {
|
|
this.props.onOptionSelect(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event, option) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
|
|
switch (event.key) {
|
|
case 'Down':
|
|
case 'ArrowDown':
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
|
|
break;
|
|
|
|
case 'Up':
|
|
case 'ArrowUp':
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
|
|
break;
|
|
|
|
case 'Right':
|
|
case 'ArrowRight':
|
|
if (this.isOptionGroup(option)) {
|
|
if (this.state.activeOption === option) {
|
|
listItem.children[1].children[0].children[0].focus();
|
|
} else {
|
|
this.setState({
|
|
activeOption: option
|
|
});
|
|
}
|
|
}
|
|
|
|
break;
|
|
|
|
case 'Left':
|
|
case 'ArrowLeft':
|
|
this.setState({
|
|
activeOption: null
|
|
});
|
|
var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
|
|
|
|
if (parentList) {
|
|
parentList.focus();
|
|
}
|
|
|
|
break;
|
|
|
|
case 'Enter':
|
|
this.onOptionClick(event, option);
|
|
break;
|
|
|
|
case 'Tab':
|
|
case 'Escape':
|
|
if (this.props.onPanelHide) {
|
|
this.props.onPanelHide();
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "onOptionClick",
|
|
value: function onOptionClick(event, option) {
|
|
if (this.isOptionGroup(option)) {
|
|
this.setState({
|
|
activeOption: this.state.activeOption === option ? null : option
|
|
});
|
|
|
|
if (this.props.onOptionGroupSelect) {
|
|
this.props.onOptionGroupSelect({
|
|
originalEvent: event,
|
|
value: option
|
|
});
|
|
}
|
|
} else {
|
|
if (this.props.onOptionSelect) {
|
|
this.props.onOptionSelect({
|
|
originalEvent: event,
|
|
value: this.getOptionValue(option)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOptionGroupSelect",
|
|
value: function onOptionGroupSelect(event) {
|
|
if (this.props.onOptionGroupSelect) {
|
|
this.props.onOptionGroupSelect(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupLabel",
|
|
value: function getOptionGroupLabel(optionGroup) {
|
|
return this.props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel) : null;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren[this.props.level]);
|
|
}
|
|
}, {
|
|
key: "isOptionGroup",
|
|
value: function isOptionGroup(option) {
|
|
return Object.prototype.hasOwnProperty.call(option, this.props.optionGroupChildren[this.props.level]);
|
|
}
|
|
}, {
|
|
key: "getOptionLabelToRender",
|
|
value: function getOptionLabelToRender(option) {
|
|
return this.isOptionGroup(option) ? this.getOptionGroupLabel(option) : this.getOptionLabel(option);
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(option) {
|
|
if (this.isOptionGroup(option) && this.state.activeOption === option) {
|
|
return /*#__PURE__*/React__default["default"].createElement(CascadeSelectSub, {
|
|
options: this.getOptionGroupChildren(option),
|
|
className: "p-cascadeselect-sublist",
|
|
selectionPath: this.props.selectionPath,
|
|
optionLabel: this.props.optionLabel,
|
|
optionValue: this.props.optionValue,
|
|
level: this.props.level + 1,
|
|
onOptionSelect: this.onOptionSelect,
|
|
onOptionGroupSelect: this.onOptionGroupSelect,
|
|
parentActive: this.state.activeOption === option,
|
|
optionGroupLabel: this.props.optionGroupLabel,
|
|
optionGroupChildren: this.props.optionGroupChildren,
|
|
dirty: this.props.dirty,
|
|
template: this.props.template,
|
|
onPanelHide: this.props.onPanelHide
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderOption",
|
|
value: function renderOption(option, index) {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-cascadeselect-item', {
|
|
'p-cascadeselect-item-group': this.isOptionGroup(option),
|
|
'p-cascadeselect-item-active p-highlight': this.state.activeOption === option
|
|
}, option.className);
|
|
var submenu = this.renderSubmenu(option);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.getOptionValue(option)) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-cascadeselect-item-text"
|
|
}, this.getOptionLabelToRender(option));
|
|
var optionGroup = this.isOptionGroup(option) && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-cascadeselect-group-icon pi pi-angle-right"
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: this.getOptionLabelToRender(option) + '_' + index,
|
|
className: className,
|
|
style: option.style,
|
|
role: "none"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-cascadeselect-item-content",
|
|
onClick: function onClick(event) {
|
|
return _this2.onOptionClick(event, option);
|
|
},
|
|
tabIndex: 0,
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this2.onKeyDown(event, option);
|
|
}
|
|
}, content, optionGroup, /*#__PURE__*/React__default["default"].createElement(Ripple, null)), submenu);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.options) {
|
|
return this.props.options.map(function (option, index) {
|
|
return _this3.renderOption(option, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-cascadeselect-panel p-cascadeselect-items', this.props.className);
|
|
var submenu = this.renderMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this4.element = el;
|
|
},
|
|
className: className,
|
|
role: "listbox",
|
|
"aria-orientation": "horizontal"
|
|
}, submenu);
|
|
}
|
|
}]);
|
|
|
|
return CascadeSelectSub;
|
|
}(React.Component);
|
|
|
|
_defineProperty(CascadeSelectSub, "defaultProps", {
|
|
options: null,
|
|
selectionPath: false,
|
|
className: null,
|
|
optionLabel: null,
|
|
optionValue: null,
|
|
level: null,
|
|
optionGroupLabel: null,
|
|
optionGroupChildren: null,
|
|
parentActive: null,
|
|
dirty: null,
|
|
root: null,
|
|
template: null,
|
|
onOptionSelect: null,
|
|
onOptionGroupSelect: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$21(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$21(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$21() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var CascadeSelect = /*#__PURE__*/function (_Component) {
|
|
_inherits(CascadeSelect, _Component);
|
|
|
|
var _super = _createSuper$21(CascadeSelect);
|
|
|
|
function CascadeSelect(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, CascadeSelect);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false,
|
|
overlayVisible: false
|
|
};
|
|
_this.dirty = false;
|
|
_this.selectionPath = null;
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onOptionSelect = _this.onOptionSelect.bind(_assertThisInitialized(_this));
|
|
_this.onOptionGroupSelect = _this.onOptionGroupSelect.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(CascadeSelect, [{
|
|
key: "onOptionSelect",
|
|
value: function onOptionSelect(event) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: event.value
|
|
});
|
|
}
|
|
|
|
this.updateSelectionPath();
|
|
this.hide();
|
|
this.inputRef.current.focus();
|
|
}
|
|
}, {
|
|
key: "onOptionGroupSelect",
|
|
value: function onOptionGroupSelect(event) {
|
|
this.dirty = true;
|
|
|
|
if (this.props.onGroupChange) {
|
|
this.props.onGroupChange(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup, level) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren[level]);
|
|
}
|
|
}, {
|
|
key: "isOptionGroup",
|
|
value: function isOptionGroup(option, level) {
|
|
return Object.prototype.hasOwnProperty.call(option, this.props.optionGroupChildren[level]);
|
|
}
|
|
}, {
|
|
key: "updateSelectionPath",
|
|
value: function updateSelectionPath() {
|
|
var path;
|
|
|
|
if (this.props.value != null && this.props.options) {
|
|
var _iterator = _createForOfIteratorHelper$d(this.props.options),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var option = _step.value;
|
|
path = this.findModelOptionInGroup(option, 0);
|
|
|
|
if (path) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
|
|
this.selectionPath = path;
|
|
}
|
|
}, {
|
|
key: "findModelOptionInGroup",
|
|
value: function findModelOptionInGroup(option, level) {
|
|
if (this.isOptionGroup(option, level)) {
|
|
var selectedOption;
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$d(this.getOptionGroupChildren(option, level)),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var childOption = _step2.value;
|
|
selectedOption = this.findModelOptionInGroup(childOption, level + 1);
|
|
|
|
if (selectedOption) {
|
|
selectedOption.unshift(option);
|
|
return selectedOption;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
} else if (ObjectUtils.equals(this.props.value, this.getOptionValue(option), this.props.dataKey)) {
|
|
return [option];
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
var overlay = this.overlayRef ? this.overlayRef.current : null;
|
|
|
|
if (!overlay || !overlay.contains(event.target)) {
|
|
this.inputRef.current.focus();
|
|
|
|
if (this.state.overlayVisible) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (this.state.overlayVisible) {
|
|
DomHandler.findSingle(this.overlayRef.current, '.p-cascadeselect-item').children[0].focus();
|
|
} else if (event.altKey && this.props.options && this.props.options.length) {
|
|
this.show();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (this.state.overlayVisible) this.hide();else this.show();
|
|
event.preventDefault();
|
|
break;
|
|
//tab
|
|
|
|
case 9:
|
|
this.hide();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
if (this.props.onBeforeShow) {
|
|
this.props.onBeforeShow();
|
|
}
|
|
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.onBeforeHide) {
|
|
this.props.onBeforeHide();
|
|
}
|
|
|
|
this.setState({
|
|
overlayVisible: false
|
|
}, function () {
|
|
_this2.inputRef.current.focus();
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindOutsideClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindOutsideClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
this.dirty = false;
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.label.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "bindOutsideClickListener",
|
|
value: function bindOutsideClickListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.outsideClickListener) {
|
|
this.outsideClickListener = function (event) {
|
|
if (_this3.state.overlayVisible && _this3.isOutsideClicked(event)) {
|
|
_this3.hide();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.outsideClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindOutsideClickListener",
|
|
value: function unbindOutsideClickListener() {
|
|
if (this.outsideClickListener) {
|
|
document.removeEventListener('click', this.outsideClickListener);
|
|
this.outsideClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this4.state.overlayVisible) {
|
|
_this4.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this5.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this5.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.overlayRef && this.overlayRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
this.updateSelectionPath();
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindOutsideClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.value !== this.props.value) {
|
|
this.updateSelectionPath();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderKeyboardHelper",
|
|
value: function renderKeyboardHelper() {
|
|
var value = this.props.value ? this.getOptionLabel(this.props.value) : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: "text",
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
defaultValue: value,
|
|
readOnly: true,
|
|
disabled: this.props.disabled,
|
|
onFocus: this.onInputFocus,
|
|
onBlur: this.onInputBlur,
|
|
onKeyDown: this.onInputKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
"aria-haspopup": "listbox",
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel() {
|
|
var _this6 = this;
|
|
|
|
var label = this.props.value ? this.getOptionLabel(this.props.value) : this.props.placeholder || 'p-emptylabel';
|
|
var labelClassName = classNames('p-cascadeselect-label ', {
|
|
'p-placeholder': label === this.props.placeholder,
|
|
'p-cascadeselect-label-empty': !this.props.value && label === 'p-emptylabel'
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this6.label = el;
|
|
},
|
|
className: labelClassName
|
|
}, label);
|
|
}
|
|
}, {
|
|
key: "renderDropdownIcon",
|
|
value: function renderDropdownIcon() {
|
|
var iconClassName = classNames('p-cascadeselect-trigger-icon', this.props.dropdownIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-cascadeselect-trigger",
|
|
role: "button",
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": this.state.overlayVisible
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderOverlay",
|
|
value: function renderOverlay() {
|
|
var overlay = /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.overlayVisible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
className: "p-cascadeselect-panel p-component",
|
|
onClick: this.onPanelClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-cascadeselect-items-wrapper"
|
|
}, /*#__PURE__*/React__default["default"].createElement(CascadeSelectSub, {
|
|
options: this.props.options,
|
|
selectionPath: this.selectionPath,
|
|
className: "p-cascadeselect-items",
|
|
optionLabel: this.props.optionLabel,
|
|
optionValue: this.props.optionValue,
|
|
level: 0,
|
|
optionGroupLabel: this.props.optionGroupLabel,
|
|
optionGroupChildren: this.props.optionGroupChildren,
|
|
onOptionSelect: this.onOptionSelect,
|
|
onOptionGroupSelect: this.onOptionGroupSelect,
|
|
root: true,
|
|
template: this.props.itemTemplate,
|
|
onPanelHide: this.hide
|
|
}))));
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: overlay,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-cascadeselect p-component p-inputwrapper', this.props.className, {
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-inputwrapper-filled': this.props.value,
|
|
'p-inputwrapper-focus': this.state.focused || this.state.overlayVisible
|
|
});
|
|
var keyboardHelper = this.renderKeyboardHelper();
|
|
var labelElement = this.renderLabel();
|
|
var dropdownIcon = this.renderDropdownIcon();
|
|
var overlay = this.renderOverlay();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, keyboardHelper, labelElement, dropdownIcon, overlay);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return CascadeSelect;
|
|
}(React.Component);
|
|
|
|
_defineProperty(CascadeSelect, "defaultProps", {
|
|
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,
|
|
inputId: null,
|
|
tabIndex: null,
|
|
ariaLabelledBy: null,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
onChange: null,
|
|
onGroupChange: null,
|
|
onBeforeShow: null,
|
|
onBeforeHide: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$20(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$20(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$20() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Chart = /*#__PURE__*/function (_Component) {
|
|
_inherits(Chart, _Component);
|
|
|
|
var _super = _createSuper$20(Chart);
|
|
|
|
function Chart() {
|
|
_classCallCheck(this, Chart);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Chart, [{
|
|
key: "initChart",
|
|
value: function initChart() {
|
|
var _this = this;
|
|
|
|
import('chart.js/auto').then(function (module) {
|
|
if (_this.chart) {
|
|
_this.chart.destroy();
|
|
|
|
_this.chart = null;
|
|
}
|
|
|
|
if (module && module["default"]) {
|
|
_this.chart = new module["default"](_this.canvas, {
|
|
type: _this.props.type,
|
|
data: _this.props.data,
|
|
options: _this.props.options,
|
|
plugins: _this.props.plugins
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "getCanvas",
|
|
value: function getCanvas() {
|
|
return this.canvas;
|
|
}
|
|
}, {
|
|
key: "getChart",
|
|
value: function getChart() {
|
|
return this.chart;
|
|
}
|
|
}, {
|
|
key: "getBase64Image",
|
|
value: function getBase64Image() {
|
|
return this.chart.toBase64Image();
|
|
}
|
|
}, {
|
|
key: "generateLegend",
|
|
value: function generateLegend() {
|
|
if (this.chart) {
|
|
this.chart.generateLegend();
|
|
}
|
|
}
|
|
}, {
|
|
key: "refresh",
|
|
value: function refresh() {
|
|
if (this.chart) {
|
|
this.chart.update();
|
|
}
|
|
}
|
|
}, {
|
|
key: "reinit",
|
|
value: function reinit() {
|
|
this.initChart();
|
|
}
|
|
}, {
|
|
key: "shouldComponentUpdate",
|
|
value: function shouldComponentUpdate(nextProps) {
|
|
if (nextProps.data === this.props.data && nextProps.options === this.props.options && nextProps.type === this.props.type) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.initChart();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
this.reinit();
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.chart) {
|
|
this.chart.destroy();
|
|
this.chart = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-chart', this.props.className),
|
|
style = Object.assign({
|
|
width: this.props.width,
|
|
height: this.props.height
|
|
}, this.props.style);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
style: style,
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement("canvas", {
|
|
ref: function ref(el) {
|
|
_this2.canvas = el;
|
|
},
|
|
width: this.props.width,
|
|
height: this.props.height
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Chart;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Chart, "defaultProps", {
|
|
id: null,
|
|
type: null,
|
|
data: null,
|
|
options: null,
|
|
plugins: null,
|
|
width: null,
|
|
height: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1$(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1$(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1$() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Checkbox = /*#__PURE__*/function (_Component) {
|
|
_inherits(Checkbox, _Component);
|
|
|
|
var _super = _createSuper$1$(Checkbox);
|
|
|
|
function Checkbox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Checkbox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Checkbox, [{
|
|
key: "onClick",
|
|
value: function onClick(e) {
|
|
if (!this.props.disabled && !this.props.readOnly && this.props.onChange) {
|
|
var value = this.isChecked() ? this.props.falseValue : this.props.trueValue;
|
|
this.props.onChange({
|
|
originalEvent: e,
|
|
value: this.props.value,
|
|
checked: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
type: 'checkbox',
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: this.props.value,
|
|
checked: value
|
|
}
|
|
});
|
|
this.inputRef.current.checked = !this.isChecked();
|
|
this.inputRef.current.focus();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
this.inputRef.current.checked = this.isChecked();
|
|
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$I({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "isChecked",
|
|
value: function isChecked() {
|
|
return this.props.checked === this.props.trueValue;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var checked = this.isChecked();
|
|
var containerClass = classNames('p-checkbox p-component', {
|
|
'p-checkbox-checked': checked,
|
|
'p-checkbox-disabled': this.props.disabled,
|
|
'p-checkbox-focused': this.state.focused
|
|
}, this.props.className);
|
|
var boxClass = classNames('p-checkbox-box', {
|
|
'p-highlight': checked,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
var icon = checked && this.props.icon;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClass,
|
|
style: this.props.style,
|
|
onClick: this.onClick,
|
|
onContextMenu: this.props.onContextMenu,
|
|
onMouseDown: this.props.onMouseDown
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: "checkbox",
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
tabIndex: this.props.tabIndex,
|
|
defaultChecked: checked,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
disabled: this.props.disabled,
|
|
readOnly: this.props.readOnly,
|
|
required: this.props.required
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClass,
|
|
ref: function ref(el) {
|
|
return _this2.box = el;
|
|
},
|
|
role: "checkbox",
|
|
"aria-checked": checked
|
|
}, IconUtils.getJSXIcon(icon, {
|
|
className: 'p-checkbox-icon p-c'
|
|
}, {
|
|
props: this.props,
|
|
checked: checked
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return Checkbox;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Checkbox, "defaultProps", {
|
|
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,
|
|
ariaLabelledBy: null,
|
|
onChange: null,
|
|
onMouseDown: null,
|
|
onContextMenu: null
|
|
});
|
|
|
|
function _createSuper$1_(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1_(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1_() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Chip = /*#__PURE__*/function (_Component) {
|
|
_inherits(Chip, _Component);
|
|
|
|
var _super = _createSuper$1_(Chip);
|
|
|
|
function Chip(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Chip);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: true
|
|
};
|
|
_this.close = _this.close.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Chip, [{
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.keyCode === 13) {
|
|
// enter
|
|
this.close(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "close",
|
|
value: function close(event) {
|
|
var _this2 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
if (_this2.props.onRemove) {
|
|
_this2.props.onRemove(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this3 = this;
|
|
|
|
var content = [];
|
|
|
|
if (this.props.image) {
|
|
var onError = function onError(e) {
|
|
if (_this3.props.onImageError) {
|
|
_this3.props.onImageError(e);
|
|
}
|
|
};
|
|
|
|
content.push( /*#__PURE__*/React__default["default"].createElement("img", {
|
|
key: "image",
|
|
src: this.props.image,
|
|
alt: this.props.imageAlt,
|
|
onError: onError
|
|
}));
|
|
} else if (this.props.icon) {
|
|
content.push(IconUtils.getJSXIcon(this.props.icon, {
|
|
key: 'icon',
|
|
className: 'p-chip-icon'
|
|
}, {
|
|
props: this.props
|
|
}));
|
|
}
|
|
|
|
if (this.props.label) {
|
|
content.push( /*#__PURE__*/React__default["default"].createElement("span", {
|
|
key: "label",
|
|
className: "p-chip-text"
|
|
}, this.props.label));
|
|
}
|
|
|
|
if (this.props.removable) {
|
|
content.push(IconUtils.getJSXIcon(this.props.removeIcon, {
|
|
key: 'removeIcon',
|
|
tabIndex: 0,
|
|
className: 'p-chip-remove-icon',
|
|
onClick: this.close,
|
|
onKeyDown: this.onKeyDown
|
|
}, {
|
|
props: this.props
|
|
}));
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var containerClassName = classNames('p-chip p-component', {
|
|
'p-chip-image': this.props.image != null
|
|
}, this.props.className);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return this.state.visible && this.renderElement();
|
|
}
|
|
}]);
|
|
|
|
return Chip;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Chip, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1Z(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1Z(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1Z() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Chips = /*#__PURE__*/function (_Component) {
|
|
_inherits(Chips, _Component);
|
|
|
|
var _super = _createSuper$1Z(Chips);
|
|
|
|
function Chips(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Chips);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onWrapperClick = _this.onWrapperClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onPaste = _this.onPaste.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Chips, [{
|
|
key: "removeItem",
|
|
value: function removeItem(event, index) {
|
|
if (this.props.disabled && this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var values = _toConsumableArray(this.props.value);
|
|
|
|
var removedItem = values.splice(index, 1);
|
|
|
|
if (!this.isRemovable(removedItem, index)) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.onRemove) {
|
|
this.props.onRemove({
|
|
originalEvent: event,
|
|
value: removedItem
|
|
});
|
|
}
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: values,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: values
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "addItem",
|
|
value: function addItem(event, item, preventDefault) {
|
|
if (item && item.trim().length) {
|
|
var values = this.props.value ? _toConsumableArray(this.props.value) : [];
|
|
|
|
if (this.props.allowDuplicate || values.indexOf(item) === -1) {
|
|
values.push(item);
|
|
|
|
if (this.props.onAdd) {
|
|
this.props.onAdd({
|
|
originalEvent: event,
|
|
value: item
|
|
});
|
|
}
|
|
}
|
|
|
|
this.updateInput(event, values, preventDefault);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onWrapperClick",
|
|
value: function onWrapperClick() {
|
|
this.inputRef.current.focus();
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
var inputValue = event.target.value;
|
|
var values = this.props.value || [];
|
|
|
|
switch (event.which) {
|
|
//backspace
|
|
case 8:
|
|
if (this.inputRef.current.value.length === 0 && values.length > 0) {
|
|
this.removeItem(event, values.length - 1);
|
|
}
|
|
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
if (inputValue && inputValue.trim().length && (!this.props.max || this.props.max > values.length)) {
|
|
this.addItem(event, inputValue, true);
|
|
}
|
|
|
|
break;
|
|
|
|
default:
|
|
if (this.isMaxedOut()) {
|
|
event.preventDefault();
|
|
} else if (this.props.separator) {
|
|
if (this.props.separator === ',' && event.which === 188) {
|
|
this.addItem(event, inputValue, true);
|
|
}
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInput",
|
|
value: function updateInput(event, items, preventDefault) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: items,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: items
|
|
}
|
|
});
|
|
}
|
|
|
|
this.inputRef.current.value = '';
|
|
|
|
if (preventDefault) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPaste",
|
|
value: function onPaste(event) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.separator) {
|
|
var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
|
|
|
|
if (pastedData) {
|
|
var values = this.props.value || [];
|
|
var pastedValues = pastedData.split(this.props.separator);
|
|
pastedValues = pastedValues.filter(function (val) {
|
|
return (_this2.props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length;
|
|
});
|
|
values = [].concat(_toConsumableArray(values), _toConsumableArray(pastedValues));
|
|
this.updateInput(event, values, true);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(event) {
|
|
var _this3 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this3.props.onFocus) {
|
|
_this3.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
var _this4 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this4.props.onBlur) {
|
|
_this4.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "isMaxedOut",
|
|
value: function isMaxedOut() {
|
|
return this.props.max && this.props.value && this.props.max === this.props.value.length;
|
|
}
|
|
}, {
|
|
key: "isFilled",
|
|
value: function isFilled() {
|
|
return this.props.value && this.props.value.length || this.inputRef && this.inputRef.current && this.inputRef.current.value && this.inputRef.current.value.length;
|
|
}
|
|
}, {
|
|
key: "isRemovable",
|
|
value: function isRemovable(value, index) {
|
|
return ObjectUtils.getPropValue(this.props.removable, {
|
|
value: value,
|
|
index: index,
|
|
props: this.props
|
|
});
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
var isValueSame = this.props.value && prevProps.value && prevProps.value.length === this.props.value.length;
|
|
|
|
if (this.props.tooltip) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$H({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
} else if (!isValueSame && this.tooltip) {
|
|
this.tooltip.deactivate();
|
|
this.tooltip.activate();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.inputRef.current,
|
|
targetContainer: this.listElement,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderRemoveIcon",
|
|
value: function renderRemoveIcon(value, index) {
|
|
var _this5 = this;
|
|
|
|
if (!this.props.disabled && !this.props.readOnly && this.isRemovable(value, index)) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-chips-token-icon pi pi-times-circle",
|
|
onClick: function onClick(event) {
|
|
return _this5.removeItem(event, index);
|
|
}
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(value, index) {
|
|
var content = this.props.itemTemplate ? this.props.itemTemplate(value) : value;
|
|
var icon = this.renderRemoveIcon(value, index);
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index,
|
|
className: "p-chips-token p-highlight"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-chips-token-label"
|
|
}, content), icon);
|
|
}
|
|
}, {
|
|
key: "renderInputElement",
|
|
value: function renderInputElement() {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-chips-input-token"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
placeholder: this.props.placeholder,
|
|
type: "text",
|
|
name: this.props.name,
|
|
disabled: this.props.disabled || this.isMaxedOut(),
|
|
onKeyDown: this.onKeyDown,
|
|
onPaste: this.onPaste,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
readOnly: this.props.readOnly
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this6 = this;
|
|
|
|
if (this.props.value) {
|
|
return this.props.value.map(function (value, index) {
|
|
return _this6.renderItem(value, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderList",
|
|
value: function renderList() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-inputtext p-chips-multiple-container', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
var items = this.renderItems();
|
|
var inputElement = this.renderInputElement();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this7.listElement = el;
|
|
},
|
|
className: className,
|
|
onClick: this.onWrapperClick
|
|
}, items, inputElement);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this8 = this;
|
|
|
|
var className = classNames('p-chips p-component p-inputwrapper', this.props.className, {
|
|
'p-inputwrapper-filled': this.isFilled(),
|
|
'p-inputwrapper-focus': this.state.focused
|
|
});
|
|
var list = this.renderList();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this8.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, list);
|
|
}
|
|
}]);
|
|
|
|
return Chips;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Chips, "defaultProps", {
|
|
id: null,
|
|
inputRef: 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,
|
|
onAdd: null,
|
|
onRemove: null,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null
|
|
});
|
|
|
|
function _createSuper$1Y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1Y(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1Y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var ColorPickerPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(ColorPickerPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$1Y(ColorPickerPanelComponent);
|
|
|
|
function ColorPickerPanelComponent() {
|
|
_classCallCheck(this, ColorPickerPanelComponent);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(ColorPickerPanelComponent, [{
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-colorpicker-panel', {
|
|
'p-colorpicker-overlay-panel': !this.props.inline,
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.props.onEnter,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
onClick: this.props.onClick
|
|
}, this.props.children));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return this.props.inline ? element : /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ColorPickerPanelComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ColorPickerPanelComponent, "defaultProps", {
|
|
appendTo: null,
|
|
inline: false,
|
|
disabled: false,
|
|
onClick: null
|
|
});
|
|
|
|
var ColorPickerPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ColorPickerPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1X(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1X(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1X() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ColorPicker = /*#__PURE__*/function (_Component) {
|
|
_inherits(ColorPicker, _Component);
|
|
|
|
var _super = _createSuper$1X(ColorPicker);
|
|
|
|
function ColorPicker(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ColorPicker);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
overlayVisible: false
|
|
};
|
|
_this.onInputClick = _this.onInputClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeydown = _this.onInputKeydown.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.onColorMousedown = _this.onColorMousedown.bind(_assertThisInitialized(_this));
|
|
_this.onHueMousedown = _this.onHueMousedown.bind(_assertThisInitialized(_this));
|
|
_this.onColorDragStart = _this.onColorDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onHueDragStart = _this.onHueDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onDrag = _this.onDrag.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ColorPicker, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (!this.props.inline) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onHueMousedown",
|
|
value: function onHueMousedown(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.bindDragListeners();
|
|
this.onHueDragStart(event);
|
|
}
|
|
}, {
|
|
key: "onHueDragStart",
|
|
value: function onHueDragStart(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.hueDragging = true;
|
|
this.pickHue(event);
|
|
DomHandler.addClass(this.container, 'p-colorpicker-dragging');
|
|
}
|
|
}, {
|
|
key: "pickHue",
|
|
value: function pickHue(event) {
|
|
var top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
|
|
this.hsbValue = this.validateHSB({
|
|
h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150),
|
|
s: 100,
|
|
b: 100
|
|
});
|
|
this.updateColorSelector();
|
|
this.updateHue();
|
|
this.updateModel();
|
|
}
|
|
}, {
|
|
key: "onColorMousedown",
|
|
value: function onColorMousedown(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.bindDragListeners();
|
|
this.onColorDragStart(event);
|
|
}
|
|
}, {
|
|
key: "onColorDragStart",
|
|
value: function onColorDragStart(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.colorDragging = true;
|
|
this.pickColor(event);
|
|
DomHandler.addClass(this.container, 'p-colorpicker-dragging');
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDrag",
|
|
value: function onDrag(event) {
|
|
if (this.colorDragging) {
|
|
this.pickColor(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (this.hueDragging) {
|
|
this.pickHue(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd() {
|
|
this.colorDragging = false;
|
|
this.hueDragging = false;
|
|
DomHandler.removeClass(this.container, 'p-colorpicker-dragging');
|
|
this.unbindDragListeners();
|
|
}
|
|
}, {
|
|
key: "bindDragListeners",
|
|
value: function bindDragListeners() {
|
|
this.bindDocumentMouseMoveListener();
|
|
this.bindDocumentMouseUpListener();
|
|
}
|
|
}, {
|
|
key: "unbindDragListeners",
|
|
value: function unbindDragListeners() {
|
|
this.unbindDocumentMouseMoveListener();
|
|
this.unbindDocumentMouseUpListener();
|
|
}
|
|
}, {
|
|
key: "pickColor",
|
|
value: function pickColor(event) {
|
|
var rect = this.colorSelector.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);
|
|
this.hsbValue = this.validateHSB({
|
|
h: this.hsbValue.h,
|
|
s: saturation,
|
|
b: brightness
|
|
});
|
|
this.updateColorHandle();
|
|
this.updateInput();
|
|
this.updateModel();
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel() {
|
|
switch (this.props.format) {
|
|
case 'hex':
|
|
this.onChange(this.HSBtoHEX(this.hsbValue));
|
|
break;
|
|
|
|
case 'rgb':
|
|
this.onChange(this.HSBtoRGB(this.hsbValue));
|
|
break;
|
|
|
|
case 'hsb':
|
|
this.onChange(this.hsbValue);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "toHSB",
|
|
value: function toHSB(value) {
|
|
var hsb;
|
|
|
|
if (value) {
|
|
switch (this.props.format) {
|
|
case 'hex':
|
|
hsb = this.HEXtoHSB(value);
|
|
break;
|
|
|
|
case 'rgb':
|
|
hsb = this.RGBtoHSB(value);
|
|
break;
|
|
|
|
case 'hsb':
|
|
hsb = value;
|
|
break;
|
|
}
|
|
} else {
|
|
hsb = this.HEXtoHSB(this.props.defaultColor);
|
|
}
|
|
|
|
return hsb;
|
|
}
|
|
}, {
|
|
key: "updateHSBValue",
|
|
value: function updateHSBValue(value) {
|
|
this.hsbValue = this.toHSB(value);
|
|
}
|
|
}, {
|
|
key: "areHSBEqual",
|
|
value: function areHSBEqual(val1, val2) {
|
|
return val1.h === val2.h && val1.s === val2.s && val1.b === val2.b;
|
|
}
|
|
}, {
|
|
key: "onChange",
|
|
value: function onChange(value) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateColorSelector",
|
|
value: function updateColorSelector() {
|
|
if (this.colorSelector) {
|
|
var hsbValue = this.validateHSB({
|
|
h: this.hsbValue.h,
|
|
s: 100,
|
|
b: 100
|
|
});
|
|
this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateColorHandle",
|
|
value: function updateColorHandle() {
|
|
if (this.colorHandle) {
|
|
this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
|
|
this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateHue",
|
|
value: function updateHue() {
|
|
if (this.hueHandle) {
|
|
this.hueHandle.style.top = Math.floor(150 - 150 * this.hsbValue.h / 360) + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInput",
|
|
value: function updateInput() {
|
|
if (this.inputRef && this.inputRef.current) {
|
|
this.inputRef.current.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "onInputClick",
|
|
value: function onInputClick() {
|
|
this.togglePanel();
|
|
}
|
|
}, {
|
|
key: "togglePanel",
|
|
value: function togglePanel() {
|
|
if (this.state.overlayVisible) this.hide();else this.show();
|
|
}
|
|
}, {
|
|
key: "onInputKeydown",
|
|
value: function onInputKeydown(event) {
|
|
switch (event.which) {
|
|
//space
|
|
case 32:
|
|
this.togglePanel();
|
|
event.preventDefault();
|
|
break;
|
|
//escape and tab
|
|
|
|
case 27:
|
|
case 9:
|
|
this.hide();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.state.overlayVisible && _this2.isOutsideClicked(event)) {
|
|
_this2.hide();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this3.state.overlayVisible) {
|
|
_this3.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.overlayRef && this.overlayRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "bindDocumentMouseMoveListener",
|
|
value: function bindDocumentMouseMoveListener() {
|
|
if (!this.documentMouseMoveListener) {
|
|
this.documentMouseMoveListener = this.onDocumentMouseMove.bind(this);
|
|
document.addEventListener('mousemove', this.documentMouseMoveListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDocumentMouseMove",
|
|
value: function onDocumentMouseMove(event) {
|
|
if (this.colorDragging) {
|
|
this.pickColor(event);
|
|
}
|
|
|
|
if (this.hueDragging) {
|
|
this.pickHue(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentMouseMoveListener",
|
|
value: function unbindDocumentMouseMoveListener() {
|
|
if (this.documentMouseMoveListener) {
|
|
document.removeEventListener('mousemove', this.documentMouseMoveListener);
|
|
this.documentMouseMoveListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentMouseUpListener",
|
|
value: function bindDocumentMouseUpListener() {
|
|
if (!this.documentMouseUpListener) {
|
|
this.documentMouseUpListener = this.onDocumentMouseUp.bind(this);
|
|
document.addEventListener('mouseup', this.documentMouseUpListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDocumentMouseUp",
|
|
value: function onDocumentMouseUp() {
|
|
this.colorDragging = false;
|
|
this.hueDragging = false;
|
|
DomHandler.removeClass(this.container, 'p-colorpicker-dragging');
|
|
this.unbindDocumentMouseMoveListener();
|
|
this.unbindDocumentMouseUpListener();
|
|
}
|
|
}, {
|
|
key: "unbindDocumentMouseUpListener",
|
|
value: function unbindDocumentMouseUpListener() {
|
|
if (this.documentMouseUpListener) {
|
|
document.removeEventListener('mouseup', this.documentMouseUpListener);
|
|
this.documentMouseUpListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "validateHSB",
|
|
value: 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))
|
|
};
|
|
}
|
|
}, {
|
|
key: "validateRGB",
|
|
value: function validateRGB(rgb) {
|
|
return {
|
|
r: Math.min(255, Math.max(0, rgb.r)),
|
|
g: Math.min(255, Math.max(0, rgb.g)),
|
|
b: Math.min(255, Math.max(0, rgb.b))
|
|
};
|
|
}
|
|
}, {
|
|
key: "validateHEX",
|
|
value: function validateHEX(hex) {
|
|
var len = 6 - hex.length;
|
|
|
|
if (len > 0) {
|
|
var o = [];
|
|
|
|
for (var i = 0; i < len; i++) {
|
|
o.push('0');
|
|
}
|
|
|
|
o.push(hex);
|
|
hex = o.join('');
|
|
}
|
|
|
|
return hex;
|
|
}
|
|
}, {
|
|
key: "HEXtoRGB",
|
|
value: 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
|
|
};
|
|
}
|
|
}, {
|
|
key: "HEXtoHSB",
|
|
value: function HEXtoHSB(hex) {
|
|
return this.RGBtoHSB(this.HEXtoRGB(hex));
|
|
}
|
|
}, {
|
|
key: "RGBtoHSB",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "HSBtoRGB",
|
|
value: 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)
|
|
};
|
|
}
|
|
}, {
|
|
key: "RGBtoHEX",
|
|
value: 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('');
|
|
}
|
|
}, {
|
|
key: "HSBtoHEX",
|
|
value: function HSBtoHEX(hsb) {
|
|
return this.RGBtoHEX(this.HSBtoRGB(hsb));
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
this.updateHSBValue(this.props.value);
|
|
this.updateUI();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (!this.colorDragging && !this.hueDragging && this.props.value !== prevProps.value) {
|
|
this.updateHSBValue(this.props.value);
|
|
}
|
|
|
|
this.updateUI();
|
|
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$G({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentMouseMoveListener();
|
|
this.unbindDocumentMouseUpListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "updateUI",
|
|
value: function updateUI() {
|
|
this.updateHue();
|
|
this.updateColorHandle();
|
|
this.updateInput();
|
|
this.updateColorSelector();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
if (this.inputRef && this.inputRef.current) {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.inputRef.current.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderColorSelector",
|
|
value: function renderColorSelector() {
|
|
var _this5 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.colorSelector = el;
|
|
},
|
|
className: "p-colorpicker-color-selector",
|
|
onMouseDown: this.onColorMousedown,
|
|
onTouchStart: this.onColorDragStart,
|
|
onTouchMove: this.onDrag,
|
|
onTouchEnd: this.onDragEnd
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-colorpicker-color"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.colorHandle = el;
|
|
},
|
|
className: "p-colorpicker-color-handle"
|
|
})));
|
|
}
|
|
}, {
|
|
key: "renderHue",
|
|
value: function renderHue() {
|
|
var _this6 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.hueView = el;
|
|
},
|
|
className: "p-colorpicker-hue",
|
|
onMouseDown: this.onHueMousedown,
|
|
onTouchStart: this.onHueDragStart,
|
|
onTouchMove: this.onDrag,
|
|
onTouchEnd: this.onDragEnd
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.hueHandle = el;
|
|
},
|
|
className: "p-colorpicker-hue-handle"
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var colorSelector = this.renderColorSelector();
|
|
var hue = this.renderHue();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-colorpicker-content"
|
|
}, colorSelector, hue);
|
|
}
|
|
}, {
|
|
key: "renderInput",
|
|
value: function renderInput() {
|
|
if (!this.props.inline) {
|
|
var inputClassName = classNames('p-colorpicker-preview p-inputtext', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var inputProps = ObjectUtils.findDiffKeys(this.props, ColorPicker.defaultProps);
|
|
return /*#__PURE__*/React__default["default"].createElement("input", _extends({
|
|
ref: this.inputRef,
|
|
type: "text",
|
|
className: inputClassName,
|
|
readOnly: true,
|
|
id: this.props.inputId,
|
|
tabIndex: this.props.tabIndex,
|
|
disabled: this.props.disabled,
|
|
onClick: this.onInputClick,
|
|
onKeyDown: this.onInputKeydown
|
|
}, inputProps));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this7 = this;
|
|
|
|
var containerClassName = classNames('p-colorpicker p-component', {
|
|
'p-colorpicker-overlay': !this.props.inline
|
|
}, this.props.className);
|
|
var content = this.renderContent();
|
|
var input = this.renderInput();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
id: this.props.id,
|
|
style: this.props.style,
|
|
className: containerClassName
|
|
}, input, /*#__PURE__*/React__default["default"].createElement(ColorPickerPanel, {
|
|
ref: this.overlayRef,
|
|
appendTo: this.props.appendTo,
|
|
inline: this.props.inline,
|
|
disabled: this.props.disabled,
|
|
onClick: this.onPanelClick,
|
|
"in": this.props.inline || this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited,
|
|
transitionOptions: this.props.transitionOptions
|
|
}, content));
|
|
}
|
|
}]);
|
|
|
|
return ColorPicker;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ColorPicker, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
value: null,
|
|
style: null,
|
|
className: null,
|
|
defaultColor: 'ff0000',
|
|
inline: false,
|
|
format: 'hex',
|
|
appendTo: null,
|
|
disabled: false,
|
|
tabIndex: null,
|
|
inputId: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
transitionOptions: null,
|
|
onChange: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$1W(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1W(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1W() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Column = /*#__PURE__*/function (_Component) {
|
|
_inherits(Column, _Component);
|
|
|
|
var _super = _createSuper$1W(Column);
|
|
|
|
function Column() {
|
|
_classCallCheck(this, Column);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
return _createClass(Column);
|
|
}(React.Component);
|
|
|
|
_defineProperty(Column, "defaultProps", {
|
|
columnKey: null,
|
|
field: null,
|
|
sortField: null,
|
|
filterField: null,
|
|
exportField: null,
|
|
header: null,
|
|
body: null,
|
|
footer: null,
|
|
sortable: false,
|
|
sortableDisabled: false,
|
|
sortFunction: null,
|
|
dataType: 'text',
|
|
filter: false,
|
|
filterMatchMode: null,
|
|
filterPlaceholder: null,
|
|
filterType: 'text',
|
|
filterMaxLength: null,
|
|
filterElement: null,
|
|
filterFunction: null,
|
|
filterHeaderStyle: null,
|
|
filterHeaderClassName: null,
|
|
showFilterMenu: true,
|
|
showFilterOperator: true,
|
|
showClearButton: true,
|
|
showApplyButton: true,
|
|
showFilterMatchModes: true,
|
|
showFilterMenuOptions: true,
|
|
showAddButton: true,
|
|
filterMatchModeOptions: null,
|
|
maxConstraints: 2,
|
|
filterMenuClassName: null,
|
|
filterMenuStyle: null,
|
|
align: null,
|
|
alignHeader: null,
|
|
alignFrozen: 'left',
|
|
hidden: false,
|
|
onFilterClear: null,
|
|
onFilterApplyClick: null,
|
|
onFilterMatchModeChange: null,
|
|
onFilterOperatorChange: null,
|
|
onFilterConstraintAdd: null,
|
|
onFilterConstraintRemove: null,
|
|
filterClear: null,
|
|
filterApply: null,
|
|
filterHeader: null,
|
|
filterFooter: null,
|
|
style: null,
|
|
className: null,
|
|
headerStyle: null,
|
|
headerClassName: null,
|
|
bodyStyle: null,
|
|
bodyClassName: null,
|
|
footerStyle: null,
|
|
footerClassName: null,
|
|
expander: false,
|
|
frozen: false,
|
|
selectionMode: null,
|
|
colSpan: null,
|
|
rowSpan: null,
|
|
editor: null,
|
|
cellEditValidator: null,
|
|
cellEditValidatorEvent: 'click',
|
|
onBeforeCellEditHide: null,
|
|
onBeforeCellEditShow: null,
|
|
onCellEditInit: null,
|
|
onCellEditComplete: null,
|
|
onCellEditCancel: null,
|
|
excludeGlobalFilter: false,
|
|
rowReorder: false,
|
|
rowReorderIcon: 'pi pi-bars',
|
|
rowEditor: false,
|
|
exportable: true,
|
|
reorderable: true
|
|
});
|
|
|
|
function _createSuper$1V(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1V(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1V() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ColumnGroup = /*#__PURE__*/function (_Component) {
|
|
_inherits(ColumnGroup, _Component);
|
|
|
|
var _super = _createSuper$1V(ColumnGroup);
|
|
|
|
function ColumnGroup() {
|
|
_classCallCheck(this, ColumnGroup);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
return _createClass(ColumnGroup);
|
|
}(React.Component);
|
|
|
|
function _createSuper$1U(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1U(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1U() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Dialog = /*#__PURE__*/function (_Component) {
|
|
_inherits(Dialog, _Component);
|
|
|
|
var _super = _createSuper$1U(Dialog);
|
|
|
|
function Dialog(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Dialog);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
id: props.id,
|
|
maskVisible: false,
|
|
visible: false
|
|
};
|
|
|
|
if (!_this.props.onMaximize) {
|
|
_this.state.maximized = props.maximized;
|
|
}
|
|
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
_this.toggleMaximize = _this.toggleMaximize.bind(_assertThisInitialized(_this));
|
|
_this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onResizeStart = _this.onResizeStart.bind(_assertThisInitialized(_this));
|
|
_this.onMaskClick = _this.onMaskClick.bind(_assertThisInitialized(_this));
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.attributeSelector = UniqueComponentId();
|
|
_this.dialogRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Dialog, [{
|
|
key: "onClose",
|
|
value: function onClose(event) {
|
|
this.props.onHide();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "focus",
|
|
value: function focus() {
|
|
var activeElement = document.activeElement;
|
|
var isActiveElementInDialog = activeElement && this.dialogRef && this.dialogRef.current.contains(activeElement);
|
|
|
|
if (!isActiveElementInDialog && this.props.closable && this.props.showHeader) {
|
|
this.closeElement.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMaskClick",
|
|
value: function onMaskClick(event) {
|
|
if (this.props.dismissableMask && this.props.modal && this.mask === event.target) {
|
|
this.onClose(event);
|
|
}
|
|
|
|
this.props.onMaskClick && this.props.onMaskClick(event);
|
|
}
|
|
}, {
|
|
key: "toggleMaximize",
|
|
value: function toggleMaximize(event) {
|
|
var maximized = !this.maximized;
|
|
|
|
if (this.props.onMaximize) {
|
|
this.props.onMaximize({
|
|
originalEvent: event,
|
|
maximized: maximized
|
|
});
|
|
} else {
|
|
this.setState({
|
|
maximized: maximized
|
|
}, this.changeScrollOnMaximizable);
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event) {
|
|
if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.draggable) {
|
|
this.dragging = true;
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
this.dialogEl.style.margin = '0';
|
|
DomHandler.addClass(document.body, 'p-unselectable-text');
|
|
|
|
if (this.props.onDragStart) {
|
|
this.props.onDragStart(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDrag",
|
|
value: function onDrag(event) {
|
|
if (this.dragging) {
|
|
var width = DomHandler.getOuterWidth(this.dialogEl);
|
|
var height = DomHandler.getOuterHeight(this.dialogEl);
|
|
var deltaX = event.pageX - this.lastPageX;
|
|
var deltaY = event.pageY - this.lastPageY;
|
|
var offset = this.dialogEl.getBoundingClientRect();
|
|
var leftPos = offset.left + deltaX;
|
|
var topPos = offset.top + deltaY;
|
|
var viewport = DomHandler.getViewport();
|
|
this.dialogEl.style.position = 'fixed';
|
|
|
|
if (this.props.keepInViewport) {
|
|
if (leftPos >= this.props.minX && leftPos + width < viewport.width) {
|
|
this.lastPageX = event.pageX;
|
|
this.dialogEl.style.left = leftPos + 'px';
|
|
}
|
|
|
|
if (topPos >= this.props.minY && topPos + height < viewport.height) {
|
|
this.lastPageY = event.pageY;
|
|
this.dialogEl.style.top = topPos + 'px';
|
|
}
|
|
} else {
|
|
this.lastPageX = event.pageX;
|
|
this.dialogEl.style.left = leftPos + 'px';
|
|
this.lastPageY = event.pageY;
|
|
this.dialogEl.style.top = topPos + 'px';
|
|
}
|
|
|
|
if (this.props.onDrag) {
|
|
this.props.onDrag(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd(event) {
|
|
if (this.dragging) {
|
|
this.dragging = false;
|
|
DomHandler.removeClass(document.body, 'p-unselectable-text');
|
|
|
|
if (this.props.onDragEnd) {
|
|
this.props.onDragEnd(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onResizeStart",
|
|
value: function onResizeStart(event) {
|
|
if (this.props.resizable) {
|
|
this.resizing = true;
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
DomHandler.addClass(document.body, 'p-unselectable-text');
|
|
|
|
if (this.props.onResizeStart) {
|
|
this.props.onResizeStart(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "convertToPx",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "onResize",
|
|
value: function onResize(event) {
|
|
if (this.resizing) {
|
|
var deltaX = event.pageX - this.lastPageX;
|
|
var deltaY = event.pageY - this.lastPageY;
|
|
var width = DomHandler.getOuterWidth(this.dialogEl);
|
|
var height = DomHandler.getOuterHeight(this.dialogEl);
|
|
var offset = this.dialogEl.getBoundingClientRect();
|
|
var viewport = DomHandler.getViewport();
|
|
var newWidth = width + deltaX;
|
|
var newHeight = height + deltaY;
|
|
var minWidth = this.convertToPx(this.dialogEl.style.minWidth, 'width', viewport);
|
|
var minHeight = this.convertToPx(this.dialogEl.style.minHeight, 'height', viewport);
|
|
var hasBeenDragged = !parseInt(this.dialogEl.style.top) || !parseInt(this.dialogEl.style.left);
|
|
|
|
if (hasBeenDragged) {
|
|
newWidth += deltaX;
|
|
newHeight += deltaY;
|
|
}
|
|
|
|
if ((!minWidth || newWidth > minWidth) && offset.left + newWidth < viewport.width) {
|
|
this.dialogEl.style.width = newWidth + 'px';
|
|
}
|
|
|
|
if ((!minHeight || newHeight > minHeight) && offset.top + newHeight < viewport.height) {
|
|
this.dialogEl.style.height = newHeight + 'px';
|
|
}
|
|
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
|
|
if (this.props.onResize) {
|
|
this.props.onResize(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onResizeEnd",
|
|
value: function onResizeEnd(event) {
|
|
if (this.resizing) {
|
|
this.resizing = false;
|
|
DomHandler.removeClass(document.body, 'p-unselectable-text');
|
|
|
|
if (this.props.onResizeEnd) {
|
|
this.props.onResizeEnd(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "resetPosition",
|
|
value: function resetPosition() {
|
|
this.dialogEl.style.position = '';
|
|
this.dialogEl.style.left = '';
|
|
this.dialogEl.style.top = '';
|
|
this.dialogEl.style.margin = '';
|
|
}
|
|
}, {
|
|
key: "getPositionClass",
|
|
value: function getPositionClass() {
|
|
var _this2 = this;
|
|
|
|
var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
|
|
var pos = positions.find(function (item) {
|
|
return item === _this2.props.position || item.replace('-', '') === _this2.props.position;
|
|
});
|
|
return pos ? "p-dialog-".concat(pos) : '';
|
|
}
|
|
}, {
|
|
key: "maximized",
|
|
get: function get() {
|
|
return this.props.onMaximize ? this.props.maximized : this.state.maximized;
|
|
}
|
|
}, {
|
|
key: "dialogEl",
|
|
get: function get() {
|
|
return this.dialogRef.current;
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
this.dialogEl.setAttribute(this.attributeSelector, '');
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
if (this.props.onShow) {
|
|
this.props.onShow();
|
|
}
|
|
|
|
if (this.props.focusOnShow) {
|
|
this.focus();
|
|
}
|
|
|
|
this.enableDocumentSettings();
|
|
}
|
|
}, {
|
|
key: "onExiting",
|
|
value: function onExiting() {
|
|
if (this.props.modal) {
|
|
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
this.dragging = false;
|
|
ZIndexUtils.clear(this.mask);
|
|
this.setState({
|
|
maskVisible: false
|
|
});
|
|
this.disableDocumentSettings();
|
|
}
|
|
}, {
|
|
key: "enableDocumentSettings",
|
|
value: function enableDocumentSettings() {
|
|
this.bindGlobalListeners();
|
|
|
|
if (this.props.blockScroll || this.props.maximizable && this.maximized) {
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "disableDocumentSettings",
|
|
value: function disableDocumentSettings() {
|
|
this.unbindGlobalListeners();
|
|
|
|
if (this.props.modal) {
|
|
var hasBlockScroll = document.primeDialogParams && document.primeDialogParams.some(function (param) {
|
|
return param.hasBlockScroll;
|
|
});
|
|
|
|
if (!hasBlockScroll) {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
} else if (this.props.blockScroll || this.props.maximizable && this.maximized) {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindGlobalListeners",
|
|
value: function bindGlobalListeners() {
|
|
if (this.props.draggable) {
|
|
this.bindDocumentDragListener();
|
|
}
|
|
|
|
if (this.props.resizable) {
|
|
this.bindDocumentResizeListeners();
|
|
}
|
|
|
|
if (this.props.closable) {
|
|
this.bindDocumentKeyDownListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindGlobalListeners",
|
|
value: function unbindGlobalListeners() {
|
|
this.unbindDocumentDragListener();
|
|
this.unbindDocumentResizeListeners();
|
|
this.unbindDocumentKeyDownListener();
|
|
}
|
|
}, {
|
|
key: "bindDocumentDragListener",
|
|
value: function bindDocumentDragListener() {
|
|
this.documentDragListener = this.onDrag.bind(this);
|
|
this.documentDragEndListener = this.onDragEnd.bind(this);
|
|
window.document.addEventListener('mousemove', this.documentDragListener);
|
|
window.document.addEventListener('mouseup', this.documentDragEndListener);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentDragListener",
|
|
value: function unbindDocumentDragListener() {
|
|
if (this.documentDragListener && this.documentDragEndListener) {
|
|
window.document.removeEventListener('mousemove', this.documentDragListener);
|
|
window.document.removeEventListener('mouseup', this.documentDragEndListener);
|
|
this.documentDragListener = null;
|
|
this.documentDragEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListeners",
|
|
value: function bindDocumentResizeListeners() {
|
|
this.documentResizeListener = this.onResize.bind(this);
|
|
this.documentResizeEndListener = this.onResizeEnd.bind(this);
|
|
window.document.addEventListener('mousemove', this.documentResizeListener);
|
|
window.document.addEventListener('mouseup', this.documentResizeEndListener);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListeners",
|
|
value: function unbindDocumentResizeListeners() {
|
|
if (this.documentResizeListener && this.documentResizeEndListener) {
|
|
window.document.removeEventListener('mousemove', this.documentResizeListener);
|
|
window.document.removeEventListener('mouseup', this.documentResizeEndListener);
|
|
this.documentResizeListener = null;
|
|
this.documentResizeEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentKeyDownListener",
|
|
value: function bindDocumentKeyDownListener() {
|
|
var _this3 = this;
|
|
|
|
this.documentKeyDownListener = function (event) {
|
|
var currentTarget = event.currentTarget;
|
|
|
|
if (currentTarget && currentTarget.primeDialogParams) {
|
|
var params = currentTarget.primeDialogParams;
|
|
var paramLength = params.length;
|
|
var dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined;
|
|
|
|
if (dialogId === _this3.state.id && _this3.props.closeOnEscape) {
|
|
var dialog = document.getElementById(dialogId);
|
|
|
|
if (event.which === 27) {
|
|
_this3.onClose(event);
|
|
|
|
event.stopImmediatePropagation();
|
|
params.splice(paramLength - 1, 1);
|
|
} else if (event.which === 9) {
|
|
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 newParam = {
|
|
id: this.state.id,
|
|
hasBlockScroll: this.props.blockScroll
|
|
};
|
|
document.primeDialogParams = document.primeDialogParams ? [].concat(_toConsumableArray(document.primeDialogParams), [newParam]) : [newParam];
|
|
document.addEventListener('keydown', this.documentKeyDownListener);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentKeyDownListener",
|
|
value: function unbindDocumentKeyDownListener() {
|
|
var _this4 = this;
|
|
|
|
if (this.documentKeyDownListener) {
|
|
document.removeEventListener('keydown', this.documentKeyDownListener);
|
|
document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter(function (param) {
|
|
return param.id !== _this4.state.id;
|
|
});
|
|
this.documentKeyDownListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "createStyle",
|
|
value: function createStyle() {
|
|
if (!this.styleElement) {
|
|
this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
var innerHTML = '';
|
|
|
|
for (var breakpoint in this.props.breakpoints) {
|
|
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-dialog[").concat(this.attributeSelector, "] {\n width: ").concat(this.props.breakpoints[breakpoint], " !important;\n }\n }\n ");
|
|
}
|
|
|
|
this.styleElement.innerHTML = innerHTML;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this5 = this;
|
|
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
|
|
if (this.props.visible) {
|
|
this.setState({
|
|
maskVisible: true
|
|
}, function () {
|
|
ZIndexUtils.set('modal', _this5.mask, PrimeReact.autoZIndex, _this5.props.baseZIndex || PrimeReact.zIndex['modal']);
|
|
|
|
_this5.setState({
|
|
visible: true
|
|
});
|
|
});
|
|
}
|
|
|
|
if (this.props.breakpoints) {
|
|
this.createStyle();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
var _this6 = this;
|
|
|
|
if (this.props.visible && !this.state.maskVisible) {
|
|
this.setState({
|
|
maskVisible: true
|
|
}, function () {
|
|
ZIndexUtils.set('modal', _this6.mask, PrimeReact.autoZIndex, _this6.props.baseZIndex || PrimeReact.zIndex['modal']);
|
|
});
|
|
}
|
|
|
|
if (this.props.visible !== this.state.visible && this.state.maskVisible) {
|
|
this.setState({
|
|
visible: this.props.visible
|
|
});
|
|
}
|
|
|
|
if (prevProps.maximized !== this.props.maximized && this.props.onMaximize) {
|
|
this.changeScrollOnMaximizable();
|
|
}
|
|
}
|
|
}, {
|
|
key: "changeScrollOnMaximizable",
|
|
value: function changeScrollOnMaximizable() {
|
|
if (!this.props.blockScroll) {
|
|
var funcName = this.maximized ? 'addClass' : 'removeClass';
|
|
DomHandler[funcName](document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.disableDocumentSettings();
|
|
this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
|
|
ZIndexUtils.clear(this.mask);
|
|
}
|
|
}, {
|
|
key: "renderCloseIcon",
|
|
value: function renderCloseIcon() {
|
|
var _this7 = this;
|
|
|
|
if (this.props.closable) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
ref: function ref(el) {
|
|
return _this7.closeElement = el;
|
|
},
|
|
type: "button",
|
|
className: "p-dialog-header-icon p-dialog-header-close p-link",
|
|
"aria-label": this.props.ariaCloseIconLabel,
|
|
onClick: this.onClose
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-dialog-header-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMaximizeIcon",
|
|
value: function renderMaximizeIcon() {
|
|
var iconClassName = classNames('p-dialog-header-maximize-icon pi', {
|
|
'pi-window-maximize': !this.maximized,
|
|
'pi-window-minimize': this.maximized
|
|
});
|
|
|
|
if (this.props.maximizable) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-dialog-header-icon p-dialog-header-maximize p-link",
|
|
onClick: this.toggleMaximize
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
var _this8 = this;
|
|
|
|
if (this.props.showHeader) {
|
|
var closeIcon = this.renderCloseIcon();
|
|
var maximizeIcon = this.renderMaximizeIcon();
|
|
var icons = ObjectUtils.getJSXElement(this.props.icons, this.props);
|
|
var header = ObjectUtils.getJSXElement(this.props.header, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this8.headerEl = el;
|
|
},
|
|
className: "p-dialog-header",
|
|
onMouseDown: this.onDragStart
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.state.id + '_header',
|
|
className: "p-dialog-title"
|
|
}, header), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dialog-header-icons"
|
|
}, icons, maximizeIcon, closeIcon));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this9 = this;
|
|
|
|
var contentClassName = classNames('p-dialog-content', this.props.contentClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.state.id + '_content',
|
|
ref: function ref(el) {
|
|
return _this9.contentEl = el;
|
|
},
|
|
className: contentClassName,
|
|
style: this.props.contentStyle
|
|
}, this.props.children);
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
var _this10 = this;
|
|
|
|
var footer = ObjectUtils.getJSXElement(this.props.footer, this.props);
|
|
return footer && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this10.footerElement = el;
|
|
},
|
|
className: "p-dialog-footer"
|
|
}, footer);
|
|
}
|
|
}, {
|
|
key: "renderResizer",
|
|
value: function renderResizer() {
|
|
if (this.props.resizable) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-resizable-handle",
|
|
style: {
|
|
zIndex: 90
|
|
},
|
|
onMouseDown: this.onResizeStart
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this11 = this;
|
|
|
|
var className = classNames('p-dialog p-component', this.props.className, {
|
|
'p-dialog-rtl': this.props.rtl,
|
|
'p-dialog-maximized': this.maximized
|
|
});
|
|
var maskClassName = classNames('p-dialog-mask', {
|
|
'p-component-overlay p-component-overlay-enter': this.props.modal,
|
|
'p-dialog-visible': this.state.maskVisible,
|
|
'p-dialog-draggable': this.props.draggable,
|
|
'p-dialog-resizable': this.props.resizable
|
|
}, this.props.maskClassName, this.getPositionClass());
|
|
var header = this.renderHeader();
|
|
var content = this.renderContent();
|
|
var footer = this.renderFooter();
|
|
var resizer = this.renderResizer();
|
|
var transitionTimeout = {
|
|
enter: this.props.position === 'center' ? 150 : 300,
|
|
exit: this.props.position === 'center' ? 150 : 300
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this11.mask = el;
|
|
},
|
|
style: this.props.maskStyle,
|
|
className: maskClassName,
|
|
onClick: this.onMaskClick
|
|
}, /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.dialogRef,
|
|
classNames: "p-dialog",
|
|
timeout: transitionTimeout,
|
|
"in": this.state.visible,
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.dialogRef,
|
|
id: this.state.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.props.onClick,
|
|
role: "dialog",
|
|
"aria-labelledby": this.state.id + '_header',
|
|
"aria-describedby": this.state.id + '_content',
|
|
"aria-modal": this.props.modal
|
|
}, header, content, footer, resizer)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.state.maskVisible) {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo,
|
|
visible: true
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return Dialog;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Dialog, "defaultProps", {
|
|
id: null,
|
|
header: null,
|
|
footer: null,
|
|
visible: false,
|
|
position: 'center',
|
|
draggable: true,
|
|
resizable: true,
|
|
modal: true,
|
|
onHide: null,
|
|
onShow: null,
|
|
contentStyle: null,
|
|
contentClassName: null,
|
|
closeOnEscape: true,
|
|
dismissableMask: false,
|
|
rtl: false,
|
|
closable: true,
|
|
style: null,
|
|
className: null,
|
|
maskStyle: null,
|
|
maskClassName: null,
|
|
showHeader: true,
|
|
appendTo: null,
|
|
baseZIndex: 0,
|
|
maximizable: false,
|
|
blockScroll: false,
|
|
icons: null,
|
|
ariaCloseIconLabel: 'Close',
|
|
focusOnShow: true,
|
|
minX: 0,
|
|
minY: 0,
|
|
keepInViewport: true,
|
|
maximized: false,
|
|
breakpoints: null,
|
|
transitionOptions: null,
|
|
onMaximize: null,
|
|
onDragStart: null,
|
|
onDrag: null,
|
|
onDragEnd: null,
|
|
onResizeStart: null,
|
|
onResize: null,
|
|
onResizeEnd: null,
|
|
onClick: null,
|
|
onMaskClick: null
|
|
});
|
|
|
|
function _createSuper$1T(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1T(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1T() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
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; }
|
|
function confirmDialog(props) {
|
|
var appendTo = props.appendTo || document.body;
|
|
var confirmDialogWrapper = document.createDocumentFragment();
|
|
DomHandler.appendChild(confirmDialogWrapper, appendTo);
|
|
props = _objectSpread$F(_objectSpread$F({}, props), {
|
|
visible: props.visible === undefined ? true : props.visible
|
|
});
|
|
var confirmDialogEl = /*#__PURE__*/React__default["default"].createElement(ConfirmDialog, props);
|
|
ReactDOM__default["default"].render(confirmDialogEl, confirmDialogWrapper);
|
|
|
|
var updateConfirmDialog = function updateConfirmDialog(newProps) {
|
|
props = _objectSpread$F(_objectSpread$F({}, props), newProps);
|
|
ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].cloneElement(confirmDialogEl, props), confirmDialogWrapper);
|
|
};
|
|
|
|
return {
|
|
_destroy: function _destroy() {
|
|
ReactDOM__default["default"].unmountComponentAtNode(confirmDialogWrapper);
|
|
},
|
|
show: function show() {
|
|
updateConfirmDialog({
|
|
visible: true,
|
|
onHide: function onHide() {
|
|
updateConfirmDialog({
|
|
visible: false
|
|
}); // reset
|
|
}
|
|
});
|
|
},
|
|
hide: function hide() {
|
|
updateConfirmDialog({
|
|
visible: false
|
|
});
|
|
},
|
|
update: function update(newProps) {
|
|
updateConfirmDialog(newProps);
|
|
}
|
|
};
|
|
}
|
|
var ConfirmDialog = /*#__PURE__*/function (_Component) {
|
|
_inherits(ConfirmDialog, _Component);
|
|
|
|
var _super = _createSuper$1T(ConfirmDialog);
|
|
|
|
function ConfirmDialog(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ConfirmDialog);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: props.visible
|
|
};
|
|
_this.reject = _this.reject.bind(_assertThisInitialized(_this));
|
|
_this.accept = _this.accept.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ConfirmDialog, [{
|
|
key: "acceptLabel",
|
|
value: function acceptLabel() {
|
|
return this.props.acceptLabel || localeOption('accept');
|
|
}
|
|
}, {
|
|
key: "rejectLabel",
|
|
value: function rejectLabel() {
|
|
return this.props.rejectLabel || localeOption('reject');
|
|
}
|
|
}, {
|
|
key: "accept",
|
|
value: function accept() {
|
|
if (this.props.accept) {
|
|
this.props.accept();
|
|
}
|
|
|
|
this.hide('accept');
|
|
}
|
|
}, {
|
|
key: "reject",
|
|
value: function reject() {
|
|
if (this.props.reject) {
|
|
this.props.reject();
|
|
}
|
|
|
|
this.hide('reject');
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
visible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(result) {
|
|
var _this2 = this;
|
|
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
if (_this2.props.onHide) {
|
|
_this2.props.onHide(result);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.visible !== this.props.visible) {
|
|
this.setState({
|
|
visible: this.props.visible
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
var acceptClassName = classNames('p-confirm-dialog-accept', this.props.acceptClassName);
|
|
var rejectClassName = classNames('p-confirm-dialog-reject', {
|
|
'p-button-text': !this.props.rejectClassName
|
|
}, this.props.rejectClassName);
|
|
var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
label: this.rejectLabel(),
|
|
icon: this.props.rejectIcon,
|
|
className: rejectClassName,
|
|
onClick: this.reject
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
label: this.acceptLabel(),
|
|
icon: this.props.acceptIcon,
|
|
className: acceptClassName,
|
|
onClick: this.accept,
|
|
autoFocus: true
|
|
}));
|
|
|
|
if (this.props.footer) {
|
|
var defaultContentOptions = {
|
|
accept: this.accept,
|
|
reject: this.reject,
|
|
acceptClassName: acceptClassName,
|
|
rejectClassName: rejectClassName,
|
|
acceptLabel: this.acceptLabel(),
|
|
rejectLabel: this.rejectLabel(),
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.footer, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-confirm-dialog', this.props.className);
|
|
var dialogProps = ObjectUtils.findDiffKeys(this.props, ConfirmDialog.defaultProps);
|
|
var message = ObjectUtils.getJSXElement(this.props.message, this.props);
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({
|
|
visible: this.state.visible
|
|
}, dialogProps, {
|
|
className: className,
|
|
footer: footer,
|
|
onHide: this.hide,
|
|
breakpoints: this.props.breakpoints
|
|
}), IconUtils.getJSXIcon(this.props.icon, {
|
|
className: 'p-confirm-dialog-icon'
|
|
}, {
|
|
props: this.props
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-confirm-dialog-message"
|
|
}, message));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ConfirmDialog;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ConfirmDialog, "defaultProps", {
|
|
visible: false,
|
|
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
|
|
});
|
|
|
|
function _createSuper$1S(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1S(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1S() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
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 confirmPopup(props) {
|
|
var appendTo = props.appendTo || document.body;
|
|
var confirmPopupWrapper = document.createDocumentFragment();
|
|
DomHandler.appendChild(confirmPopupWrapper, appendTo);
|
|
props = _objectSpread$E(_objectSpread$E({}, props), {
|
|
visible: props.visible === undefined ? true : props.visible
|
|
});
|
|
var confirmPopupEl = /*#__PURE__*/React__default["default"].createElement(ConfirmPopup, props);
|
|
ReactDOM__default["default"].render(confirmPopupEl, confirmPopupWrapper);
|
|
|
|
var updateConfirmPopup = function updateConfirmPopup(newProps) {
|
|
props = _objectSpread$E(_objectSpread$E({}, props), newProps);
|
|
ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].cloneElement(confirmPopupEl, props), confirmPopupWrapper);
|
|
};
|
|
|
|
return {
|
|
_destroy: function _destroy() {
|
|
ReactDOM__default["default"].unmountComponentAtNode(confirmPopupWrapper);
|
|
},
|
|
show: function show() {
|
|
updateConfirmPopup({
|
|
visible: true,
|
|
onHide: function onHide() {
|
|
updateConfirmPopup({
|
|
visible: false
|
|
}); // reset
|
|
}
|
|
});
|
|
},
|
|
hide: function hide() {
|
|
updateConfirmPopup({
|
|
visible: false
|
|
});
|
|
},
|
|
update: function update(newProps) {
|
|
updateConfirmPopup(newProps);
|
|
}
|
|
};
|
|
}
|
|
var ConfirmPopup = /*#__PURE__*/function (_Component) {
|
|
_inherits(ConfirmPopup, _Component);
|
|
|
|
var _super = _createSuper$1S(ConfirmPopup);
|
|
|
|
function ConfirmPopup(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ConfirmPopup);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false
|
|
};
|
|
_this.reject = _this.reject.bind(_assertThisInitialized(_this));
|
|
_this.accept = _this.accept.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.onCloseClick = _this.onCloseClick.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
|
|
_this.acceptBtnRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ConfirmPopup, [{
|
|
key: "acceptLabel",
|
|
value: function acceptLabel() {
|
|
return this.props.acceptLabel || localeOption('accept');
|
|
}
|
|
}, {
|
|
key: "rejectLabel",
|
|
value: function rejectLabel() {
|
|
return this.props.rejectLabel || localeOption('reject');
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener && this.props.dismissable) {
|
|
this.documentClickListener = function (event) {
|
|
if (!_this2.isPanelClicked && _this2.isOutsideClicked(event.target)) {
|
|
_this2.hide();
|
|
}
|
|
|
|
_this2.isPanelClicked = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.props.target, function () {
|
|
if (_this3.state.visible) {
|
|
_this3.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return this.overlayRef && this.overlayRef.current && !(this.overlayRef.current.isSameNode(target) || this.overlayRef.current.contains(target));
|
|
}
|
|
}, {
|
|
key: "onCloseClick",
|
|
value: function onCloseClick(event) {
|
|
this.hide();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
this.isPanelClicked = true;
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.props.target
|
|
});
|
|
}
|
|
}, {
|
|
key: "accept",
|
|
value: function accept() {
|
|
if (this.props.accept) {
|
|
this.props.accept();
|
|
}
|
|
|
|
this.hide('accept');
|
|
}
|
|
}, {
|
|
key: "reject",
|
|
value: function reject() {
|
|
if (this.props.reject) {
|
|
this.props.reject();
|
|
}
|
|
|
|
this.hide('reject');
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
var _this5 = this;
|
|
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
_this5.overlayEventListener = function (e) {
|
|
if (!_this5.isOutsideClicked(e.target)) {
|
|
_this5.isPanelClicked = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', _this5.overlayEventListener);
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(result) {
|
|
var _this6 = this;
|
|
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
OverlayService.off('overlay-click', _this6.overlayEventListener);
|
|
_this6.overlayEventListener = null;
|
|
|
|
if (_this6.props.onHide) {
|
|
_this6.props.onHide(result);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.align();
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
|
|
if (this.acceptBtnRef && this.acceptBtnRef.current) {
|
|
this.acceptBtnRef.current.focus();
|
|
}
|
|
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "align",
|
|
value: function align() {
|
|
if (this.props.target) {
|
|
DomHandler.absolutePosition(this.overlayRef.current, this.props.target);
|
|
var containerOffset = DomHandler.getOffset(this.overlayRef.current);
|
|
var targetOffset = DomHandler.getOffset(this.props.target);
|
|
var arrowLeft = 0;
|
|
|
|
if (containerOffset.left < targetOffset.left) {
|
|
arrowLeft = targetOffset.left - containerOffset.left;
|
|
}
|
|
|
|
this.overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
|
|
|
|
if (containerOffset.top < targetOffset.top) {
|
|
DomHandler.addClass(this.overlayRef.current, 'p-confirm-popup-flipped');
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.visible) {
|
|
this.setState({
|
|
visible: true
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.visible !== this.props.visible) {
|
|
this.setState({
|
|
visible: this.props.visible
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.overlayEventListener) {
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var message = ObjectUtils.getJSXElement(this.props.message, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-confirm-popup-content"
|
|
}, IconUtils.getJSXIcon(this.props.icon, {
|
|
className: 'p-confirm-popup-icon'
|
|
}, {
|
|
props: this.props
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-confirm-popup-message"
|
|
}, message));
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
var acceptClassName = classNames('p-confirm-popup-accept p-button-sm', this.props.acceptClassName);
|
|
var rejectClassName = classNames('p-confirm-popup-reject p-button-sm', {
|
|
'p-button-text': !this.props.rejectClassName
|
|
}, this.props.rejectClassName);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-confirm-popup-footer"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
label: this.rejectLabel(),
|
|
icon: this.props.rejectIcon,
|
|
className: rejectClassName,
|
|
onClick: this.reject
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
ref: this.acceptBtnRef,
|
|
label: this.acceptLabel(),
|
|
icon: this.props.acceptIcon,
|
|
className: acceptClassName,
|
|
onClick: this.accept
|
|
}));
|
|
|
|
if (this.props.footer) {
|
|
var defaultContentOptions = {
|
|
accept: this.accept,
|
|
reject: this.reject,
|
|
className: 'p-confirm-popup-footer',
|
|
acceptClassName: acceptClassName,
|
|
rejectClassName: rejectClassName,
|
|
acceptLabel: this.acceptLabel(),
|
|
rejectLabel: this.rejectLabel(),
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.footer, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-confirm-popup p-component', this.props.className);
|
|
var content = this.renderContent();
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onPanelClick
|
|
}, content, footer));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo,
|
|
visible: this.props.visible
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ConfirmPopup;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ConfirmPopup, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
function _createSuper$1R(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1R(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1R() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var ContextMenuSub = /*#__PURE__*/function (_Component) {
|
|
_inherits(ContextMenuSub, _Component);
|
|
|
|
var _super = _createSuper$1R(ContextMenuSub);
|
|
|
|
function ContextMenuSub(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ContextMenuSub);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: null
|
|
};
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.submenuRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ContextMenuSub, [{
|
|
key: "onItemMouseEnter",
|
|
value: function onItemMouseEnter(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: 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) {
|
|
this.props.onLeafClick(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "position",
|
|
value: function position() {
|
|
var parentItem = this.submenuRef.current.parentElement;
|
|
var containerOffset = DomHandler.getOffset(this.submenuRef.current.parentElement);
|
|
var viewport = DomHandler.getViewport();
|
|
var sublistWidth = this.submenuRef.current.offsetParent ? this.submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.submenuRef.current);
|
|
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
|
|
this.submenuRef.current.style.top = '0px';
|
|
|
|
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
|
|
this.submenuRef.current.style.left = -1 * sublistWidth + 'px';
|
|
} else {
|
|
this.submenuRef.current.style.left = itemOuterWidth + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
this.position();
|
|
}
|
|
}, {
|
|
key: "isActive",
|
|
value: function isActive() {
|
|
return this.props.root || !this.props.resetMenu;
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
if (this.isActive()) {
|
|
this.position();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(item) {
|
|
if (item.items) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ContextMenuSub, {
|
|
model: item.items,
|
|
resetMenu: item !== this.state.activeItem,
|
|
onLeafClick: this.props.onLeafClick
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this2 = this;
|
|
|
|
var active = this.state.activeItem === item;
|
|
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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var submenu = this.renderSubmenu(item);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: linkClassName,
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
role: "menuitem",
|
|
"aria-haspopup": item.items != null,
|
|
"aria-disabled": item.disabled
|
|
}, icon, label, submenuIcon, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
className: linkClassName,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
submenuIconClassName: submenuIconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
active: active
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
role: "none",
|
|
className: className,
|
|
style: item.style,
|
|
onMouseEnter: function onMouseEnter(event) {
|
|
return _this2.onItemMouseEnter(event, item);
|
|
}
|
|
}, content, submenu);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) return this.renderSeparator(index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this3.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames({
|
|
'p-submenu-list': !this.props.root
|
|
});
|
|
var submenu = this.renderMenu();
|
|
var isActive = this.isActive();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.submenuRef,
|
|
classNames: "p-contextmenusub",
|
|
"in": isActive,
|
|
timeout: {
|
|
enter: 0,
|
|
exit: 0
|
|
},
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: this.submenuRef,
|
|
className: className
|
|
}, submenu));
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
if (nextProps.resetMenu === true) {
|
|
return {
|
|
activeItem: null
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return ContextMenuSub;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ContextMenuSub, "defaultProps", {
|
|
model: null,
|
|
root: false,
|
|
className: null,
|
|
resetMenu: false,
|
|
onLeafClick: null
|
|
});
|
|
|
|
var ContextMenu = /*#__PURE__*/function (_Component2) {
|
|
_inherits(ContextMenu, _Component2);
|
|
|
|
var _super2 = _createSuper$1R(ContextMenu);
|
|
|
|
function ContextMenu(props) {
|
|
var _this4;
|
|
|
|
_classCallCheck(this, ContextMenu);
|
|
|
|
_this4 = _super2.call(this, props);
|
|
_this4.state = {
|
|
visible: false,
|
|
reshow: false,
|
|
resetMenu: false
|
|
};
|
|
_this4.onMenuClick = _this4.onMenuClick.bind(_assertThisInitialized(_this4));
|
|
_this4.onLeafClick = _this4.onLeafClick.bind(_assertThisInitialized(_this4));
|
|
_this4.onMenuMouseEnter = _this4.onMenuMouseEnter.bind(_assertThisInitialized(_this4));
|
|
_this4.onEnter = _this4.onEnter.bind(_assertThisInitialized(_this4));
|
|
_this4.onEntered = _this4.onEntered.bind(_assertThisInitialized(_this4));
|
|
_this4.onExit = _this4.onExit.bind(_assertThisInitialized(_this4));
|
|
_this4.onExited = _this4.onExited.bind(_assertThisInitialized(_this4));
|
|
_this4.menuRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this4;
|
|
}
|
|
|
|
_createClass(ContextMenu, [{
|
|
key: "onMenuClick",
|
|
value: function onMenuClick() {
|
|
this.setState({
|
|
resetMenu: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onMenuMouseEnter",
|
|
value: function onMenuMouseEnter() {
|
|
this.setState({
|
|
resetMenu: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(event) {
|
|
var _this5 = this;
|
|
|
|
if (!(event instanceof Event)) {
|
|
event.persist();
|
|
}
|
|
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
this.currentEvent = event;
|
|
|
|
if (this.state.visible) {
|
|
this.setState({
|
|
reshow: true
|
|
});
|
|
} else {
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
if (_this5.props.onShow) {
|
|
_this5.props.onShow(_this5.currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(event) {
|
|
var _this6 = this;
|
|
|
|
if (!(event instanceof Event)) {
|
|
event.persist();
|
|
}
|
|
|
|
this.currentEvent = event;
|
|
this.setState({
|
|
visible: false,
|
|
reshow: false
|
|
}, function () {
|
|
if (_this6.props.onHide) {
|
|
_this6.props.onHide(_this6.currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
if (this.props.autoZIndex) {
|
|
ZIndexUtils.set('menu', this.menuRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['menu']);
|
|
}
|
|
|
|
this.position(this.currentEvent);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentListeners();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.currentEvent = null;
|
|
this.unbindDocumentListeners();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "position",
|
|
value: function position(event) {
|
|
if (event) {
|
|
var left = event.pageX + 1;
|
|
var top = event.pageY + 1;
|
|
var width = this.menuRef.current.offsetParent ? this.menuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.menuRef.current);
|
|
var height = this.menuRef.current.offsetParent ? this.menuRef.current.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.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;
|
|
}
|
|
|
|
this.menuRef.current.style.left = left + 'px';
|
|
this.menuRef.current.style.top = top + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onLeafClick",
|
|
value: function onLeafClick(event) {
|
|
this.setState({
|
|
resetMenu: true
|
|
});
|
|
this.hide(event);
|
|
event.stopPropagation();
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.menuRef && this.menuRef.current && !(this.menuRef.current.isSameNode(event.target) || this.menuRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "bindDocumentListeners",
|
|
value: function bindDocumentListeners() {
|
|
this.bindDocumentResizeListener();
|
|
this.bindDocumentClickListener();
|
|
}
|
|
}, {
|
|
key: "unbindDocumentListeners",
|
|
value: function unbindDocumentListeners() {
|
|
this.unbindDocumentResizeListener();
|
|
this.unbindDocumentClickListener();
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this7 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this7.isOutsideClicked(event) && event.button !== 2) {
|
|
_this7.hide(event);
|
|
|
|
_this7.setState({
|
|
resetMenu: true
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentContextMenuListener",
|
|
value: function bindDocumentContextMenuListener() {
|
|
var _this8 = this;
|
|
|
|
if (!this.documentContextMenuListener) {
|
|
this.documentContextMenuListener = function (event) {
|
|
_this8.show(event);
|
|
};
|
|
|
|
document.addEventListener('contextmenu', this.documentContextMenuListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListener",
|
|
value: function bindDocumentResizeListener() {
|
|
var _this9 = this;
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function (event) {
|
|
if (_this9.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this9.hide(event);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentContextMenuListener",
|
|
value: function unbindDocumentContextMenuListener() {
|
|
if (this.documentContextMenuListener) {
|
|
document.removeEventListener('contextmenu', this.documentContextMenuListener);
|
|
this.documentContextMenuListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListener",
|
|
value: function unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.global) {
|
|
this.bindDocumentContextMenuListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var _this10 = this;
|
|
|
|
if (this.state.visible && (prevState.reshow !== this.state.reshow || prevProps.model !== this.props.model)) {
|
|
var event = this.currentEvent;
|
|
this.setState({
|
|
visible: false,
|
|
reshow: false,
|
|
rePosition: false,
|
|
resetMenu: true
|
|
}, function () {
|
|
return _this10.show(event);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentListeners();
|
|
this.unbindDocumentContextMenuListener();
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "renderContextMenu",
|
|
value: function renderContextMenu() {
|
|
var className = classNames('p-contextmenu p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.menuRef,
|
|
classNames: "p-contextmenu",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 250,
|
|
exit: 0
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.menuRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onMenuClick,
|
|
onMouseEnter: this.onMenuMouseEnter
|
|
}, /*#__PURE__*/React__default["default"].createElement(ContextMenuSub, {
|
|
model: this.props.model,
|
|
root: true,
|
|
resetMenu: this.state.resetMenu,
|
|
onLeafClick: this.onLeafClick
|
|
})));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderContextMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ContextMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ContextMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
style: null,
|
|
className: null,
|
|
global: false,
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$1Q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1Q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1Q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var DataScroller = /*#__PURE__*/function (_Component) {
|
|
_inherits(DataScroller, _Component);
|
|
|
|
var _super = _createSuper$1Q(DataScroller);
|
|
|
|
function DataScroller(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DataScroller);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
_this.dataToRender = [];
|
|
_this.value = _this.props.value;
|
|
_this.first = 0;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DataScroller, [{
|
|
key: "handleDataChange",
|
|
value: function handleDataChange() {
|
|
if (this.props.lazy) {
|
|
this.dataToRender = this.value;
|
|
this.setState({
|
|
dataToRender: this.dataToRender
|
|
});
|
|
} else {
|
|
this.load();
|
|
}
|
|
}
|
|
}, {
|
|
key: "load",
|
|
value: function load() {
|
|
if (this.props.lazy) {
|
|
if (this.props.onLazyLoad) {
|
|
this.props.onLazyLoad(this.createLazyLoadMetadata());
|
|
}
|
|
|
|
this.first = this.first + this.props.rows;
|
|
} else {
|
|
if (this.value) {
|
|
for (var i = this.first; i < this.first + this.props.rows; i++) {
|
|
if (i >= this.value.length) {
|
|
break;
|
|
}
|
|
|
|
this.dataToRender.push(this.value[i]);
|
|
}
|
|
|
|
if (this.value.length !== 0) {
|
|
this.first = this.first + this.props.rows;
|
|
}
|
|
|
|
this.setState({
|
|
dataToRender: this.dataToRender
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "reset",
|
|
value: function reset() {
|
|
this.first = 0;
|
|
this.dataToRender = [];
|
|
this.setState({
|
|
dataToRender: this.dataToRender
|
|
});
|
|
this.load();
|
|
}
|
|
}, {
|
|
key: "isEmpty",
|
|
value: function isEmpty() {
|
|
return !this.dataToRender || this.dataToRender.length === 0;
|
|
}
|
|
}, {
|
|
key: "createLazyLoadMetadata",
|
|
value: function createLazyLoadMetadata() {
|
|
return {
|
|
first: this.first,
|
|
rows: this.props.rows
|
|
};
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.inline) {
|
|
this.scrollFunction = function () {
|
|
var scrollTop = _this2.contentElement.scrollTop,
|
|
scrollHeight = _this2.contentElement.scrollHeight,
|
|
viewportHeight = _this2.contentElement.clientHeight;
|
|
|
|
if (scrollTop >= scrollHeight * _this2.props.buffer - viewportHeight) {
|
|
_this2.load();
|
|
}
|
|
};
|
|
|
|
this.contentElement.addEventListener('scroll', this.scrollFunction);
|
|
} else {
|
|
this.scrollFunction = 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 * _this2.props.buffer - winHeight) {
|
|
_this2.load();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', this.scrollFunction);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollFunction) {
|
|
if (this.props.inline) {
|
|
this.contentElement.removeEventListener('scroll', this.scrollFunction);
|
|
this.contentElement = null;
|
|
} else if (!this.props.loader) {
|
|
window.removeEventListener('scroll', this.scrollFunction);
|
|
}
|
|
}
|
|
|
|
this.scrollFunction = null;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.load();
|
|
|
|
if (!this.props.loader) {
|
|
this.bindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var newValue = this.props.value;
|
|
|
|
if (newValue && this.value !== newValue) {
|
|
this.value = newValue;
|
|
this.first = 0;
|
|
this.dataToRender = [];
|
|
this.handleDataChange();
|
|
}
|
|
|
|
if (prevProps.loader !== this.props.loader && this.props.loader) {
|
|
this.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.scrollFunction) {
|
|
this.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datascroller-header"
|
|
}, this.props.header);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datascroller-footer"
|
|
}, this.props.footer);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(value, index) {
|
|
var content = this.props.itemTemplate ? this.props.itemTemplate(value) : value;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index + '_datascrollitem'
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderEmptyMessage",
|
|
value: function renderEmptyMessage() {
|
|
var content = ObjectUtils.getJSXElement(this.props.emptyMessage, this.props) || localeOption('emptyMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("li", null, content);
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this3 = this;
|
|
|
|
var content = this.state.dataToRender && this.state.dataToRender.length ? this.state.dataToRender.map(function (val, i) {
|
|
return _this3.renderItem(val, i);
|
|
}) : this.renderEmptyMessage();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.contentElement = el;
|
|
},
|
|
className: "p-datascroller-content",
|
|
style: {
|
|
'maxHeight': this.props.scrollHeight
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-datascroller-list"
|
|
}, content));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-datascroller p-component', this.props.className, {
|
|
'p-datascroller-inline': this.props.inline
|
|
});
|
|
var header = this.renderHeader();
|
|
var footer = this.renderFooter();
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className
|
|
}, header, content, footer);
|
|
}
|
|
}]);
|
|
|
|
return DataScroller;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DataScroller, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
function _createSuper$1P(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1P(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1P() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var FirstPageLink = /*#__PURE__*/function (_Component) {
|
|
_inherits(FirstPageLink, _Component);
|
|
|
|
var _super = _createSuper$1P(FirstPageLink);
|
|
|
|
function FirstPageLink() {
|
|
_classCallCheck(this, FirstPageLink);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(FirstPageLink, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-paginator-first p-paginator-element p-link', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var iconClassName = 'p-paginator-icon pi pi-angle-double-left';
|
|
var element = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onClick: this.props.onClick,
|
|
disabled: this.props.disabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
onClick: this.props.onClick,
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
disabled: this.props.disabled,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return FirstPageLink;
|
|
}(React.Component);
|
|
|
|
_defineProperty(FirstPageLink, "defaultProps", {
|
|
disabled: false,
|
|
onClick: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$1O(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1O(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1O() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var NextPageLink = /*#__PURE__*/function (_Component) {
|
|
_inherits(NextPageLink, _Component);
|
|
|
|
var _super = _createSuper$1O(NextPageLink);
|
|
|
|
function NextPageLink() {
|
|
_classCallCheck(this, NextPageLink);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(NextPageLink, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-paginator-next p-paginator-element p-link', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var iconClassName = 'p-paginator-icon pi pi-angle-right';
|
|
var element = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onClick: this.props.onClick,
|
|
disabled: this.props.disabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
onClick: this.props.onClick,
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
disabled: this.props.disabled,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return NextPageLink;
|
|
}(React.Component);
|
|
|
|
_defineProperty(NextPageLink, "defaultProps", {
|
|
disabled: false,
|
|
onClick: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$1N(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1N(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1N() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PrevPageLink = /*#__PURE__*/function (_Component) {
|
|
_inherits(PrevPageLink, _Component);
|
|
|
|
var _super = _createSuper$1N(PrevPageLink);
|
|
|
|
function PrevPageLink() {
|
|
_classCallCheck(this, PrevPageLink);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(PrevPageLink, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-paginator-prev p-paginator-element p-link', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var iconClassName = 'p-paginator-icon pi pi-angle-left';
|
|
var element = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onClick: this.props.onClick,
|
|
disabled: this.props.disabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
onClick: this.props.onClick,
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
disabled: this.props.disabled,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return PrevPageLink;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PrevPageLink, "defaultProps", {
|
|
disabled: false,
|
|
onClick: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$1M(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1M(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1M() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var LastPageLink = /*#__PURE__*/function (_Component) {
|
|
_inherits(LastPageLink, _Component);
|
|
|
|
var _super = _createSuper$1M(LastPageLink);
|
|
|
|
function LastPageLink() {
|
|
_classCallCheck(this, LastPageLink);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(LastPageLink, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-paginator-last p-paginator-element p-link', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var iconClassName = 'p-paginator-icon pi pi-angle-double-right';
|
|
var element = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onClick: this.props.onClick,
|
|
disabled: this.props.disabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
onClick: this.props.onClick,
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
disabled: this.props.disabled,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return LastPageLink;
|
|
}(React.Component);
|
|
|
|
_defineProperty(LastPageLink, "defaultProps", {
|
|
disabled: false,
|
|
onClick: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$1L(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1L(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1L() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PageLinks = /*#__PURE__*/function (_Component) {
|
|
_inherits(PageLinks, _Component);
|
|
|
|
var _super = _createSuper$1L(PageLinks);
|
|
|
|
function PageLinks() {
|
|
_classCallCheck(this, PageLinks);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(PageLinks, [{
|
|
key: "onPageLinkClick",
|
|
value: function onPageLinkClick(event, pageLink) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
value: pageLink
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this = this;
|
|
|
|
var elements;
|
|
|
|
if (this.props.value) {
|
|
var startPageInView = this.props.value[0];
|
|
var endPageInView = this.props.value[this.props.value.length - 1];
|
|
elements = this.props.value.map(function (pageLink, i) {
|
|
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 === _this.props.page
|
|
});
|
|
var element = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onClick: function onClick(e) {
|
|
return _this.onPageLinkClick(e, pageLink);
|
|
}
|
|
}, pageLink, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (_this.props.template) {
|
|
var defaultOptions = {
|
|
onClick: function onClick(e) {
|
|
return _this.onPageLinkClick(e, pageLink);
|
|
},
|
|
className: className,
|
|
view: {
|
|
startPage: startPageInView - 1,
|
|
endPage: endPageInView - 1
|
|
},
|
|
page: pageLink - 1,
|
|
currentPage: _this.props.page,
|
|
totalPages: _this.props.pageCount,
|
|
element: element,
|
|
props: _this.props
|
|
};
|
|
element = ObjectUtils.getJSXElement(_this.props.template, defaultOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: pageLink
|
|
}, element);
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-paginator-pages"
|
|
}, elements);
|
|
}
|
|
}]);
|
|
|
|
return PageLinks;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PageLinks, "defaultProps", {
|
|
value: null,
|
|
page: null,
|
|
rows: null,
|
|
pageCount: null,
|
|
links: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$1K(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1K(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1K() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var DropdownItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(DropdownItem, _Component);
|
|
|
|
var _super = _createSuper$1K(DropdownItem);
|
|
|
|
function DropdownItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DropdownItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DropdownItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-dropdown-item', {
|
|
'p-highlight': this.props.selected,
|
|
'p-disabled': this.props.disabled,
|
|
'p-dropdown-item-empty': !this.props.label || this.props.label.length === 0
|
|
}, this.props.option.className);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
onClick: this.onClick,
|
|
"aria-label": this.props.label,
|
|
key: this.props.label,
|
|
role: "option",
|
|
"aria-selected": this.props.selected
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return DropdownItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DropdownItem, "defaultProps", {
|
|
option: null,
|
|
label: null,
|
|
template: null,
|
|
selected: false,
|
|
disabled: false,
|
|
onClick: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1J(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1J(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1J() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(DropdownPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$1J(DropdownPanelComponent);
|
|
|
|
function DropdownPanelComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DropdownPanelComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DropdownPanelComponent, [{
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
var _this2 = this;
|
|
|
|
this.props.onEnter(function () {
|
|
if (_this2.virtualScrollerRef) {
|
|
var selectedIndex = _this2.props.getSelectedOptionIndex();
|
|
|
|
if (selectedIndex !== -1) {
|
|
_this2.virtualScrollerRef.scrollToIndex(selectedIndex);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
var _this3 = this;
|
|
|
|
this.props.onEntered(function () {
|
|
if (_this3.props.filter && _this3.props.filterInputAutoFocus) {
|
|
_this3.filterInput.focus();
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
if (this.virtualScrollerRef) {
|
|
this.virtualScrollerRef.scrollToIndex(0);
|
|
}
|
|
|
|
this.props.onFilterInputChange && this.props.onFilterInputChange(event);
|
|
}
|
|
}, {
|
|
key: "isEmptyFilter",
|
|
value: function isEmptyFilter() {
|
|
return !(this.props.visibleOptions && this.props.visibleOptions.length) && this.props.hasFilter();
|
|
}
|
|
}, {
|
|
key: "renderGroupChildren",
|
|
value: function renderGroupChildren(optionGroup) {
|
|
var _this4 = this;
|
|
|
|
var groupChildren = this.props.getOptionGroupChildren(optionGroup);
|
|
return groupChildren.map(function (option, j) {
|
|
var optionLabel = _this4.props.getOptionLabel(option);
|
|
|
|
var optionKey = j + '_' + _this4.props.getOptionRenderKey(option);
|
|
|
|
var disabled = _this4.props.isOptionDisabled(option);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: _this4.props.itemTemplate,
|
|
selected: _this4.props.isSelected(option),
|
|
disabled: disabled,
|
|
onClick: _this4.props.onOptionClick
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderEmptyMessage",
|
|
value: function renderEmptyMessage(emptyMessage, isFilter) {
|
|
var message = ObjectUtils.getJSXElement(emptyMessage, this.props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-dropdown-empty-message"
|
|
}, message);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(option, index) {
|
|
if (this.props.optionGroupLabel) {
|
|
var groupContent = this.props.optionGroupTemplate ? ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
|
|
var groupChildrenContent = this.renderGroupChildren(option);
|
|
var key = index + '_' + this.props.getOptionGroupRenderKey(option);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: key
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-dropdown-item-group"
|
|
}, groupContent), groupChildrenContent);
|
|
} else {
|
|
var optionLabel = this.props.getOptionLabel(option);
|
|
var optionKey = index + '_' + this.props.getOptionRenderKey(option);
|
|
var disabled = this.props.isOptionDisabled(option);
|
|
return /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: this.props.itemTemplate,
|
|
selected: this.props.isSelected(option),
|
|
disabled: disabled,
|
|
onClick: this.props.onOptionClick
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this5 = this;
|
|
|
|
if (this.props.visibleOptions && this.props.visibleOptions.length) {
|
|
return this.props.visibleOptions.map(function (option, index) {
|
|
return _this5.renderItem(option, index);
|
|
});
|
|
} else if (this.props.hasFilter()) {
|
|
return this.renderEmptyMessage(this.props.emptyFilterMessage, true);
|
|
}
|
|
|
|
return this.renderEmptyMessage(this.props.emptyMessage);
|
|
}
|
|
}, {
|
|
key: "renderFilterClearIcon",
|
|
value: function renderFilterClearIcon() {
|
|
var _this6 = this;
|
|
|
|
if (this.props.showFilterClear && this.props.filterValue) {
|
|
return /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-dropdown-filter-clear-icon pi pi-times",
|
|
onClick: function onClick() {
|
|
return _this6.props.onFilterClearIconClick(function () {
|
|
return _this6.filterInput.focus();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilter",
|
|
value: function renderFilter() {
|
|
var _this7 = this;
|
|
|
|
if (this.props.filter) {
|
|
var clearIcon = this.renderFilterClearIcon();
|
|
var containerClassName = classNames('p-dropdown-filter-container', {
|
|
'p-dropdown-clearable-filter': !!clearIcon
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dropdown-header"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: containerClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this7.filterInput = el;
|
|
},
|
|
type: "text",
|
|
autoComplete: "off",
|
|
className: "p-dropdown-filter p-inputtext p-component",
|
|
placeholder: this.props.filterPlaceholder,
|
|
onKeyDown: this.props.onFilterInputKeyDown,
|
|
onChange: this.onFilterInputChange,
|
|
value: this.props.filterValue
|
|
}), clearIcon, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-dropdown-filter-icon pi pi-search"
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this8 = this;
|
|
|
|
if (this.props.virtualScrollerOptions) {
|
|
var virtualScrollerProps = _objectSpread$D(_objectSpread$D({}, this.props.virtualScrollerOptions), {
|
|
style: _objectSpread$D(_objectSpread$D({}, this.props.virtualScrollerOptions.style), {
|
|
height: this.props.scrollHeight
|
|
}),
|
|
className: classNames('p-dropdown-items-wrapper', this.props.virtualScrollerOptions.className),
|
|
items: this.props.visibleOptions,
|
|
onLazyLoad: function onLazyLoad(event) {
|
|
return _this8.props.virtualScrollerOptions.onLazyLoad(_objectSpread$D(_objectSpread$D({}, event), {
|
|
filter: _this8.props.filterValue
|
|
}));
|
|
},
|
|
itemTemplate: function itemTemplate(item, options) {
|
|
return item && _this8.renderItem(item, options.index);
|
|
},
|
|
contentTemplate: function contentTemplate(options) {
|
|
var className = classNames('p-dropdown-items', options.className);
|
|
var content = _this8.isEmptyFilter() ? _this8.renderEmptyMessage() : options.children;
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: options.contentRef,
|
|
className: className,
|
|
role: "listbox"
|
|
}, content);
|
|
}
|
|
});
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(VirtualScroller, _extends({
|
|
ref: function ref(el) {
|
|
return _this8.virtualScrollerRef = el;
|
|
}
|
|
}, virtualScrollerProps));
|
|
} else {
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dropdown-items-wrapper",
|
|
style: {
|
|
maxHeight: this.props.scrollHeight || 'auto'
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-dropdown-items",
|
|
role: "listbox"
|
|
}, items));
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-dropdown-panel p-component', this.props.panelClassName);
|
|
var filter = this.renderFilter();
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntering: this.props.onEntering,
|
|
onEntered: this.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
style: this.props.panelStyle,
|
|
onClick: this.props.onClick
|
|
}, filter, content));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return DropdownPanelComponent;
|
|
}(React.Component);
|
|
|
|
var DropdownPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(DropdownPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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 _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; }
|
|
|
|
function _createSuper$1I(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1I(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1I() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Dropdown = /*#__PURE__*/function (_Component) {
|
|
_inherits(Dropdown, _Component);
|
|
|
|
var _super = _createSuper$1I(Dropdown);
|
|
|
|
function Dropdown(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Dropdown);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
filter: '',
|
|
focused: false,
|
|
overlayVisible: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onEditableInputChange = _this.onEditableInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onEditableInputFocus = _this.onEditableInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onOptionClick = _this.onOptionClick.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputKeyDown = _this.onFilterInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onFilterClearIconClick = _this.onFilterClearIconClick.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.resetFilter = _this.resetFilter.bind(_assertThisInitialized(_this));
|
|
_this.clear = _this.clear.bind(_assertThisInitialized(_this));
|
|
_this.hasFilter = _this.hasFilter.bind(_assertThisInitialized(_this));
|
|
_this.getOptionLabel = _this.getOptionLabel.bind(_assertThisInitialized(_this));
|
|
_this.getOptionRenderKey = _this.getOptionRenderKey.bind(_assertThisInitialized(_this));
|
|
_this.isOptionDisabled = _this.isOptionDisabled.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupChildren = _this.getOptionGroupChildren.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupLabel = _this.getOptionGroupLabel.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupRenderKey = _this.getOptionGroupRenderKey.bind(_assertThisInitialized(_this));
|
|
_this.getSelectedOptionIndex = _this.getSelectedOptionIndex.bind(_assertThisInitialized(_this));
|
|
_this.isSelected = _this.isSelected.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Dropdown, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
|
|
return;
|
|
} else if (!this.overlayRef.current || !(this.overlayRef.current && this.overlayRef.current.contains(event.target))) {
|
|
this.focusInput.focus();
|
|
|
|
if (this.state.overlayVisible) {
|
|
this.hideOverlay();
|
|
} else {
|
|
this.showOverlay();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus(event) {
|
|
var _this2 = this;
|
|
|
|
event.persist();
|
|
|
|
if (this.props.showOnFocus && !this.state.overlayVisible) {
|
|
this.showOverlay();
|
|
}
|
|
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this2.props.onFocus) {
|
|
_this2.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur(event) {
|
|
var _this3 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this3.props.onBlur) {
|
|
_this3.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
this.onDownKey(event);
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
this.onUpKey(event);
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (this.state.overlayVisible) this.hideOverlay();else this.showOverlay();
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.hideOverlay();
|
|
event.preventDefault();
|
|
break;
|
|
//escape and tab
|
|
|
|
case 27:
|
|
case 9:
|
|
this.hideOverlay();
|
|
break;
|
|
|
|
default:
|
|
this.search(event);
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInputKeyDown",
|
|
value: function onFilterInputKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
this.onDownKey(event);
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
this.onUpKey(event);
|
|
break;
|
|
//enter and escape
|
|
|
|
case 13:
|
|
case 27:
|
|
this.hideOverlay();
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpKey",
|
|
value: function onUpKey(event) {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (visibleOptions) {
|
|
var prevOption = this.findPrevOption(this.getSelectedOptionIndex());
|
|
|
|
if (prevOption) {
|
|
this.selectItem({
|
|
originalEvent: event,
|
|
option: prevOption
|
|
});
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDownKey",
|
|
value: function onDownKey(event) {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (visibleOptions) {
|
|
if (!this.state.overlayVisible && event.altKey) {
|
|
this.showOverlay();
|
|
} else {
|
|
var nextOption = this.findNextOption(this.getSelectedOptionIndex());
|
|
|
|
if (nextOption) {
|
|
this.selectItem({
|
|
originalEvent: event,
|
|
option: nextOption
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "findNextOption",
|
|
value: function findNextOption(index) {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var groupIndex = index === -1 ? 0 : index.group;
|
|
var optionIndex = index === -1 ? -1 : index.option;
|
|
var option = this.findNextOptionInList(this.getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
|
|
if (option) return option;else if (groupIndex + 1 !== visibleOptions.length) return this.findNextOption({
|
|
group: groupIndex + 1,
|
|
option: -1
|
|
});else return null;
|
|
} else {
|
|
return this.findNextOptionInList(visibleOptions, index);
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextOptionInList",
|
|
value: function findNextOptionInList(list, index) {
|
|
var i = index + 1;
|
|
|
|
if (i === list.length) {
|
|
return null;
|
|
}
|
|
|
|
var option = list[i];
|
|
if (this.isOptionDisabled(option)) return this.findNextOptionInList(i);else return option;
|
|
}
|
|
}, {
|
|
key: "findPrevOption",
|
|
value: function findPrevOption(index) {
|
|
if (index === -1) {
|
|
return null;
|
|
}
|
|
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var groupIndex = index.group;
|
|
var optionIndex = index.option;
|
|
var option = this.findPrevOptionInList(this.getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
|
|
if (option) return option;else if (groupIndex > 0) return this.findPrevOption({
|
|
group: groupIndex - 1,
|
|
option: this.getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
|
|
});else return null;
|
|
} else {
|
|
return this.findPrevOptionInList(visibleOptions, index);
|
|
}
|
|
}
|
|
}, {
|
|
key: "findPrevOptionInList",
|
|
value: function findPrevOptionInList(list, index) {
|
|
var i = index - 1;
|
|
|
|
if (i < 0) {
|
|
return null;
|
|
}
|
|
|
|
var option = list[i];
|
|
if (this.isOptionDisabled(option)) return this.findPrevOption(i);else return option;
|
|
}
|
|
}, {
|
|
key: "search",
|
|
value: function search(event) {
|
|
var _this4 = this;
|
|
|
|
if (this.searchTimeout) {
|
|
clearTimeout(this.searchTimeout);
|
|
}
|
|
|
|
var _char = event.key;
|
|
this.previousSearchChar = this.currentSearchChar;
|
|
this.currentSearchChar = _char;
|
|
if (this.previousSearchChar === this.currentSearchChar) this.searchValue = this.currentSearchChar;else this.searchValue = this.searchValue ? this.searchValue + _char : _char;
|
|
|
|
if (this.searchValue) {
|
|
var searchIndex = this.getSelectedOptionIndex();
|
|
var newOption = this.props.optionGroupLabel ? this.searchOptionInGroup(searchIndex) : this.searchOption(++searchIndex);
|
|
|
|
if (newOption) {
|
|
this.selectItem({
|
|
originalEvent: event,
|
|
option: newOption
|
|
});
|
|
this.selectedOptionUpdated = true;
|
|
}
|
|
}
|
|
|
|
this.searchTimeout = setTimeout(function () {
|
|
_this4.searchValue = null;
|
|
}, 250);
|
|
}
|
|
}, {
|
|
key: "searchOption",
|
|
value: function searchOption(index) {
|
|
var option;
|
|
|
|
if (this.searchValue) {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
option = this.searchOptionInRange(index, visibleOptions.length);
|
|
|
|
if (!option) {
|
|
option = this.searchOptionInRange(0, index);
|
|
}
|
|
}
|
|
|
|
return option;
|
|
}
|
|
}, {
|
|
key: "searchOptionInRange",
|
|
value: function searchOptionInRange(start, end) {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
for (var i = start; i < end; i++) {
|
|
var opt = visibleOptions[i];
|
|
|
|
if (this.matchesSearchValue(opt)) {
|
|
return opt;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "searchOptionInGroup",
|
|
value: function searchOptionInGroup(index) {
|
|
var searchIndex = index === -1 ? {
|
|
group: 0,
|
|
option: -1
|
|
} : index;
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
for (var i = searchIndex.group; i < visibleOptions.length; i++) {
|
|
var groupOptions = this.getOptionGroupChildren(visibleOptions[i]);
|
|
|
|
for (var j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) {
|
|
if (this.matchesSearchValue(groupOptions[j])) {
|
|
return groupOptions[j];
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var _i = 0; _i <= searchIndex.group; _i++) {
|
|
var _groupOptions = this.getOptionGroupChildren(visibleOptions[_i]);
|
|
|
|
for (var _j = 0; _j < (searchIndex.group === _i ? searchIndex.option : _groupOptions.length); _j++) {
|
|
if (this.matchesSearchValue(_groupOptions[_j])) {
|
|
return _groupOptions[_j];
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "matchesSearchValue",
|
|
value: function matchesSearchValue(option) {
|
|
var label = this.getOptionLabel(option).toLocaleLowerCase(this.props.filterLocale);
|
|
return label.startsWith(this.searchValue.toLocaleLowerCase(this.props.filterLocale));
|
|
}
|
|
}, {
|
|
key: "onEditableInputChange",
|
|
value: function onEditableInputChange(event) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
value: event.target.value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: event.target.value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEditableInputFocus",
|
|
value: function onEditableInputFocus(event) {
|
|
var _this5 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
_this5.hideOverlay();
|
|
|
|
if (_this5.props.onFocus) {
|
|
_this5.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOptionClick",
|
|
value: function onOptionClick(event) {
|
|
var option = event.option;
|
|
|
|
if (!option.disabled) {
|
|
this.selectItem(event);
|
|
this.focusInput.focus();
|
|
}
|
|
|
|
this.hideOverlay();
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
var _this6 = this;
|
|
|
|
var filter = event.target.value;
|
|
this.setState({
|
|
filter: filter
|
|
}, function () {
|
|
if (_this6.props.onFilter) {
|
|
_this6.props.onFilter({
|
|
originalEvent: event,
|
|
filter: filter
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilterClearIconClick",
|
|
value: function onFilterClearIconClick(callback) {
|
|
this.resetFilter(callback);
|
|
}
|
|
}, {
|
|
key: "resetFilter",
|
|
value: function resetFilter(callback) {
|
|
var _this7 = this;
|
|
|
|
var filter = '';
|
|
this.setState({
|
|
filter: filter
|
|
}, function () {
|
|
_this7.props.onFilter && _this7.props.onFilter({
|
|
filter: filter
|
|
});
|
|
callback && callback();
|
|
});
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear(event) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: undefined,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: undefined
|
|
}
|
|
});
|
|
}
|
|
|
|
this.updateEditableLabel();
|
|
}
|
|
}, {
|
|
key: "selectItem",
|
|
value: function selectItem(event) {
|
|
var currentSelectedOption = this.getSelectedOption();
|
|
|
|
if (currentSelectedOption !== event.option) {
|
|
this.updateEditableLabel(event.option);
|
|
var optionValue = this.getOptionValue(event.option);
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
value: optionValue,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: optionValue
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "getSelectedOption",
|
|
value: function getSelectedOption() {
|
|
var index = this.getSelectedOptionIndex();
|
|
var visibleOptions = this.getVisibleOptions();
|
|
return index !== -1 ? this.props.optionGroupLabel ? this.getOptionGroupChildren(visibleOptions[index.group])[index.option] : visibleOptions[index] : null;
|
|
}
|
|
}, {
|
|
key: "getSelectedOptionIndex",
|
|
value: function getSelectedOptionIndex() {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (this.props.value != null && visibleOptions) {
|
|
if (this.props.optionGroupLabel) {
|
|
for (var i = 0; i < visibleOptions.length; i++) {
|
|
var selectedOptionIndex = this.findOptionIndexInList(this.props.value, this.getOptionGroupChildren(visibleOptions[i]));
|
|
|
|
if (selectedOptionIndex !== -1) {
|
|
return {
|
|
group: i,
|
|
option: selectedOptionIndex
|
|
};
|
|
}
|
|
}
|
|
} else {
|
|
return this.findOptionIndexInList(this.props.value, visibleOptions);
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
}
|
|
}, {
|
|
key: "findOptionIndexInList",
|
|
value: function findOptionIndexInList(value, list) {
|
|
var key = this.equalityKey();
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
if (ObjectUtils.equals(value, this.getOptionValue(list[i]), key)) {
|
|
return i;
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(option) {
|
|
return ObjectUtils.equals(this.props.value, this.getOptionValue(option), this.equalityKey());
|
|
}
|
|
}, {
|
|
key: "equalityKey",
|
|
value: function equalityKey() {
|
|
return this.props.optionValue ? null : this.props.dataKey;
|
|
}
|
|
}, {
|
|
key: "showOverlay",
|
|
value: function showOverlay() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hideOverlay",
|
|
value: function hideOverlay() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter(callback) {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
callback && callback();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered(callback) {
|
|
callback && callback();
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
if (this.props.filter && this.props.resetFilterOnHide) {
|
|
this.resetFilter();
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.input.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: function scrollInView() {
|
|
var highlightItem = DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
|
|
|
|
if (highlightItem) {
|
|
highlightItem.scrollIntoView({
|
|
block: 'nearest',
|
|
inline: 'start'
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this8 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this8.state.overlayVisible && _this8.isOutsideClicked(event)) {
|
|
_this8.hideOverlay();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this9 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this9.state.overlayVisible) {
|
|
_this9.hideOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this10 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this10.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this10.hideOverlay();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.isClearClicked(event) || this.container.contains(event.target) || this.overlayRef && this.overlayRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "isClearClicked",
|
|
value: function isClearClicked(event) {
|
|
return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
|
|
}
|
|
}, {
|
|
key: "updateEditableLabel",
|
|
value: function updateEditableLabel(option) {
|
|
if (this.input) {
|
|
this.input.value = option ? this.getOptionLabel(option) : this.props.value || '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
return this.state.filter && this.state.filter.trim().length > 0;
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionRenderKey",
|
|
value: function getOptionRenderKey(option) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
|
|
}
|
|
}, {
|
|
key: "isOptionDisabled",
|
|
value: function isOptionDisabled(option) {
|
|
if (this.props.optionDisabled) {
|
|
return ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
|
|
}
|
|
|
|
return option && option['disabled'] !== undefined ? option['disabled'] : false;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupRenderKey",
|
|
value: function getOptionGroupRenderKey(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupLabel",
|
|
value: function getOptionGroupLabel(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
|
|
}
|
|
}, {
|
|
key: "checkValidity",
|
|
value: function checkValidity() {
|
|
if (this.inputRef.current) {
|
|
return this.inputRef.current.checkValidity();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isLazy",
|
|
value: function isLazy() {
|
|
return this.props.virtualScrollerOptions && this.props.virtualScrollerOptions.lazy;
|
|
}
|
|
}, {
|
|
key: "getVisibleOptions",
|
|
value: function getVisibleOptions() {
|
|
if (this.hasFilter() && !this.isLazy()) {
|
|
var filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
|
|
var searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var filteredGroups = [];
|
|
|
|
var _iterator = _createForOfIteratorHelper$c(this.props.options),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var optgroup = _step.value;
|
|
var filteredSubOptions = FilterService.filter(this.getOptionGroupChildren(optgroup), searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
|
|
if (filteredSubOptions && filteredSubOptions.length) {
|
|
filteredGroups.push(_objectSpread$C(_objectSpread$C({}, optgroup), {
|
|
items: filteredSubOptions
|
|
}));
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
return filteredGroups;
|
|
} else {
|
|
return FilterService.filter(this.props.options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
}
|
|
} else {
|
|
return this.props.options;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputField",
|
|
value: function updateInputField() {
|
|
if (this.props.editable && this.input) {
|
|
var selectedOption = this.getSelectedOption();
|
|
var label = selectedOption ? this.getOptionLabel(selectedOption) : null;
|
|
var value = label || this.props.value || '';
|
|
this.input.value = value;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.autoFocus && this.focusInput) {
|
|
this.focusInput.focus();
|
|
}
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
|
|
this.updateInputField();
|
|
|
|
if (this.inputRef.current) {
|
|
this.inputRef.current.selectedIndex = 1;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
if (this.hideTimeout) {
|
|
clearTimeout(this.hideTimeout);
|
|
this.hideTimeout = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.state.overlayVisible) {
|
|
if (this.props.filter) {
|
|
this.alignOverlay();
|
|
}
|
|
|
|
if (prevProps.value !== this.props.value) {
|
|
this.scrollInView();
|
|
}
|
|
}
|
|
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$C({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (this.state.filter && (!this.props.options || this.props.options.length === 0)) {
|
|
this.setState({
|
|
filter: ''
|
|
});
|
|
}
|
|
|
|
this.updateInputField();
|
|
|
|
if (this.inputRef.current) {
|
|
this.inputRef.current.selectedIndex = 1;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHiddenSelect",
|
|
value: function renderHiddenSelect(selectedOption) {
|
|
var placeHolderOption = /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: ""
|
|
}, this.props.placeholder);
|
|
var option = selectedOption ? /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: selectedOption.value
|
|
}, this.getOptionLabel(selectedOption)) : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible p-dropdown-hidden-select"
|
|
}, /*#__PURE__*/React__default["default"].createElement("select", {
|
|
ref: this.inputRef,
|
|
required: this.props.required,
|
|
name: this.props.name,
|
|
tabIndex: -1,
|
|
"aria-hidden": "true"
|
|
}, placeHolderOption, option));
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderKeyboardHelper",
|
|
value: function renderKeyboardHelper() {
|
|
var _this11 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this11.focusInput = el;
|
|
},
|
|
id: this.props.inputId,
|
|
type: "text",
|
|
readOnly: true,
|
|
"aria-haspopup": "listbox",
|
|
onFocus: this.onInputFocus,
|
|
onBlur: this.onInputBlur,
|
|
onKeyDown: this.onInputKeyDown,
|
|
disabled: this.props.disabled,
|
|
tabIndex: this.props.tabIndex,
|
|
"aria-label": this.props.ariaLabel,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(selectedOption) {
|
|
var _this12 = this;
|
|
|
|
var label = ObjectUtils.isNotEmpty(selectedOption) ? this.getOptionLabel(selectedOption) : null;
|
|
|
|
if (this.props.editable) {
|
|
var value = label || this.props.value || '';
|
|
return /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this12.input = el;
|
|
},
|
|
type: "text",
|
|
defaultValue: value,
|
|
className: "p-dropdown-label p-inputtext",
|
|
disabled: this.props.disabled,
|
|
placeholder: this.props.placeholder,
|
|
maxLength: this.props.maxLength,
|
|
onInput: this.onEditableInputChange,
|
|
onFocus: this.onEditableInputFocus,
|
|
onBlur: this.onInputBlur,
|
|
"aria-label": this.props.ariaLabel,
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
"aria-haspopup": "listbox"
|
|
});
|
|
} else {
|
|
var className = classNames('p-dropdown-label p-inputtext', {
|
|
'p-placeholder': label === null && this.props.placeholder,
|
|
'p-dropdown-label-empty': label === null && !this.props.placeholder
|
|
});
|
|
var content = this.props.valueTemplate ? ObjectUtils.getJSXElement(this.props.valueTemplate, selectedOption, this.props) : label || this.props.placeholder || 'empty';
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this12.input = el;
|
|
},
|
|
className: className
|
|
}, content);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderClearIcon",
|
|
value: function renderClearIcon() {
|
|
if (this.props.value != null && this.props.showClear && !this.props.disabled) {
|
|
return /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-dropdown-clear-icon pi pi-times",
|
|
onClick: this.clear
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderDropdownIcon",
|
|
value: function renderDropdownIcon() {
|
|
var _this13 = this;
|
|
|
|
var iconClassName = classNames('p-dropdown-trigger-icon p-clickable', this.props.dropdownIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this13.trigger = el;
|
|
},
|
|
className: "p-dropdown-trigger",
|
|
role: "button",
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": this.state.overlayVisible
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this14 = this;
|
|
|
|
var className = classNames('p-dropdown p-component p-inputwrapper', this.props.className, {
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-dropdown-clearable': this.props.showClear && !this.props.disabled,
|
|
'p-inputwrapper-filled': this.props.value,
|
|
'p-inputwrapper-focus': this.state.focused || this.state.overlayVisible
|
|
});
|
|
var visibleOptions = this.getVisibleOptions();
|
|
var selectedOption = this.getSelectedOption();
|
|
var appendTo = this.props.appendTo || PrimeReact.appendTo;
|
|
var hiddenSelect = this.renderHiddenSelect(selectedOption);
|
|
var keyboardHelper = this.renderKeyboardHelper();
|
|
var labelElement = this.renderLabel(selectedOption);
|
|
var dropdownIcon = this.renderDropdownIcon();
|
|
var clearIcon = this.renderClearIcon();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this14.container = el;
|
|
},
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick,
|
|
onMouseDown: this.props.onMouseDown,
|
|
onContextMenu: this.props.onContextMenu
|
|
}, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__default["default"].createElement(DropdownPanel, _extends({
|
|
ref: this.overlayRef,
|
|
visibleOptions: visibleOptions
|
|
}, this.props, {
|
|
appendTo: appendTo,
|
|
onClick: this.onPanelClick,
|
|
onOptionClick: this.onOptionClick,
|
|
filterValue: this.state.filter,
|
|
hasFilter: this.hasFilter,
|
|
onFilterClearIconClick: this.onFilterClearIconClick,
|
|
onFilterInputKeyDown: this.onFilterInputKeyDown,
|
|
onFilterInputChange: this.onFilterInputChange,
|
|
getOptionLabel: this.getOptionLabel,
|
|
getOptionRenderKey: this.getOptionRenderKey,
|
|
isOptionDisabled: this.isOptionDisabled,
|
|
getOptionGroupChildren: this.getOptionGroupChildren,
|
|
getOptionGroupLabel: this.getOptionGroupLabel,
|
|
getOptionGroupRenderKey: this.getOptionGroupRenderKey,
|
|
isSelected: this.isSelected,
|
|
getSelectedOptionIndex: this.getSelectedOptionIndex,
|
|
"in": this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return Dropdown;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Dropdown, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
name: null,
|
|
value: null,
|
|
options: null,
|
|
optionLabel: null,
|
|
optionValue: null,
|
|
optionDisabled: null,
|
|
optionGroupLabel: null,
|
|
optionGroupChildren: null,
|
|
optionGroupTemplate: null,
|
|
valueTemplate: null,
|
|
itemTemplate: null,
|
|
style: null,
|
|
className: null,
|
|
virtualScrollerOptions: null,
|
|
scrollHeight: '200px',
|
|
filter: false,
|
|
filterBy: null,
|
|
filterMatchMode: 'contains',
|
|
filterPlaceholder: null,
|
|
filterLocale: undefined,
|
|
emptyMessage: null,
|
|
emptyFilterMessage: null,
|
|
editable: false,
|
|
placeholder: null,
|
|
required: false,
|
|
disabled: false,
|
|
appendTo: null,
|
|
tabIndex: null,
|
|
autoFocus: false,
|
|
filterInputAutoFocus: true,
|
|
resetFilterOnHide: false,
|
|
showFilterClear: false,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
dataKey: null,
|
|
inputId: null,
|
|
showClear: false,
|
|
maxLength: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabel: null,
|
|
ariaLabelledBy: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
showOnFocus: false,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null,
|
|
onMouseDown: null,
|
|
onContextMenu: null,
|
|
onShow: null,
|
|
onHide: null,
|
|
onFilter: null
|
|
});
|
|
|
|
function _createSuper$1H(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1H(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1H() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var RowsPerPageDropdown = /*#__PURE__*/function (_Component) {
|
|
_inherits(RowsPerPageDropdown, _Component);
|
|
|
|
var _super = _createSuper$1H(RowsPerPageDropdown);
|
|
|
|
function RowsPerPageDropdown() {
|
|
_classCallCheck(this, RowsPerPageDropdown);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(RowsPerPageDropdown, [{
|
|
key: "hasOptions",
|
|
value: function hasOptions() {
|
|
return this.props.options && this.props.options.length > 0;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var hasOptions = this.hasOptions();
|
|
var options = hasOptions ? this.props.options.map(function (opt) {
|
|
return {
|
|
label: String(opt),
|
|
value: opt
|
|
};
|
|
}) : [];
|
|
var element = hasOptions ? /*#__PURE__*/React__default["default"].createElement(Dropdown, {
|
|
value: this.props.value,
|
|
options: options,
|
|
onChange: this.props.onChange,
|
|
appendTo: this.props.appendTo,
|
|
disabled: this.props.disabled
|
|
}) : null;
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
value: this.props.value,
|
|
options: options,
|
|
onChange: this.props.onChange,
|
|
appendTo: this.props.appendTo,
|
|
currentPage: this.props.page,
|
|
totalPages: this.props.pageCount,
|
|
totalRecords: this.props.totalRecords,
|
|
disabled: this.props.disabled,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return RowsPerPageDropdown;
|
|
}(React.Component);
|
|
|
|
_defineProperty(RowsPerPageDropdown, "defaultProps", {
|
|
options: null,
|
|
value: null,
|
|
page: null,
|
|
pageCount: null,
|
|
totalRecords: 0,
|
|
appendTo: null,
|
|
onChange: null,
|
|
template: null,
|
|
disabled: false
|
|
});
|
|
|
|
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 _createSuper$1G(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1G(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1G() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var CurrentPageReport = /*#__PURE__*/function (_Component) {
|
|
_inherits(CurrentPageReport, _Component);
|
|
|
|
var _super = _createSuper$1G(CurrentPageReport);
|
|
|
|
function CurrentPageReport() {
|
|
_classCallCheck(this, CurrentPageReport);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(CurrentPageReport, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var report = {
|
|
currentPage: this.props.page + 1,
|
|
totalPages: this.props.pageCount,
|
|
first: Math.min(this.props.first + 1, this.props.totalRecords),
|
|
last: Math.min(this.props.first + this.props.rows, this.props.totalRecords),
|
|
rows: this.props.rows,
|
|
totalRecords: this.props.totalRecords
|
|
};
|
|
var text = this.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__default["default"].createElement("span", {
|
|
className: "p-paginator-current"
|
|
}, text);
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = _objectSpread$B(_objectSpread$B({}, report), {
|
|
className: 'p-paginator-current',
|
|
element: element,
|
|
props: this.props
|
|
});
|
|
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return CurrentPageReport;
|
|
}(React.Component);
|
|
|
|
_defineProperty(CurrentPageReport, "defaultProps", {
|
|
pageCount: null,
|
|
page: null,
|
|
first: null,
|
|
rows: null,
|
|
totalRecords: null,
|
|
reportTemplate: '({currentPage} of {totalPages})',
|
|
template: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1F(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1F(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1F() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var InputNumber = /*#__PURE__*/function (_Component) {
|
|
_inherits(InputNumber, _Component);
|
|
|
|
var _super = _createSuper$1F(InputNumber);
|
|
|
|
function InputNumber(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, InputNumber);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
|
|
_this.constructParser();
|
|
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyPress = _this.onInputKeyPress.bind(_assertThisInitialized(_this));
|
|
_this.onInputClick = _this.onInputClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onPaste = _this.onPaste.bind(_assertThisInitialized(_this));
|
|
_this.onUpButtonMouseLeave = _this.onUpButtonMouseLeave.bind(_assertThisInitialized(_this));
|
|
_this.onUpButtonMouseDown = _this.onUpButtonMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onUpButtonMouseUp = _this.onUpButtonMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onUpButtonKeyDown = _this.onUpButtonKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onUpButtonKeyUp = _this.onUpButtonKeyUp.bind(_assertThisInitialized(_this));
|
|
_this.onDownButtonMouseLeave = _this.onDownButtonMouseLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDownButtonMouseDown = _this.onDownButtonMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onDownButtonMouseUp = _this.onDownButtonMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onDownButtonKeyDown = _this.onDownButtonKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onDownButtonKeyUp = _this.onDownButtonKeyUp.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(InputNumber, [{
|
|
key: "getOptions",
|
|
value: function getOptions() {
|
|
return {
|
|
localeMatcher: this.props.localeMatcher,
|
|
style: this.props.mode,
|
|
currency: this.props.currency,
|
|
currencyDisplay: this.props.currencyDisplay,
|
|
useGrouping: this.props.useGrouping,
|
|
minimumFractionDigits: this.props.minFractionDigits,
|
|
maximumFractionDigits: this.props.maxFractionDigits
|
|
};
|
|
}
|
|
}, {
|
|
key: "constructParser",
|
|
value: function constructParser() {
|
|
this.numberFormat = new Intl.NumberFormat(this.props.locale, this.getOptions());
|
|
|
|
var numerals = _toConsumableArray(new Intl.NumberFormat(this.props.locale, {
|
|
useGrouping: false
|
|
}).format(9876543210)).reverse();
|
|
|
|
var index = new Map(numerals.map(function (d, i) {
|
|
return [d, i];
|
|
}));
|
|
this._numeral = new RegExp("[".concat(numerals.join(''), "]"), 'g');
|
|
this._group = this.getGroupingExpression();
|
|
this._minusSign = this.getMinusSignExpression();
|
|
this._currency = this.getCurrencyExpression();
|
|
this._decimal = this.getDecimalExpression();
|
|
this._suffix = this.getSuffixExpression();
|
|
this._prefix = this.getPrefixExpression();
|
|
|
|
this._index = function (d) {
|
|
return index.get(d);
|
|
};
|
|
}
|
|
}, {
|
|
key: "escapeRegExp",
|
|
value: function escapeRegExp(text) {
|
|
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
|
|
}
|
|
}, {
|
|
key: "getDecimalExpression",
|
|
value: function getDecimalExpression() {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, _objectSpread$A(_objectSpread$A({}, this.getOptions()), {}, {
|
|
useGrouping: false
|
|
}));
|
|
return new RegExp("[".concat(formatter.format(1.1).replace(this._currency, '').trim().replace(this._numeral, ''), "]"), 'g');
|
|
}
|
|
}, {
|
|
key: "getGroupingExpression",
|
|
value: function getGroupingExpression() {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, {
|
|
useGrouping: true
|
|
});
|
|
this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0);
|
|
return new RegExp("[".concat(this.groupChar, "]"), 'g');
|
|
}
|
|
}, {
|
|
key: "getMinusSignExpression",
|
|
value: function getMinusSignExpression() {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, {
|
|
useGrouping: false
|
|
});
|
|
return new RegExp("[".concat(formatter.format(-1).trim().replace(this._numeral, ''), "]"), 'g');
|
|
}
|
|
}, {
|
|
key: "getCurrencyExpression",
|
|
value: function getCurrencyExpression() {
|
|
if (this.props.currency) {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, {
|
|
style: 'currency',
|
|
currency: this.props.currency,
|
|
currencyDisplay: this.props.currencyDisplay,
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
});
|
|
return new RegExp("[".concat(formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, ''), "]"), 'g');
|
|
}
|
|
|
|
return new RegExp("[]", 'g');
|
|
}
|
|
}, {
|
|
key: "getPrefixExpression",
|
|
value: function getPrefixExpression() {
|
|
if (this.props.prefix) {
|
|
this.prefixChar = this.props.prefix;
|
|
} else {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, {
|
|
style: this.props.mode,
|
|
currency: this.props.currency,
|
|
currencyDisplay: this.props.currencyDisplay
|
|
});
|
|
this.prefixChar = formatter.format(1).split('1')[0];
|
|
}
|
|
|
|
return new RegExp("".concat(this.escapeRegExp(this.prefixChar || '')), 'g');
|
|
}
|
|
}, {
|
|
key: "getSuffixExpression",
|
|
value: function getSuffixExpression() {
|
|
if (this.props.suffix) {
|
|
this.suffixChar = this.props.suffix;
|
|
} else {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, {
|
|
style: this.props.mode,
|
|
currency: this.props.currency,
|
|
currencyDisplay: this.props.currencyDisplay,
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
});
|
|
this.suffixChar = formatter.format(1).split('1')[1];
|
|
}
|
|
|
|
return new RegExp("".concat(this.escapeRegExp(this.suffixChar || '')), 'g');
|
|
}
|
|
}, {
|
|
key: "formatValue",
|
|
value: function formatValue(value) {
|
|
if (value != null) {
|
|
if (value === '-') {
|
|
// Minus sign
|
|
return value;
|
|
}
|
|
|
|
if (this.props.format) {
|
|
var formatter = new Intl.NumberFormat(this.props.locale, this.getOptions());
|
|
var formattedValue = formatter.format(value);
|
|
|
|
if (this.props.prefix) {
|
|
formattedValue = this.props.prefix + formattedValue;
|
|
}
|
|
|
|
if (this.props.suffix) {
|
|
formattedValue = formattedValue + this.props.suffix;
|
|
}
|
|
|
|
return formattedValue;
|
|
}
|
|
|
|
return value.toString();
|
|
}
|
|
|
|
return '';
|
|
}
|
|
}, {
|
|
key: "parseValue",
|
|
value: function parseValue(text) {
|
|
var filteredText = text.replace(this._suffix, '').replace(this._prefix, '').trim().replace(/\s/g, '').replace(this._currency, '').replace(this._group, '').replace(this._minusSign, '-').replace(this._decimal, '.').replace(this._numeral, this._index);
|
|
|
|
if (filteredText) {
|
|
if (filteredText === '-') // Minus sign
|
|
return filteredText;
|
|
var parsedValue = +filteredText;
|
|
return isNaN(parsedValue) ? null : parsedValue;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "repeat",
|
|
value: function repeat(event, interval, dir) {
|
|
var _this2 = this;
|
|
|
|
var i = interval || 500;
|
|
this.clearTimer();
|
|
this.timer = setTimeout(function () {
|
|
_this2.repeat(event, 40, dir);
|
|
}, i);
|
|
this.spin(event, dir);
|
|
}
|
|
}, {
|
|
key: "spin",
|
|
value: function spin(event, dir) {
|
|
if (this.inputRef && this.inputRef.current) {
|
|
var step = this.props.step * dir;
|
|
var currentValue = this.parseValue(this.inputRef.current.value) || 0;
|
|
var newValue = this.validateValue(currentValue + step);
|
|
this.updateInput(newValue, null, 'spin');
|
|
this.updateModel(event, newValue);
|
|
this.handleOnChange(event, currentValue, newValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpButtonMouseDown",
|
|
value: function onUpButtonMouseDown(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.inputRef.current.focus();
|
|
this.repeat(event, null, 1);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpButtonMouseUp",
|
|
value: function onUpButtonMouseUp() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpButtonMouseLeave",
|
|
value: function onUpButtonMouseLeave() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpButtonKeyUp",
|
|
value: function onUpButtonKeyUp() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onUpButtonKeyDown",
|
|
value: function onUpButtonKeyDown(event) {
|
|
if (!this.props.disabled && !this.props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
|
|
this.repeat(event, null, 1);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDownButtonMouseDown",
|
|
value: function onDownButtonMouseDown(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.inputRef.current.focus();
|
|
this.repeat(event, null, -1);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDownButtonMouseUp",
|
|
value: function onDownButtonMouseUp() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDownButtonMouseLeave",
|
|
value: function onDownButtonMouseLeave() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDownButtonKeyUp",
|
|
value: function onDownButtonKeyUp() {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.clearTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDownButtonKeyDown",
|
|
value: function onDownButtonKeyDown(event) {
|
|
if (!this.props.disabled && !this.props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
|
|
this.repeat(event, null, -1);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(event) {
|
|
if (this.props.disabled || this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
if (this.isSpecialChar) {
|
|
event.target.value = this.lastValue;
|
|
}
|
|
|
|
this.isSpecialChar = false;
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
if (this.props.disabled || this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
this.lastValue = event.target.value;
|
|
|
|
if (event.shiftKey || event.altKey) {
|
|
this.isSpecialChar = 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:
|
|
this.spin(event, 1);
|
|
event.preventDefault();
|
|
break;
|
|
//down
|
|
|
|
case 40:
|
|
this.spin(event, -1);
|
|
event.preventDefault();
|
|
break;
|
|
//left
|
|
|
|
case 37:
|
|
if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//right
|
|
|
|
case 39:
|
|
if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
newValueStr = this.validateValue(this.parseValue(inputValue));
|
|
this.inputRef.current.value = this.formatValue(newValueStr);
|
|
this.inputRef.current.setAttribute('aria-valuenow', newValueStr);
|
|
this.updateModel(event, newValueStr);
|
|
break;
|
|
//backspace
|
|
|
|
case 8:
|
|
event.preventDefault();
|
|
|
|
if (selectionStart === selectionEnd) {
|
|
var deleteChar = inputValue.charAt(selectionStart - 1);
|
|
|
|
var _this$getDecimalCharI = this.getDecimalCharIndexes(inputValue),
|
|
decimalCharIndex = _this$getDecimalCharI.decimalCharIndex,
|
|
decimalCharIndexWithoutPrefix = _this$getDecimalCharI.decimalCharIndexWithoutPrefix;
|
|
|
|
if (this.isNumeralChar(deleteChar)) {
|
|
var decimalLength = this.getDecimalLength(inputValue);
|
|
|
|
if (this._group.test(deleteChar)) {
|
|
this._group.lastIndex = 0;
|
|
newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
|
|
} else if (this._decimal.test(deleteChar)) {
|
|
this._decimal.lastIndex = 0;
|
|
|
|
if (decimalLength) {
|
|
this.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 = this.isDecimalMode() && (this.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 = this.parseValue(newValueStr) > 0 ? newValueStr : '';
|
|
} else {
|
|
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
|
|
}
|
|
}
|
|
|
|
this.updateValue(event, newValueStr, null, 'delete-single');
|
|
} else {
|
|
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
|
|
this.updateValue(event, newValueStr, null, 'delete-range');
|
|
}
|
|
|
|
break;
|
|
// del
|
|
|
|
case 46:
|
|
event.preventDefault();
|
|
|
|
if (selectionStart === selectionEnd) {
|
|
var _deleteChar = inputValue.charAt(selectionStart);
|
|
|
|
var _this$getDecimalCharI2 = this.getDecimalCharIndexes(inputValue),
|
|
_decimalCharIndex = _this$getDecimalCharI2.decimalCharIndex,
|
|
_decimalCharIndexWithoutPrefix = _this$getDecimalCharI2.decimalCharIndexWithoutPrefix;
|
|
|
|
if (this.isNumeralChar(_deleteChar)) {
|
|
var _decimalLength = this.getDecimalLength(inputValue);
|
|
|
|
if (this._group.test(_deleteChar)) {
|
|
this._group.lastIndex = 0;
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
|
|
} else if (this._decimal.test(_deleteChar)) {
|
|
this._decimal.lastIndex = 0;
|
|
|
|
if (_decimalLength) {
|
|
this.$refs.input.$el.setSelectionRange(selectionStart + 1, selectionStart + 1);
|
|
} else {
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
|
|
}
|
|
} else if (_decimalCharIndex > 0 && selectionStart > _decimalCharIndex) {
|
|
var _insertedText = this.isDecimalMode() && (this.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 = this.parseValue(newValueStr) > 0 ? newValueStr : '';
|
|
} else {
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
|
|
}
|
|
}
|
|
|
|
this.updateValue(event, newValueStr, null, 'delete-back-single');
|
|
} else {
|
|
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
|
|
this.updateValue(event, newValueStr, null, 'delete-range');
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputKeyPress",
|
|
value: function onInputKeyPress(event) {
|
|
if (this.props.disabled || this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var code = event.which || event.keyCode;
|
|
|
|
var _char = String.fromCharCode(code);
|
|
|
|
var isDecimalSign = this.isDecimalSign(_char);
|
|
var isMinusSign = this.isMinusSign(_char);
|
|
|
|
if (48 <= code && code <= 57 || isMinusSign || isDecimalSign) {
|
|
this.insert(event, _char, {
|
|
isDecimalSign: isDecimalSign,
|
|
isMinusSign: isMinusSign
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPaste",
|
|
value: function onPaste(event) {
|
|
event.preventDefault();
|
|
|
|
if (this.props.disabled || this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var data = (event.clipboardData || window['clipboardData']).getData('Text');
|
|
|
|
if (data) {
|
|
var filteredData = this.parseValue(data);
|
|
|
|
if (filteredData != null) {
|
|
this.insert(event, filteredData.toString());
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "allowMinusSign",
|
|
value: function allowMinusSign() {
|
|
return this.props.min === null || this.props.min < 0;
|
|
}
|
|
}, {
|
|
key: "isMinusSign",
|
|
value: function isMinusSign(_char2) {
|
|
if (this._minusSign.test(_char2) || _char2 === '-') {
|
|
this._minusSign.lastIndex = 0;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isDecimalSign",
|
|
value: function isDecimalSign(_char3) {
|
|
if (this._decimal.test(_char3)) {
|
|
this._decimal.lastIndex = 0;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isDecimalMode",
|
|
value: function isDecimalMode() {
|
|
return this.props.mode === 'decimal';
|
|
}
|
|
}, {
|
|
key: "getDecimalCharIndexes",
|
|
value: function getDecimalCharIndexes(val) {
|
|
var decimalCharIndex = val.search(this._decimal);
|
|
this._decimal.lastIndex = 0;
|
|
var filteredVal = val.replace(this._prefix, '').trim().replace(/\s/g, '').replace(this._currency, '');
|
|
var decimalCharIndexWithoutPrefix = filteredVal.search(this._decimal);
|
|
this._decimal.lastIndex = 0;
|
|
return {
|
|
decimalCharIndex: decimalCharIndex,
|
|
decimalCharIndexWithoutPrefix: decimalCharIndexWithoutPrefix
|
|
};
|
|
}
|
|
}, {
|
|
key: "getCharIndexes",
|
|
value: function getCharIndexes(val) {
|
|
var decimalCharIndex = val.search(this._decimal);
|
|
this._decimal.lastIndex = 0;
|
|
var minusCharIndex = val.search(this._minusSign);
|
|
this._minusSign.lastIndex = 0;
|
|
var suffixCharIndex = val.search(this._suffix);
|
|
this._suffix.lastIndex = 0;
|
|
var currencyCharIndex = val.search(this._currency);
|
|
this._currency.lastIndex = 0;
|
|
return {
|
|
decimalCharIndex: decimalCharIndex,
|
|
minusCharIndex: minusCharIndex,
|
|
suffixCharIndex: suffixCharIndex,
|
|
currencyCharIndex: currencyCharIndex
|
|
};
|
|
}
|
|
}, {
|
|
key: "insert",
|
|
value: function insert(event, text) {
|
|
var sign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
|
isDecimalSign: false,
|
|
isMinusSign: false
|
|
};
|
|
var minusCharIndexOnText = text.search(this._minusSign);
|
|
this._minusSign.lastIndex = 0;
|
|
|
|
if (!this.allowMinusSign() && minusCharIndexOnText !== -1) {
|
|
return;
|
|
}
|
|
|
|
var selectionStart = this.inputRef.current.selectionStart;
|
|
var selectionEnd = this.inputRef.current.selectionEnd;
|
|
var inputValue = this.inputRef.current.value.trim();
|
|
|
|
var _this$getCharIndexes = this.getCharIndexes(inputValue),
|
|
decimalCharIndex = _this$getCharIndexes.decimalCharIndex,
|
|
minusCharIndex = _this$getCharIndexes.minusCharIndex,
|
|
suffixCharIndex = _this$getCharIndexes.suffixCharIndex,
|
|
currencyCharIndex = _this$getCharIndexes.currencyCharIndex;
|
|
|
|
var newValueStr;
|
|
|
|
if (sign.isMinusSign) {
|
|
if (selectionStart === 0) {
|
|
newValueStr = inputValue;
|
|
|
|
if (minusCharIndex === -1 || selectionEnd !== 0) {
|
|
newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
|
|
}
|
|
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
|
}
|
|
} else if (sign.isDecimalSign) {
|
|
if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
|
|
this.updateValue(event, inputValue, text, 'insert');
|
|
} else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
|
} else if (decimalCharIndex === -1 && this.props.maxFractionDigits) {
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
|
}
|
|
} else {
|
|
var maxFractionDigits = this.numberFormat.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);
|
|
this.updateValue(event, newValueStr, text, operation);
|
|
}
|
|
} else {
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
|
this.updateValue(event, newValueStr, text, operation);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "insertText",
|
|
value: function insertText(value, text, start, end) {
|
|
var textSplit = text === '.' ? text : text.split('.');
|
|
|
|
if (textSplit.length === 2) {
|
|
var decimalCharIndex = value.slice(start, end).search(this._decimal);
|
|
this._decimal.lastIndex = 0;
|
|
return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
|
|
} else if (end - start === value.length) {
|
|
return this.formatValue(text);
|
|
} else if (start === 0) {
|
|
return text + value.slice(end);
|
|
} else if (end === value.length) {
|
|
return value.slice(0, start) + text;
|
|
} else {
|
|
return value.slice(0, start) + text + value.slice(end);
|
|
}
|
|
}
|
|
}, {
|
|
key: "deleteRange",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "initCursor",
|
|
value: function initCursor() {
|
|
var selectionStart = this.inputRef.current.selectionStart;
|
|
var inputValue = this.inputRef.current.value;
|
|
var valueLength = inputValue.length;
|
|
var index = null; // remove prefix
|
|
|
|
var prefixLength = (this.prefixChar || '').length;
|
|
inputValue = inputValue.replace(this._prefix, '');
|
|
selectionStart = selectionStart - prefixLength;
|
|
|
|
var _char4 = inputValue.charAt(selectionStart);
|
|
|
|
if (this.isNumeralChar(_char4)) {
|
|
return selectionStart + prefixLength;
|
|
} //left
|
|
|
|
|
|
var i = selectionStart - 1;
|
|
|
|
while (i >= 0) {
|
|
_char4 = inputValue.charAt(i);
|
|
|
|
if (this.isNumeralChar(_char4)) {
|
|
index = i + prefixLength;
|
|
break;
|
|
} else {
|
|
i--;
|
|
}
|
|
}
|
|
|
|
if (index !== null) {
|
|
this.inputRef.current.setSelectionRange(index + 1, index + 1);
|
|
} else {
|
|
i = selectionStart;
|
|
|
|
while (i < valueLength) {
|
|
_char4 = inputValue.charAt(i);
|
|
|
|
if (this.isNumeralChar(_char4)) {
|
|
index = i + prefixLength;
|
|
break;
|
|
} else {
|
|
i++;
|
|
}
|
|
}
|
|
|
|
if (index !== null) {
|
|
this.inputRef.current.setSelectionRange(index, index);
|
|
}
|
|
}
|
|
|
|
return index || 0;
|
|
}
|
|
}, {
|
|
key: "onInputClick",
|
|
value: function onInputClick() {
|
|
this.initCursor();
|
|
}
|
|
}, {
|
|
key: "isNumeralChar",
|
|
value: function isNumeralChar(_char5) {
|
|
if (_char5.length === 1 && (this._numeral.test(_char5) || this._decimal.test(_char5) || this._group.test(_char5) || this._minusSign.test(_char5))) {
|
|
this.resetRegex();
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "resetRegex",
|
|
value: function resetRegex() {
|
|
this._numeral.lastIndex = 0;
|
|
this._decimal.lastIndex = 0;
|
|
this._group.lastIndex = 0;
|
|
this._minusSign.lastIndex = 0;
|
|
}
|
|
}, {
|
|
key: "updateValue",
|
|
value: function updateValue(event, valueStr, insertedValueStr, operation) {
|
|
var currentValue = this.inputRef.current.value;
|
|
var newValue = null;
|
|
|
|
if (valueStr != null) {
|
|
newValue = this.parseValue(valueStr);
|
|
newValue = this.evaluateEmpty(newValue);
|
|
this.updateInput(newValue, insertedValueStr, operation, valueStr);
|
|
this.handleOnChange(event, currentValue, newValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "evaluateEmpty",
|
|
value: function evaluateEmpty(newValue) {
|
|
return !newValue && !this.props.allowEmpty ? this.props.min || 0 : newValue;
|
|
}
|
|
}, {
|
|
key: "handleOnChange",
|
|
value: function handleOnChange(event, currentValue, newValue) {
|
|
if (this.props.onChange && this.isValueChanged(currentValue, newValue)) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "isValueChanged",
|
|
value: function isValueChanged(currentValue, newValue) {
|
|
if (newValue === null && currentValue !== null) {
|
|
return true;
|
|
}
|
|
|
|
if (newValue != null) {
|
|
var parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
|
|
return newValue !== parsedCurrentValue;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "validateValue",
|
|
value: function validateValue(value) {
|
|
if (value === '-' || value == null) {
|
|
return null;
|
|
}
|
|
|
|
if (this.props.min !== null && value < this.props.min) {
|
|
return this.props.min;
|
|
}
|
|
|
|
if (this.props.max !== null && value > this.props.max) {
|
|
return this.props.max;
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "updateInput",
|
|
value: function updateInput(value, insertedValueStr, operation, valueStr) {
|
|
insertedValueStr = insertedValueStr || '';
|
|
var inputEl = this.inputRef.current;
|
|
var inputValue = inputEl.value;
|
|
var newValue = this.formatValue(value);
|
|
var currentLength = inputValue.length;
|
|
|
|
if (newValue !== valueStr) {
|
|
newValue = this.concatValues(newValue, valueStr);
|
|
}
|
|
|
|
if (currentLength === 0) {
|
|
inputEl.value = newValue;
|
|
inputEl.setSelectionRange(0, 0);
|
|
var index = this.initCursor();
|
|
var selectionEnd = index + insertedValueStr.length;
|
|
inputEl.setSelectionRange(selectionEnd, selectionEnd);
|
|
} else {
|
|
var selectionStart = inputEl.selectionStart;
|
|
var _selectionEnd = inputEl.selectionEnd;
|
|
inputEl.value = newValue;
|
|
var newLength = newValue.length;
|
|
|
|
if (operation === 'range-insert') {
|
|
var startValue = this.parseValue((inputValue || '').slice(0, selectionStart));
|
|
var startValueStr = startValue !== null ? startValue.toString() : '';
|
|
var startExpr = startValueStr.split('').join("(".concat(this.groupChar, ")?"));
|
|
var sRegex = new RegExp(startExpr, 'g');
|
|
sRegex.test(newValue);
|
|
var tExpr = insertedValueStr.split('').join("(".concat(this.groupChar, ")?"));
|
|
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 = this._group.test(nextChar);
|
|
|
|
if (isGroupChar && diff === 1) {
|
|
_selectionEnd += 1;
|
|
} else if (!isGroupChar && this.isNumeralChar(prevChar)) {
|
|
_selectionEnd += -1 * diff + 1;
|
|
}
|
|
|
|
this._group.lastIndex = 0;
|
|
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
|
|
} else if (inputValue === '-' && operation === 'insert') {
|
|
inputEl.setSelectionRange(0, 0);
|
|
|
|
var _index = this.initCursor();
|
|
|
|
var _selectionEnd2 = _index + insertedValueStr.length + 1;
|
|
|
|
inputEl.setSelectionRange(_selectionEnd2, _selectionEnd2);
|
|
} else {
|
|
_selectionEnd = _selectionEnd + (newLength - currentLength);
|
|
inputEl.setSelectionRange(_selectionEnd, _selectionEnd);
|
|
}
|
|
}
|
|
|
|
inputEl.setAttribute('aria-valuenow', value);
|
|
}
|
|
}, {
|
|
key: "updateInputValue",
|
|
value: function updateInputValue(newValue) {
|
|
newValue = this.evaluateEmpty(newValue);
|
|
var inputEl = this.inputRef.current;
|
|
var value = inputEl.value;
|
|
var formattedValue = this.formattedValue(newValue);
|
|
|
|
if (value !== formattedValue) {
|
|
inputEl.value = formattedValue;
|
|
inputEl.setAttribute('aria-valuenow', newValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "formattedValue",
|
|
value: function formattedValue(val) {
|
|
var newValue = this.evaluateEmpty(val);
|
|
return this.formatValue(newValue);
|
|
}
|
|
}, {
|
|
key: "concatValues",
|
|
value: function concatValues(val1, val2) {
|
|
if (val1 && val2) {
|
|
var decimalCharIndex = val2.search(this._decimal);
|
|
this._decimal.lastIndex = 0;
|
|
return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
|
|
}
|
|
|
|
return val1;
|
|
}
|
|
}, {
|
|
key: "getDecimalLength",
|
|
value: function getDecimalLength(value) {
|
|
if (value) {
|
|
var valueSplit = value.split(this._decimal);
|
|
|
|
if (valueSplit.length === 2) {
|
|
return valueSplit[1].replace(this._suffix, '').trim().replace(/\s/g, '').replace(this._currency, '').length;
|
|
}
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(event, value) {
|
|
if (this.props.onValueChange) {
|
|
this.props.onValueChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus(event) {
|
|
var _this3 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this3.props.onFocus) {
|
|
_this3.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur(event) {
|
|
var _this4 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
var currentValue = _this4.inputRef.current.value;
|
|
|
|
if (_this4.isValueChanged(currentValue, _this4.props.value)) {
|
|
var newValue = _this4.validateValue(_this4.parseValue(currentValue));
|
|
|
|
_this4.updateInputValue(newValue);
|
|
|
|
_this4.updateModel(event, newValue);
|
|
}
|
|
|
|
if (_this4.props.onBlur) {
|
|
_this4.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "clearTimer",
|
|
value: function clearTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isStacked",
|
|
value: function isStacked() {
|
|
return this.props.showButtons && this.props.buttonLayout === 'stacked';
|
|
}
|
|
}, {
|
|
key: "isHorizontal",
|
|
value: function isHorizontal() {
|
|
return this.props.showButtons && this.props.buttonLayout === 'horizontal';
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
value: function isVertical() {
|
|
return this.props.showButtons && this.props.buttonLayout === 'vertical';
|
|
}
|
|
}, {
|
|
key: "getInputMode",
|
|
value: function getInputMode() {
|
|
return this.props.inputMode || (this.props.mode === 'decimal' && !this.props.minFractionDigits ? 'numeric' : 'decimal');
|
|
}
|
|
}, {
|
|
key: "getFormatter",
|
|
value: function getFormatter() {
|
|
return this.numberFormat;
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
|
|
var newValue = this.validateValue(this.props.value);
|
|
|
|
if (this.props.value !== null && this.props.value !== newValue) {
|
|
this.updateModel(null, newValue);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$A({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
var isOptionChanged = this.isOptionChanged(prevProps);
|
|
|
|
if (isOptionChanged) {
|
|
this.constructParser();
|
|
}
|
|
|
|
if (prevProps.value !== this.props.value || isOptionChanged) {
|
|
var newValue = this.validateValue(this.props.value);
|
|
this.updateInputValue(newValue);
|
|
|
|
if (this.props.value !== null && this.props.value !== newValue) {
|
|
this.updateModel(null, newValue);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOptionChanged",
|
|
value: function isOptionChanged(prevProps) {
|
|
var _this5 = this;
|
|
|
|
var optionProps = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'suffix', 'prefix'];
|
|
return optionProps.some(function (option) {
|
|
return prevProps[option] !== _this5.props[option];
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderInputElement",
|
|
value: function renderInputElement() {
|
|
var className = classNames('p-inputnumber-input', this.props.inputClassName);
|
|
var valueToRender = this.formattedValue(this.props.value);
|
|
return /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
ref: this.inputRef,
|
|
id: this.props.inputId,
|
|
style: this.props.inputStyle,
|
|
role: "spinbutton",
|
|
className: className,
|
|
defaultValue: valueToRender,
|
|
type: this.props.type,
|
|
size: this.props.size,
|
|
tabIndex: this.props.tabIndex,
|
|
inputMode: this.getInputMode(),
|
|
maxLength: this.props.maxLength,
|
|
disabled: this.props.disabled,
|
|
required: this.props.required,
|
|
pattern: this.props.pattern,
|
|
placeholder: this.props.placeholder,
|
|
readOnly: this.props.readOnly,
|
|
name: this.props.name,
|
|
autoFocus: this.props.autoFocus,
|
|
onKeyDown: this.onInputKeyDown,
|
|
onKeyPress: this.onInputKeyPress,
|
|
onInput: this.onInput,
|
|
onClick: this.onInputClick,
|
|
onBlur: this.onInputBlur,
|
|
onFocus: this.onInputFocus,
|
|
onPaste: this.onPaste,
|
|
min: this.props.min,
|
|
max: this.props.max,
|
|
"aria-valuemin": this.props.min,
|
|
"aria-valuemax": this.props.max,
|
|
"aria-valuenow": this.props.value,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderUpButton",
|
|
value: function renderUpButton() {
|
|
var className = classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.incrementButtonClassName);
|
|
var icon = classNames('p-button-icon', this.props.incrementButtonIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onMouseLeave: this.onUpButtonMouseLeave,
|
|
onMouseDown: this.onUpButtonMouseDown,
|
|
onMouseUp: this.onUpButtonMouseUp,
|
|
onKeyDown: this.onUpButtonKeyDown,
|
|
onKeyUp: this.onUpButtonKeyUp,
|
|
disabled: this.props.disabled,
|
|
tabIndex: -1
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderDownButton",
|
|
value: function renderDownButton() {
|
|
var className = classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.decrementButtonClassName);
|
|
var icon = classNames('p-button-icon', this.props.decrementButtonIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: className,
|
|
onMouseLeave: this.onDownButtonMouseLeave,
|
|
onMouseDown: this.onDownButtonMouseDown,
|
|
onMouseUp: this.onDownButtonMouseUp,
|
|
onKeyDown: this.onDownButtonKeyDown,
|
|
onKeyUp: this.onDownButtonKeyUp,
|
|
disabled: this.props.disabled,
|
|
tabIndex: -1
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderButtonGroup",
|
|
value: function renderButtonGroup() {
|
|
var upButton = this.props.showButtons && this.renderUpButton();
|
|
var downButton = this.props.showButtons && this.renderDownButton();
|
|
|
|
if (this.isStacked()) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-inputnumber-button-group"
|
|
}, upButton, downButton);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, upButton, downButton);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames('p-inputnumber p-component p-inputwrapper', this.props.className, {
|
|
'p-inputwrapper-filled': this.props.value != null && this.props.value.toString().length > 0,
|
|
'p-inputwrapper-focus': this.state.focused,
|
|
'p-inputnumber-buttons-stacked': this.isStacked(),
|
|
'p-inputnumber-buttons-horizontal': this.isHorizontal(),
|
|
'p-inputnumber-buttons-vertical': this.isVertical()
|
|
});
|
|
var inputElement = this.renderInputElement();
|
|
var buttonGroup = this.renderButtonGroup();
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this6.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, inputElement, buttonGroup);
|
|
}
|
|
}]);
|
|
|
|
return InputNumber;
|
|
}(React.Component);
|
|
|
|
_defineProperty(InputNumber, "defaultProps", {
|
|
value: null,
|
|
inputRef: null,
|
|
format: true,
|
|
showButtons: false,
|
|
buttonLayout: 'stacked',
|
|
incrementButtonClassName: null,
|
|
decrementButtonClassName: null,
|
|
incrementButtonIcon: 'pi pi-angle-up',
|
|
decrementButtonIcon: 'pi pi-angle-down',
|
|
locale: undefined,
|
|
localeMatcher: undefined,
|
|
mode: 'decimal',
|
|
suffix: null,
|
|
prefix: null,
|
|
currency: undefined,
|
|
currencyDisplay: undefined,
|
|
useGrouping: true,
|
|
minFractionDigits: undefined,
|
|
maxFractionDigits: undefined,
|
|
id: null,
|
|
name: null,
|
|
type: 'text',
|
|
allowEmpty: true,
|
|
step: 1,
|
|
min: null,
|
|
max: null,
|
|
disabled: false,
|
|
required: false,
|
|
tabIndex: null,
|
|
pattern: null,
|
|
inputMode: null,
|
|
placeholder: null,
|
|
readOnly: false,
|
|
size: null,
|
|
style: null,
|
|
className: null,
|
|
inputId: null,
|
|
autoFocus: false,
|
|
inputStyle: null,
|
|
inputClassName: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onValueChange: null,
|
|
onChange: null,
|
|
onBlur: null,
|
|
onFocus: null,
|
|
onKeyDown: null
|
|
});
|
|
|
|
function _createSuper$1E(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1E(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1E() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var JumpToPageInput = /*#__PURE__*/function (_Component) {
|
|
_inherits(JumpToPageInput, _Component);
|
|
|
|
var _super = _createSuper$1E(JumpToPageInput);
|
|
|
|
function JumpToPageInput(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, JumpToPageInput);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(JumpToPageInput, [{
|
|
key: "onChange",
|
|
value: function onChange(event) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange(this.props.rows * (event.value - 1), this.props.rows);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var value = this.props.pageCount > 0 ? this.props.page + 1 : 0;
|
|
var element = /*#__PURE__*/React__default["default"].createElement(InputNumber, {
|
|
value: value,
|
|
onChange: this.onChange,
|
|
className: "p-paginator-page-input",
|
|
disabled: this.props.disabled
|
|
});
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
value: value,
|
|
onChange: this.onChange,
|
|
disabled: this.props.disabled,
|
|
className: 'p-paginator-page-input',
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return JumpToPageInput;
|
|
}(React.Component);
|
|
|
|
_defineProperty(JumpToPageInput, "defaultProps", {
|
|
page: null,
|
|
rows: null,
|
|
pageCount: null,
|
|
disabled: false,
|
|
template: null,
|
|
onChange: null
|
|
});
|
|
|
|
function _createSuper$1D(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1D(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1D() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Paginator = /*#__PURE__*/function (_Component) {
|
|
_inherits(Paginator, _Component);
|
|
|
|
var _super = _createSuper$1D(Paginator);
|
|
|
|
function Paginator(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Paginator);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.changePageToFirst = _this.changePageToFirst.bind(_assertThisInitialized(_this));
|
|
_this.changePageToPrev = _this.changePageToPrev.bind(_assertThisInitialized(_this));
|
|
_this.changePageToNext = _this.changePageToNext.bind(_assertThisInitialized(_this));
|
|
_this.changePageToLast = _this.changePageToLast.bind(_assertThisInitialized(_this));
|
|
_this.onRowsChange = _this.onRowsChange.bind(_assertThisInitialized(_this));
|
|
_this.changePage = _this.changePage.bind(_assertThisInitialized(_this));
|
|
_this.onPageLinkClick = _this.onPageLinkClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Paginator, [{
|
|
key: "isFirstPage",
|
|
value: function isFirstPage() {
|
|
return this.getPage() === 0;
|
|
}
|
|
}, {
|
|
key: "isLastPage",
|
|
value: function isLastPage() {
|
|
return this.getPage() === this.getPageCount() - 1;
|
|
}
|
|
}, {
|
|
key: "getPageCount",
|
|
value: function getPageCount() {
|
|
return Math.ceil(this.props.totalRecords / this.props.rows);
|
|
}
|
|
}, {
|
|
key: "calculatePageLinkBoundaries",
|
|
value: function calculatePageLinkBoundaries() {
|
|
var numberOfPages = this.getPageCount();
|
|
var visiblePages = Math.min(this.props.pageLinkSize, numberOfPages); //calculate range, keep current in middle if necessary
|
|
|
|
var start = Math.max(0, Math.ceil(this.getPage() - visiblePages / 2));
|
|
var end = Math.min(numberOfPages - 1, start + visiblePages - 1); //check when approaching to last page
|
|
|
|
var delta = this.props.pageLinkSize - (end - start + 1);
|
|
start = Math.max(0, start - delta);
|
|
return [start, end];
|
|
}
|
|
}, {
|
|
key: "updatePageLinks",
|
|
value: function updatePageLinks() {
|
|
var pageLinks = [];
|
|
var boundaries = this.calculatePageLinkBoundaries();
|
|
var start = boundaries[0];
|
|
var end = boundaries[1];
|
|
|
|
for (var i = start; i <= end; i++) {
|
|
pageLinks.push(i + 1);
|
|
}
|
|
|
|
return pageLinks;
|
|
}
|
|
}, {
|
|
key: "changePage",
|
|
value: function changePage(first, rows) {
|
|
var pc = this.getPageCount();
|
|
var p = Math.floor(first / rows);
|
|
|
|
if (p >= 0 && p < pc) {
|
|
var newPageState = {
|
|
first: first,
|
|
rows: rows,
|
|
page: p,
|
|
pageCount: pc
|
|
};
|
|
|
|
if (this.props.onPageChange) {
|
|
this.props.onPageChange(newPageState);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "getPage",
|
|
value: function getPage() {
|
|
return Math.floor(this.props.first / this.props.rows);
|
|
}
|
|
}, {
|
|
key: "empty",
|
|
value: function empty() {
|
|
var pageCount = this.getPageCount();
|
|
return pageCount === 0;
|
|
}
|
|
}, {
|
|
key: "changePageToFirst",
|
|
value: function changePageToFirst(event) {
|
|
this.changePage(0, this.props.rows);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "changePageToPrev",
|
|
value: function changePageToPrev(event) {
|
|
this.changePage(this.props.first - this.props.rows, this.props.rows);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onPageLinkClick",
|
|
value: function onPageLinkClick(event) {
|
|
this.changePage((event.value - 1) * this.props.rows, this.props.rows);
|
|
}
|
|
}, {
|
|
key: "changePageToNext",
|
|
value: function changePageToNext(event) {
|
|
this.changePage(this.props.first + this.props.rows, this.props.rows);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "changePageToLast",
|
|
value: function changePageToLast(event) {
|
|
this.changePage((this.getPageCount() - 1) * this.props.rows, this.props.rows);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onRowsChange",
|
|
value: function onRowsChange(event) {
|
|
var rows = event.value;
|
|
this.isRowChanged = rows !== this.props.rows;
|
|
this.changePage(0, rows);
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.props.rows !== prevProps.rows && !this.isRowChanged) {
|
|
this.changePage(0, this.props.rows);
|
|
} else if (this.getPage() > 0 && prevProps.totalRecords !== this.props.totalRecords && this.props.first >= this.props.totalRecords) {
|
|
this.changePage((this.getPageCount() - 1) * this.props.rows, this.props.rows);
|
|
}
|
|
|
|
this.isRowChanged = false;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement(key, template) {
|
|
var element;
|
|
|
|
switch (key) {
|
|
case 'FirstPageLink':
|
|
element = /*#__PURE__*/React__default["default"].createElement(FirstPageLink, {
|
|
key: key,
|
|
onClick: this.changePageToFirst,
|
|
disabled: this.isFirstPage() || this.empty(),
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'PrevPageLink':
|
|
element = /*#__PURE__*/React__default["default"].createElement(PrevPageLink, {
|
|
key: key,
|
|
onClick: this.changePageToPrev,
|
|
disabled: this.isFirstPage() || this.empty(),
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'NextPageLink':
|
|
element = /*#__PURE__*/React__default["default"].createElement(NextPageLink, {
|
|
key: key,
|
|
onClick: this.changePageToNext,
|
|
disabled: this.isLastPage() || this.empty(),
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'LastPageLink':
|
|
element = /*#__PURE__*/React__default["default"].createElement(LastPageLink, {
|
|
key: key,
|
|
onClick: this.changePageToLast,
|
|
disabled: this.isLastPage() || this.empty(),
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'PageLinks':
|
|
element = /*#__PURE__*/React__default["default"].createElement(PageLinks, {
|
|
key: key,
|
|
value: this.updatePageLinks(),
|
|
page: this.getPage(),
|
|
rows: this.props.rows,
|
|
pageCount: this.getPageCount(),
|
|
onClick: this.onPageLinkClick,
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'RowsPerPageDropdown':
|
|
element = /*#__PURE__*/React__default["default"].createElement(RowsPerPageDropdown, {
|
|
key: key,
|
|
value: this.props.rows,
|
|
page: this.getPage(),
|
|
pageCount: this.getPageCount(),
|
|
totalRecords: this.props.totalRecords,
|
|
options: this.props.rowsPerPageOptions,
|
|
onChange: this.onRowsChange,
|
|
appendTo: this.props.dropdownAppendTo,
|
|
template: template,
|
|
disabled: this.empty()
|
|
});
|
|
break;
|
|
|
|
case 'CurrentPageReport':
|
|
element = /*#__PURE__*/React__default["default"].createElement(CurrentPageReport, {
|
|
reportTemplate: this.props.currentPageReportTemplate,
|
|
key: key,
|
|
page: this.getPage(),
|
|
pageCount: this.getPageCount(),
|
|
first: this.props.first,
|
|
rows: this.props.rows,
|
|
totalRecords: this.props.totalRecords,
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
case 'JumpToPageInput':
|
|
element = /*#__PURE__*/React__default["default"].createElement(JumpToPageInput, {
|
|
key: key,
|
|
rows: this.props.rows,
|
|
page: this.getPage(),
|
|
pageCount: this.getPageCount(),
|
|
onChange: this.changePage,
|
|
disabled: this.empty(),
|
|
template: template
|
|
});
|
|
break;
|
|
|
|
default:
|
|
element = null;
|
|
break;
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}, {
|
|
key: "renderElements",
|
|
value: function renderElements() {
|
|
var _this2 = this;
|
|
|
|
var template = this.props.template;
|
|
|
|
if (template) {
|
|
if (_typeof(template) === 'object') {
|
|
return template.layout ? template.layout.split(' ').map(function (value) {
|
|
var key = value.trim();
|
|
return _this2.renderElement(key, template[key]);
|
|
}) : Object.entries(template).map(function (_ref) {
|
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
key = _ref2[0],
|
|
_template = _ref2[1];
|
|
|
|
return _this2.renderElement(key, _template);
|
|
});
|
|
}
|
|
|
|
return template.split(' ').map(function (value) {
|
|
return _this2.renderElement(value.trim());
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (!this.props.alwaysShow && this.getPageCount() === 1) {
|
|
return null;
|
|
} else {
|
|
var className = classNames('p-paginator p-component', this.props.className);
|
|
var leftContent = ObjectUtils.getJSXElement(this.props.leftContent, this.props);
|
|
var rightContent = ObjectUtils.getJSXElement(this.props.rightContent, this.props);
|
|
var elements = this.renderElements();
|
|
var leftElement = leftContent && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-paginator-left-content"
|
|
}, leftContent);
|
|
var rightElement = rightContent && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-paginator-right-content"
|
|
}, rightContent);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: this.props.style
|
|
}, leftElement, elements, rightElement);
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return Paginator;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Paginator, "defaultProps", {
|
|
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})'
|
|
});
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
function _objectWithoutProperties(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
var key, i;
|
|
|
|
if (Object.getOwnPropertySymbols) {
|
|
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
|
|
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
key = sourceSymbolKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
function _createSuper$1C(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1C(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1C() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var RowRadioButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(RowRadioButton, _Component);
|
|
|
|
var _super = _createSuper$1C(RowRadioButton);
|
|
|
|
function RowRadioButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, RowRadioButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(RowRadioButton, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled) {
|
|
this.props.onChange(event);
|
|
this.input.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onChange",
|
|
value: function onChange(event) {
|
|
this.onClick(event);
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.code === 'Space') {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-radiobutton p-component', {
|
|
'p-radiobutton-focused': this.state.focused
|
|
});
|
|
var boxClassName = classNames('p-radiobutton-box p-component', {
|
|
'p-highlight': this.props.checked,
|
|
'p-focus': this.state.focused,
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var name = "".concat(this.props.tableSelector, "_dt_radio");
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
name: name,
|
|
ref: function ref(el) {
|
|
return _this2.input = el;
|
|
},
|
|
type: "radio",
|
|
checked: this.props.checked,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onChange: this.onChange,
|
|
onKeyDown: this.onKeyDown
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClassName,
|
|
onClick: this.onClick,
|
|
role: "radio",
|
|
"aria-checked": this.props.checked
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-radiobutton-icon"
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return RowRadioButton;
|
|
}(React.Component);
|
|
|
|
function _createSuper$1B(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1B(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1B() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var RowCheckbox = /*#__PURE__*/function (_Component) {
|
|
_inherits(RowCheckbox, _Component);
|
|
|
|
var _super = _createSuper$1B(RowCheckbox);
|
|
|
|
function RowCheckbox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, RowCheckbox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(RowCheckbox, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled) {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
this.props.onChange(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.code === 'Space') {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-checkbox p-component', {
|
|
'p-checkbox-focused': this.state.focused
|
|
});
|
|
var boxClassName = classNames('p-checkbox-box p-component', {
|
|
'p-highlight': this.props.checked,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
var iconClassName = classNames('p-checkbox-icon', {
|
|
'pi pi-check': this.props.checked
|
|
});
|
|
var tabIndex = this.props.disabled ? null : '0';
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClassName,
|
|
role: "checkbox",
|
|
"aria-checked": this.props.checked,
|
|
tabIndex: tabIndex,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return RowCheckbox;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1A(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1A(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1A() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var BodyCell = /*#__PURE__*/function (_Component) {
|
|
_inherits(BodyCell, _Component);
|
|
|
|
var _super = _createSuper$1A(BodyCell);
|
|
|
|
function BodyCell(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, BodyCell);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
editing: props.editing,
|
|
editingRowData: props.rowData,
|
|
styleObject: {}
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onEditorFocus = _this.onEditorFocus.bind(_assertThisInitialized(_this));
|
|
_this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this));
|
|
_this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
|
|
_this.onRowEditSave = _this.onRowEditSave.bind(_assertThisInitialized(_this));
|
|
_this.onRowEditCancel = _this.onRowEditCancel.bind(_assertThisInitialized(_this));
|
|
_this.onRowEditInit = _this.onRowEditInit.bind(_assertThisInitialized(_this));
|
|
_this.editorCallback = _this.editorCallback.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(BodyCell, [{
|
|
key: "field",
|
|
get: function get() {
|
|
return this.getColumnProp('field') || "field_".concat(this.props.index);
|
|
}
|
|
}, {
|
|
key: "isEditable",
|
|
value: function isEditable() {
|
|
return this.getColumnProp('editor');
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected() {
|
|
return this.props.selection ? this.props.selection instanceof Array ? this.findIndex(this.props.selection) > -1 : this.equals(this.props.selection) : false;
|
|
}
|
|
}, {
|
|
key: "equalsData",
|
|
value: function equalsData(data) {
|
|
return this.props.compareSelectionBy === 'equals' ? data === this.props.rowData : ObjectUtils.equals(data, this.props.rowData, this.props.dataKey);
|
|
}
|
|
}, {
|
|
key: "equals",
|
|
value: function equals(selectedCell) {
|
|
return (selectedCell.rowIndex === this.props.rowIndex || this.equalsData(selectedCell.rowData)) && (selectedCell.field === this.field || selectedCell.cellIndex === this.props.index);
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return this.el && !(this.el.isSameNode(target) || this.el.contains(target));
|
|
}
|
|
}, {
|
|
key: "getColumnProp",
|
|
value: function getColumnProp(prop) {
|
|
return this.props.column ? this.props.column.props[prop] : null;
|
|
}
|
|
}, {
|
|
key: "getVirtualScrollerOption",
|
|
value: function getVirtualScrollerOption(option) {
|
|
return this.props.virtualScrollerOptions ? this.props.virtualScrollerOptions[option] : null;
|
|
}
|
|
}, {
|
|
key: "getStyle",
|
|
value: function getStyle() {
|
|
var bodyStyle = this.getColumnProp('bodyStyle');
|
|
var columnStyle = this.getColumnProp('style');
|
|
return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, this.state.styleObject) : Object.assign({}, columnStyle, bodyStyle);
|
|
}
|
|
}, {
|
|
key: "getCellParams",
|
|
value: function getCellParams() {
|
|
return {
|
|
value: this.resolveFieldData(),
|
|
field: this.field,
|
|
rowData: this.props.rowData,
|
|
rowIndex: this.props.rowIndex,
|
|
cellIndex: this.props.index,
|
|
selected: this.isSelected(),
|
|
column: this.props.column,
|
|
props: this.props
|
|
};
|
|
}
|
|
}, {
|
|
key: "getCellCallbackParams",
|
|
value: function getCellCallbackParams(event) {
|
|
var params = this.getCellParams();
|
|
return _objectSpread$z({
|
|
originalEvent: event
|
|
}, params);
|
|
}
|
|
}, {
|
|
key: "resolveFieldData",
|
|
value: function resolveFieldData(data) {
|
|
return ObjectUtils.resolveFieldData(data || this.props.rowData, this.field);
|
|
}
|
|
}, {
|
|
key: "getEditingRowData",
|
|
value: function getEditingRowData() {
|
|
return this.props.editingMeta && this.props.editingMeta[this.props.rowIndex] ? this.props.editingMeta[this.props.rowIndex].data : this.props.rowData;
|
|
}
|
|
}, {
|
|
key: "getTabIndex",
|
|
value: function getTabIndex(cellSelected) {
|
|
return this.props.allowCellSelection ? cellSelected ? 0 : this.props.rowIndex === 0 && this.props.index === 0 ? this.props.tabIndex : -1 : null;
|
|
}
|
|
}, {
|
|
key: "findIndex",
|
|
value: function findIndex(collection) {
|
|
var _this2 = this;
|
|
|
|
return (collection || []).findIndex(function (data) {
|
|
return _this2.equals(data);
|
|
});
|
|
}
|
|
}, {
|
|
key: "closeCell",
|
|
value: function closeCell(event) {
|
|
var _this3 = this;
|
|
|
|
var params = this.getCellCallbackParams(event);
|
|
var onBeforeCellEditHide = this.getColumnProp('onBeforeCellEditHide');
|
|
|
|
if (onBeforeCellEditHide) {
|
|
onBeforeCellEditHide(params);
|
|
}
|
|
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
|
|
|
|
|
|
setTimeout(function () {
|
|
_this3.setState({
|
|
editing: false
|
|
}, function () {
|
|
_this3.unbindDocumentEditListener();
|
|
|
|
OverlayService.off('overlay-click', _this3.overlayEventListener);
|
|
_this3.overlayEventListener = null;
|
|
});
|
|
}, 1);
|
|
}
|
|
}, {
|
|
key: "switchCellToViewMode",
|
|
value: function switchCellToViewMode(event, submit) {
|
|
var callbackParams = this.getCellCallbackParams(event);
|
|
var newRowData = this.state.editingRowData;
|
|
var newValue = this.resolveFieldData(newRowData);
|
|
|
|
var params = _objectSpread$z(_objectSpread$z({}, callbackParams), {}, {
|
|
newRowData: newRowData,
|
|
newValue: newValue
|
|
});
|
|
|
|
var onCellEditCancel = this.getColumnProp('onCellEditCancel');
|
|
var cellEditValidator = this.getColumnProp('cellEditValidator');
|
|
var onCellEditComplete = this.getColumnProp('onCellEditComplete');
|
|
|
|
if (!submit && onCellEditCancel) {
|
|
onCellEditCancel(params);
|
|
}
|
|
|
|
var valid = true;
|
|
|
|
if (cellEditValidator) {
|
|
valid = cellEditValidator(params);
|
|
}
|
|
|
|
if (valid) {
|
|
if (submit && onCellEditComplete) {
|
|
onCellEditComplete(params);
|
|
}
|
|
|
|
this.closeCell(event);
|
|
} else {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextSelectableCell",
|
|
value: function findNextSelectableCell(cell) {
|
|
var nextCell = cell.nextElementSibling;
|
|
return nextCell ? DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableCell(nextCell) : null;
|
|
}
|
|
}, {
|
|
key: "findPrevSelectableCell",
|
|
value: function findPrevSelectableCell(cell) {
|
|
var prevCell = cell.previousElementSibling;
|
|
return prevCell ? DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableCell(prevCell) : null;
|
|
}
|
|
}, {
|
|
key: "findDownSelectableCell",
|
|
value: function findDownSelectableCell(cell) {
|
|
var downRow = cell.parentElement.nextElementSibling;
|
|
var downCell = downRow ? downRow.children[this.props.index] : null;
|
|
return downRow && downCell ? DomHandler.hasClass(downRow, 'p-selectable-row') && DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : this.findDownSelectableCell(downCell) : null;
|
|
}
|
|
}, {
|
|
key: "findUpSelectableCell",
|
|
value: function findUpSelectableCell(cell) {
|
|
var upRow = cell.parentElement.previousElementSibling;
|
|
var upCell = upRow ? upRow.children[this.props.index] : null;
|
|
return upRow && upCell ? DomHandler.hasClass(upRow, 'p-selectable-row') && DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : this.findUpSelectableCell(upCell) : null;
|
|
}
|
|
}, {
|
|
key: "changeTabIndex",
|
|
value: function changeTabIndex(currentCell, nextCell) {
|
|
if (currentCell && nextCell) {
|
|
currentCell.tabIndex = -1;
|
|
nextCell.tabIndex = this.props.tabIndex;
|
|
}
|
|
}
|
|
}, {
|
|
key: "focusOnElement",
|
|
value: function focusOnElement() {
|
|
var _this4 = this;
|
|
|
|
clearTimeout(this.tabindexTimeout);
|
|
this.tabindexTimeout = setTimeout(function () {
|
|
if (_this4.state.editing) {
|
|
var focusableEl = _this4.props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)') : DomHandler.findSingle(_this4.el, '.p-row-editor-save');
|
|
focusableEl && focusableEl.focus();
|
|
}
|
|
|
|
_this4.keyHelper && (_this4.keyHelper.tabIndex = _this4.state.editing ? -1 : 0);
|
|
}, 1);
|
|
}
|
|
}, {
|
|
key: "focusOnInit",
|
|
value: function focusOnInit() {
|
|
var _this5 = this;
|
|
|
|
clearTimeout(this.initFocusTimeout);
|
|
this.initFocusTimeout = setTimeout(function () {
|
|
var focusableEl = _this5.props.editMode === 'row' ? DomHandler.findSingle(_this5.el, '.p-row-editor-init') : null;
|
|
focusableEl && focusableEl.focus();
|
|
}, 1);
|
|
}
|
|
}, {
|
|
key: "updateStickyPosition",
|
|
value: function updateStickyPosition() {
|
|
if (this.getColumnProp('frozen')) {
|
|
var styleObject = _objectSpread$z({}, this.state.styleObject);
|
|
|
|
var align = this.getColumnProp('alignFrozen');
|
|
|
|
if (align === 'right') {
|
|
var right = 0;
|
|
var next = this.el.nextElementSibling;
|
|
|
|
if (next) {
|
|
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
|
}
|
|
|
|
styleObject['right'] = right + 'px';
|
|
} else {
|
|
var left = 0;
|
|
var prev = this.el.previousElementSibling;
|
|
|
|
if (prev) {
|
|
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
|
}
|
|
|
|
styleObject['left'] = left + 'px';
|
|
}
|
|
|
|
var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right'];
|
|
!isSameStyle && this.setState({
|
|
styleObject: styleObject
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "editorCallback",
|
|
value: function editorCallback(val) {
|
|
var editingRowData = _objectSpread$z({}, this.state.editingRowData);
|
|
|
|
editingRowData[this.field] = val;
|
|
this.setState({
|
|
editingRowData: editingRowData
|
|
}); // update editing meta for complete methods on row mode
|
|
|
|
this.props.editingMeta[this.props.rowIndex].data[this.field] = val;
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
var _this6 = this;
|
|
|
|
var params = this.getCellCallbackParams(event);
|
|
|
|
if (this.props.editMode !== 'row' && this.isEditable() && !this.state.editing && (this.props.selectOnEdit || !this.props.selectOnEdit && this.props.selected)) {
|
|
this.selfClick = true;
|
|
var onBeforeCellEditShow = this.getColumnProp('onBeforeCellEditShow');
|
|
var onCellEditInit = this.getColumnProp('onCellEditInit');
|
|
var cellEditValidatorEvent = this.getColumnProp('cellEditValidatorEvent');
|
|
|
|
if (onBeforeCellEditShow) {
|
|
onBeforeCellEditShow(params);
|
|
} // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
|
|
|
|
|
|
setTimeout(function () {
|
|
_this6.setState({
|
|
editing: true
|
|
}, function () {
|
|
if (onCellEditInit) {
|
|
onCellEditInit(params);
|
|
}
|
|
|
|
if (cellEditValidatorEvent === 'click') {
|
|
_this6.bindDocumentEditListener();
|
|
|
|
_this6.overlayEventListener = function (e) {
|
|
if (!_this6.isOutsideClicked(e.target)) {
|
|
_this6.selfClick = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', _this6.overlayEventListener);
|
|
}
|
|
});
|
|
}, 1);
|
|
}
|
|
|
|
if (this.props.allowCellSelection && this.props.onClick) {
|
|
this.props.onClick(params);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event) {
|
|
var params = this.getCellCallbackParams(event);
|
|
|
|
if (this.props.onMouseDown) {
|
|
this.props.onMouseDown(params);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseUp",
|
|
value: function onMouseUp(event) {
|
|
var params = this.getCellCallbackParams(event);
|
|
|
|
if (this.props.onMouseUp) {
|
|
this.props.onMouseUp(params);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.props.editMode !== 'row') {
|
|
if (event.which === 13 || event.which === 9) {
|
|
// tab || enter
|
|
this.switchCellToViewMode(event, true);
|
|
}
|
|
|
|
if (event.which === 27) {
|
|
// escape
|
|
this.switchCellToViewMode(event, false);
|
|
}
|
|
}
|
|
|
|
if (this.props.allowCellSelection) {
|
|
var target = event.target,
|
|
cell = event.currentTarget;
|
|
|
|
switch (event.which) {
|
|
//left arrow
|
|
case 37:
|
|
var prevCell = this.findPrevSelectableCell(cell);
|
|
|
|
if (prevCell) {
|
|
this.changeTabIndex(cell, prevCell);
|
|
prevCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//right arrow
|
|
|
|
case 39:
|
|
var nextCell = this.findNextSelectableCell(cell);
|
|
|
|
if (nextCell) {
|
|
this.changeTabIndex(cell, nextCell);
|
|
nextCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up arrow
|
|
|
|
case 38:
|
|
var upCell = this.findUpSelectableCell(cell);
|
|
|
|
if (upCell) {
|
|
this.changeTabIndex(cell, upCell);
|
|
upCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//down arrow
|
|
|
|
case 40:
|
|
var downCell = this.findDownSelectableCell(cell);
|
|
|
|
if (downCell) {
|
|
this.changeTabIndex(cell, downCell);
|
|
downCell.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
// @deprecated
|
|
if (!DomHandler.isClickable(target)) {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (!DomHandler.isClickable(target) && !target.readOnly) {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
this.selfClick = false;
|
|
|
|
if (this.props.editMode !== 'row' && this.state.editing && this.getColumnProp('cellEditValidatorEvent') === 'blur') {
|
|
this.switchCellToViewMode(event, true);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEditorFocus",
|
|
value: function onEditorFocus(event) {
|
|
this.onClick(event);
|
|
}
|
|
}, {
|
|
key: "onRadioChange",
|
|
value: function onRadioChange(event) {
|
|
this.props.onRadioChange({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.rowIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: "onCheckboxChange",
|
|
value: function onCheckboxChange(event) {
|
|
this.props.onCheckboxChange({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.rowIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: "onRowToggle",
|
|
value: function onRowToggle(event) {
|
|
this.props.onRowToggle({
|
|
originalEvent: event,
|
|
data: this.props.rowData
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onRowEditInit",
|
|
value: function onRowEditInit(event) {
|
|
this.props.onRowEditInit({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
newData: this.getEditingRowData(),
|
|
field: this.field,
|
|
index: this.props.rowIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: "onRowEditSave",
|
|
value: function onRowEditSave(event) {
|
|
this.props.onRowEditSave({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
newData: this.getEditingRowData(),
|
|
field: this.field,
|
|
index: this.props.rowIndex
|
|
});
|
|
this.focusOnInit();
|
|
}
|
|
}, {
|
|
key: "onRowEditCancel",
|
|
value: function onRowEditCancel(event) {
|
|
this.props.onRowEditCancel({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
newData: this.getEditingRowData(),
|
|
field: this.field,
|
|
index: this.props.rowIndex
|
|
});
|
|
this.focusOnInit();
|
|
}
|
|
}, {
|
|
key: "bindDocumentEditListener",
|
|
value: function bindDocumentEditListener() {
|
|
var _this7 = this;
|
|
|
|
if (!this.documentEditListener) {
|
|
this.documentEditListener = function (e) {
|
|
if (!_this7.selfClick && _this7.isOutsideClicked(e.target)) {
|
|
_this7.switchCellToViewMode(e, true);
|
|
}
|
|
|
|
_this7.selfClick = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentEditListener, true);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentEditListener",
|
|
value: function unbindDocumentEditListener() {
|
|
if (this.documentEditListener) {
|
|
document.removeEventListener('click', this.documentEditListener, true);
|
|
this.documentEditListener = null;
|
|
this.selfClick = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
|
|
if (this.props.editMode === 'cell' || this.props.editMode === 'row') {
|
|
this.focusOnElement();
|
|
|
|
if (prevProps.editingMeta !== this.props.editingMeta) {
|
|
this.setState({
|
|
editingRowData: this.getEditingRowData()
|
|
});
|
|
}
|
|
|
|
if (prevState.editing !== this.state.editing) {
|
|
var callbackParams = this.getCellCallbackParams();
|
|
|
|
var params = _objectSpread$z(_objectSpread$z({}, callbackParams), {}, {
|
|
editing: this.state.editing
|
|
});
|
|
|
|
this.props.onEditingMetaChange(params);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentEditListener();
|
|
|
|
if (this.overlayEventListener) {
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderLoading",
|
|
value: function renderLoading() {
|
|
var options = this.getVirtualScrollerOption('getLoaderOptions')(this.props.rowIndex, {
|
|
cellIndex: this.props.index,
|
|
cellFirst: this.props.index === 0,
|
|
cellLast: this.props.index === this.getVirtualScrollerOption('columns').length - 1,
|
|
cellEven: this.props.index % 2 === 0,
|
|
cellOdd: this.props.index % 2 !== 0,
|
|
column: this.props.column,
|
|
field: this.field
|
|
});
|
|
var content = ObjectUtils.getJSXElement(this.getVirtualScrollerOption('loadingTemplate'), options);
|
|
return /*#__PURE__*/React__default["default"].createElement("td", null, content);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this8 = this;
|
|
|
|
var content, editorKeyHelper;
|
|
var cellSelected = this.props.allowCellSelection && this.isSelected();
|
|
var isRowEditor = this.props.editMode === 'row';
|
|
var tabIndex = this.getTabIndex(cellSelected);
|
|
var selectionMode = this.getColumnProp('selectionMode');
|
|
var rowReorder = this.getColumnProp('rowReorder');
|
|
var expander = this.getColumnProp('expander');
|
|
var rowEditor = this.getColumnProp('rowEditor');
|
|
var header = this.getColumnProp('header');
|
|
var body = this.getColumnProp('body');
|
|
var editor = this.getColumnProp('editor');
|
|
var frozen = this.getColumnProp('frozen');
|
|
var align = this.getColumnProp('align');
|
|
var value = this.resolveFieldData();
|
|
var cellClassName = ObjectUtils.getPropValue(this.props.cellClassName, value, {
|
|
props: this.props.tableProps,
|
|
rowData: this.props.rowData,
|
|
column: this.props.column
|
|
});
|
|
var className = classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('className'), cellClassName, _defineProperty({
|
|
'p-selection-column': selectionMode !== null,
|
|
'p-editable-column': editor,
|
|
'p-cell-editing': editor && this.state.editing,
|
|
'p-frozen-column': frozen,
|
|
'p-selectable-cell': this.props.allowCellSelection && this.props.isSelectable({
|
|
data: this.getCellParams(),
|
|
index: this.props.rowIndex
|
|
}),
|
|
'p-highlight': cellSelected
|
|
}, "p-align-".concat(align), !!align));
|
|
var style = this.getStyle();
|
|
var title = this.props.responsiveLayout === 'stack' && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-column-title"
|
|
}, ObjectUtils.getJSXElement(header, {
|
|
props: this.props.tableProps
|
|
}));
|
|
|
|
if (selectionMode) {
|
|
var showSelection = this.props.showSelectionElement ? this.props.showSelectionElement(this.props.rowData, {
|
|
rowIndex: this.props.rowIndex,
|
|
props: this.props.tableProps
|
|
}) : true;
|
|
content = showSelection && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__default["default"].createElement(RowRadioButton, {
|
|
checked: this.props.selected,
|
|
onChange: this.onRadioChange,
|
|
tabIndex: this.props.tabIndex,
|
|
tableSelector: this.props.tableSelector
|
|
}), selectionMode === 'multiple' && /*#__PURE__*/React__default["default"].createElement(RowCheckbox, {
|
|
checked: this.props.selected,
|
|
onChange: this.onCheckboxChange,
|
|
tabIndex: this.props.tabIndex
|
|
}));
|
|
} else if (rowReorder) {
|
|
var showReorder = this.props.showRowReorderElement ? this.props.showRowReorderElement(this.props.rowData, {
|
|
rowIndex: this.props.rowIndex,
|
|
props: this.props.tableProps
|
|
}) : true;
|
|
content = showReorder && /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: classNames('p-datatable-reorderablerow-handle', this.getColumnProp('rowReorderIcon'))
|
|
});
|
|
} else if (expander) {
|
|
var iconClassName = classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
|
|
var ariaControls = "".concat(this.props.tableSelector, "_content_").concat(this.props.rowIndex, "_expanded");
|
|
var expanderProps = {
|
|
onClick: this.onRowToggle,
|
|
className: 'p-row-toggler p-link',
|
|
iconClassName: iconClassName
|
|
};
|
|
content = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: expanderProps.className,
|
|
onClick: expanderProps.onClick,
|
|
type: "button",
|
|
"aria-expanded": this.props.expanded,
|
|
"aria-controls": ariaControls,
|
|
tabIndex: this.props.tabIndex
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: expanderProps.iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (body) {
|
|
expanderProps['element'] = content;
|
|
content = ObjectUtils.getJSXElement(body, this.props.rowData, {
|
|
column: this.props.column,
|
|
field: this.field,
|
|
rowIndex: this.props.rowIndex,
|
|
frozenRow: this.props.frozenRow,
|
|
props: this.props.tableProps,
|
|
expander: expanderProps
|
|
});
|
|
}
|
|
} else if (isRowEditor && rowEditor) {
|
|
var rowEditorProps = {};
|
|
|
|
if (this.state.editing) {
|
|
rowEditorProps = {
|
|
editing: true,
|
|
onSaveClick: this.onRowEditSave,
|
|
saveClassName: 'p-row-editor-save p-link',
|
|
saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check',
|
|
onCancelClick: this.onRowEditCancel,
|
|
cancelClassName: 'p-row-editor-cancel p-link',
|
|
cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
|
|
};
|
|
content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
onClick: rowEditorProps.onSaveClick,
|
|
className: rowEditorProps.saveClassName,
|
|
tabIndex: this.props.tabIndex
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: rowEditorProps.saveIconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
onClick: rowEditorProps.onCancelClick,
|
|
className: rowEditorProps.cancelClassName,
|
|
tabIndex: this.props.tabIndex
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: rowEditorProps.cancelIconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
} else {
|
|
rowEditorProps = {
|
|
editing: false,
|
|
onInitClick: this.onRowEditInit,
|
|
initClassName: 'p-row-editor-init p-link',
|
|
initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
|
|
};
|
|
content = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
onClick: rowEditorProps.onInitClick,
|
|
className: rowEditorProps.initClassName,
|
|
tabIndex: this.props.tabIndex
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: rowEditorProps.initIconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
if (body) {
|
|
rowEditorProps['element'] = content;
|
|
content = ObjectUtils.getJSXElement(body, this.props.rowData, {
|
|
column: this.props.column,
|
|
field: this.field,
|
|
rowIndex: this.props.rowIndex,
|
|
frozenRow: this.props.frozenRow,
|
|
props: this.props.tableProps,
|
|
rowEditor: rowEditorProps
|
|
});
|
|
}
|
|
} else if (body && !this.state.editing) {
|
|
content = body ? ObjectUtils.getJSXElement(body, this.props.rowData, {
|
|
column: this.props.column,
|
|
field: this.field,
|
|
rowIndex: this.props.rowIndex,
|
|
frozenRow: this.props.frozenRow,
|
|
props: this.props.tableProps
|
|
}) : value;
|
|
} else if (editor && this.state.editing) {
|
|
content = ObjectUtils.getJSXElement(editor, {
|
|
rowData: this.state.editingRowData,
|
|
value: this.resolveFieldData(this.state.editingRowData),
|
|
column: this.props.column,
|
|
field: this.field,
|
|
rowIndex: this.props.rowIndex,
|
|
frozenRow: this.props.frozenRow,
|
|
props: this.props.tableProps,
|
|
editorCallback: this.editorCallback
|
|
});
|
|
} else {
|
|
content = value;
|
|
}
|
|
|
|
if (!isRowEditor && editor) {
|
|
/* eslint-disable */
|
|
editorKeyHelper = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
tabIndex: "0",
|
|
ref: function ref(el) {
|
|
return _this8.keyHelper = el;
|
|
},
|
|
className: "p-cell-editor-key-helper p-hidden-accessible",
|
|
onFocus: this.onEditorFocus
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", null));
|
|
/* eslint-enable */
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
ref: function ref(el) {
|
|
return _this8.el = el;
|
|
},
|
|
style: style,
|
|
className: className,
|
|
rowSpan: this.props.rowSpan,
|
|
tabIndex: tabIndex,
|
|
role: "cell",
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown,
|
|
onBlur: this.onBlur,
|
|
onMouseDown: this.onMouseDown,
|
|
onMouseUp: this.onMouseUp
|
|
}, editorKeyHelper, title, content);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return this.getVirtualScrollerOption('loading') ? this.renderLoading() : this.renderElement();
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
if (nextProps.editMode === 'row' && nextProps.editing !== prevState.editing) {
|
|
return {
|
|
editing: nextProps.editing
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return BodyCell;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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 _createSuper$1z(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1z(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1z() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var BodyRow = /*#__PURE__*/function (_Component) {
|
|
_inherits(BodyRow, _Component);
|
|
|
|
var _super = _createSuper$1z(BodyRow);
|
|
|
|
function BodyRow(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, BodyRow);
|
|
|
|
_this = _super.call(this, props);
|
|
|
|
if (!_this.props.onRowEditChange) {
|
|
_this.state = {
|
|
editing: false
|
|
};
|
|
}
|
|
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onDoubleClick = _this.onDoubleClick.bind(_assertThisInitialized(_this));
|
|
_this.onRightClick = _this.onRightClick.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onEditInit = _this.onEditInit.bind(_assertThisInitialized(_this));
|
|
_this.onEditSave = _this.onEditSave.bind(_assertThisInitialized(_this));
|
|
_this.onEditCancel = _this.onEditCancel.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(BodyRow, [{
|
|
key: "isFocusable",
|
|
value: function isFocusable() {
|
|
return this.props.selectionMode && this.props.selectionModeInColumn !== 'single' && this.props.selectionModeInColumn !== 'multiple';
|
|
}
|
|
}, {
|
|
key: "isGrouped",
|
|
value: function isGrouped(column) {
|
|
if (this.props.groupRowsBy && this.getColumnProp(column, 'field')) {
|
|
if (Array.isArray(this.props.groupRowsBy)) return this.props.groupRowsBy.indexOf(column.props.field) > -1;else return this.props.groupRowsBy === column.props.field;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "equals",
|
|
value: function equals(data1, data2) {
|
|
return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
|
|
}
|
|
}, {
|
|
key: "getColumnProp",
|
|
value: function getColumnProp(col, prop) {
|
|
return col ? col.props[prop] : null;
|
|
}
|
|
}, {
|
|
key: "getEditing",
|
|
value: function getEditing() {
|
|
return this.props.onRowEditChange ? this.props.editing : this.state.editing;
|
|
}
|
|
}, {
|
|
key: "getTabIndex",
|
|
value: function getTabIndex() {
|
|
return this.isFocusable() && !this.props.allowCellSelection ? this.props.index === 0 ? this.props.tabIndex : -1 : null;
|
|
}
|
|
}, {
|
|
key: "findIndex",
|
|
value: function findIndex(collection, rowData) {
|
|
var _this2 = this;
|
|
|
|
return (collection || []).findIndex(function (data) {
|
|
return _this2.equals(rowData, data);
|
|
});
|
|
}
|
|
}, {
|
|
key: "changeTabIndex",
|
|
value: function changeTabIndex(currentRow, nextRow) {
|
|
if (currentRow && nextRow) {
|
|
currentRow.tabIndex = -1;
|
|
nextRow.tabIndex = this.props.tabIndex;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextSelectableRow",
|
|
value: function findNextSelectableRow(row) {
|
|
var nextRow = row.nextElementSibling;
|
|
return nextRow ? DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null;
|
|
}
|
|
}, {
|
|
key: "findPrevSelectableRow",
|
|
value: function findPrevSelectableRow(row) {
|
|
var prevRow = row.previousElementSibling;
|
|
return prevRow ? DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow) : null;
|
|
}
|
|
}, {
|
|
key: "shouldRenderBodyCell",
|
|
value: function shouldRenderBodyCell(value, column, i) {
|
|
if (this.getColumnProp(column, 'hidden')) {
|
|
return false;
|
|
} else if (this.props.rowGroupMode && this.props.rowGroupMode === 'rowspan' && this.isGrouped(column)) {
|
|
var prevRowData = value[i - 1];
|
|
|
|
if (prevRowData) {
|
|
var currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.getColumnProp(column, 'field'));
|
|
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.getColumnProp(column, 'field'));
|
|
return currentRowFieldData !== previousRowFieldData;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "calculateRowGroupSize",
|
|
value: function calculateRowGroupSize(value, column, index) {
|
|
if (this.isGrouped(column)) {
|
|
var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.getColumnProp(column, 'field'));
|
|
var nextRowFieldData = currentRowFieldData;
|
|
var groupRowSpan = 0;
|
|
|
|
while (currentRowFieldData === nextRowFieldData) {
|
|
groupRowSpan++;
|
|
var nextRowData = value[++index];
|
|
|
|
if (nextRowData) {
|
|
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.getColumnProp(column, 'field'));
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return groupRowSpan === 1 ? null : groupRowSpan;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
this.props.onRowClick({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDoubleClick",
|
|
value: function onDoubleClick(event) {
|
|
this.props.onRowDoubleClick({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onRightClick",
|
|
value: function onRightClick(event) {
|
|
this.props.onRowRightClick({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd(event) {
|
|
this.props.onRowTouchEnd(event);
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.isFocusable() && !this.props.allowCellSelection) {
|
|
var target = event.target,
|
|
row = event.currentTarget;
|
|
|
|
switch (event.which) {
|
|
//down arrow
|
|
case 40:
|
|
var nextRow = this.findNextSelectableRow(row);
|
|
|
|
if (nextRow) {
|
|
this.changeTabIndex(row, nextRow);
|
|
nextRow.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up arrow
|
|
|
|
case 38:
|
|
var prevRow = this.findPrevSelectableRow(row);
|
|
|
|
if (prevRow) {
|
|
this.changeTabIndex(row, prevRow);
|
|
prevRow.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
// @deprecated
|
|
if (!DomHandler.isClickable(target)) {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (!DomHandler.isClickable(target) && !target.readOnly) {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event) {
|
|
this.props.onRowMouseDown({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onMouseUp",
|
|
value: function onMouseUp(event) {
|
|
this.props.onRowMouseUp({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event) {
|
|
this.props.onRowDragStart({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event) {
|
|
this.props.onRowDragOver({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
this.props.onRowDragLeave({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd(event) {
|
|
this.props.onRowDragEnd({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
this.props.onRowDrop({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEditChange",
|
|
value: function onEditChange(e, editing) {
|
|
if (this.props.onRowEditChange) {
|
|
var editingRows;
|
|
var dataKey = this.props.dataKey;
|
|
var originalEvent = e.originalEvent,
|
|
data = e.data,
|
|
index = e.index;
|
|
|
|
if (dataKey) {
|
|
var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
|
|
editingRows = this.props.editingRows ? _objectSpread$y({}, this.props.editingRows) : {};
|
|
if (editingRows[dataKeyValue] != null) delete editingRows[dataKeyValue];else editingRows[dataKeyValue] = true;
|
|
} else {
|
|
var editingRowIndex = this.findIndex(this.props.editingRows, data);
|
|
editingRows = this.props.editingRows ? _toConsumableArray(this.props.editingRows) : [];
|
|
if (editingRowIndex !== -1) editingRows = editingRows.filter(function (val, i) {
|
|
return i !== editingRowIndex;
|
|
});else editingRows.push(data);
|
|
}
|
|
|
|
this.props.onRowEditChange({
|
|
originalEvent: originalEvent,
|
|
data: editingRows,
|
|
index: index
|
|
});
|
|
} else {
|
|
this.setState({
|
|
editing: editing
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEditInit",
|
|
value: function onEditInit(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (this.props.onRowEditInit) {
|
|
this.props.onRowEditInit({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
|
|
this.onEditChange(e, true);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onEditSave",
|
|
value: function onEditSave(e) {
|
|
var event = e.originalEvent;
|
|
var valid = this.props.rowEditValidator ? this.props.rowEditValidator(this.props.rowData, {
|
|
props: this.props.tableProps
|
|
}) : true;
|
|
|
|
if (this.props.onRowEditSave) {
|
|
this.props.onRowEditSave({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index,
|
|
valid: valid
|
|
});
|
|
}
|
|
|
|
if (valid) {
|
|
if (this.props.onRowEditComplete) {
|
|
this.props.onRowEditComplete(e);
|
|
}
|
|
|
|
this.onEditChange(e, false);
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onEditCancel",
|
|
value: function onEditCancel(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (this.props.onRowEditCancel) {
|
|
this.props.onRowEditCancel({
|
|
originalEvent: event,
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
|
|
this.onEditChange(e, false);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this3 = this;
|
|
|
|
return this.props.columns.map(function (col, i) {
|
|
if (_this3.shouldRenderBodyCell(_this3.props.value, col, _this3.props.index)) {
|
|
var key = "".concat(_this3.getColumnProp(col, 'columnKey') || _this3.getColumnProp(col, 'field'), "_").concat(i);
|
|
var rowSpan = _this3.props.rowGroupMode === 'rowspan' ? _this3.calculateRowGroupSize(_this3.props.value, col, _this3.props.index) : null;
|
|
|
|
var editing = _this3.getEditing();
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(BodyCell, {
|
|
key: key,
|
|
value: _this3.props.value,
|
|
tableProps: _this3.props.tableProps,
|
|
tableSelector: _this3.props.tableSelector,
|
|
column: col,
|
|
rowData: _this3.props.rowData,
|
|
rowIndex: _this3.props.index,
|
|
index: i,
|
|
rowSpan: rowSpan,
|
|
dataKey: _this3.props.dataKey,
|
|
editing: editing,
|
|
editingMeta: _this3.props.editingMeta,
|
|
editMode: _this3.props.editMode,
|
|
onRowEditInit: _this3.onEditInit,
|
|
onRowEditSave: _this3.onEditSave,
|
|
onRowEditCancel: _this3.onEditCancel,
|
|
onEditingMetaChange: _this3.props.onEditingMetaChange,
|
|
onRowToggle: _this3.props.onRowToggle,
|
|
selection: _this3.props.selection,
|
|
allowCellSelection: _this3.props.allowCellSelection,
|
|
compareSelectionBy: _this3.props.compareSelectionBy,
|
|
selectOnEdit: _this3.props.selectOnEdit,
|
|
selected: _this3.props.selected,
|
|
onClick: _this3.props.onCellClick,
|
|
onMouseDown: _this3.props.onCellMouseDown,
|
|
onMouseUp: _this3.props.onCellMouseUp,
|
|
tabIndex: _this3.props.tabIndex,
|
|
cellClassName: _this3.props.cellClassName,
|
|
responsiveLayout: _this3.props.responsiveLayout,
|
|
frozenRow: _this3.props.frozenRow,
|
|
isSelectable: _this3.props.isSelectable,
|
|
showSelectionElement: _this3.props.showSelectionElement,
|
|
showRowReorderElement: _this3.props.showRowReorderElement,
|
|
onRadioChange: _this3.props.onRadioChange,
|
|
onCheckboxChange: _this3.props.onCheckboxChange,
|
|
expanded: _this3.props.expanded,
|
|
expandedRowIcon: _this3.props.expandedRowIcon,
|
|
collapsedRowIcon: _this3.props.collapsedRowIcon,
|
|
virtualScrollerOptions: _this3.props.virtualScrollerOptions
|
|
});
|
|
}
|
|
|
|
return null;
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var rowClassName = ObjectUtils.getPropValue(this.props.rowClassName, this.props.rowData, {
|
|
props: this.props.tableProps
|
|
});
|
|
var className = classNames(rowClassName, {
|
|
'p-highlight': !this.props.allowCellSelection && this.props.selected,
|
|
'p-highlight-contextmenu': this.props.contextMenuSelected,
|
|
'p-selectable-row': this.props.allowRowSelection && this.props.isSelectable({
|
|
data: this.props.rowData,
|
|
index: this.props.index
|
|
}),
|
|
'p-row-odd': this.props.index % 2 !== 0
|
|
});
|
|
var content = this.renderContent();
|
|
var tabIndex = this.getTabIndex();
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
ref: function ref(el) {
|
|
return _this4.el = el;
|
|
},
|
|
role: "row",
|
|
tabIndex: tabIndex,
|
|
className: className,
|
|
onMouseDown: this.onMouseDown,
|
|
onMouseUp: this.onMouseUp,
|
|
onClick: this.onClick,
|
|
onDoubleClick: this.onDoubleClick,
|
|
onContextMenu: this.onRightClick,
|
|
onTouchEnd: this.onTouchEnd,
|
|
onKeyDown: this.onKeyDown,
|
|
onDragStart: this.onDragStart,
|
|
onDragOver: this.onDragOver,
|
|
onDragLeave: this.onDragLeave,
|
|
onDragEnd: this.onDragEnd,
|
|
onDrop: this.onDrop
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return BodyRow;
|
|
}(React.Component);
|
|
|
|
function _createSuper$1y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1y(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var RowTogglerButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(RowTogglerButton, _Component);
|
|
|
|
var _super = _createSuper$1y(RowTogglerButton);
|
|
|
|
function RowTogglerButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, RowTogglerButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(RowTogglerButton, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
data: this.props.rowData
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var iconClassName = classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
onClick: this.onClick,
|
|
className: "p-row-toggler p-link",
|
|
tabIndex: this.props.tabIndex
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return RowTogglerButton;
|
|
}(React.Component);
|
|
|
|
var _excluded = ["originalEvent"];
|
|
|
|
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; }
|
|
|
|
function _createSuper$1x(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1x(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1x() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TableBody = /*#__PURE__*/function (_Component) {
|
|
_inherits(TableBody, _Component);
|
|
|
|
var _super = _createSuper$1x(TableBody);
|
|
|
|
function TableBody(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TableBody);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
rowGroupHeaderStyleObject: {}
|
|
}; // row
|
|
|
|
_this.onRowClick = _this.onRowClick.bind(_assertThisInitialized(_this));
|
|
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_assertThisInitialized(_this));
|
|
_this.onRowRightClick = _this.onRowRightClick.bind(_assertThisInitialized(_this));
|
|
_this.onRowTouchEnd = _this.onRowTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.onRowMouseDown = _this.onRowMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onRowMouseUp = _this.onRowMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this)); // drag
|
|
|
|
_this.onRowDragStart = _this.onRowDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onRowDragOver = _this.onRowDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onRowDragLeave = _this.onRowDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onRowDragEnd = _this.onRowDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.onRowDrop = _this.onRowDrop.bind(_assertThisInitialized(_this)); // selection
|
|
|
|
_this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
|
|
_this.onDragSelectionMouseMove = _this.onDragSelectionMouseMove.bind(_assertThisInitialized(_this));
|
|
_this.onDragSelectionMouseUp = _this.onDragSelectionMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.isSelectable = _this.isSelectable.bind(_assertThisInitialized(_this)); // cell
|
|
|
|
_this.onCellClick = _this.onCellClick.bind(_assertThisInitialized(_this));
|
|
_this.onCellMouseDown = _this.onCellMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onCellMouseUp = _this.onCellMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.ref = _this.ref.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TableBody, [{
|
|
key: "ref",
|
|
value: function ref(el) {
|
|
this.el = el;
|
|
this.props.virtualScrollerContentRef && this.props.virtualScrollerContentRef(el);
|
|
}
|
|
}, {
|
|
key: "equals",
|
|
value: function equals(data1, data2) {
|
|
if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
|
|
}
|
|
}, {
|
|
key: "isSubheaderGrouping",
|
|
value: function isSubheaderGrouping() {
|
|
return this.props.rowGroupMode && this.props.rowGroupMode === 'subheader';
|
|
}
|
|
}, {
|
|
key: "isSelectionEnabled",
|
|
value: function isSelectionEnabled() {
|
|
return this.props.selectionMode || this.props.selectionModeInColumn !== null || this.props.columns && this.props.columns.some(function (col) {
|
|
return col && !!col.props.selectionMode;
|
|
});
|
|
}
|
|
}, {
|
|
key: "isRadioSelectionMode",
|
|
value: function isRadioSelectionMode() {
|
|
return this.props.selectionMode === 'radiobutton';
|
|
}
|
|
}, {
|
|
key: "isCheckboxSelectionMode",
|
|
value: function isCheckboxSelectionMode() {
|
|
return this.props.selectionMode === 'checkbox';
|
|
}
|
|
}, {
|
|
key: "isRadioSelectionModeInColumn",
|
|
value: function isRadioSelectionModeInColumn() {
|
|
return this.props.selectionModeInColumn === 'single';
|
|
}
|
|
}, {
|
|
key: "isCheckboxSelectionModeInColumn",
|
|
value: function isCheckboxSelectionModeInColumn() {
|
|
return this.props.selectionModeInColumn === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isSingleSelection",
|
|
value: function isSingleSelection() {
|
|
return this.props.selectionMode === 'single' && !this.isCheckboxSelectionModeInColumn() || !this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn();
|
|
}
|
|
}, {
|
|
key: "isMultipleSelection",
|
|
value: function isMultipleSelection() {
|
|
return this.props.selectionMode === 'multiple' && !this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn();
|
|
}
|
|
}, {
|
|
key: "isRadioOnlySelection",
|
|
value: function isRadioOnlySelection() {
|
|
return this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn();
|
|
}
|
|
}, {
|
|
key: "isCheckboxOnlySelection",
|
|
value: function isCheckboxOnlySelection() {
|
|
return this.isCheckboxSelectionMode() && this.isCheckboxSelectionModeInColumn();
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(rowData) {
|
|
if (rowData && this.props.selection) {
|
|
return this.props.selection instanceof Array ? this.findIndex(this.props.selection, rowData) > -1 : this.equals(rowData, this.props.selection);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isContextMenuSelected",
|
|
value: function isContextMenuSelected(rowData) {
|
|
if (rowData && this.props.contextMenuSelection) {
|
|
return this.equals(rowData, this.props.contextMenuSelection);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isSelectable",
|
|
value: function isSelectable(options) {
|
|
return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true;
|
|
}
|
|
}, {
|
|
key: "isRowExpanded",
|
|
value: function isRowExpanded(rowData) {
|
|
if (rowData && this.props.expandedRows) {
|
|
if (this.isSubheaderGrouping() && this.props.expandableRowGroups) {
|
|
return this.isRowGroupExpanded(rowData);
|
|
} else {
|
|
if (this.props.dataKey) return this.props.expandedRows ? this.props.expandedRows[ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.expandedRows, rowData) !== -1;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isRowGroupExpanded",
|
|
value: function isRowGroupExpanded(rowData) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.dataKey === this.props.groupRowsBy) return Object.keys(this.props.expandedRows).some(function (data) {
|
|
return ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, _this2.props.dataKey));
|
|
});else return this.props.expandedRows.some(function (data) {
|
|
return ObjectUtils.equals(data, rowData, _this2.props.groupRowsBy);
|
|
});
|
|
}
|
|
}, {
|
|
key: "isRowEditing",
|
|
value: function isRowEditing(rowData) {
|
|
if (this.props.editMode === 'row' && rowData && this.props.editingRows) {
|
|
if (this.props.dataKey) return this.props.editingRows ? this.props.editingRows[ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.editingRows, rowData) !== -1;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "allowDrag",
|
|
value: function allowDrag(event) {
|
|
return this.props.dragSelection && this.isMultipleSelection() && !event.originalEvent.shiftKey;
|
|
}
|
|
}, {
|
|
key: "allowRowDrag",
|
|
value: function allowRowDrag(event) {
|
|
return !this.allowCellSelection() && this.allowDrag(event);
|
|
}
|
|
}, {
|
|
key: "allowCellDrag",
|
|
value: function allowCellDrag(event) {
|
|
return this.allowCellSelection() && this.allowDrag(event);
|
|
}
|
|
}, {
|
|
key: "allowSelection",
|
|
value: function allowSelection(event) {
|
|
return !DomHandler.isClickable(event.originalEvent.target);
|
|
}
|
|
}, {
|
|
key: "allowMetaKeySelection",
|
|
value: function allowMetaKeySelection(event) {
|
|
return !this.rowTouched && (!this.props.metaKeySelection || this.props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
|
|
}
|
|
}, {
|
|
key: "allowRangeSelection",
|
|
value: function allowRangeSelection(event) {
|
|
return this.isMultipleSelection() && event.originalEvent.shiftKey && this.anchorRowIndex !== null;
|
|
}
|
|
}, {
|
|
key: "allowRowSelection",
|
|
value: function allowRowSelection() {
|
|
return (this.props.selectionMode || this.props.selectionModeInColumn) && !this.isRadioOnlySelection() && !this.isCheckboxOnlySelection();
|
|
}
|
|
}, {
|
|
key: "allowCellSelection",
|
|
value: function allowCellSelection() {
|
|
return this.props.cellSelection && !this.isRadioSelectionModeInColumn() && !this.isCheckboxSelectionModeInColumn();
|
|
}
|
|
}, {
|
|
key: "getColumnsLength",
|
|
value: function getColumnsLength() {
|
|
return this.props.columns ? this.props.columns.length : 0;
|
|
}
|
|
}, {
|
|
key: "getVirtualScrollerOption",
|
|
value: function getVirtualScrollerOption(option, options) {
|
|
options = options || this.props.virtualScrollerOptions;
|
|
return options ? options[option] : null;
|
|
}
|
|
}, {
|
|
key: "findIndex",
|
|
value: function findIndex(collection, rowData) {
|
|
var _this3 = this;
|
|
|
|
return (collection || []).findIndex(function (data) {
|
|
return _this3.equals(rowData, data);
|
|
});
|
|
}
|
|
}, {
|
|
key: "rowGroupHeaderStyle",
|
|
value: function rowGroupHeaderStyle() {
|
|
if (this.props.scrollable) {
|
|
return {
|
|
top: this.state.rowGroupHeaderStyleObject['top']
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "getRowKey",
|
|
value: function getRowKey(rowData, index) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(rowData, this.props.dataKey) + '_' + index : index;
|
|
}
|
|
}, {
|
|
key: "shouldRenderRowGroupHeader",
|
|
value: function shouldRenderRowGroupHeader(value, rowData, i) {
|
|
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
|
|
var prevRowData = value[i - 1];
|
|
|
|
if (prevRowData) {
|
|
var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.props.groupRowsBy);
|
|
return currentRowFieldData !== previousRowFieldData;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
}, {
|
|
key: "shouldRenderRowGroupFooter",
|
|
value: function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
|
|
if (this.props.expandableRowGroups && !expanded) {
|
|
return false;
|
|
} else {
|
|
var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
|
|
var nextRowData = value[i + 1];
|
|
|
|
if (nextRowData) {
|
|
var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.props.groupRowsBy);
|
|
return currentRowFieldData !== nextRowFieldData;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateFrozenRowStickyPosition",
|
|
value: function updateFrozenRowStickyPosition() {
|
|
this.el.style.top = DomHandler.getOuterHeight(this.el.previousElementSibling) + 'px';
|
|
}
|
|
}, {
|
|
key: "updateFrozenRowGroupHeaderStickyPosition",
|
|
value: function updateFrozenRowGroupHeaderStickyPosition() {
|
|
var tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
|
|
var top = tableHeaderHeight + 'px';
|
|
|
|
if (this.state.rowGroupHeaderStyleObject && this.state.rowGroupHeaderStyleObject.top !== top) {
|
|
this.setState({
|
|
rowGroupHeaderStyleObject: {
|
|
top: top
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateVirtualScrollerPosition",
|
|
value: function updateVirtualScrollerPosition() {
|
|
var tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
|
|
this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px';
|
|
}
|
|
}, {
|
|
key: "onSingleSelection",
|
|
value: function onSingleSelection(_ref) {
|
|
var originalEvent = _ref.originalEvent,
|
|
data = _ref.data,
|
|
index = _ref.index,
|
|
toggleable = _ref.toggleable,
|
|
type = _ref.type;
|
|
|
|
if (!this.isSelectable({
|
|
data: data,
|
|
index: index
|
|
})) {
|
|
return;
|
|
}
|
|
|
|
var selected = this.isSelected(data);
|
|
var selection = this.props.selection;
|
|
|
|
if (selected) {
|
|
if (toggleable) {
|
|
selection = null;
|
|
this.onUnselect({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
type: type
|
|
});
|
|
}
|
|
} else {
|
|
selection = data;
|
|
this.onSelect({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
type: type
|
|
});
|
|
}
|
|
|
|
this.focusOnElement(originalEvent, true);
|
|
|
|
if (this.props.onSelectionChange && selection !== this.props.selection) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: selection,
|
|
type: type
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMultipleSelection",
|
|
value: function onMultipleSelection(_ref2) {
|
|
var _this4 = this;
|
|
|
|
var originalEvent = _ref2.originalEvent,
|
|
data = _ref2.data,
|
|
index = _ref2.index,
|
|
toggleable = _ref2.toggleable,
|
|
type = _ref2.type;
|
|
|
|
if (!this.isSelectable({
|
|
data: data,
|
|
index: index
|
|
})) {
|
|
return;
|
|
}
|
|
|
|
var selected = this.isSelected(data);
|
|
var selection = this.props.selection || [];
|
|
|
|
if (selected) {
|
|
if (toggleable) {
|
|
var selectionIndex = this.findIndex(selection, data);
|
|
selection = this.props.selection.filter(function (val, i) {
|
|
return i !== selectionIndex;
|
|
});
|
|
this.onUnselect({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
type: type
|
|
});
|
|
} else if (selection.length) {
|
|
this.props.selection.forEach(function (d) {
|
|
return _this4.onUnselect({
|
|
originalEvent: originalEvent,
|
|
data: d,
|
|
type: type
|
|
});
|
|
});
|
|
selection = [data];
|
|
this.onSelect({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
type: type
|
|
});
|
|
}
|
|
} else {
|
|
selection = toggleable && this.isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
|
|
this.onSelect({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
type: type
|
|
});
|
|
}
|
|
|
|
this.focusOnElement(originalEvent, true);
|
|
|
|
if (this.props.onSelectionChange && selection !== this.props.selection) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: selection,
|
|
type: type
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRangeSelection",
|
|
value: function onRangeSelection(event, type) {
|
|
DomHandler.clearSelection();
|
|
this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
|
|
var selectionInRange = this.selectRange(event);
|
|
var selection = this.isMultipleSelection() ? _toConsumableArray(new Set([].concat(_toConsumableArray(this.props.selection || []), _toConsumableArray(selectionInRange)))) : selectionInRange;
|
|
|
|
if (this.props.onSelectionChange && selection !== this.props.selection) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: event.originalEvent,
|
|
value: selection,
|
|
type: type
|
|
});
|
|
}
|
|
|
|
this.anchorRowIndex = this.rangeRowIndex;
|
|
this.anchorCellIndex = event.cellIndex;
|
|
this.focusOnElement(event.originalEvent, false);
|
|
}
|
|
}, {
|
|
key: "selectRange",
|
|
value: function selectRange(event) {
|
|
var rangeStart, rangeEnd;
|
|
var isLazyAndPaginator = this.props.lazy && this.props.paginator;
|
|
|
|
if (isLazyAndPaginator) {
|
|
this.anchorRowIndex += this.anchorRowFirst;
|
|
this.rangeRowIndex += this.props.first;
|
|
}
|
|
|
|
if (this.rangeRowIndex > this.anchorRowIndex) {
|
|
rangeStart = this.anchorRowIndex;
|
|
rangeEnd = this.rangeRowIndex;
|
|
} else if (this.rangeRowIndex < this.anchorRowIndex) {
|
|
rangeStart = this.rangeRowIndex;
|
|
rangeEnd = this.anchorRowIndex;
|
|
} else {
|
|
rangeStart = rangeEnd = this.rangeRowIndex;
|
|
}
|
|
|
|
if (isLazyAndPaginator) {
|
|
rangeStart = Math.max(rangeStart - this.props.first, 0);
|
|
rangeEnd -= this.props.first;
|
|
}
|
|
|
|
return this.allowCellSelection() ? this.selectRangeOnCell(event, rangeStart, rangeEnd) : this.selectRangeOnRow(event, rangeStart, rangeEnd);
|
|
}
|
|
}, {
|
|
key: "selectRangeOnRow",
|
|
value: function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
|
|
var value = this.props.value;
|
|
var selection = [];
|
|
|
|
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
|
|
var rangeRowData = value[i];
|
|
|
|
if (!this.isSelectable({
|
|
data: rangeRowData,
|
|
index: i
|
|
})) {
|
|
continue;
|
|
}
|
|
|
|
selection.push(rangeRowData);
|
|
this.onSelect({
|
|
originalEvent: event.originalEvent,
|
|
data: rangeRowData,
|
|
type: 'row'
|
|
});
|
|
}
|
|
|
|
return selection;
|
|
}
|
|
}, {
|
|
key: "selectRangeOnCell",
|
|
value: function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
|
|
var cellRangeStart,
|
|
cellRangeEnd,
|
|
cellIndex = event.cellIndex;
|
|
|
|
if (cellIndex > this.anchorCellIndex) {
|
|
cellRangeStart = this.anchorCellIndex;
|
|
cellRangeEnd = cellIndex;
|
|
} else if (cellIndex < this.anchorCellIndex) {
|
|
cellRangeStart = cellIndex;
|
|
cellRangeEnd = this.anchorCellIndex;
|
|
} else {
|
|
cellRangeStart = cellRangeEnd = cellIndex;
|
|
}
|
|
|
|
var value = this.props.value;
|
|
var selection = [];
|
|
|
|
for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
|
|
var rowData = value[i];
|
|
var columns = this.props.columns;
|
|
|
|
for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
|
|
var field = columns[j].props.field;
|
|
|
|
var _value = ObjectUtils.resolveFieldData(rowData, field);
|
|
|
|
var rangeRowData = {
|
|
value: _value,
|
|
field: field,
|
|
rowData: rowData,
|
|
rowIndex: i,
|
|
cellIndex: j,
|
|
selected: true
|
|
};
|
|
|
|
if (!this.isSelectable({
|
|
data: rangeRowData,
|
|
index: i
|
|
})) {
|
|
continue;
|
|
}
|
|
|
|
selection.push(rangeRowData);
|
|
this.onSelect({
|
|
originalEvent: event.originalEvent,
|
|
data: rangeRowData,
|
|
type: 'cell'
|
|
});
|
|
}
|
|
}
|
|
|
|
return selection;
|
|
}
|
|
}, {
|
|
key: "onSelect",
|
|
value: function onSelect(event) {
|
|
if (this.allowCellSelection()) this.props.onCellSelect && this.props.onCellSelect(_objectSpread$x(_objectSpread$x({
|
|
originalEvent: event.originalEvent
|
|
}, event.data), {}, {
|
|
type: event.type
|
|
}));else this.props.onRowSelect && this.props.onRowSelect(event);
|
|
}
|
|
}, {
|
|
key: "onUnselect",
|
|
value: function onUnselect(event) {
|
|
if (this.allowCellSelection()) this.props.onCellUnselect && this.props.onCellUnselect(_objectSpread$x(_objectSpread$x({
|
|
originalEvent: event.originalEvent
|
|
}, event.data), {}, {
|
|
type: event.type
|
|
}));else this.props.onRowUnselect && this.props.onRowUnselect(event);
|
|
}
|
|
}, {
|
|
key: "enableDragSelection",
|
|
value: function enableDragSelection(event) {
|
|
if (this.props.dragSelection && !this.dragSelectionHelper) {
|
|
this.dragSelectionHelper = document.createElement('div');
|
|
DomHandler.addClass(this.dragSelectionHelper, 'p-datatable-drag-selection-helper');
|
|
this.initialDragPosition = {
|
|
x: event.clientX,
|
|
y: event.clientY
|
|
};
|
|
this.dragSelectionHelper.style.top = "".concat(event.pageY, "px");
|
|
this.dragSelectionHelper.style.left = "".concat(event.pageX, "px");
|
|
this.bindDragSelectionEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "focusOnElement",
|
|
value: function focusOnElement(event, isFocused) {
|
|
var target = event.currentTarget;
|
|
|
|
if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
|
|
if (this.isCheckboxSelectionModeInColumn()) {
|
|
var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
|
|
checkbox && checkbox.focus();
|
|
} else if (this.isRadioSelectionModeInColumn()) {
|
|
var radio = DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
|
|
radio && radio.focus();
|
|
}
|
|
}
|
|
|
|
!isFocused && target && target.focus();
|
|
}
|
|
}, {
|
|
key: "changeTabIndex",
|
|
value: function changeTabIndex(event, type) {
|
|
var target = event.currentTarget;
|
|
var isSelectable = DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row');
|
|
|
|
if (isSelectable) {
|
|
var selector = type === 'cell' ? 'tr > td' : 'tr';
|
|
var tabbableEl = DomHandler.findSingle(this.el, "".concat(selector, "[tabindex=\"").concat(this.props.tabIndex, "\"]"));
|
|
|
|
if (tabbableEl && target) {
|
|
tabbableEl.tabIndex = -1;
|
|
target.tabIndex = this.props.tabIndex;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowClick",
|
|
value: function onRowClick(event) {
|
|
if (this.allowCellSelection() || !this.allowSelection(event)) {
|
|
return;
|
|
}
|
|
|
|
this.props.onRowClick && this.props.onRowClick(event);
|
|
|
|
if (this.allowRowSelection()) {
|
|
if (this.allowRangeSelection(event)) {
|
|
this.onRangeSelection(event, 'row');
|
|
} else {
|
|
var toggleable = this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn() || this.allowMetaKeySelection(event);
|
|
this.anchorRowIndex = event.index;
|
|
this.rangeRowIndex = event.index;
|
|
this.anchorRowFirst = this.props.first;
|
|
|
|
if (this.isSingleSelection()) {
|
|
this.onSingleSelection(_objectSpread$x(_objectSpread$x({}, event), {}, {
|
|
toggleable: toggleable,
|
|
type: 'row'
|
|
}));
|
|
} else {
|
|
this.onMultipleSelection(_objectSpread$x(_objectSpread$x({}, event), {}, {
|
|
toggleable: toggleable,
|
|
type: 'row'
|
|
}));
|
|
}
|
|
}
|
|
|
|
this.changeTabIndex(event.originalEvent, 'row');
|
|
} else {
|
|
this.focusOnElement(event.originalEvent);
|
|
}
|
|
|
|
this.rowTouched = false;
|
|
}
|
|
}, {
|
|
key: "onRowDoubleClick",
|
|
value: function onRowDoubleClick(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (DomHandler.isClickable(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.onRowDoubleClick) {
|
|
this.props.onRowDoubleClick(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowRightClick",
|
|
value: function onRowRightClick(event) {
|
|
if (this.props.onContextMenu || this.props.onContextMenuSelectionChange) {
|
|
DomHandler.clearSelection();
|
|
|
|
if (this.props.onContextMenuSelectionChange) {
|
|
this.props.onContextMenuSelectionChange({
|
|
originalEvent: event.originalEvent,
|
|
value: event.data
|
|
});
|
|
}
|
|
|
|
if (this.props.onContextMenu) {
|
|
this.props.onContextMenu({
|
|
originalEvent: event.originalEvent,
|
|
data: event.data
|
|
});
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowTouchEnd",
|
|
value: function onRowTouchEnd() {
|
|
this.rowTouched = true;
|
|
}
|
|
}, {
|
|
key: "onRowMouseDown",
|
|
value: function onRowMouseDown(e) {
|
|
DomHandler.clearSelection();
|
|
var event = e.originalEvent;
|
|
if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
|
|
|
|
if (this.allowRowDrag(e)) {
|
|
this.enableDragSelection(event, 'row');
|
|
this.anchorRowIndex = e.index;
|
|
this.rangeRowIndex = e.index;
|
|
this.anchorRowFirst = this.props.first;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowMouseUp",
|
|
value: function onRowMouseUp(event) {
|
|
var isSameRow = event.index === this.anchorRowIndex;
|
|
|
|
if (this.allowRowDrag(event) && !isSameRow) {
|
|
this.onRangeSelection(event, 'row');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowToggle",
|
|
value: function onRowToggle(event) {
|
|
var expandedRows;
|
|
var dataKey = this.props.dataKey;
|
|
var hasDataKey = this.props.groupRowsBy ? dataKey === this.props.groupRowsBy : !!dataKey;
|
|
|
|
if (hasDataKey) {
|
|
var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
|
|
expandedRows = this.props.expandedRows ? _objectSpread$x({}, this.props.expandedRows) : {};
|
|
|
|
if (expandedRows[dataKeyValue] != null) {
|
|
delete expandedRows[dataKeyValue];
|
|
|
|
if (this.props.onRowCollapse) {
|
|
this.props.onRowCollapse({
|
|
originalEvent: event,
|
|
data: event.data
|
|
});
|
|
}
|
|
} else {
|
|
expandedRows[dataKeyValue] = true;
|
|
|
|
if (this.props.onRowExpand) {
|
|
this.props.onRowExpand({
|
|
originalEvent: event,
|
|
data: event.data
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
var expandedRowIndex = this.findIndex(this.props.expandedRows, event.data);
|
|
expandedRows = this.props.expandedRows ? _toConsumableArray(this.props.expandedRows) : [];
|
|
|
|
if (expandedRowIndex !== -1) {
|
|
expandedRows = expandedRows.filter(function (val, i) {
|
|
return i !== expandedRowIndex;
|
|
});
|
|
|
|
if (this.props.onRowCollapse) {
|
|
this.props.onRowCollapse({
|
|
originalEvent: event,
|
|
data: event.data
|
|
});
|
|
}
|
|
} else {
|
|
expandedRows.push(event.data);
|
|
|
|
if (this.props.onRowExpand) {
|
|
this.props.onRowExpand({
|
|
originalEvent: event,
|
|
data: event.data
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.onRowToggle) {
|
|
this.props.onRowToggle({
|
|
data: expandedRows
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowDragStart",
|
|
value: function onRowDragStart(e) {
|
|
var event = e.originalEvent,
|
|
index = e.index;
|
|
this.rowDragging = true;
|
|
this.draggedRowIndex = index;
|
|
event.dataTransfer.setData('text', 'b'); // For firefox
|
|
}
|
|
}, {
|
|
key: "onRowDragOver",
|
|
value: function onRowDragOver(e) {
|
|
var event = e.originalEvent,
|
|
index = e.index;
|
|
|
|
if (this.rowDragging && this.draggedRowIndex !== index) {
|
|
var rowElement = event.currentTarget;
|
|
var rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
|
|
var pageY = event.pageY;
|
|
var rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
|
|
var prevRowElement = rowElement.previousElementSibling;
|
|
|
|
if (pageY < rowMidY) {
|
|
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
|
|
this.droppedRowIndex = 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');
|
|
this.droppedRowIndex = index + 1;
|
|
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onRowDragLeave",
|
|
value: function onRowDragLeave(e) {
|
|
var event = e.originalEvent;
|
|
var rowElement = event.currentTarget;
|
|
var prevRowElement = rowElement.previousElementSibling;
|
|
|
|
if (prevRowElement) {
|
|
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
|
|
}
|
|
|
|
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
|
|
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
|
|
}
|
|
}, {
|
|
key: "onRowDragEnd",
|
|
value: function onRowDragEnd(e) {
|
|
var event = e.originalEvent;
|
|
this.rowDragging = false;
|
|
this.draggedRowIndex = null;
|
|
this.droppedRowIndex = null;
|
|
event.currentTarget.draggable = false;
|
|
}
|
|
}, {
|
|
key: "onRowDrop",
|
|
value: function onRowDrop(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (this.droppedRowIndex != null) {
|
|
var dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;
|
|
|
|
var val = _toConsumableArray(this.props.value);
|
|
|
|
ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);
|
|
|
|
if (this.props.onRowReorder) {
|
|
this.props.onRowReorder({
|
|
originalEvent: event,
|
|
value: val,
|
|
dragIndex: this.draggedRowIndex,
|
|
dropIndex: this.droppedRowIndex
|
|
});
|
|
}
|
|
} //cleanup
|
|
|
|
|
|
this.onRowDragLeave(e);
|
|
this.onRowDragEnd(e);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onRadioChange",
|
|
value: function onRadioChange(event) {
|
|
this.onSingleSelection(_objectSpread$x(_objectSpread$x({}, event), {}, {
|
|
toggleable: true,
|
|
type: 'radio'
|
|
}));
|
|
}
|
|
}, {
|
|
key: "onCheckboxChange",
|
|
value: function onCheckboxChange(event) {
|
|
this.onMultipleSelection(_objectSpread$x(_objectSpread$x({}, event), {}, {
|
|
toggleable: true,
|
|
type: 'checkbox'
|
|
}));
|
|
}
|
|
}, {
|
|
key: "onDragSelectionMouseMove",
|
|
value: function onDragSelectionMouseMove(event) {
|
|
var _this$initialDragPosi = this.initialDragPosition,
|
|
x = _this$initialDragPosi.x,
|
|
y = _this$initialDragPosi.y;
|
|
var dx = event.clientX - x;
|
|
var dy = event.clientY - y;
|
|
if (dy < 0) this.dragSelectionHelper.style.top = "".concat(event.pageY + 5, "px");
|
|
if (dx < 0) this.dragSelectionHelper.style.left = "".concat(event.pageX + 5, "px");
|
|
this.dragSelectionHelper.style.height = "".concat(Math.abs(dy), "px");
|
|
this.dragSelectionHelper.style.width = "".concat(Math.abs(dx), "px");
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDragSelectionMouseUp",
|
|
value: function onDragSelectionMouseUp() {
|
|
if (this.dragSelectionHelper) {
|
|
this.dragSelectionHelper.remove();
|
|
this.dragSelectionHelper = null;
|
|
}
|
|
|
|
document.removeEventListener('mousemove', this.onDragSelectionMouseMove);
|
|
document.removeEventListener('mouseup', this.onDragSelectionMouseUp);
|
|
}
|
|
}, {
|
|
key: "onCellClick",
|
|
value: function onCellClick(event) {
|
|
if (!this.allowSelection(event)) {
|
|
return;
|
|
}
|
|
|
|
this.props.onCellClick && this.props.onCellClick(event);
|
|
|
|
if (this.allowCellSelection()) {
|
|
if (this.allowRangeSelection(event)) {
|
|
this.onRangeSelection(event, 'cell');
|
|
} else {
|
|
var toggleable = this.allowMetaKeySelection(event);
|
|
|
|
var originalEvent = event.originalEvent,
|
|
data = _objectWithoutProperties(event, _excluded);
|
|
|
|
this.anchorRowIndex = event.rowIndex;
|
|
this.rangeRowIndex = event.rowIndex;
|
|
this.anchorRowFirst = this.props.first;
|
|
this.anchorCellIndex = event.cellIndex;
|
|
|
|
if (this.isSingleSelection()) {
|
|
this.onSingleSelection({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
index: event.rowIndex,
|
|
toggleable: toggleable,
|
|
type: 'cell'
|
|
});
|
|
} else {
|
|
this.onMultipleSelection({
|
|
originalEvent: originalEvent,
|
|
data: data,
|
|
index: event.rowIndex,
|
|
toggleable: toggleable,
|
|
type: 'cell'
|
|
});
|
|
}
|
|
}
|
|
|
|
this.changeTabIndex(event.originalEvent, 'cell');
|
|
}
|
|
|
|
this.rowTouched = false;
|
|
}
|
|
}, {
|
|
key: "onCellMouseDown",
|
|
value: function onCellMouseDown(event) {
|
|
if (this.allowCellDrag(event)) {
|
|
this.enableDragSelection(event.originalEvent);
|
|
this.anchorRowIndex = event.rowIndex;
|
|
this.rangeRowIndex = event.rowIndex;
|
|
this.anchorRowFirst = this.props.first;
|
|
this.anchorCellIndex = event.cellIndex;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onCellMouseUp",
|
|
value: function onCellMouseUp(event) {
|
|
var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;
|
|
|
|
if (this.allowCellDrag(event) && !isSameCell) {
|
|
this.onRangeSelection(event, 'cell');
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDragSelectionEvents",
|
|
value: function bindDragSelectionEvents() {
|
|
document.addEventListener('mousemove', this.onDragSelectionMouseMove);
|
|
document.addEventListener('mouseup', this.onDragSelectionMouseUp);
|
|
document.body.appendChild(this.dragSelectionHelper);
|
|
}
|
|
}, {
|
|
key: "unbindDragSelectionEvents",
|
|
value: function unbindDragSelectionEvents() {
|
|
this.onDragSelectionMouseUp();
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.frozenRow) {
|
|
this.updateFrozenRowStickyPosition();
|
|
}
|
|
|
|
if (this.props.scrollable && this.props.rowGroupMode === 'subheader') {
|
|
this.updateFrozenRowGroupHeaderStickyPosition();
|
|
}
|
|
|
|
if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) {
|
|
this.updateVirtualScrollerPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.props.frozenRow) {
|
|
this.updateFrozenRowStickyPosition();
|
|
}
|
|
|
|
if (this.props.scrollable && this.props.rowGroupMode === 'subheader') {
|
|
this.updateFrozenRowGroupHeaderStickyPosition();
|
|
}
|
|
|
|
if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
|
|
this.updateVirtualScrollerPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.dragSelection) {
|
|
this.unbindDragSelectionEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderEmptyContent",
|
|
value: function renderEmptyContent() {
|
|
if (!this.props.loading) {
|
|
var colSpan = this.getColumnsLength();
|
|
var content = ObjectUtils.getJSXElement(this.props.emptyMessage, {
|
|
props: this.props,
|
|
frozen: this.props.frozenRow
|
|
}) || localeOption('emptyMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
className: "p-datatable-emptymessage",
|
|
role: "row"
|
|
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
colSpan: colSpan,
|
|
role: "cell"
|
|
}, content));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderGroupHeader",
|
|
value: function renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan) {
|
|
if (isSubheaderGrouping && this.shouldRenderRowGroupHeader(this.props.value, rowData, index - this.props.first)) {
|
|
var style = this.rowGroupHeaderStyle();
|
|
var toggler = this.props.expandableRowGroups && /*#__PURE__*/React__default["default"].createElement(RowTogglerButton, {
|
|
onClick: this.onRowToggle,
|
|
rowData: rowData,
|
|
expanded: expanded,
|
|
expandedRowIcon: this.props.expandedRowIcon,
|
|
collapsedRowIcon: this.props.collapsedRowIcon
|
|
});
|
|
var content = ObjectUtils.getJSXElement(this.props.rowGroupHeaderTemplate, rowData, {
|
|
index: index,
|
|
props: this.props.tableProps
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
className: "p-rowgroup-header",
|
|
style: style,
|
|
role: "row"
|
|
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
colSpan: colSpan
|
|
}, toggler, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-rowgroup-header-name"
|
|
}, content)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderRow",
|
|
value: function renderRow(rowData, index, expanded) {
|
|
if (!this.props.expandableRowGroups || expanded) {
|
|
var selected = this.isSelectionEnabled() ? this.isSelected(rowData) : false;
|
|
var contextMenuSelected = this.isContextMenuSelected(rowData);
|
|
var allowRowSelection = this.allowRowSelection();
|
|
var allowCellSelection = this.allowCellSelection();
|
|
var editing = this.isRowEditing(rowData);
|
|
return /*#__PURE__*/React__default["default"].createElement(BodyRow, {
|
|
tableProps: this.props.tableProps,
|
|
tableSelector: this.props.tableSelector,
|
|
value: this.props.value,
|
|
columns: this.props.columns,
|
|
rowData: rowData,
|
|
index: index,
|
|
selected: selected,
|
|
contextMenuSelected: contextMenuSelected,
|
|
onRowClick: this.onRowClick,
|
|
onRowDoubleClick: this.onRowDoubleClick,
|
|
onRowRightClick: this.onRowRightClick,
|
|
tabIndex: this.props.tabIndex,
|
|
isSelectable: this.isSelectable,
|
|
onRowTouchEnd: this.onRowTouchEnd,
|
|
onRowMouseDown: this.onRowMouseDown,
|
|
onRowMouseUp: this.onRowMouseUp,
|
|
onRowToggle: this.onRowToggle,
|
|
onRowDragStart: this.onRowDragStart,
|
|
onRowDragOver: this.onRowDragOver,
|
|
onRowDragLeave: this.onRowDragLeave,
|
|
onRowDragEnd: this.onRowDragEnd,
|
|
onRowDrop: this.onRowDrop,
|
|
onRadioChange: this.onRadioChange,
|
|
onCheckboxChange: this.onCheckboxChange,
|
|
onCellClick: this.onCellClick,
|
|
onCellMouseDown: this.onCellMouseDown,
|
|
onCellMouseUp: this.onCellMouseUp,
|
|
editing: editing,
|
|
editingRows: this.props.editingRows,
|
|
editingMeta: this.props.editingMeta,
|
|
editMode: this.props.editMode,
|
|
onRowEditChange: this.props.onRowEditChange,
|
|
onEditingMetaChange: this.props.onEditingMetaChange,
|
|
groupRowsBy: this.props.groupRowsBy,
|
|
compareSelectionBy: this.props.compareSelectionBy,
|
|
dataKey: this.props.dataKey,
|
|
rowGroupMode: this.props.rowGroupMode,
|
|
onRowEditInit: this.props.onRowEditInit,
|
|
rowEditValidator: this.props.rowEditValidator,
|
|
onRowEditSave: this.props.onRowEditSave,
|
|
onRowEditComplete: this.props.onRowEditComplete,
|
|
onRowEditCancel: this.props.onRowEditCancel,
|
|
selection: this.props.selection,
|
|
allowRowSelection: allowRowSelection,
|
|
allowCellSelection: allowCellSelection,
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
selectionMode: this.props.selectionMode,
|
|
selectionModeInColumn: this.props.selectionModeInColumn,
|
|
cellClassName: this.props.cellClassName,
|
|
responsiveLayout: this.props.responsiveLayout,
|
|
frozenRow: this.props.frozenRow,
|
|
showSelectionElement: this.props.showSelectionElement,
|
|
showRowReorderElement: this.props.showRowReorderElement,
|
|
expanded: expanded,
|
|
expandedRowIcon: this.props.expandedRowIcon,
|
|
collapsedRowIcon: this.props.collapsedRowIcon,
|
|
rowClassName: this.props.rowClassName,
|
|
virtualScrollerOptions: this.props.virtualScrollerOptions
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderExpansion",
|
|
value: function renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan) {
|
|
if (expanded && !(isSubheaderGrouping && this.props.expandableRowGroups)) {
|
|
var content = ObjectUtils.getJSXElement(this.props.rowExpansionTemplate, rowData, {
|
|
index: index
|
|
});
|
|
var id = "".concat(this.props.tableSelector, "_content_").concat(index, "_expanded");
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
id: id,
|
|
className: "p-datatable-row-expansion",
|
|
role: "row"
|
|
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
role: "cell",
|
|
colSpan: colSpan
|
|
}, content));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderGroupFooter",
|
|
value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) {
|
|
if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index - this.props.first, expanded)) {
|
|
var content = ObjectUtils.getJSXElement(this.props.rowGroupFooterTemplate, rowData, {
|
|
index: index,
|
|
colSpan: colSpan,
|
|
props: this.props.tableProps
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
className: "p-rowgroup-footer",
|
|
role: "row"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this5 = this;
|
|
|
|
return this.props.value.map(function (rowData, i) {
|
|
var index = _this5.getVirtualScrollerOption('getItemOptions') ? _this5.getVirtualScrollerOption('getItemOptions')(i).index : _this5.props.first + i;
|
|
|
|
var key = _this5.getRowKey(rowData, index);
|
|
|
|
var expanded = _this5.isRowExpanded(rowData);
|
|
|
|
var isSubheaderGrouping = _this5.isSubheaderGrouping();
|
|
|
|
var colSpan = _this5.getColumnsLength();
|
|
|
|
var groupHeader = _this5.renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan);
|
|
|
|
var row = _this5.renderRow(rowData, index, expanded);
|
|
|
|
var expansion = _this5.renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan);
|
|
|
|
var groupFooter = _this5.renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: key
|
|
}, groupHeader, row, expansion, groupFooter);
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-datatable-tbody', this.props.className);
|
|
var content = this.props.empty ? this.renderEmptyContent() : this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("tbody", {
|
|
ref: this.ref,
|
|
className: className
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return TableBody;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1w(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var FooterCell = /*#__PURE__*/function (_Component) {
|
|
_inherits(FooterCell, _Component);
|
|
|
|
var _super = _createSuper$1w(FooterCell);
|
|
|
|
function FooterCell(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, FooterCell);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
styleObject: {}
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(FooterCell, [{
|
|
key: "getColumnProp",
|
|
value: function getColumnProp(prop) {
|
|
return this.props.column.props[prop];
|
|
}
|
|
}, {
|
|
key: "getStyle",
|
|
value: function getStyle() {
|
|
var footerStyle = this.getColumnProp('footerStyle');
|
|
var columnStyle = this.getColumnProp('style');
|
|
return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, this.state.styleObject) : Object.assign({}, columnStyle, footerStyle);
|
|
}
|
|
}, {
|
|
key: "updateStickyPosition",
|
|
value: function updateStickyPosition() {
|
|
if (this.getColumnProp('frozen')) {
|
|
var styleObject = _objectSpread$w({}, this.state.styleObject);
|
|
|
|
var align = this.getColumnProp('alignFrozen');
|
|
|
|
if (align === 'right') {
|
|
var right = 0;
|
|
var next = this.el.nextElementSibling;
|
|
|
|
if (next) {
|
|
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
|
}
|
|
|
|
styleObject['right'] = right + 'px';
|
|
} else {
|
|
var left = 0;
|
|
var prev = this.el.previousElementSibling;
|
|
|
|
if (prev) {
|
|
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
|
}
|
|
|
|
styleObject['left'] = left + 'px';
|
|
}
|
|
|
|
this.setState({
|
|
styleObject: styleObject
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var style = this.getStyle();
|
|
var align = this.getColumnProp('align');
|
|
var className = classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), _defineProperty({
|
|
'p-frozen-column': this.getColumnProp('frozen')
|
|
}, "p-align-".concat(align), !!align));
|
|
var colSpan = this.getColumnProp('colSpan');
|
|
var rowSpan = this.getColumnProp('rowSpan');
|
|
var content = ObjectUtils.getJSXElement(this.getColumnProp('footer'), {
|
|
props: this.props.tableProps
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
ref: function ref(el) {
|
|
return _this2.el = el;
|
|
},
|
|
style: style,
|
|
className: className,
|
|
role: "cell",
|
|
colSpan: colSpan,
|
|
rowSpan: rowSpan
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return FooterCell;
|
|
}(React.Component);
|
|
|
|
function _createSuper$1v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1v(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TableFooter = /*#__PURE__*/function (_Component) {
|
|
_inherits(TableFooter, _Component);
|
|
|
|
var _super = _createSuper$1v(TableFooter);
|
|
|
|
function TableFooter() {
|
|
_classCallCheck(this, TableFooter);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(TableFooter, [{
|
|
key: "hasFooter",
|
|
value: function hasFooter() {
|
|
return this.props.footerColumnGroup ? true : this.props.columns ? this.props.columns.some(function (col) {
|
|
return col && col.props.footer;
|
|
}) : false;
|
|
}
|
|
}, {
|
|
key: "renderGroupFooterCells",
|
|
value: function renderGroupFooterCells(row) {
|
|
var columns = React__default["default"].Children.toArray(row.props.children);
|
|
return this.renderFooterCells(columns);
|
|
}
|
|
}, {
|
|
key: "renderFooterCells",
|
|
value: function renderFooterCells(columns) {
|
|
var _this = this;
|
|
|
|
return React__default["default"].Children.map(columns, function (col, i) {
|
|
var isVisible = col ? !col.props.hidden : true;
|
|
var key = col ? col.props.columnKey || col.props.field || i : i;
|
|
return isVisible && /*#__PURE__*/React__default["default"].createElement(FooterCell, {
|
|
key: key,
|
|
tableProps: _this.props.tableProps,
|
|
column: col
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.footerColumnGroup) {
|
|
var rows = React__default["default"].Children.toArray(this.props.footerColumnGroup.props.children);
|
|
return rows.map(function (row, i) {
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
key: i,
|
|
role: "row"
|
|
}, _this2.renderGroupFooterCells(row));
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
role: "row"
|
|
}, this.renderFooterCells(this.props.columns));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.hasFooter()) {
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("tfoot", {
|
|
className: "p-datatable-tfoot"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return TableFooter;
|
|
}(React.Component);
|
|
|
|
function _createSuper$1u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1u(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var HeaderCheckbox = /*#__PURE__*/function (_Component) {
|
|
_inherits(HeaderCheckbox, _Component);
|
|
|
|
var _super = _createSuper$1u(HeaderCheckbox);
|
|
|
|
function HeaderCheckbox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, HeaderCheckbox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(HeaderCheckbox, [{
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled) {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
checked: !this.props.checked
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.code === 'Space') {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var boxClassName = classNames('p-checkbox-box p-component', {
|
|
'p-highlight': this.props.checked,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
var iconClassName = classNames('p-checkbox-icon', {
|
|
'pi pi-check': this.props.checked
|
|
});
|
|
var tabIndex = this.props.disabled ? null : 0;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-checkbox p-component",
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClassName,
|
|
role: "checkbox",
|
|
"aria-checked": this.props.checked,
|
|
tabIndex: tabIndex,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return HeaderCheckbox;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1t(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ColumnFilter = /*#__PURE__*/function (_Component) {
|
|
_inherits(ColumnFilter, _Component);
|
|
|
|
var _super = _createSuper$1t(ColumnFilter);
|
|
|
|
function ColumnFilter(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ColumnFilter);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
overlayVisible: false
|
|
};
|
|
_this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
|
|
_this.filterCallback = _this.filterCallback.bind(_assertThisInitialized(_this));
|
|
_this.filterApplyCallback = _this.filterApplyCallback.bind(_assertThisInitialized(_this));
|
|
_this.onOperatorChange = _this.onOperatorChange.bind(_assertThisInitialized(_this));
|
|
_this.addConstraint = _this.addConstraint.bind(_assertThisInitialized(_this));
|
|
_this.clearFilter = _this.clearFilter.bind(_assertThisInitialized(_this));
|
|
_this.applyFilter = _this.applyFilter.bind(_assertThisInitialized(_this));
|
|
_this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
|
|
_this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onContentKeyDown = _this.onContentKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onContentClick = _this.onContentClick.bind(_assertThisInitialized(_this));
|
|
_this.onContentMouseDown = _this.onContentMouseDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ColumnFilter, [{
|
|
key: "field",
|
|
get: function get() {
|
|
return this.getColumnProp('filterField') || this.getColumnProp('field');
|
|
}
|
|
}, {
|
|
key: "overlay",
|
|
get: function get() {
|
|
return this.overlayRef ? this.overlayRef.current : null;
|
|
}
|
|
}, {
|
|
key: "filterModel",
|
|
get: function get() {
|
|
return this.props.filters[this.field];
|
|
}
|
|
}, {
|
|
key: "filterStoreModel",
|
|
get: function get() {
|
|
return this.props.filtersStore[this.field];
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
if (this.props.filtersStore) {
|
|
var fieldFilter = this.props.filtersStore[this.field];
|
|
return fieldFilter && (fieldFilter.operator ? !this.isFilterBlank(fieldFilter.constraints[0].value) : !this.isFilterBlank(fieldFilter.value));
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "hasRowFilter",
|
|
value: function hasRowFilter() {
|
|
return this.filterModel && !this.isFilterBlank(this.filterModel.value);
|
|
}
|
|
}, {
|
|
key: "isFilterBlank",
|
|
value: function isFilterBlank(filter) {
|
|
return ObjectUtils.isEmpty(filter);
|
|
}
|
|
}, {
|
|
key: "isRowMatchModeSelected",
|
|
value: function isRowMatchModeSelected(matchMode) {
|
|
return this.filterModel && this.filterModel.matchMode === matchMode;
|
|
}
|
|
}, {
|
|
key: "showMenuButton",
|
|
value: function showMenuButton() {
|
|
return this.getColumnProp('showFilterMenu') && (this.props.display === 'row' ? this.getColumnProp('dataType') !== 'boolean' : true);
|
|
}
|
|
}, {
|
|
key: "matchModes",
|
|
value: function matchModes() {
|
|
return this.getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[this.findDataType()].map(function (key) {
|
|
return {
|
|
label: localeOption(key),
|
|
value: key
|
|
};
|
|
});
|
|
}
|
|
}, {
|
|
key: "isShowMatchModes",
|
|
value: function isShowMatchModes() {
|
|
return this.getColumnProp('dataType') !== 'boolean' && this.getColumnProp('showFilterMatchModes') && this.matchModes() && this.getColumnProp('showFilterMenuOptions');
|
|
}
|
|
}, {
|
|
key: "isShowOperator",
|
|
value: function isShowOperator() {
|
|
return this.getColumnProp('showFilterOperator') && this.filterModel && this.filterModel.operator && this.getColumnProp('showFilterMenuOptions');
|
|
}
|
|
}, {
|
|
key: "showRemoveIcon",
|
|
value: function showRemoveIcon() {
|
|
return this.fieldConstraints().length > 1;
|
|
}
|
|
}, {
|
|
key: "isShowAddConstraint",
|
|
value: function isShowAddConstraint() {
|
|
return this.getColumnProp('showAddButton') && this.filterModel && this.filterModel.operator && this.fieldConstraints() && this.fieldConstraints().length < this.getColumnProp('maxConstraints') && this.getColumnProp('showFilterMenuOptions');
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return !this.isTargetClicked(target) && this.overlayRef && this.overlayRef.current && !(this.overlayRef.current.isSameNode(target) || this.overlayRef.current.contains(target));
|
|
}
|
|
}, {
|
|
key: "isTargetClicked",
|
|
value: function isTargetClicked(target) {
|
|
return this.icon && (this.icon.isSameNode(target) || this.icon.contains(target));
|
|
}
|
|
}, {
|
|
key: "getColumnProp",
|
|
value: function getColumnProp(prop) {
|
|
return this.props.column.props[prop];
|
|
}
|
|
}, {
|
|
key: "getDefaultConstraint",
|
|
value: function getDefaultConstraint() {
|
|
if (this.props.filtersStore && this.filterStoreModel) {
|
|
if (this.filterStoreModel.operator) {
|
|
return {
|
|
matchMode: this.filterStoreModel.constraints[0].matchMode,
|
|
operator: this.filterStoreModel.operator
|
|
};
|
|
} else {
|
|
return {
|
|
matchMode: this.filterStoreModel.matchMode
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "findDataType",
|
|
value: function findDataType() {
|
|
var dataType = this.getColumnProp('dataType');
|
|
var matchMode = this.getColumnProp('filterMatchMode');
|
|
|
|
var hasMatchMode = function hasMatchMode(key) {
|
|
return PrimeReact.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;
|
|
}
|
|
}, {
|
|
key: "clearFilter",
|
|
value: function clearFilter() {
|
|
var field = this.field;
|
|
var filterClearCallback = this.getColumnProp('onFilterClear');
|
|
var defaultConstraint = this.getDefaultConstraint();
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
if (filters[field].operator) {
|
|
filters[field].constraints.splice(1);
|
|
filters[field].operator = defaultConstraint.operator;
|
|
filters[field].constraints[0] = {
|
|
value: null,
|
|
matchMode: defaultConstraint.matchMode
|
|
};
|
|
} else {
|
|
filters[field].value = null;
|
|
filters[field].matchMode = defaultConstraint.matchMode;
|
|
}
|
|
|
|
filterClearCallback && filterClearCallback();
|
|
this.props.onFilterChange(filters);
|
|
this.props.onFilterApply();
|
|
this.hide();
|
|
}
|
|
}, {
|
|
key: "applyFilter",
|
|
value: function applyFilter() {
|
|
var filterApplyClickCallback = this.getColumnProp('onFilterApplyClick');
|
|
filterApplyClickCallback && filterApplyClickCallback({
|
|
field: this.field,
|
|
constraints: this.filterModel
|
|
});
|
|
this.props.onFilterApply();
|
|
this.hide();
|
|
}
|
|
}, {
|
|
key: "toggleMenu",
|
|
value: function toggleMenu() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
overlayVisible: !prevState.overlayVisible
|
|
};
|
|
});
|
|
}
|
|
}, {
|
|
key: "onToggleButtonKeyDown",
|
|
value: function onToggleButtonKeyDown(event) {
|
|
switch (event.key) {
|
|
case 'Escape':
|
|
case 'Tab':
|
|
this.hide();
|
|
break;
|
|
|
|
case 'ArrowDown':
|
|
if (this.state.overlayVisible) {
|
|
var focusable = DomHandler.getFirstFocusableElement(this.overlay);
|
|
focusable && focusable.focus();
|
|
event.preventDefault();
|
|
} else if (event.altKey) {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onContentKeyDown",
|
|
value: function onContentKeyDown(event) {
|
|
if (event.key === 'Escape') {
|
|
this.hide();
|
|
this.icon && this.icon.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInputChange",
|
|
value: function onInputChange(event, index) {
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
var value = event.target.value;
|
|
|
|
if (this.props.display === 'menu') {
|
|
filters[this.field].constraints[index].value = value;
|
|
} else {
|
|
filters[this.field].value = value;
|
|
}
|
|
|
|
this.props.onFilterChange(filters);
|
|
|
|
if (!this.getColumnProp('showApplyButton') || this.props.display === 'row') {
|
|
this.props.onFilterApply();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRowMatchModeChange",
|
|
value: function onRowMatchModeChange(matchMode) {
|
|
var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange');
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
filters[this.field].matchMode = matchMode;
|
|
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
|
|
field: this.field,
|
|
matchMode: matchMode
|
|
});
|
|
this.props.onFilterChange(filters);
|
|
this.props.onFilterApply();
|
|
this.hide();
|
|
}
|
|
}, {
|
|
key: "onRowMatchModeKeyDown",
|
|
value: function onRowMatchModeKeyDown(event, matchMode, clear) {
|
|
var item = event.target;
|
|
|
|
switch (event.key) {
|
|
case 'ArrowDown':
|
|
var nextItem = this.findNextItem(item);
|
|
|
|
if (nextItem) {
|
|
item.removeAttribute('tabindex');
|
|
nextItem.tabIndex = 0;
|
|
nextItem.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'ArrowUp':
|
|
var prevItem = this.findPrevItem(item);
|
|
|
|
if (prevItem) {
|
|
item.removeAttribute('tabindex');
|
|
prevItem.tabIndex = 0;
|
|
prevItem.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
|
|
case 'Enter':
|
|
clear ? this.clearFilter() : this.onRowMatchModeChange(matchMode.value);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOperatorChange",
|
|
value: function onOperatorChange(e) {
|
|
var filterOperationChangeCallback = this.getColumnProp('onFilterOperatorChange');
|
|
var value = e.value;
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
filters[this.field].operator = value;
|
|
this.props.onFilterChange(filters);
|
|
filterOperationChangeCallback && filterOperationChangeCallback({
|
|
field: this.field,
|
|
operator: value
|
|
});
|
|
|
|
if (!this.getColumnProp('showApplyButton')) {
|
|
this.props.onFilterApply();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMenuMatchModeChange",
|
|
value: function onMenuMatchModeChange(value, index) {
|
|
var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange');
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
filters[this.field].constraints[index].matchMode = value;
|
|
this.props.onFilterChange(filters);
|
|
filterMatchModeChangeCallback && filterMatchModeChangeCallback({
|
|
field: this.field,
|
|
matchMode: value,
|
|
index: index
|
|
});
|
|
|
|
if (!this.getColumnProp('showApplyButton')) {
|
|
this.props.onFilterApply();
|
|
}
|
|
}
|
|
}, {
|
|
key: "addConstraint",
|
|
value: function addConstraint() {
|
|
var filterConstraintAddCallback = this.getColumnProp('onFilterConstraintAdd');
|
|
var defaultConstraint = this.getDefaultConstraint();
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
var newConstraint = {
|
|
value: null,
|
|
matchMode: defaultConstraint.matchMode
|
|
};
|
|
filters[this.field].constraints.push(newConstraint);
|
|
filterConstraintAddCallback && filterConstraintAddCallback({
|
|
field: this.field,
|
|
constraint: newConstraint
|
|
});
|
|
this.props.onFilterChange(filters);
|
|
|
|
if (!this.getColumnProp('showApplyButton')) {
|
|
this.props.onFilterApply();
|
|
}
|
|
}
|
|
}, {
|
|
key: "removeConstraint",
|
|
value: function removeConstraint(index) {
|
|
var filterConstraintRemoveCallback = this.getColumnProp('onFilterConstraintRemove');
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
var removedConstraint = filters[this.field].constraints.splice(index, 1);
|
|
filterConstraintRemoveCallback && filterConstraintRemoveCallback({
|
|
field: this.field,
|
|
constraint: removedConstraint
|
|
});
|
|
this.props.onFilterChange(filters);
|
|
|
|
if (!this.getColumnProp('showApplyButton')) {
|
|
this.props.onFilterApply();
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;else return item.parentElement.firstElementChild;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;else return item.parentElement.lastElementChild;
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onContentClick",
|
|
value: function onContentClick(event) {
|
|
this.selfClick = true;
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.overlay
|
|
});
|
|
}
|
|
}, {
|
|
key: "onContentMouseDown",
|
|
value: function onContentMouseDown() {
|
|
this.selfClick = true;
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
var _this2 = this;
|
|
|
|
ZIndexUtils.set('overlay', this.overlay, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact.appendTo, false);
|
|
this.bindOutsideClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
|
|
this.overlayEventListener = function (e) {
|
|
if (!_this2.isOutsideClicked(e.target)) {
|
|
_this2.selfClick = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', this.overlayEventListener);
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.onOverlayHide();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlay);
|
|
}
|
|
}, {
|
|
key: "onOverlayHide",
|
|
value: function onOverlayHide() {
|
|
this.unbindOutsideClickListener();
|
|
this.unbindResizeListener();
|
|
this.unbindScrollListener();
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
}, {
|
|
key: "bindOutsideClickListener",
|
|
value: function bindOutsideClickListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.outsideClickListener) {
|
|
this.outsideClickListener = function (event) {
|
|
if (!_this3.selfClick && _this3.isOutsideClicked(event.target)) {
|
|
_this3.hide();
|
|
}
|
|
|
|
_this3.selfClick = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.outsideClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindOutsideClickListener",
|
|
value: function unbindOutsideClickListener() {
|
|
if (this.outsideClickListener) {
|
|
document.removeEventListener('click', this.outsideClickListener);
|
|
this.outsideClickListener = null;
|
|
this.selfClick = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon, function () {
|
|
if (_this4.state.overlayVisible) {
|
|
_this4.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this5.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this5.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "fieldConstraints",
|
|
value: function fieldConstraints() {
|
|
return this.filterModel ? this.filterModel.constraints || [this.filterModel] : [];
|
|
}
|
|
}, {
|
|
key: "operator",
|
|
value: function operator() {
|
|
return this.filterModel.operator;
|
|
}
|
|
}, {
|
|
key: "operatorOptions",
|
|
value: function operatorOptions() {
|
|
return [{
|
|
label: localeOption('matchAll'),
|
|
value: FilterOperator.AND
|
|
}, {
|
|
label: localeOption('matchAny'),
|
|
value: FilterOperator.OR
|
|
}];
|
|
}
|
|
}, {
|
|
key: "noFilterLabel",
|
|
value: function noFilterLabel() {
|
|
return localeOption('noFilter');
|
|
}
|
|
}, {
|
|
key: "removeRuleButtonLabel",
|
|
value: function removeRuleButtonLabel() {
|
|
return localeOption('removeRule');
|
|
}
|
|
}, {
|
|
key: "addRuleButtonLabel",
|
|
value: function addRuleButtonLabel() {
|
|
return localeOption('addRule');
|
|
}
|
|
}, {
|
|
key: "clearButtonLabel",
|
|
value: function clearButtonLabel() {
|
|
return localeOption('clear');
|
|
}
|
|
}, {
|
|
key: "applyButtonLabel",
|
|
value: function applyButtonLabel() {
|
|
return localeOption('apply');
|
|
}
|
|
}, {
|
|
key: "filterCallback",
|
|
value: function filterCallback(value) {
|
|
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
|
|
var filters = _objectSpread$v({}, this.props.filters);
|
|
|
|
var meta = filters[this.field];
|
|
this.props.display === 'menu' && meta && meta.operator ? filters[this.field].constraints[index].value = value : filters[this.field].value = value;
|
|
this.props.onFilterChange(filters);
|
|
}
|
|
}, {
|
|
key: "filterApplyCallback",
|
|
value: function filterApplyCallback() {
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
args && this.filterCallback(args[0], args[1]);
|
|
this.props.onFilterApply();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.props.display === 'menu' && this.state.overlayVisible) {
|
|
DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact.appendTo, false);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.overlayEventListener) {
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
|
|
if (this.overlay) {
|
|
ZIndexUtils.clear(this.overlay);
|
|
this.onOverlayHide();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderFilterElement",
|
|
value: function renderFilterElement(model, index) {
|
|
var _this6 = this;
|
|
|
|
var value = model ? model.value : null;
|
|
return this.getColumnProp('filterElement') ? ObjectUtils.getJSXElement(this.getColumnProp('filterElement'), {
|
|
field: this.field,
|
|
index: index,
|
|
filterModel: model,
|
|
value: value,
|
|
filterApplyCallback: this.filterApplyCallback,
|
|
filterCallback: this.filterCallback
|
|
}) : /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
type: this.getColumnProp('filterType'),
|
|
value: value || '',
|
|
onChange: function onChange(e) {
|
|
return _this6.onInputChange(e, index);
|
|
},
|
|
className: "p-column-filter",
|
|
placeholder: this.getColumnProp('filterPlaceholder'),
|
|
maxLength: this.getColumnProp('filterMaxLength')
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderRowFilterElement",
|
|
value: function renderRowFilterElement() {
|
|
if (this.props.display === 'row') {
|
|
var content = this.renderFilterElement(this.filterModel, 0);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-fluid p-column-filter-element"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuFilterElement",
|
|
value: function renderMenuFilterElement(fieldConstraint, index) {
|
|
if (this.props.display === 'menu') {
|
|
return this.renderFilterElement(fieldConstraint, index);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuButton",
|
|
value: function renderMenuButton() {
|
|
var _this7 = this;
|
|
|
|
if (this.showMenuButton()) {
|
|
var className = classNames('p-column-filter-menu-button p-link', {
|
|
'p-column-filter-menu-button-open': this.state.overlayVisible,
|
|
'p-column-filter-menu-button-active': this.hasFilter()
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
ref: function ref(el) {
|
|
return _this7.icon = el;
|
|
},
|
|
type: "button",
|
|
className: className,
|
|
"aria-haspopup": true,
|
|
"aria-expanded": this.state.overlayVisible,
|
|
onClick: this.toggleMenu,
|
|
onKeyDown: this.onToggleButtonKeyDown
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-filter-icon pi-filter"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderClearButton",
|
|
value: function renderClearButton() {
|
|
if (this.getColumnProp('showClearButton') && this.props.display === 'row') {
|
|
var className = classNames('p-column-filter-clear-button p-link', {
|
|
'p-hidden-space': !this.hasRowFilter()
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: className,
|
|
type: "button",
|
|
onClick: this.clearFilter
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-filter-slash"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderRowItems",
|
|
value: function renderRowItems() {
|
|
var _this8 = this;
|
|
|
|
if (this.isShowMatchModes()) {
|
|
var matchModes = this.matchModes();
|
|
var noFilterLabel = this.noFilterLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-column-filter-row-items"
|
|
}, matchModes.map(function (matchMode, i) {
|
|
var value = matchMode.value,
|
|
label = matchMode.label;
|
|
var className = classNames('p-column-filter-row-item', {
|
|
'p-highlight': _this8.isRowMatchModeSelected(value)
|
|
});
|
|
var tabIndex = i === 0 ? 0 : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
key: label,
|
|
onClick: function onClick() {
|
|
return _this8.onRowMatchModeChange(value);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this8.onRowMatchModeKeyDown(e, matchMode);
|
|
},
|
|
tabIndex: tabIndex
|
|
}, label);
|
|
}), /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-column-filter-separator"
|
|
}), /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-column-filter-row-item",
|
|
onClick: this.clearFilter,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this8.onRowMatchModeKeyDown(e, null, true);
|
|
}
|
|
}, noFilterLabel));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderOperator",
|
|
value: function renderOperator() {
|
|
if (this.isShowOperator()) {
|
|
var options = this.operatorOptions();
|
|
var value = this.operator();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-column-filter-operator"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Dropdown, {
|
|
options: options,
|
|
value: value,
|
|
onChange: this.onOperatorChange,
|
|
className: "p-column-filter-operator-dropdown"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMatchModeDropdown",
|
|
value: function renderMatchModeDropdown(constraint, index) {
|
|
var _this9 = this;
|
|
|
|
if (this.isShowMatchModes()) {
|
|
var options = this.matchModes();
|
|
return /*#__PURE__*/React__default["default"].createElement(Dropdown, {
|
|
options: options,
|
|
value: constraint.matchMode,
|
|
onChange: function onChange(e) {
|
|
return _this9.onMenuMatchModeChange(e.value, index);
|
|
},
|
|
className: "p-column-filter-matchmode-dropdown"
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderRemoveButton",
|
|
value: function renderRemoveButton(index) {
|
|
var _this10 = this;
|
|
|
|
if (this.showRemoveIcon()) {
|
|
var removeRuleLabel = this.removeRuleButtonLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-trash",
|
|
className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
|
|
onClick: function onClick() {
|
|
return _this10.removeConstraint(index);
|
|
},
|
|
label: removeRuleLabel
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderConstraints",
|
|
value: function renderConstraints() {
|
|
var _this11 = this;
|
|
|
|
var fieldConstraints = this.fieldConstraints();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-column-filter-constraints"
|
|
}, fieldConstraints.map(function (fieldConstraint, i) {
|
|
var matchModeDropdown = _this11.renderMatchModeDropdown(fieldConstraint, i);
|
|
|
|
var menuFilterElement = _this11.renderMenuFilterElement(fieldConstraint, i);
|
|
|
|
var removeButton = _this11.renderRemoveButton(i);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: i,
|
|
className: "p-column-filter-constraint"
|
|
}, matchModeDropdown, menuFilterElement, /*#__PURE__*/React__default["default"].createElement("div", null, removeButton));
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderAddRule",
|
|
value: function renderAddRule() {
|
|
if (this.isShowAddConstraint()) {
|
|
var addRuleLabel = this.addRuleButtonLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-column-filter-add-rule"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
label: addRuleLabel,
|
|
icon: "pi pi-plus",
|
|
className: "p-column-filter-add-button p-button-text p-button-sm",
|
|
onClick: this.addConstraint
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilterClearButton",
|
|
value: function renderFilterClearButton() {
|
|
if (this.getColumnProp('showClearButton')) {
|
|
if (!this.getColumnProp('filterClear')) {
|
|
var clearLabel = this.clearButtonLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
className: "p-button-outlined p-button-sm",
|
|
onClick: this.clearFilter,
|
|
label: clearLabel
|
|
});
|
|
}
|
|
|
|
return ObjectUtils.getJSXElement(this.getColumnProp('filterClear'), {
|
|
field: this.field,
|
|
filterModel: this.filterModel,
|
|
filterClearCallback: this.clearFilter
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilterApplyButton",
|
|
value: function renderFilterApplyButton() {
|
|
if (this.getColumnProp('showApplyButton')) {
|
|
if (!this.getColumnProp('filterApply')) {
|
|
var applyLabel = this.applyButtonLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
className: "p-button-sm",
|
|
onClick: this.applyFilter,
|
|
label: applyLabel
|
|
});
|
|
}
|
|
|
|
return ObjectUtils.getJSXElement(this.getColumnProp('filterApply'), {
|
|
field: this.field,
|
|
filterModel: this.filterModel,
|
|
filterApplyCallback: this.applyFilter
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderButtonBar",
|
|
value: function renderButtonBar() {
|
|
var clearButton = this.renderFilterClearButton();
|
|
var applyButton = this.renderFilterApplyButton();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-column-filter-buttonbar"
|
|
}, clearButton, applyButton);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var operator = this.renderOperator();
|
|
var constraints = this.renderConstraints();
|
|
var addRule = this.renderAddRule();
|
|
var buttonBar = this.renderButtonBar();
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, operator, constraints, addRule, buttonBar);
|
|
}
|
|
}, {
|
|
key: "renderOverlay",
|
|
value: function renderOverlay() {
|
|
var style = this.getColumnProp('filterMenuStyle');
|
|
var className = classNames('p-column-filter-overlay p-component p-fluid', this.getColumnProp('filterMenuClassName'), {
|
|
'p-column-filter-overlay-menu': this.props.display === 'menu',
|
|
'p-input-filled': PrimeReact.inputStyle === 'filled',
|
|
'p-ripple-disabled': PrimeReact.ripple === false
|
|
});
|
|
var filterHeader = ObjectUtils.getJSXElement(this.getColumnProp('filterHeader'), {
|
|
field: this.field,
|
|
filterModel: this.filterModel,
|
|
filterApplyCallback: this.filterApplyCallback
|
|
});
|
|
var filterFooter = ObjectUtils.getJSXElement(this.getColumnProp('filterFooter'), {
|
|
field: this.field,
|
|
filterModel: this.filterModel,
|
|
filterApplyCallback: this.filterApplyCallback
|
|
});
|
|
var items = this.props.display === 'row' ? this.renderRowItems() : this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, null, /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.overlayVisible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
unmountOnExit: true,
|
|
onEnter: this.onOverlayEnter,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
style: style,
|
|
className: className,
|
|
onKeyDown: this.onContentKeyDown,
|
|
onClick: this.onContentClick,
|
|
onMouseDown: this.onContentMouseDown
|
|
}, filterHeader, items, filterFooter)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-column-filter p-fluid', {
|
|
'p-column-filter-row': this.props.display === 'row',
|
|
'p-column-filter-menu': this.props.display === 'menu'
|
|
});
|
|
var rowFilterElement = this.renderRowFilterElement();
|
|
var menuButton = this.renderMenuButton();
|
|
var clearButton = this.renderClearButton();
|
|
var overlay = this.renderOverlay();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, rowFilterElement, menuButton, clearButton, overlay);
|
|
}
|
|
}]);
|
|
|
|
return ColumnFilter;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1s(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var HeaderCell = /*#__PURE__*/function (_Component) {
|
|
_inherits(HeaderCell, _Component);
|
|
|
|
var _super = _createSuper$1s(HeaderCell);
|
|
|
|
function HeaderCell(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, HeaderCell);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
styleObject: {}
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); // drag
|
|
|
|
_this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this)); // resize
|
|
|
|
_this.onResizerMouseDown = _this.onResizerMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onResizerClick = _this.onResizerClick.bind(_assertThisInitialized(_this));
|
|
_this.onResizerDoubleClick = _this.onResizerDoubleClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(HeaderCell, [{
|
|
key: "isBadgeVisible",
|
|
value: function isBadgeVisible() {
|
|
return this.props.multiSortMeta && this.props.multiSortMeta.length > 1;
|
|
}
|
|
}, {
|
|
key: "isSortableDisabled",
|
|
value: function isSortableDisabled() {
|
|
return !this.getColumnProp('sortable') || this.getColumnProp('sortable') && (this.props.allSortableDisabled || this.getColumnProp('sortableDisabled'));
|
|
}
|
|
}, {
|
|
key: "getColumnProp",
|
|
value: function getColumnProp() {
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return this.props.column ? typeof args[0] === 'string' ? this.props.column.props[args[0]] : (args[0] || this.props.column).props[args[1]] : null;
|
|
}
|
|
}, {
|
|
key: "getStyle",
|
|
value: function getStyle() {
|
|
var headerStyle = this.getColumnProp('headerStyle');
|
|
var columnStyle = this.getColumnProp('style');
|
|
return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, this.state.styleObject) : Object.assign({}, columnStyle, headerStyle);
|
|
}
|
|
}, {
|
|
key: "getMultiSortMetaIndex",
|
|
value: function getMultiSortMetaIndex() {
|
|
var _this2 = this;
|
|
|
|
return this.props.multiSortMeta.findIndex(function (meta) {
|
|
return meta.field === _this2.getColumnProp('field') || meta.field === _this2.getColumnProp('sortField');
|
|
});
|
|
}
|
|
}, {
|
|
key: "getSortMeta",
|
|
value: function getSortMeta() {
|
|
var sorted = false;
|
|
var sortOrder = 0;
|
|
var metaIndex = -1;
|
|
|
|
if (this.props.sortMode === 'single') {
|
|
sorted = this.props.sortField && (this.props.sortField === this.getColumnProp('field') || this.props.sortField === this.getColumnProp('sortField'));
|
|
sortOrder = sorted ? this.props.sortOrder : 0;
|
|
} else if (this.props.sortMode === 'multiple') {
|
|
metaIndex = this.getMultiSortMetaIndex();
|
|
|
|
if (metaIndex > -1) {
|
|
sorted = true;
|
|
sortOrder = this.props.multiSortMeta[metaIndex].order;
|
|
}
|
|
}
|
|
|
|
return {
|
|
sorted: sorted,
|
|
sortOrder: sortOrder,
|
|
metaIndex: metaIndex
|
|
};
|
|
}
|
|
}, {
|
|
key: "getAriaSort",
|
|
value: function getAriaSort(_ref) {
|
|
var sorted = _ref.sorted,
|
|
sortOrder = _ref.sortOrder;
|
|
|
|
if (this.getColumnProp('sortable')) {
|
|
var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
|
|
if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none';
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "updateStickyPosition",
|
|
value: function updateStickyPosition() {
|
|
if (this.getColumnProp('frozen')) {
|
|
var styleObject = _objectSpread$u({}, this.state.styleObject);
|
|
|
|
var align = this.getColumnProp('alignFrozen');
|
|
|
|
if (align === 'right') {
|
|
var right = 0;
|
|
var next = this.el.nextElementSibling;
|
|
|
|
if (next) {
|
|
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
|
}
|
|
|
|
styleObject['right'] = right + 'px';
|
|
} else {
|
|
var left = 0;
|
|
var prev = this.el.previousElementSibling;
|
|
|
|
if (prev) {
|
|
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
|
}
|
|
|
|
styleObject['left'] = left + 'px';
|
|
}
|
|
|
|
var filterRow = this.el.parentElement.nextElementSibling;
|
|
|
|
if (filterRow) {
|
|
var index = DomHandler.index(this.el);
|
|
filterRow.children[index].style.left = styleObject['left'];
|
|
filterRow.children[index].style.right = styleObject['right'];
|
|
}
|
|
|
|
var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right'];
|
|
!isSameStyle && this.setState({
|
|
styleObject: styleObject
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateSortableDisabled",
|
|
value: function updateSortableDisabled(prevColumn) {
|
|
if (this.getColumnProp(prevColumn, 'sortableDisabled') !== this.getColumnProp('sortableDisabled') || this.getColumnProp(prevColumn, 'sortable') !== this.getColumnProp('sortable')) {
|
|
this.props.onSortableChange();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.isSortableDisabled()) {
|
|
var targetNode = event.target;
|
|
|
|
if (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();
|
|
this.props.onSortChange({
|
|
originalEvent: event,
|
|
column: this.props.column,
|
|
sortableDisabledFields: this.props.sortableDisabledFields
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event) {
|
|
this.props.onColumnMouseDown({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.key === 'Enter' && event.currentTarget === this.el && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event) {
|
|
this.props.onColumnDragStart({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event) {
|
|
this.props.onColumnDragOver({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
this.props.onColumnDragLeave({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
this.props.onColumnDrop({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onResizerMouseDown",
|
|
value: function onResizerMouseDown(event) {
|
|
this.props.onColumnResizeStart({
|
|
originalEvent: event,
|
|
column: this.props.column
|
|
});
|
|
}
|
|
}, {
|
|
key: "onResizerClick",
|
|
value: function onResizerClick(event) {
|
|
if (this.props.onColumnResizerClick) {
|
|
this.props.onColumnResizerClick({
|
|
originalEvent: event,
|
|
element: event.currentTarget.parentElement,
|
|
column: this.props.column
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onResizerDoubleClick",
|
|
value: function onResizerDoubleClick(event) {
|
|
if (this.props.onColumnResizerDoubleClick) {
|
|
this.props.onColumnResizerDoubleClick({
|
|
originalEvent: event,
|
|
element: event.currentTarget.parentElement,
|
|
column: this.props.column
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.getColumnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
|
|
this.updateSortableDisabled(prevProps.column);
|
|
}
|
|
}, {
|
|
key: "renderResizer",
|
|
value: function renderResizer() {
|
|
if (this.props.resizableColumns && !this.getColumnProp('frozen')) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-column-resizer",
|
|
onMouseDown: this.onResizerMouseDown,
|
|
onClick: this.onResizerClick,
|
|
onDoubleClick: this.onResizerDoubleClick
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderTitle",
|
|
value: function renderTitle() {
|
|
var title = ObjectUtils.getJSXElement(this.getColumnProp('header'), {
|
|
props: this.props.tableProps
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-column-title"
|
|
}, title);
|
|
}
|
|
}, {
|
|
key: "renderSortIcon",
|
|
value: function renderSortIcon(_ref2) {
|
|
var sorted = _ref2.sorted,
|
|
sortOrder = _ref2.sortOrder;
|
|
|
|
if (this.getColumnProp('sortable')) {
|
|
var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
|
|
var className = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderBadge",
|
|
value: function renderBadge(_ref3) {
|
|
var metaIndex = _ref3.metaIndex;
|
|
|
|
if (metaIndex !== -1 && this.isBadgeVisible()) {
|
|
var value = this.props.groupRowsBy && this.props.groupRowsBy === this.props.groupRowSortField ? metaIndex : metaIndex + 1;
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-sortable-column-badge"
|
|
}, value);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCheckbox",
|
|
value: function renderCheckbox() {
|
|
if (this.props.showSelectAll && this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') {
|
|
var allRowsSelected = this.props.allRowsSelected(this.props.value);
|
|
return /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, {
|
|
checked: allRowsSelected,
|
|
onChange: this.props.onColumnCheckboxChange,
|
|
disabled: this.props.empty
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilter",
|
|
value: function renderFilter() {
|
|
if (this.props.filterDisplay === 'menu' && this.getColumnProp('filter')) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ColumnFilter, {
|
|
display: "menu",
|
|
column: this.props.column,
|
|
filters: this.props.filters,
|
|
onFilterChange: this.props.onFilterChange,
|
|
onFilterApply: this.props.onFilterApply,
|
|
filtersStore: this.props.filtersStore
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader(sortMeta) {
|
|
var title = this.renderTitle();
|
|
var sortIcon = this.renderSortIcon(sortMeta);
|
|
var badge = this.renderBadge(sortMeta);
|
|
var checkbox = this.renderCheckbox();
|
|
var filter = this.renderFilter();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-column-header-content"
|
|
}, title, sortIcon, badge, checkbox, filter);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this3 = this;
|
|
|
|
var isSortableDisabled = this.isSortableDisabled();
|
|
var sortMeta = this.getSortMeta();
|
|
var style = this.getStyle();
|
|
var align = this.getColumnProp('alignHeader') || this.getColumnProp('align');
|
|
var className = classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), _defineProperty({
|
|
'p-sortable-column': this.getColumnProp('sortable'),
|
|
'p-resizable-column': this.props.resizableColumns,
|
|
'p-highlight': sortMeta.sorted,
|
|
'p-frozen-column': this.getColumnProp('frozen'),
|
|
'p-selection-column': this.getColumnProp('selectionMode'),
|
|
'p-sortable-disabled': this.getColumnProp('sortable') && isSortableDisabled,
|
|
'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable')
|
|
}, "p-align-".concat(align), !!align));
|
|
var tabIndex = this.getColumnProp('sortable') && !isSortableDisabled ? this.props.tabIndex : null;
|
|
var colSpan = this.getColumnProp('colSpan');
|
|
var rowSpan = this.getColumnProp('rowSpan');
|
|
var ariaSort = this.getAriaSort(sortMeta);
|
|
var resizer = this.renderResizer();
|
|
var header = this.renderHeader(sortMeta);
|
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
ref: function ref(el) {
|
|
return _this3.el = el;
|
|
},
|
|
style: style,
|
|
className: className,
|
|
tabIndex: tabIndex,
|
|
role: "columnheader",
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown,
|
|
onMouseDown: this.onMouseDown,
|
|
onDragStart: this.onDragStart,
|
|
onDragOver: this.onDragOver,
|
|
onDragLeave: this.onDragLeave,
|
|
onDrop: this.onDrop,
|
|
colSpan: colSpan,
|
|
rowSpan: rowSpan,
|
|
"aria-sort": ariaSort
|
|
}, resizer, header);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return this.renderElement();
|
|
}
|
|
}]);
|
|
|
|
return HeaderCell;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1r(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TableHeader = /*#__PURE__*/function (_Component) {
|
|
_inherits(TableHeader, _Component);
|
|
|
|
var _super = _createSuper$1r(TableHeader);
|
|
|
|
function TableHeader(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TableHeader);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
sortableDisabledFields: [],
|
|
allSortableDisabled: false,
|
|
styleObject: {}
|
|
};
|
|
_this.onSortableChange = _this.onSortableChange.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TableHeader, [{
|
|
key: "isSingleSort",
|
|
value: function isSingleSort() {
|
|
return this.props.sortMode === 'single';
|
|
}
|
|
}, {
|
|
key: "isMultipleSort",
|
|
value: function isMultipleSort() {
|
|
return this.props.sortMode === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isAllSortableDisabled",
|
|
value: function isAllSortableDisabled() {
|
|
return this.isSingleSort() && this.state.allSortableDisabled;
|
|
}
|
|
}, {
|
|
key: "isColumnSorted",
|
|
value: function isColumnSorted(column) {
|
|
return this.props.sortField !== null ? column.props.field === this.props.sortField || column.props.sortField === this.props.sortField : false;
|
|
}
|
|
}, {
|
|
key: "updateSortableDisabled",
|
|
value: function updateSortableDisabled() {
|
|
var _this2 = this;
|
|
|
|
if (this.isSingleSort() || this.isMultipleSort() && this.props.onSortChange) {
|
|
var sortableDisabledFields = [];
|
|
var allSortableDisabled = false;
|
|
this.props.columns.forEach(function (column) {
|
|
if (column.props.sortableDisabled) {
|
|
sortableDisabledFields.push(column.props.sortField || column.props.field);
|
|
|
|
if (!allSortableDisabled && _this2.isColumnSorted(column)) {
|
|
allSortableDisabled = true;
|
|
}
|
|
}
|
|
});
|
|
this.setState({
|
|
sortableDisabledFields: sortableDisabledFields,
|
|
allSortableDisabled: allSortableDisabled
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSortableChange",
|
|
value: function onSortableChange() {
|
|
this.updateSortableDisabled();
|
|
}
|
|
}, {
|
|
key: "onCheckboxChange",
|
|
value: function onCheckboxChange(e) {
|
|
this.props.onColumnCheckboxChange(e, this.props.value);
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateSortableDisabled();
|
|
}
|
|
}, {
|
|
key: "renderGroupHeaderCells",
|
|
value: function renderGroupHeaderCells(row) {
|
|
var columns = React__default["default"].Children.toArray(row.props.children);
|
|
return this.renderHeaderCells(columns);
|
|
}
|
|
}, {
|
|
key: "renderHeaderCells",
|
|
value: function renderHeaderCells(columns) {
|
|
var _this3 = this;
|
|
|
|
return React__default["default"].Children.map(columns, function (col, i) {
|
|
var isVisible = col ? !col.props.hidden : true;
|
|
var key = col ? col.props.columnKey || col.props.field || i : i;
|
|
return isVisible && /*#__PURE__*/React__default["default"].createElement(HeaderCell, {
|
|
key: key,
|
|
value: _this3.props.value,
|
|
tableProps: _this3.props.tableProps,
|
|
column: col,
|
|
tabIndex: _this3.props.tabIndex,
|
|
empty: _this3.props.empty,
|
|
resizableColumns: _this3.props.resizableColumns,
|
|
groupRowsBy: _this3.props.groupRowsBy,
|
|
groupRowSortField: _this3.props.groupRowSortField,
|
|
sortMode: _this3.props.sortMode,
|
|
sortField: _this3.props.sortField,
|
|
sortOrder: _this3.props.sortOrder,
|
|
multiSortMeta: _this3.props.multiSortMeta,
|
|
allSortableDisabled: _this3.isAllSortableDisabled(),
|
|
onSortableChange: _this3.onSortableChange,
|
|
sortableDisabledFields: _this3.state.sortableDisabledFields,
|
|
filterDisplay: _this3.props.filterDisplay,
|
|
filters: _this3.props.filters,
|
|
filtersStore: _this3.props.filtersStore,
|
|
onFilterChange: _this3.props.onFilterChange,
|
|
onFilterApply: _this3.props.onFilterApply,
|
|
onColumnMouseDown: _this3.props.onColumnMouseDown,
|
|
onColumnDragStart: _this3.props.onColumnDragStart,
|
|
onColumnDragOver: _this3.props.onColumnDragOver,
|
|
onColumnDragLeave: _this3.props.onColumnDragLeave,
|
|
onColumnDrop: _this3.props.onColumnDrop,
|
|
onColumnResizeStart: _this3.props.onColumnResizeStart,
|
|
onColumnResizerClick: _this3.props.onColumnResizerClick,
|
|
onColumnResizerDoubleClick: _this3.props.onColumnResizerDoubleClick,
|
|
showSelectAll: _this3.props.showSelectAll,
|
|
allRowsSelected: _this3.props.allRowsSelected,
|
|
onColumnCheckboxChange: _this3.onCheckboxChange,
|
|
reorderableColumns: _this3.props.reorderableColumns,
|
|
onSortChange: _this3.props.onSortChange
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderCheckbox",
|
|
value: function renderCheckbox(selectionMode) {
|
|
if (this.props.showSelectAll && selectionMode === 'multiple') {
|
|
var allRowsSelected = this.props.allRowsSelected(this.props.value);
|
|
return /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, {
|
|
checked: allRowsSelected,
|
|
onChange: this.onCheckboxChange,
|
|
disabled: this.props.empty
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilter",
|
|
value: function renderFilter(column, filter) {
|
|
if (filter) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ColumnFilter, {
|
|
display: "row",
|
|
column: column,
|
|
filters: this.props.filters,
|
|
filtersStore: this.props.filtersStore,
|
|
onFilterChange: this.props.onFilterChange,
|
|
onFilterApply: this.props.onFilterApply
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilterCells",
|
|
value: function renderFilterCells() {
|
|
var _this4 = this;
|
|
|
|
return React__default["default"].Children.map(this.props.columns, function (col, i) {
|
|
var isVisible = !col.props.hidden;
|
|
|
|
if (isVisible) {
|
|
var _col$props = col.props,
|
|
filterHeaderStyle = _col$props.filterHeaderStyle,
|
|
style = _col$props.style,
|
|
filterHeaderClassName = _col$props.filterHeaderClassName,
|
|
className = _col$props.className,
|
|
frozen = _col$props.frozen,
|
|
columnKey = _col$props.columnKey,
|
|
field = _col$props.field,
|
|
selectionMode = _col$props.selectionMode,
|
|
filter = _col$props.filter;
|
|
|
|
var colStyle = _objectSpread$t(_objectSpread$t({}, filterHeaderStyle || {}), style || {});
|
|
|
|
var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
|
|
'p-frozen-column': frozen
|
|
});
|
|
var colKey = columnKey || field || i;
|
|
|
|
var checkbox = _this4.renderCheckbox(selectionMode);
|
|
|
|
var filterRow = _this4.renderFilter(col, filter);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
key: colKey,
|
|
style: colStyle,
|
|
className: colClassName
|
|
}, checkbox, filterRow);
|
|
}
|
|
|
|
return null;
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this5 = this;
|
|
|
|
if (this.props.headerColumnGroup) {
|
|
var rows = React__default["default"].Children.toArray(this.props.headerColumnGroup.props.children);
|
|
return rows.map(function (row, i) {
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
key: i,
|
|
role: "row"
|
|
}, _this5.renderGroupHeaderCells(row));
|
|
});
|
|
} else {
|
|
var headerRow = /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
role: "row"
|
|
}, this.renderHeaderCells(this.props.columns));
|
|
var filterRow = this.props.filterDisplay === 'row' && /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
role: "row"
|
|
}, this.renderFilterCells());
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, headerRow, filterRow);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("thead", {
|
|
className: "p-datatable-thead"
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return TableHeader;
|
|
}(React.Component);
|
|
|
|
function ownKeys$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; }
|
|
|
|
function _createSuper$1q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var DataTable = /*#__PURE__*/function (_Component) {
|
|
_inherits(DataTable, _Component);
|
|
|
|
var _super = _createSuper$1q(DataTable);
|
|
|
|
function DataTable(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DataTable);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
d_rows: props.rows,
|
|
columnOrder: [],
|
|
groupRowsSortMeta: null,
|
|
editingMeta: {},
|
|
attributeSelector: null
|
|
};
|
|
|
|
if (!_this.props.onPage) {
|
|
_this.state.first = props.first;
|
|
_this.state.rows = props.rows;
|
|
}
|
|
|
|
if (!_this.props.onSort) {
|
|
_this.state.sortField = props.sortField;
|
|
_this.state.sortOrder = props.sortOrder;
|
|
_this.state.multiSortMeta = props.multiSortMeta;
|
|
}
|
|
|
|
_this.state.d_filters = _this.cloneFilters(props.filters);
|
|
|
|
if (!_this.props.onFilter) {
|
|
_this.state.filters = props.filters;
|
|
} // header
|
|
|
|
|
|
_this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
|
|
_this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this));
|
|
_this.onFilterApply = _this.onFilterApply.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderMouseDown = _this.onColumnHeaderMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderDragStart = _this.onColumnHeaderDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderDragOver = _this.onColumnHeaderDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderDragLeave = _this.onColumnHeaderDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderDrop = _this.onColumnHeaderDrop.bind(_assertThisInitialized(_this));
|
|
_this.onColumnResizeStart = _this.onColumnResizeStart.bind(_assertThisInitialized(_this));
|
|
_this.onColumnHeaderCheckboxChange = _this.onColumnHeaderCheckboxChange.bind(_assertThisInitialized(_this));
|
|
_this.allRowsSelected = _this.allRowsSelected.bind(_assertThisInitialized(_this)); // body
|
|
|
|
_this.onEditingMetaChange = _this.onEditingMetaChange.bind(_assertThisInitialized(_this)); //paginator
|
|
|
|
_this.onPageChange = _this.onPageChange.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DataTable, [{
|
|
key: "isCustomStateStorage",
|
|
value: function isCustomStateStorage() {
|
|
return this.props.stateStorage === 'custom';
|
|
}
|
|
}, {
|
|
key: "isStateful",
|
|
value: function isStateful() {
|
|
return this.props.stateKey != null || this.isCustomStateStorage();
|
|
}
|
|
}, {
|
|
key: "isVirtualScrollerDisabled",
|
|
value: function isVirtualScrollerDisabled() {
|
|
return ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable;
|
|
}
|
|
}, {
|
|
key: "isEquals",
|
|
value: function isEquals(data1, data2) {
|
|
return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
return ObjectUtils.isNotEmpty(this.getFilters()) || this.props.globalFilter;
|
|
}
|
|
}, {
|
|
key: "getFirst",
|
|
value: function getFirst() {
|
|
return this.props.onPage ? this.props.first : this.state.first;
|
|
}
|
|
}, {
|
|
key: "getRows",
|
|
value: function getRows() {
|
|
return this.props.onPage ? this.props.rows : this.state.rows;
|
|
}
|
|
}, {
|
|
key: "getSortField",
|
|
value: function getSortField() {
|
|
return this.props.onSort ? this.props.sortField : this.state.sortField;
|
|
}
|
|
}, {
|
|
key: "getSortOrder",
|
|
value: function getSortOrder() {
|
|
return this.props.onSort ? this.props.sortOrder : this.state.sortOrder;
|
|
}
|
|
}, {
|
|
key: "getMultiSortMeta",
|
|
value: function getMultiSortMeta() {
|
|
return (this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta) || [];
|
|
}
|
|
}, {
|
|
key: "getFilters",
|
|
value: function getFilters() {
|
|
return this.props.onFilter ? this.props.filters : this.state.filters;
|
|
}
|
|
}, {
|
|
key: "getColumnProp",
|
|
value: function getColumnProp(col, prop) {
|
|
return col.props[prop];
|
|
}
|
|
}, {
|
|
key: "getColumns",
|
|
value: function getColumns(ignoreReorderable) {
|
|
var _this2 = this;
|
|
|
|
var columns = React__default["default"].Children.toArray(this.props.children);
|
|
|
|
if (!columns) {
|
|
return null;
|
|
}
|
|
|
|
if (!ignoreReorderable && this.props.reorderableColumns && this.state.columnOrder) {
|
|
var orderedColumns = this.state.columnOrder.reduce(function (arr, columnKey) {
|
|
var column = _this2.findColumnByKey(columns, columnKey);
|
|
|
|
column && arr.push(column);
|
|
return arr;
|
|
}, []);
|
|
return [].concat(_toConsumableArray(orderedColumns), _toConsumableArray(columns.filter(function (col) {
|
|
return orderedColumns.indexOf(col) < 0;
|
|
})));
|
|
}
|
|
|
|
return columns;
|
|
}
|
|
}, {
|
|
key: "getStorage",
|
|
value: function getStorage() {
|
|
switch (this.props.stateStorage) {
|
|
case 'local':
|
|
return window.localStorage;
|
|
|
|
case 'session':
|
|
return window.sessionStorage;
|
|
|
|
case 'custom':
|
|
return null;
|
|
|
|
default:
|
|
throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
|
|
}
|
|
}
|
|
}, {
|
|
key: "saveState",
|
|
value: function saveState() {
|
|
var state = {};
|
|
|
|
if (this.props.paginator) {
|
|
state.first = this.getFirst();
|
|
state.rows = this.getRows();
|
|
}
|
|
|
|
var sortField = this.getSortField();
|
|
|
|
if (sortField) {
|
|
state.sortField = sortField;
|
|
state.sortOrder = this.getSortOrder();
|
|
}
|
|
|
|
var multiSortMeta = this.getMultiSortMeta();
|
|
|
|
if (multiSortMeta) {
|
|
state.multiSortMeta = multiSortMeta;
|
|
}
|
|
|
|
if (this.hasFilter()) {
|
|
state.filters = this.getFilters();
|
|
}
|
|
|
|
if (this.props.resizableColumns) {
|
|
this.saveColumnWidths(state);
|
|
}
|
|
|
|
if (this.props.reorderableColumns) {
|
|
state.columnOrder = this.state.columnOrder;
|
|
}
|
|
|
|
if (this.props.expandedRows) {
|
|
state.expandedRows = this.props.expandedRows;
|
|
}
|
|
|
|
if (this.props.selection && this.props.onSelectionChange) {
|
|
state.selection = this.props.selection;
|
|
}
|
|
|
|
if (this.isCustomStateStorage()) {
|
|
if (this.props.customSaveState) {
|
|
this.props.customSaveState(state);
|
|
}
|
|
} else {
|
|
var storage = this.getStorage();
|
|
|
|
if (ObjectUtils.isNotEmpty(state)) {
|
|
storage.setItem(this.props.stateKey, JSON.stringify(state));
|
|
}
|
|
}
|
|
|
|
if (this.props.onStateSave) {
|
|
this.props.onStateSave(state);
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearState",
|
|
value: function clearState() {
|
|
var storage = this.getStorage();
|
|
|
|
if (storage && this.props.stateKey) {
|
|
storage.removeItem(this.props.stateKey);
|
|
}
|
|
}
|
|
}, {
|
|
key: "restoreState",
|
|
value: function restoreState(state) {
|
|
var restoredState = {};
|
|
|
|
if (this.isCustomStateStorage()) {
|
|
if (this.props.customRestoreState) {
|
|
restoredState = this.props.customRestoreState();
|
|
}
|
|
} else {
|
|
var storage = this.getStorage();
|
|
var stateString = storage.getItem(this.props.stateKey);
|
|
var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
|
|
|
|
var reviver = function reviver(key, value) {
|
|
return typeof value === "string" && dateFormat.test(value) ? new Date(value) : value;
|
|
};
|
|
|
|
if (stateString) {
|
|
restoredState = JSON.parse(stateString, reviver);
|
|
}
|
|
}
|
|
|
|
this._restoreState(restoredState, state);
|
|
}
|
|
}, {
|
|
key: "restoreTableState",
|
|
value: function restoreTableState(restoredState) {
|
|
var state = this._restoreState(restoredState);
|
|
|
|
if (ObjectUtils.isNotEmpty(state)) {
|
|
this.setState(state);
|
|
}
|
|
}
|
|
}, {
|
|
key: "_restoreState",
|
|
value: function _restoreState(restoredState) {
|
|
var _this3 = this;
|
|
|
|
var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
|
|
if (ObjectUtils.isNotEmpty(restoredState)) {
|
|
if (this.props.paginator) {
|
|
if (this.props.onPage) {
|
|
var getOnPageParams = function getOnPageParams(first, rows) {
|
|
var totalRecords = _this3.getTotalRecords(_this3.processedData());
|
|
|
|
var pageCount = Math.ceil(totalRecords / rows) || 1;
|
|
var page = Math.floor(first / rows);
|
|
return {
|
|
first: first,
|
|
rows: rows,
|
|
page: page,
|
|
pageCount: pageCount
|
|
};
|
|
};
|
|
|
|
this.props.onPage(this.createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
|
|
} else {
|
|
state.first = restoredState.first;
|
|
state.rows = restoredState.rows;
|
|
}
|
|
}
|
|
|
|
if (restoredState.sortField) {
|
|
if (this.props.onSort) {
|
|
this.props.onSort(this.createEvent({
|
|
sortField: restoredState.sortField,
|
|
sortOrder: restoredState.sortOrder
|
|
}));
|
|
} else {
|
|
state.sortField = restoredState.sortField;
|
|
state.sortOrder = restoredState.sortOrder;
|
|
}
|
|
}
|
|
|
|
if (restoredState.multiSortMeta) {
|
|
if (this.props.onSort) {
|
|
this.props.onSort(this.createEvent({
|
|
multiSortMeta: restoredState.multiSortMeta
|
|
}));
|
|
} else {
|
|
state.multiSortMeta = restoredState.multiSortMeta;
|
|
}
|
|
}
|
|
|
|
if (restoredState.filters) {
|
|
state.d_filters = this.cloneFilters(restoredState.filters);
|
|
|
|
if (this.props.onFilter) {
|
|
this.props.onFilter(this.createEvent({
|
|
filters: restoredState.filters
|
|
}));
|
|
} else {
|
|
state.filters = this.cloneFilters(restoredState.filters);
|
|
}
|
|
}
|
|
|
|
if (this.props.resizableColumns) {
|
|
this.columnWidthsState = restoredState.columnWidths;
|
|
this.tableWidthState = restoredState.tableWidth;
|
|
}
|
|
|
|
if (this.props.reorderableColumns) {
|
|
state.columnOrder = restoredState.columnOrder;
|
|
}
|
|
|
|
if (restoredState.expandedRows && this.props.onRowToggle) {
|
|
this.props.onRowToggle({
|
|
data: restoredState.expandedRows
|
|
});
|
|
}
|
|
|
|
if (restoredState.selection && this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
value: restoredState.selection
|
|
});
|
|
}
|
|
|
|
if (this.props.onStateRestore) {
|
|
this.props.onStateRestore(restoredState);
|
|
}
|
|
}
|
|
|
|
return state;
|
|
}
|
|
}, {
|
|
key: "saveColumnWidths",
|
|
value: function saveColumnWidths(state) {
|
|
var widths = [];
|
|
var headers = DomHandler.find(this.el, '.p-datatable-thead > tr > th');
|
|
headers.forEach(function (header) {
|
|
return widths.push(DomHandler.getOuterWidth(header));
|
|
});
|
|
state.columnWidths = widths.join(',');
|
|
|
|
if (this.props.columnResizeMode === 'expand') {
|
|
state.tableWidth = DomHandler.getOuterWidth(this.table) + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "restoreColumnWidths",
|
|
value: function restoreColumnWidths() {
|
|
var _this4 = this;
|
|
|
|
if (this.columnWidthsState) {
|
|
var widths = this.columnWidthsState.split(',');
|
|
|
|
if (this.props.columnResizeMode === 'expand' && this.tableWidthState) {
|
|
this.table.style.width = this.tableWidthState;
|
|
this.table.style.minWidth = this.tableWidthState;
|
|
this.el.style.width = this.tableWidthState;
|
|
}
|
|
|
|
if (ObjectUtils.isNotEmpty(widths)) {
|
|
this.createStyleElement();
|
|
var innerHTML = '';
|
|
widths.forEach(function (width, index) {
|
|
var style = _this4.props.scrollable ? "flex: 1 1 ".concat(width, "px !important") : "width: ".concat(width, "px !important");
|
|
innerHTML += "\n .p-datatable[".concat(_this4.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
|
|
});
|
|
this.styleElement.innerHTML = innerHTML;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "findParentHeader",
|
|
value: function findParentHeader(element) {
|
|
if (element.nodeName === 'TH') {
|
|
return element;
|
|
} else {
|
|
var parent = element.parentElement;
|
|
|
|
while (parent.nodeName !== 'TH') {
|
|
parent = parent.parentElement;
|
|
if (!parent) break;
|
|
}
|
|
|
|
return parent;
|
|
}
|
|
}
|
|
}, {
|
|
key: "getGroupRowSortField",
|
|
value: function getGroupRowSortField() {
|
|
return this.props.sortMode === 'single' ? this.props.sortField : this.state.groupRowsSortMeta ? this.state.groupRowsSortMeta.field : null;
|
|
}
|
|
}, {
|
|
key: "getSelectableData",
|
|
value: function getSelectableData(val) {
|
|
var _this5 = this;
|
|
|
|
if (this.props.showSelectionElement || this.props.isDataSelectable) {
|
|
return val.filter(function (data, index) {
|
|
var isSelectable = true;
|
|
if (_this5.props.showSelectionElement) isSelectable = _this5.props.showSelectionElement({
|
|
rowIndex: index,
|
|
props: _this5.props
|
|
});
|
|
if (_this5.props.isDataSelectable && isSelectable) isSelectable = _this5.props.isDataSelectable({
|
|
data: data,
|
|
index: index
|
|
});
|
|
return isSelectable;
|
|
});
|
|
}
|
|
|
|
return val;
|
|
}
|
|
}, {
|
|
key: "allRowsSelected",
|
|
value: function allRowsSelected(processedData) {
|
|
var _this6 = this;
|
|
|
|
if (this.props.onSelectAllChange) {
|
|
return this.props.selectAll;
|
|
} else {
|
|
var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
|
|
var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : data;
|
|
var selectableVal = this.getSelectableData(val);
|
|
return selectableVal && this.props.selection && selectableVal.every(function (sv) {
|
|
return _this6.props.selection.some(function (s) {
|
|
return _this6.isEquals(s, sv);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "getSelectionModeInColumn",
|
|
value: function getSelectionModeInColumn(columns) {
|
|
if (columns) {
|
|
var col = columns.find(function (c) {
|
|
return !!c.props.selectionMode;
|
|
});
|
|
return col ? col.props.selectionMode : null;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "findColumnByKey",
|
|
value: function findColumnByKey(columns, key) {
|
|
return ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
|
|
return col.props.columnKey === key || col.props.field === key;
|
|
}) : null;
|
|
}
|
|
}, {
|
|
key: "getTotalRecords",
|
|
value: function getTotalRecords(data) {
|
|
return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
|
|
}
|
|
}, {
|
|
key: "onEditingMetaChange",
|
|
value: function onEditingMetaChange(e) {
|
|
var rowData = e.rowData,
|
|
field = e.field,
|
|
rowIndex = e.rowIndex,
|
|
editing = e.editing;
|
|
|
|
var editingMeta = _objectSpread$s({}, this.state.editingMeta);
|
|
|
|
var meta = editingMeta[rowIndex];
|
|
|
|
if (editing) {
|
|
!meta && (meta = editingMeta[rowIndex] = {
|
|
data: _objectSpread$s({}, rowData),
|
|
fields: []
|
|
});
|
|
meta['fields'].push(field);
|
|
} else if (meta) {
|
|
var fields = meta['fields'].filter(function (f) {
|
|
return f !== field;
|
|
});
|
|
!fields.length ? delete editingMeta[rowIndex] : meta['fields'] = fields;
|
|
}
|
|
|
|
this.setState({
|
|
editingMeta: editingMeta
|
|
});
|
|
}
|
|
}, {
|
|
key: "clearEditingMetaData",
|
|
value: function clearEditingMetaData() {
|
|
if (this.props.editMode && ObjectUtils.isNotEmpty(this.state.editingMeta)) {
|
|
this.setState({
|
|
editingMeta: {}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnResizeStart",
|
|
value: function onColumnResizeStart(e) {
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
var containerLeft = DomHandler.getOffset(this.el).left;
|
|
this.resizeColumn = column;
|
|
this.resizeColumnElement = event.currentTarget.parentElement;
|
|
this.columnResizing = true;
|
|
this.lastResizeHelperX = event.pageX - containerLeft + this.el.scrollLeft;
|
|
this.bindColumnResizeEvents();
|
|
}
|
|
}, {
|
|
key: "onColumnResize",
|
|
value: function onColumnResize(event) {
|
|
var containerLeft = DomHandler.getOffset(this.el).left;
|
|
DomHandler.addClass(this.el, 'p-unselectable-text');
|
|
this.resizeHelper.style.height = this.el.offsetHeight + 'px';
|
|
this.resizeHelper.style.top = 0 + 'px';
|
|
this.resizeHelper.style.left = event.pageX - containerLeft + this.el.scrollLeft + 'px';
|
|
this.resizeHelper.style.display = 'block';
|
|
}
|
|
}, {
|
|
key: "onColumnResizeEnd",
|
|
value: function onColumnResizeEnd() {
|
|
var delta = this.resizeHelper.offsetLeft - this.lastResizeHelperX;
|
|
var columnWidth = this.resizeColumnElement.offsetWidth;
|
|
var newColumnWidth = columnWidth + delta;
|
|
var minWidth = this.resizeColumnElement.style.minWidth || 15;
|
|
|
|
if (columnWidth + delta > parseInt(minWidth, 10)) {
|
|
if (this.props.columnResizeMode === 'fit') {
|
|
var nextColumn = this.resizeColumnElement.nextElementSibling;
|
|
var nextColumnWidth = nextColumn.offsetWidth - delta;
|
|
|
|
if (newColumnWidth > 15 && nextColumnWidth > 15) {
|
|
this.resizeTableCells(newColumnWidth, nextColumnWidth);
|
|
}
|
|
} else if (this.props.columnResizeMode === 'expand') {
|
|
var tableWidth = this.table.offsetWidth + delta + 'px';
|
|
this.table.style.width = tableWidth;
|
|
this.table.style.minWidth = tableWidth;
|
|
this.resizeTableCells(newColumnWidth);
|
|
}
|
|
|
|
if (this.props.onColumnResizeEnd) {
|
|
this.props.onColumnResizeEnd({
|
|
element: this.resizeColumnElement,
|
|
column: this.resizeColumn,
|
|
delta: delta
|
|
});
|
|
}
|
|
|
|
if (this.isStateful()) {
|
|
this.saveState();
|
|
}
|
|
}
|
|
|
|
this.resizeHelper.style.display = 'none';
|
|
this.resizeColumn = null;
|
|
this.resizeColumnElement = null;
|
|
DomHandler.removeClass(this.el, 'p-unselectable-text');
|
|
this.unbindColumnResizeEvents();
|
|
}
|
|
}, {
|
|
key: "resizeTableCells",
|
|
value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
|
|
var _this7 = this;
|
|
|
|
var widths = [];
|
|
var colIndex = DomHandler.index(this.resizeColumnElement);
|
|
var headers = DomHandler.find(this.table, '.p-datatable-thead > tr > th');
|
|
headers.forEach(function (header) {
|
|
return widths.push(DomHandler.getOuterWidth(header));
|
|
});
|
|
this.destroyStyleElement();
|
|
this.createStyleElement();
|
|
var innerHTML = '';
|
|
widths.forEach(function (width, index) {
|
|
var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
|
|
var style = _this7.props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
|
|
innerHTML += "\n .p-datatable[".concat(_this7.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n ").concat(style, "\n }\n ");
|
|
});
|
|
this.styleElement.innerHTML = innerHTML;
|
|
}
|
|
}, {
|
|
key: "bindColumnResizeEvents",
|
|
value: function bindColumnResizeEvents() {
|
|
var _this8 = this;
|
|
|
|
if (!this.documentColumnResizeListener) {
|
|
this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
|
|
if (_this8.columnResizing) {
|
|
_this8.onColumnResize(event);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!this.documentColumnResizeEndListener) {
|
|
this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
|
|
if (_this8.columnResizing) {
|
|
_this8.columnResizing = false;
|
|
|
|
_this8.onColumnResizeEnd();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindColumnResizeEvents",
|
|
value: function unbindColumnResizeEvents() {
|
|
if (this.documentColumnResizeListener) {
|
|
document.removeEventListener('document', this.documentColumnResizeListener);
|
|
this.documentColumnResizeListener = null;
|
|
}
|
|
|
|
if (this.documentColumnResizeEndListener) {
|
|
document.removeEventListener('document', this.documentColumnResizeEndListener);
|
|
this.documentColumnResizeEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderMouseDown",
|
|
value: function onColumnHeaderMouseDown(e) {
|
|
DomHandler.clearSelection();
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
|
|
if (this.props.reorderableColumns && this.getColumnProp(column, 'reorderable') !== false) {
|
|
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderCheckboxChange",
|
|
value: function onColumnHeaderCheckboxChange(e, processedData) {
|
|
var _this9 = this;
|
|
|
|
if (this.props.onSelectAllChange) {
|
|
this.props.onSelectAllChange(e);
|
|
} else {
|
|
var originalEvent = e.originalEvent,
|
|
checked = e.checked;
|
|
var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
|
|
var selection = this.props.selectionPageOnly && this.props.selection ? this.props.selection.filter(function (s) {
|
|
return !data.some(function (d) {
|
|
return _this9.isEquals(s, d);
|
|
});
|
|
}) : [];
|
|
|
|
if (checked) {
|
|
selection = this.props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data));
|
|
selection = this.getSelectableData(selection);
|
|
this.props.onAllRowsSelect && this.props.onAllRowsSelect({
|
|
originalEvent: originalEvent,
|
|
data: selection,
|
|
type: 'all'
|
|
});
|
|
} else {
|
|
this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
|
|
originalEvent: originalEvent,
|
|
data: selection,
|
|
type: 'all'
|
|
});
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: selection,
|
|
type: 'all'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderDragStart",
|
|
value: function onColumnHeaderDragStart(e) {
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
|
|
if (this.columnResizing) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
|
|
this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
|
|
this.draggedColumn = column;
|
|
this.draggedColumnElement = this.findParentHeader(event.currentTarget);
|
|
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderDragOver",
|
|
value: function onColumnHeaderDragOver(e) {
|
|
var event = e.originalEvent;
|
|
var dropHeader = this.findParentHeader(event.currentTarget);
|
|
|
|
if (this.props.reorderableColumns && this.draggedColumnElement && dropHeader) {
|
|
event.preventDefault();
|
|
|
|
if (this.draggedColumnElement !== dropHeader) {
|
|
var containerOffset = DomHandler.getOffset(this.el);
|
|
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
|
|
var targetLeft = dropHeaderOffset.left - containerOffset.left;
|
|
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
|
|
this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
|
|
this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
|
|
|
|
if (event.pageX > columnCenter) {
|
|
this.reorderIndicatorUp.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
|
|
this.reorderIndicatorDown.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
|
|
this.dropPosition = 1;
|
|
} else {
|
|
this.reorderIndicatorUp.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
|
|
this.reorderIndicatorDown.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
|
|
this.dropPosition = -1;
|
|
}
|
|
|
|
this.reorderIndicatorUp.style.display = 'block';
|
|
this.reorderIndicatorDown.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderDragLeave",
|
|
value: function onColumnHeaderDragLeave(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (this.props.reorderableColumns && this.draggedColumnElement) {
|
|
event.preventDefault();
|
|
this.reorderIndicatorUp.style.display = 'none';
|
|
this.reorderIndicatorDown.style.display = 'none';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnHeaderDrop",
|
|
value: function onColumnHeaderDrop(e) {
|
|
var _this10 = this;
|
|
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
event.preventDefault();
|
|
|
|
if (this.draggedColumnElement) {
|
|
var dragIndex = DomHandler.index(this.draggedColumnElement);
|
|
var dropIndex = DomHandler.index(this.findParentHeader(event.currentTarget));
|
|
var allowDrop = dragIndex !== dropIndex;
|
|
|
|
if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dragIndex - dropIndex === 1 && this.dropPosition === 1)) {
|
|
allowDrop = false;
|
|
}
|
|
|
|
if (allowDrop) {
|
|
var columns = this.getColumns();
|
|
|
|
var isSameColumn = function isSameColumn(col1, col2) {
|
|
return col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
|
|
};
|
|
|
|
var dragColIndex = columns.findIndex(function (child) {
|
|
return isSameColumn(child, _this10.draggedColumn);
|
|
});
|
|
var dropColIndex = columns.findIndex(function (child) {
|
|
return isSameColumn(child, column);
|
|
});
|
|
|
|
if (dropColIndex < dragColIndex && this.dropPosition === 1) {
|
|
dropColIndex++;
|
|
}
|
|
|
|
if (dropColIndex > dragColIndex && this.dropPosition === -1) {
|
|
dropColIndex--;
|
|
}
|
|
|
|
ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
|
|
var columnOrder = columns.reduce(function (orders, col) {
|
|
orders.push(col.props.columnKey || col.props.field);
|
|
return orders;
|
|
}, []);
|
|
this.setState({
|
|
columnOrder: columnOrder
|
|
});
|
|
|
|
if (this.props.onColReorder) {
|
|
this.props.onColReorder({
|
|
originalEvent: event,
|
|
dragIndex: dragColIndex,
|
|
dropIndex: dropColIndex,
|
|
columns: columns
|
|
});
|
|
}
|
|
}
|
|
|
|
this.reorderIndicatorUp.style.display = 'none';
|
|
this.reorderIndicatorDown.style.display = 'none';
|
|
this.draggedColumnElement.draggable = false;
|
|
this.draggedColumnElement = null;
|
|
this.draggedColumn = null;
|
|
this.dropPosition = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "createStyleElement",
|
|
value: function createStyleElement() {
|
|
this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
}
|
|
}, {
|
|
key: "createResponsiveStyle",
|
|
value: function createResponsiveStyle() {
|
|
if (!this.responsiveStyleElement) {
|
|
this.responsiveStyleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
var innerHTML = "\n@media screen and (max-width: ".concat(this.props.breakpoint, ") {\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-thead > tr > th,\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tfoot > tr > td {\n display: none !important;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td {\n display: flex;\n width: 100% !important;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td:not(:last-child) {\n border: 0 none;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n border-top: 0;\n border-right: 0;\n border-left: 0;\n }\n\n .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tbody > tr > td > .p-column-title {\n display: block;\n }\n}\n");
|
|
this.responsiveStyleElement.innerHTML = innerHTML;
|
|
}
|
|
}
|
|
}, {
|
|
key: "destroyResponsiveStyle",
|
|
value: function destroyResponsiveStyle() {
|
|
this.responsiveStyleElement = DomHandler.removeInlineStyle(this.responsiveStyleElement);
|
|
}
|
|
}, {
|
|
key: "destroyStyleElement",
|
|
value: function destroyStyleElement() {
|
|
this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
|
|
}
|
|
}, {
|
|
key: "onPageChange",
|
|
value: function onPageChange(e) {
|
|
this.clearEditingMetaData();
|
|
if (this.props.onPage) this.props.onPage(this.createEvent(e));else this.setState({
|
|
first: e.first,
|
|
rows: e.rows
|
|
});
|
|
|
|
if (this.props.onValueChange) {
|
|
this.props.onValueChange(this.processedData());
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSortChange",
|
|
value: function onSortChange(e) {
|
|
this.clearEditingMetaData();
|
|
var event = e.originalEvent,
|
|
column = e.column,
|
|
sortableDisabledFields = e.sortableDisabledFields;
|
|
var sortField = column.props.sortField || column.props.field;
|
|
var sortOrder = this.props.defaultSortOrder;
|
|
var multiSortMeta;
|
|
var eventMeta;
|
|
this.columnSortable = column.props.sortable;
|
|
this.columnSortFunction = column.props.sortFunction;
|
|
this.columnField = column.props.sortField;
|
|
|
|
if (this.props.sortMode === 'multiple') {
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|
multiSortMeta = _toConsumableArray(this.getMultiSortMeta());
|
|
var sortMeta = multiSortMeta.find(function (sortMeta) {
|
|
return sortMeta.field === sortField;
|
|
});
|
|
sortOrder = sortMeta ? this.getCalculatedSortOrder(sortMeta.order) : sortOrder;
|
|
var newMetaData = {
|
|
field: sortField,
|
|
order: sortOrder
|
|
};
|
|
|
|
if (sortOrder) {
|
|
multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter(function (meta) {
|
|
return sortableDisabledFields.some(function (field) {
|
|
return field === meta.field;
|
|
});
|
|
});
|
|
this.addSortMeta(newMetaData, multiSortMeta);
|
|
} else if (this.props.removableSort) {
|
|
this.removeSortMeta(newMetaData, multiSortMeta);
|
|
}
|
|
|
|
eventMeta = {
|
|
multiSortMeta: multiSortMeta
|
|
};
|
|
} else {
|
|
sortOrder = this.getSortField() === sortField ? this.getCalculatedSortOrder(this.getSortOrder()) : sortOrder;
|
|
|
|
if (this.props.removableSort) {
|
|
sortField = sortOrder ? sortField : null;
|
|
}
|
|
|
|
eventMeta = {
|
|
sortField: sortField,
|
|
sortOrder: sortOrder
|
|
};
|
|
}
|
|
|
|
if (this.props.onSort) {
|
|
this.props.onSort(this.createEvent(eventMeta));
|
|
} else {
|
|
eventMeta.first = 0;
|
|
this.setState(eventMeta);
|
|
}
|
|
|
|
if (this.props.onValueChange) {
|
|
this.props.onValueChange(this.processedData({
|
|
sortField: sortField,
|
|
sortOrder: sortOrder,
|
|
multiSortMeta: multiSortMeta
|
|
}));
|
|
}
|
|
}
|
|
}, {
|
|
key: "getCalculatedSortOrder",
|
|
value: function getCalculatedSortOrder(currentOrder) {
|
|
return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
|
|
}
|
|
}, {
|
|
key: "compareValuesOnSort",
|
|
value: function compareValuesOnSort(value1, value2) {
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
|
return result;
|
|
}
|
|
}, {
|
|
key: "addSortMeta",
|
|
value: function addSortMeta(meta, multiSortMeta) {
|
|
var index = multiSortMeta.findIndex(function (sortMeta) {
|
|
return sortMeta.field === meta.field;
|
|
});
|
|
if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta);
|
|
}
|
|
}, {
|
|
key: "removeSortMeta",
|
|
value: function removeSortMeta(meta, multiSortMeta) {
|
|
var index = multiSortMeta.findIndex(function (sortMeta) {
|
|
return sortMeta.field === meta.field;
|
|
});
|
|
|
|
if (index >= 0) {
|
|
multiSortMeta.splice(index, 1);
|
|
}
|
|
|
|
multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
|
|
}
|
|
}, {
|
|
key: "sortSingle",
|
|
value: function sortSingle(data, field, order) {
|
|
var _this11 = this;
|
|
|
|
if (this.props.groupRowsBy && this.props.groupRowsBy === this.props.sortField) {
|
|
var multiSortMeta = [{
|
|
field: this.props.sortField,
|
|
order: this.props.sortOrder || this.props.defaultSortOrder
|
|
}];
|
|
this.props.sortField !== field && multiSortMeta.push({
|
|
field: field,
|
|
order: order
|
|
});
|
|
return this.sortMultiple(data, multiSortMeta);
|
|
}
|
|
|
|
var value = _toConsumableArray(data);
|
|
|
|
if (this.columnSortable && this.columnSortFunction) {
|
|
value = this.columnSortFunction({
|
|
field: field,
|
|
order: order
|
|
});
|
|
} else {
|
|
value.sort(function (data1, data2) {
|
|
var value1 = ObjectUtils.resolveFieldData(data1, field);
|
|
var value2 = ObjectUtils.resolveFieldData(data2, field);
|
|
|
|
var result = _this11.compareValuesOnSort(value1, value2);
|
|
|
|
return order * result;
|
|
});
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "sortMultiple",
|
|
value: function sortMultiple(data) {
|
|
var _this12 = this;
|
|
|
|
var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
|
|
if (this.props.groupRowsBy && (this.groupRowsSortMeta || multiSortMeta.length && this.props.groupRowsBy === multiSortMeta[0].field)) {
|
|
var firstSortMeta = multiSortMeta[0];
|
|
!this.groupRowsSortMeta && (this.groupRowsSortMeta = firstSortMeta);
|
|
|
|
if (firstSortMeta.field !== this.groupRowsSortMeta.field) {
|
|
multiSortMeta = [this.groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta));
|
|
}
|
|
}
|
|
|
|
var value = _toConsumableArray(data);
|
|
|
|
if (this.columnSortable && this.columnSortFunction) {
|
|
var meta = multiSortMeta.find(function (meta) {
|
|
return meta.field === _this12.columnField;
|
|
});
|
|
var field = this.columnField;
|
|
var order = meta ? meta.order : this.defaultSortOrder;
|
|
value = this.columnSortFunction({
|
|
field: field,
|
|
order: order
|
|
});
|
|
} else {
|
|
value.sort(function (data1, data2) {
|
|
return _this12.multisortField(data1, data2, multiSortMeta, 0);
|
|
});
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "multisortField",
|
|
value: function multisortField(data1, data2, multiSortMeta, index) {
|
|
var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
|
|
var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
|
|
|
|
if (value1 === value2) {
|
|
return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0;
|
|
}
|
|
|
|
var result = this.compareValuesOnSort(value1, value2);
|
|
return multiSortMeta[index].order * result;
|
|
}
|
|
}, {
|
|
key: "onFilterChange",
|
|
value: function onFilterChange(filters) {
|
|
this.clearEditingMetaData();
|
|
this.setState({
|
|
d_filters: filters
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilterApply",
|
|
value: function onFilterApply() {
|
|
var _this13 = this;
|
|
|
|
clearTimeout(this.filterTimeout);
|
|
this.filterTimeout = setTimeout(function () {
|
|
var filters = _this13.cloneFilters(_this13.state.d_filters);
|
|
|
|
if (_this13.props.onFilter) {
|
|
_this13.props.onFilter(_this13.createEvent({
|
|
filters: filters
|
|
}));
|
|
} else {
|
|
_this13.setState({
|
|
first: 0,
|
|
filters: filters
|
|
});
|
|
}
|
|
|
|
if (_this13.props.onValueChange) {
|
|
_this13.props.onValueChange(_this13.processedData({
|
|
filters: filters
|
|
}));
|
|
}
|
|
}, this.props.filterDelay);
|
|
}
|
|
}, {
|
|
key: "filterLocal",
|
|
value: function filterLocal(data, filters) {
|
|
if (!data) return;
|
|
filters = filters || {};
|
|
var columns = this.getColumns();
|
|
var filteredValue = [];
|
|
var isGlobalFilter = filters['global'] || this.props.globalFilter;
|
|
var globalFilterFieldsArray;
|
|
|
|
if (isGlobalFilter) {
|
|
globalFilterFieldsArray = this.props.globalFilterFields || columns.filter(function (col) {
|
|
return !col.props.excludeGlobalFilter;
|
|
}).map(function (col) {
|
|
return col.props.filterField || col.props.field;
|
|
});
|
|
}
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
var localMatch = true;
|
|
var globalMatch = false;
|
|
var localFiltered = false;
|
|
|
|
for (var prop in filters) {
|
|
if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
|
|
localFiltered = true;
|
|
var filterField = prop;
|
|
var filterMeta = filters[filterField];
|
|
|
|
if (filterMeta.operator) {
|
|
for (var j = 0; j < filterMeta.constraints.length; j++) {
|
|
var filterConstraint = filterMeta.constraints[j];
|
|
localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint, j);
|
|
|
|
if (filterMeta.operator === FilterOperator.OR && localMatch || filterMeta.operator === FilterOperator.AND && !localMatch) {
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
localMatch = this.executeLocalFilter(filterField, data[i], filterMeta, 0);
|
|
}
|
|
|
|
if (!localMatch) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
|
|
for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
|
|
var globalFilterField = globalFilterFieldsArray[_j];
|
|
var matchMode = filters['global'] ? filters['global'].matchMode : FilterMatchMode.CONTAINS;
|
|
var value = filters['global'] ? filters['global'].value : this.props.globalFilter;
|
|
globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, this.props.filterLocale);
|
|
|
|
if (globalMatch) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
var matches = void 0;
|
|
|
|
if (isGlobalFilter) {
|
|
matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
|
|
} else {
|
|
matches = localFiltered && localMatch;
|
|
}
|
|
|
|
if (matches) {
|
|
filteredValue.push(data[i]);
|
|
}
|
|
}
|
|
|
|
if (filteredValue.length === this.props.value.length) {
|
|
filteredValue = data;
|
|
}
|
|
|
|
return filteredValue;
|
|
}
|
|
}, {
|
|
key: "executeLocalFilter",
|
|
value: function executeLocalFilter(field, rowData, filterMeta, index) {
|
|
var filterValue = filterMeta.value;
|
|
var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
|
|
var dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
|
|
var filterConstraint = FilterService.filters[filterMatchMode];
|
|
return filterConstraint(dataFieldValue, filterValue, this.props.filterLocale, index);
|
|
}
|
|
}, {
|
|
key: "cloneFilters",
|
|
value: function cloneFilters(filters) {
|
|
var _this14 = this;
|
|
|
|
filters = filters || this.props.filters;
|
|
var cloned = {};
|
|
|
|
if (filters) {
|
|
Object.entries(filters).forEach(function (_ref) {
|
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
prop = _ref2[0],
|
|
value = _ref2[1];
|
|
|
|
cloned[prop] = value.operator ? {
|
|
operator: value.operator,
|
|
constraints: value.constraints.map(function (constraint) {
|
|
return _objectSpread$s({}, constraint);
|
|
})
|
|
} : _objectSpread$s({}, value);
|
|
});
|
|
} else {
|
|
var columns = this.getColumns();
|
|
cloned = columns.reduce(function (_filters, col) {
|
|
var field = col.props.filterField || col.props.field;
|
|
var filterFunction = col.props.filterFunction;
|
|
var dataType = col.props.dataType;
|
|
var matchMode = col.props.filterMatchMode || (PrimeReact.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] = _this14.props.filterDisplay === 'menu' ? {
|
|
operator: FilterOperator.AND,
|
|
constraints: [constraint]
|
|
} : constraint;
|
|
return _filters;
|
|
}, {});
|
|
}
|
|
|
|
return cloned;
|
|
}
|
|
}, {
|
|
key: "filter",
|
|
value: function filter(value, field, matchMode) {
|
|
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
|
|
|
var filters = _objectSpread$s({}, this.state.d_filters);
|
|
|
|
var meta = filters[field];
|
|
var constraint = meta && meta.operator ? meta.constraints[index] : meta;
|
|
constraint = meta ? {
|
|
value: value,
|
|
matchMode: matchMode || constraint.matchMode
|
|
} : {
|
|
value: value,
|
|
matchMode: matchMode
|
|
};
|
|
this.props.filterDisplay === 'menu' && meta && meta.operator ? filters[field].constraints[index] = constraint : filters[field] = constraint;
|
|
this.setState({
|
|
d_filters: filters
|
|
}, this.onFilterApply);
|
|
}
|
|
}, {
|
|
key: "reset",
|
|
value: function reset() {
|
|
var state = {
|
|
d_rows: this.props.rows,
|
|
d_filters: this.cloneFilters(this.props.filters),
|
|
groupRowsSortMeta: null,
|
|
editingMeta: {}
|
|
};
|
|
|
|
if (!this.props.onPage) {
|
|
state.first = this.props.first;
|
|
state.rows = this.props.rows;
|
|
}
|
|
|
|
if (!this.props.onSort) {
|
|
state.sortField = this.props.sortField;
|
|
state.sortOrder = this.props.sortOrder;
|
|
state.multiSortMeta = this.props.multiSortMeta;
|
|
}
|
|
|
|
if (!this.props.onFilter) {
|
|
state.filters = this.props.filters;
|
|
}
|
|
|
|
this.resetColumnOrder();
|
|
this.setState(state);
|
|
}
|
|
}, {
|
|
key: "resetColumnOrder",
|
|
value: function resetColumnOrder() {
|
|
var columns = this.getColumns(true);
|
|
var columnOrder = [];
|
|
|
|
if (columns) {
|
|
columnOrder = columns.reduce(function (orders, col) {
|
|
orders.push(col.props.columnKey || col.props.field);
|
|
return orders;
|
|
}, []);
|
|
}
|
|
|
|
this.setState({
|
|
columnOrder: columnOrder
|
|
});
|
|
}
|
|
}, {
|
|
key: "exportCSV",
|
|
value: function exportCSV(options) {
|
|
var _this15 = this;
|
|
|
|
var data;
|
|
var csv = "\uFEFF";
|
|
var columns = this.getColumns();
|
|
|
|
if (options && options.selectionOnly) {
|
|
data = this.props.selection || [];
|
|
} else {
|
|
data = [].concat(_toConsumableArray(this.props.frozenValue || []), _toConsumableArray(this.processedData() || []));
|
|
} //headers
|
|
|
|
|
|
columns.forEach(function (column, i) {
|
|
var _column$props = column.props,
|
|
field = _column$props.field,
|
|
header = _column$props.header,
|
|
exportable = _column$props.exportable;
|
|
|
|
if (exportable && field) {
|
|
csv += '"' + (header || field) + '"';
|
|
|
|
if (i < columns.length - 1) {
|
|
csv += _this15.props.csvSeparator;
|
|
}
|
|
}
|
|
}); //body
|
|
|
|
data.forEach(function (record) {
|
|
csv += '\n';
|
|
columns.forEach(function (column, i) {
|
|
var _column$props2 = column.props,
|
|
columnField = _column$props2.field,
|
|
exportField = _column$props2.exportField,
|
|
exportable = _column$props2.exportable;
|
|
var field = exportField || columnField;
|
|
|
|
if (exportable && field) {
|
|
var cellData = ObjectUtils.resolveFieldData(record, field);
|
|
|
|
if (cellData != null) {
|
|
cellData = _this15.props.exportFunction ? _this15.props.exportFunction({
|
|
data: cellData,
|
|
field: field,
|
|
rowData: record,
|
|
column: column
|
|
}) : String(cellData).replace(/"/g, '""');
|
|
} else cellData = '';
|
|
|
|
csv += '"' + cellData + '"';
|
|
|
|
if (i < columns.length - 1) {
|
|
csv += _this15.props.csvSeparator;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
DomHandler.exportCSV(csv, this.props.exportFilename);
|
|
}
|
|
}, {
|
|
key: "closeEditingCell",
|
|
value: function closeEditingCell() {
|
|
if (this.props.editMode !== "row") {
|
|
document.body.click();
|
|
}
|
|
}
|
|
}, {
|
|
key: "createEvent",
|
|
value: function createEvent(event) {
|
|
return _objectSpread$s({
|
|
first: this.getFirst(),
|
|
rows: this.getRows(),
|
|
sortField: this.getSortField(),
|
|
sortOrder: this.getSortOrder(),
|
|
multiSortMeta: this.getMultiSortMeta(),
|
|
filters: this.getFilters()
|
|
}, event);
|
|
}
|
|
}, {
|
|
key: "processedData",
|
|
value: function processedData(localState) {
|
|
var data = this.props.value || [];
|
|
|
|
if (!this.props.lazy) {
|
|
if (data && data.length) {
|
|
var filters = localState && localState.filters || this.getFilters();
|
|
var sortField = localState && localState.sortField || this.getSortField();
|
|
var sortOrder = localState && localState.sortOrder || this.getSortOrder();
|
|
var multiSortMeta = localState && localState.multiSortMeta || this.getMultiSortMeta();
|
|
|
|
if (ObjectUtils.isNotEmpty(filters) || this.props.globalFilter) {
|
|
data = this.filterLocal(data, filters);
|
|
}
|
|
|
|
if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
|
|
if (this.props.sortMode === 'single') data = this.sortSingle(data, sortField, sortOrder);else if (this.props.sortMode === 'multiple') data = this.sortMultiple(data, multiSortMeta);
|
|
}
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}, {
|
|
key: "dataToRender",
|
|
value: function dataToRender(data) {
|
|
if (data && this.props.paginator) {
|
|
var first = this.props.lazy ? 0 : this.getFirst();
|
|
return data.slice(first, first + this.getRows());
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this16 = this;
|
|
|
|
this.setState({
|
|
attributeSelector: UniqueComponentId()
|
|
}, function () {
|
|
_this16.el.setAttribute(_this16.state.attributeSelector, '');
|
|
});
|
|
|
|
if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
|
|
this.createResponsiveStyle();
|
|
}
|
|
|
|
if (this.isStateful()) {
|
|
this.setState(this.restoreState(this.state));
|
|
|
|
if (this.props.resizableColumns) {
|
|
this.restoreColumnWidths();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.isStateful()) {
|
|
this.saveState();
|
|
}
|
|
|
|
if (prevProps.responsiveLayout !== this.props.responsiveLayout) {
|
|
this.destroyResponsiveStyle();
|
|
|
|
if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
|
|
this.createResponsiveStyle();
|
|
}
|
|
}
|
|
|
|
if (prevProps.filters !== this.props.filters) {
|
|
this.setState({
|
|
filters: this.cloneFilters(this.props.filters),
|
|
d_filters: this.cloneFilters(this.props.filters)
|
|
});
|
|
}
|
|
|
|
if (prevProps.globalFilter !== this.props.globalFilter) {
|
|
this.filter(this.props.globalFilter, 'global', 'contains');
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindColumnResizeEvents();
|
|
this.destroyStyleElement();
|
|
this.destroyResponsiveStyle();
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
if (this.props.loading) {
|
|
var iconClassName = classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datatable-loading-overlay p-component-overlay"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: iconClassName
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
var content = ObjectUtils.getJSXElement(this.props.header, {
|
|
props: this.props
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datatable-header"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderTableHeader",
|
|
value: function renderTableHeader(options, empty) {
|
|
var sortField = this.getSortField();
|
|
var sortOrder = this.getSortOrder();
|
|
|
|
var multiSortMeta = _toConsumableArray(this.getMultiSortMeta());
|
|
|
|
var groupRowSortField = this.getGroupRowSortField();
|
|
var filters = this.state.d_filters;
|
|
var filtersStore = this.getFilters();
|
|
var processedData = options.items,
|
|
columns = options.columns;
|
|
return /*#__PURE__*/React__default["default"].createElement(TableHeader, {
|
|
value: processedData,
|
|
tableProps: this.props,
|
|
columns: columns,
|
|
tabIndex: this.props.tabIndex,
|
|
empty: empty,
|
|
headerColumnGroup: this.props.headerColumnGroup,
|
|
resizableColumns: this.props.resizableColumns,
|
|
onColumnResizeStart: this.onColumnResizeStart,
|
|
onColumnResizerClick: this.props.onColumnResizerClick,
|
|
onColumnResizerDoubleClick: this.props.onColumnResizerDoubleClick,
|
|
sortMode: this.props.sortMode,
|
|
sortField: sortField,
|
|
sortOrder: sortOrder,
|
|
multiSortMeta: multiSortMeta,
|
|
groupRowsBy: this.props.groupRowsBy,
|
|
groupRowSortField: groupRowSortField,
|
|
onSortChange: this.onSortChange,
|
|
filterDisplay: this.props.filterDisplay,
|
|
filters: filters,
|
|
filtersStore: filtersStore,
|
|
onFilterChange: this.onFilterChange,
|
|
onFilterApply: this.onFilterApply,
|
|
showSelectAll: this.props.showSelectAll,
|
|
allRowsSelected: this.allRowsSelected,
|
|
onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
|
|
onColumnMouseDown: this.onColumnHeaderMouseDown,
|
|
onColumnDragStart: this.onColumnHeaderDragStart,
|
|
onColumnDragOver: this.onColumnHeaderDragOver,
|
|
onColumnDragLeave: this.onColumnHeaderDragLeave,
|
|
onColumnDrop: this.onColumnHeaderDrop,
|
|
rowGroupMode: this.props.rowGroupMode,
|
|
reorderableColumns: this.props.reorderableColumns
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderTableBody",
|
|
value: function renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
|
|
var tableSelector = this.state.attributeSelector;
|
|
var first = this.getFirst();
|
|
var editingMeta = this.state.editingMeta;
|
|
var rows = options.rows,
|
|
columns = options.columns,
|
|
contentRef = options.contentRef,
|
|
className = options.className;
|
|
var frozenBody = this.props.frozenValue && /*#__PURE__*/React__default["default"].createElement(TableBody, {
|
|
value: this.props.frozenValue,
|
|
className: "p-datatable-frozen-tbody",
|
|
frozenRow: true,
|
|
tableProps: this.props,
|
|
tableSelector: tableSelector,
|
|
columns: columns,
|
|
selectionModeInColumn: selectionModeInColumn,
|
|
first: first,
|
|
editingMeta: editingMeta,
|
|
onEditingMetaChange: this.onEditingMetaChange,
|
|
tabIndex: this.props.tabIndex,
|
|
onRowClick: this.props.onRowClick,
|
|
onRowDoubleClick: this.props.onRowDoubleClick,
|
|
onCellClick: this.props.onCellClick,
|
|
selection: this.props.selection,
|
|
onSelectionChange: this.props.onSelectionChange,
|
|
lazy: this.props.lazy,
|
|
paginator: this.props.paginator,
|
|
onCellSelect: this.props.onCellSelect,
|
|
onCellUnselect: this.props.onCellUnselect,
|
|
onRowSelect: this.props.onRowSelect,
|
|
onRowUnselect: this.props.onRowUnselect,
|
|
dragSelection: this.props.dragSelection,
|
|
onContextMenu: this.props.onContextMenu,
|
|
onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
selectionMode: this.props.selectionMode,
|
|
cellSelection: this.props.cellSelection,
|
|
contextMenuSelection: this.props.contextMenuSelection,
|
|
dataKey: this.props.dataKey,
|
|
expandedRows: this.props.expandedRows,
|
|
onRowCollapse: this.props.onRowCollapse,
|
|
onRowExpand: this.props.onRowExpand,
|
|
onRowToggle: this.props.onRowToggle,
|
|
editMode: this.props.editMode,
|
|
editingRows: this.props.editingRows,
|
|
onRowReorder: this.props.onRowReorder,
|
|
scrollable: this.props.scrollable,
|
|
rowGroupMode: this.props.rowGroupMode,
|
|
groupRowsBy: this.props.groupRowsBy,
|
|
expandableRowGroups: this.props.expandableRowGroups,
|
|
loading: this.props.loading,
|
|
emptyMessage: this.props.emptyMessage,
|
|
rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate,
|
|
rowExpansionTemplate: this.props.rowExpansionTemplate,
|
|
rowGroupFooterTemplate: this.props.rowGroupFooterTemplate,
|
|
onRowEditChange: this.props.onRowEditChange,
|
|
compareSelectionBy: this.props.compareSelectionBy,
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
onRowEditInit: this.props.onRowEditInit,
|
|
rowEditValidator: this.props.rowEditValidator,
|
|
onRowEditSave: this.props.onRowEditSave,
|
|
onRowEditComplete: this.props.onRowEditComplete,
|
|
onRowEditCancel: this.props.onRowEditCancel,
|
|
cellClassName: this.props.cellClassName,
|
|
responsiveLayout: this.props.responsiveLayout,
|
|
selectionAutoFocus: this.props.selectionAutoFocus,
|
|
isDataSelectable: this.props.isDataSelectable,
|
|
showSelectionElement: this.props.showSelectionElement,
|
|
showRowReorderElement: this.props.showRowReorderElement,
|
|
expandedRowIcon: this.props.expandedRowIcon,
|
|
collapsedRowIcon: this.props.collapsedRowIcon,
|
|
rowClassName: this.props.rowClassName,
|
|
isVirtualScrollerDisabled: true
|
|
});
|
|
var body = /*#__PURE__*/React__default["default"].createElement(TableBody, {
|
|
value: this.dataToRender(rows),
|
|
className: className,
|
|
empty: empty,
|
|
frozenRow: false,
|
|
tableProps: this.props,
|
|
tableSelector: tableSelector,
|
|
columns: columns,
|
|
selectionModeInColumn: selectionModeInColumn,
|
|
first: first,
|
|
editingMeta: editingMeta,
|
|
onEditingMetaChange: this.onEditingMetaChange,
|
|
tabIndex: this.props.tabIndex,
|
|
onRowClick: this.props.onRowClick,
|
|
onRowDoubleClick: this.props.onRowDoubleClick,
|
|
onCellClick: this.props.onCellClick,
|
|
selection: this.props.selection,
|
|
onSelectionChange: this.props.onSelectionChange,
|
|
lazy: this.props.lazy,
|
|
paginator: this.props.paginator,
|
|
onCellSelect: this.props.onCellSelect,
|
|
onCellUnselect: this.props.onCellUnselect,
|
|
onRowSelect: this.props.onRowSelect,
|
|
onRowUnselect: this.props.onRowUnselect,
|
|
dragSelection: this.props.dragSelection,
|
|
onContextMenu: this.props.onContextMenu,
|
|
onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
selectionMode: this.props.selectionMode,
|
|
cellSelection: this.props.cellSelection,
|
|
contextMenuSelection: this.props.contextMenuSelection,
|
|
dataKey: this.props.dataKey,
|
|
expandedRows: this.props.expandedRows,
|
|
onRowCollapse: this.props.onRowCollapse,
|
|
onRowExpand: this.props.onRowExpand,
|
|
onRowToggle: this.props.onRowToggle,
|
|
editMode: this.props.editMode,
|
|
editingRows: this.props.editingRows,
|
|
onRowReorder: this.props.onRowReorder,
|
|
scrollable: this.props.scrollable,
|
|
rowGroupMode: this.props.rowGroupMode,
|
|
groupRowsBy: this.props.groupRowsBy,
|
|
expandableRowGroups: this.props.expandableRowGroups,
|
|
loading: this.props.loading,
|
|
emptyMessage: this.props.emptyMessage,
|
|
rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate,
|
|
rowExpansionTemplate: this.props.rowExpansionTemplate,
|
|
rowGroupFooterTemplate: this.props.rowGroupFooterTemplate,
|
|
onRowEditChange: this.props.onRowEditChange,
|
|
compareSelectionBy: this.props.compareSelectionBy,
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
onRowEditInit: this.props.onRowEditInit,
|
|
rowEditValidator: this.props.rowEditValidator,
|
|
onRowEditSave: this.props.onRowEditSave,
|
|
onRowEditComplete: this.props.onRowEditComplete,
|
|
onRowEditCancel: this.props.onRowEditCancel,
|
|
cellClassName: this.props.cellClassName,
|
|
responsiveLayout: this.props.responsiveLayout,
|
|
selectionAutoFocus: this.props.selectionAutoFocus,
|
|
isDataSelectable: this.props.isDataSelectable,
|
|
showSelectionElement: this.props.showSelectionElement,
|
|
showRowReorderElement: this.props.showRowReorderElement,
|
|
expandedRowIcon: this.props.expandedRowIcon,
|
|
collapsedRowIcon: this.props.collapsedRowIcon,
|
|
rowClassName: this.props.rowClassName,
|
|
virtualScrollerContentRef: contentRef,
|
|
virtualScrollerOptions: options,
|
|
isVirtualScrollerDisabled: isVirtualScrollerDisabled
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, frozenBody, body);
|
|
}
|
|
}, {
|
|
key: "renderTableFooter",
|
|
value: function renderTableFooter(options) {
|
|
var columns = options.columns;
|
|
return /*#__PURE__*/React__default["default"].createElement(TableFooter, {
|
|
tableProps: this.props,
|
|
columns: columns,
|
|
footerColumnGroup: this.props.footerColumnGroup
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
|
|
var _this17 = this;
|
|
|
|
if (!columns) return;
|
|
var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
|
|
var virtualScrollerOptions = this.props.virtualScrollerOptions || {};
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datatable-wrapper",
|
|
style: {
|
|
maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
|
|
items: processedData,
|
|
columns: columns,
|
|
scrollHeight: this.props.scrollHeight,
|
|
disabled: isVirtualScrollerDisabled,
|
|
loaderDisabled: true,
|
|
showSpacer: false,
|
|
contentTemplate: function contentTemplate(options) {
|
|
var ref = function ref(el) {
|
|
_this17.table = el;
|
|
options.spacerRef && options.spacerRef(el);
|
|
};
|
|
|
|
var tableClassName = classNames('p-datatable-table', _this17.props.tableClassName);
|
|
|
|
var tableHeader = _this17.renderTableHeader(options, empty);
|
|
|
|
var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
|
|
|
|
var tableFooter = _this17.renderTableFooter(options);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("table", {
|
|
ref: ref,
|
|
style: _this17.props.tableStyle,
|
|
className: tableClassName,
|
|
role: "table"
|
|
}, tableHeader, tableBody, tableFooter);
|
|
}
|
|
})));
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
var content = ObjectUtils.getJSXElement(this.props.footer, {
|
|
props: this.props
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-datatable-footer"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderPaginator",
|
|
value: function renderPaginator(position, totalRecords) {
|
|
var className = classNames('p-paginator-' + position, this.props.paginatorClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement(Paginator, {
|
|
first: this.getFirst(),
|
|
rows: this.getRows(),
|
|
pageLinkSize: this.props.pageLinkSize,
|
|
className: className,
|
|
onPageChange: this.onPageChange,
|
|
template: this.props.paginatorTemplate,
|
|
totalRecords: totalRecords,
|
|
rowsPerPageOptions: this.props.rowsPerPageOptions,
|
|
currentPageReportTemplate: this.props.currentPageReportTemplate,
|
|
leftContent: this.props.paginatorLeft,
|
|
rightContent: this.props.paginatorRight,
|
|
alwaysShow: this.props.alwaysShowPaginator,
|
|
dropdownAppendTo: this.props.paginatorDropdownAppendTo
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderPaginatorTop",
|
|
value: function renderPaginatorTop(totalRecords) {
|
|
if (this.props.paginator && this.props.paginatorPosition !== 'bottom') {
|
|
return this.renderPaginator('top', totalRecords);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderPaginatorBottom",
|
|
value: function renderPaginatorBottom(totalRecords) {
|
|
if (this.props.paginator && this.props.paginatorPosition !== 'top') {
|
|
return this.renderPaginator('bottom', totalRecords);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderResizeHelper",
|
|
value: function renderResizeHelper() {
|
|
var _this18 = this;
|
|
|
|
if (this.props.resizableColumns) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this18.resizeHelper = el;
|
|
},
|
|
className: "p-column-resizer-helper",
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderReorderIndicators",
|
|
value: function renderReorderIndicators() {
|
|
var _this19 = this;
|
|
|
|
if (this.props.reorderableColumns) {
|
|
var style = {
|
|
position: 'absolute',
|
|
display: 'none'
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this19.reorderIndicatorUp = el;
|
|
},
|
|
className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
|
|
style: style
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this19.reorderIndicatorDown = el;
|
|
},
|
|
className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
|
|
style: style
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this20 = this;
|
|
|
|
var processedData = this.processedData();
|
|
var columns = this.getColumns();
|
|
var totalRecords = this.getTotalRecords(processedData);
|
|
var empty = ObjectUtils.isEmpty(processedData);
|
|
var selectionModeInColumn = this.getSelectionModeInColumn(columns);
|
|
var selectable = this.props.selectionMode || selectionModeInColumn;
|
|
var className = classNames('p-datatable p-component', {
|
|
'p-datatable-hoverable-rows': this.props.rowHover,
|
|
'p-datatable-selectable': selectable && !this.props.cellSelection,
|
|
'p-datatable-selectable-cell': selectable && this.props.cellSelection,
|
|
'p-datatable-auto-layout': this.props.autoLayout,
|
|
'p-datatable-resizable': this.props.resizableColumns,
|
|
'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
|
|
'p-datatable-scrollable': this.props.scrollable,
|
|
'p-datatable-scrollable-vertical': this.props.scrollable && this.props.scrollDirection === 'vertical',
|
|
'p-datatable-scrollable-horizontal': this.props.scrollable && this.props.scrollDirection === 'horizontal',
|
|
'p-datatable-scrollable-both': this.props.scrollable && this.props.scrollDirection === 'both',
|
|
'p-datatable-flex-scrollable': this.props.scrollable && this.props.scrollHeight === 'flex',
|
|
'p-datatable-responsive-stack': this.props.responsiveLayout === 'stack',
|
|
'p-datatable-responsive-scroll': this.props.responsiveLayout === 'scroll',
|
|
'p-datatable-striped': this.props.stripedRows,
|
|
'p-datatable-gridlines': this.props.showGridlines,
|
|
'p-datatable-grouped-header': this.props.headerColumnGroup != null,
|
|
'p-datatable-grouped-footer': this.props.footerColumnGroup != null,
|
|
'p-datatable-sm': this.props.size === 'small',
|
|
'p-datatable-lg': this.props.size === 'large'
|
|
}, this.props.className);
|
|
var loader = this.renderLoader();
|
|
var header = this.renderHeader();
|
|
var paginatorTop = this.renderPaginatorTop(totalRecords);
|
|
var content = this.renderContent(processedData, columns, selectionModeInColumn, empty);
|
|
var paginatorBottom = this.renderPaginatorBottom(totalRecords);
|
|
var footer = this.renderFooter();
|
|
var resizeHelper = this.renderResizeHelper();
|
|
var reorderIndicators = this.renderReorderIndicators();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this20.el = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
"data-scrollselectors": ".p-datatable-wrapper"
|
|
}, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
if (nextProps.rows !== prevState.d_rows && !nextProps.onPage) {
|
|
return {
|
|
rows: nextProps.rows,
|
|
d_rows: nextProps.rows
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return DataTable;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DataTable, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
header: null,
|
|
footer: null,
|
|
style: null,
|
|
className: null,
|
|
tableStyle: null,
|
|
tableClassName: null,
|
|
paginator: false,
|
|
paginatorPosition: 'bottom',
|
|
alwaysShowPaginator: true,
|
|
paginatorClassName: null,
|
|
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
|
|
paginatorLeft: null,
|
|
paginatorRight: null,
|
|
paginatorDropdownAppendTo: null,
|
|
pageLinkSize: 5,
|
|
rowsPerPageOptions: null,
|
|
currentPageReportTemplate: '({currentPage} of {totalPages})',
|
|
first: 0,
|
|
rows: null,
|
|
totalRecords: null,
|
|
lazy: false,
|
|
sortField: null,
|
|
sortOrder: null,
|
|
multiSortMeta: null,
|
|
sortMode: 'single',
|
|
defaultSortOrder: 1,
|
|
removableSort: false,
|
|
emptyMessage: null,
|
|
selectionMode: null,
|
|
dragSelection: false,
|
|
cellSelection: false,
|
|
selection: null,
|
|
onSelectionChange: null,
|
|
contextMenuSelection: null,
|
|
onContextMenuSelectionChange: null,
|
|
compareSelectionBy: 'deepEquals',
|
|
dataKey: null,
|
|
metaKeySelection: true,
|
|
selectOnEdit: true,
|
|
selectionPageOnly: false,
|
|
selectionAutoFocus: true,
|
|
showSelectAll: true,
|
|
selectAll: false,
|
|
onSelectAllChange: null,
|
|
headerColumnGroup: null,
|
|
footerColumnGroup: null,
|
|
rowExpansionTemplate: null,
|
|
expandedRows: null,
|
|
onRowToggle: null,
|
|
resizableColumns: false,
|
|
columnResizeMode: 'fit',
|
|
reorderableColumns: false,
|
|
filters: null,
|
|
globalFilter: null,
|
|
filterDelay: 300,
|
|
filterLocale: undefined,
|
|
scrollable: false,
|
|
scrollHeight: null,
|
|
scrollDirection: 'vertical',
|
|
virtualScrollerOptions: null,
|
|
frozenWidth: null,
|
|
frozenValue: null,
|
|
csvSeparator: ',',
|
|
exportFilename: 'download',
|
|
rowGroupMode: null,
|
|
autoLayout: false,
|
|
rowClassName: null,
|
|
cellClassName: null,
|
|
rowGroupHeaderTemplate: null,
|
|
rowGroupFooterTemplate: null,
|
|
loading: false,
|
|
loadingIcon: 'pi pi-spinner',
|
|
tabIndex: 0,
|
|
stateKey: null,
|
|
stateStorage: 'session',
|
|
groupRowsBy: null,
|
|
editMode: 'cell',
|
|
editingRows: null,
|
|
expandableRowGroups: false,
|
|
rowHover: false,
|
|
showGridlines: false,
|
|
stripedRows: false,
|
|
size: 'normal',
|
|
responsiveLayout: 'stack',
|
|
breakpoint: '960px',
|
|
filterDisplay: 'menu',
|
|
expandedRowIcon: 'pi pi-chevron-down',
|
|
collapsedRowIcon: 'pi pi-chevron-right',
|
|
onRowEditComplete: null,
|
|
globalFilterFields: null,
|
|
showSelectionElement: null,
|
|
showRowReorderElement: null,
|
|
isDataSelectable: null,
|
|
onColumnResizeEnd: null,
|
|
onColumnResizerClick: null,
|
|
onColumnResizerDoubleClick: null,
|
|
onSort: null,
|
|
onPage: null,
|
|
onFilter: null,
|
|
onAllRowsSelect: null,
|
|
onAllRowsUnselect: null,
|
|
onRowClick: null,
|
|
onRowDoubleClick: null,
|
|
onRowSelect: null,
|
|
onRowUnselect: null,
|
|
onRowExpand: null,
|
|
onRowCollapse: null,
|
|
onContextMenu: null,
|
|
onColReorder: null,
|
|
onCellClick: null,
|
|
onCellSelect: null,
|
|
onCellUnselect: null,
|
|
onRowReorder: null,
|
|
onValueChange: null,
|
|
rowEditValidator: null,
|
|
onRowEditInit: null,
|
|
onRowEditSave: null,
|
|
onRowEditCancel: null,
|
|
onRowEditChange: null,
|
|
exportFunction: null,
|
|
customSaveState: null,
|
|
customRestoreState: null,
|
|
onStateSave: null,
|
|
onStateRestore: null
|
|
});
|
|
|
|
function _createSuper$1p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1p(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var DataViewLayoutOptions = /*#__PURE__*/function (_Component) {
|
|
_inherits(DataViewLayoutOptions, _Component);
|
|
|
|
var _super = _createSuper$1p(DataViewLayoutOptions);
|
|
|
|
function DataViewLayoutOptions(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DataViewLayoutOptions);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.changeLayout = _this.changeLayout.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DataViewLayoutOptions, [{
|
|
key: "changeLayout",
|
|
value: function changeLayout(event, layoutMode) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: layoutMode
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', this.props.className);
|
|
var buttonListClass = classNames('p-button p-button-icon-only', {
|
|
'p-highlight': this.props.layout === 'list'
|
|
});
|
|
var buttonGridClass = classNames('p-button p-button-icon-only', {
|
|
'p-highlight': this.props.layout === 'grid'
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
style: this.props.style,
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonListClass,
|
|
onClick: function onClick(event) {
|
|
return _this2.changeLayout(event, 'list');
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-bars"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonGridClass,
|
|
onClick: function onClick(event) {
|
|
return _this2.changeLayout(event, 'grid');
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-th-large"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
}]);
|
|
|
|
return DataViewLayoutOptions;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DataViewLayoutOptions, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
layout: null,
|
|
onChange: null
|
|
});
|
|
|
|
var DataViewItem = /*#__PURE__*/function (_Component2) {
|
|
_inherits(DataViewItem, _Component2);
|
|
|
|
var _super2 = _createSuper$1p(DataViewItem);
|
|
|
|
function DataViewItem() {
|
|
_classCallCheck(this, DataViewItem);
|
|
|
|
return _super2.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(DataViewItem, [{
|
|
key: "render",
|
|
value: function render() {
|
|
return this.props.template(this.props.item, this.props.layout);
|
|
}
|
|
}]);
|
|
|
|
return DataViewItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DataViewItem, "defaultProps", {
|
|
template: null,
|
|
item: null,
|
|
layout: null
|
|
});
|
|
|
|
var DataView = /*#__PURE__*/function (_Component3) {
|
|
_inherits(DataView, _Component3);
|
|
|
|
var _super3 = _createSuper$1p(DataView);
|
|
|
|
function DataView(props) {
|
|
var _this3;
|
|
|
|
_classCallCheck(this, DataView);
|
|
|
|
_this3 = _super3.call(this, props);
|
|
|
|
if (!_this3.props.onPage) {
|
|
_this3.state = {
|
|
first: _this3.props.first,
|
|
rows: _this3.props.rows
|
|
};
|
|
}
|
|
|
|
_this3.sortChange = false;
|
|
_this3.onPageChange = _this3.onPageChange.bind(_assertThisInitialized(_this3));
|
|
return _this3;
|
|
}
|
|
|
|
_createClass(DataView, [{
|
|
key: "getItemRenderKey",
|
|
value: function getItemRenderKey(value) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(value, this.props.dataKey) : null;
|
|
}
|
|
}, {
|
|
key: "getTotalRecords",
|
|
value: function getTotalRecords() {
|
|
if (this.props.totalRecords) return this.props.totalRecords;else return this.props.value ? this.props.value.length : 0;
|
|
}
|
|
}, {
|
|
key: "createPaginator",
|
|
value: function createPaginator(position) {
|
|
var className = classNames('p-paginator-' + position, this.props.paginatorClassName);
|
|
var first = this.props.onPage ? this.props.first : this.state.first;
|
|
var rows = this.props.onPage ? this.props.rows : this.state.rows;
|
|
var totalRecords = this.getTotalRecords();
|
|
return /*#__PURE__*/React__default["default"].createElement(Paginator, {
|
|
first: first,
|
|
rows: rows,
|
|
pageLinkSize: this.props.pageLinkSize,
|
|
className: className,
|
|
onPageChange: this.onPageChange,
|
|
template: this.props.paginatorTemplate,
|
|
totalRecords: totalRecords,
|
|
rowsPerPageOptions: this.props.rowsPerPageOptions,
|
|
currentPageReportTemplate: this.props.currentPageReportTemplate,
|
|
leftContent: this.props.paginatorLeft,
|
|
rightContent: this.props.paginatorRight,
|
|
alwaysShow: this.props.alwaysShowPaginator,
|
|
dropdownAppendTo: this.props.paginatorDropdownAppendTo
|
|
});
|
|
}
|
|
}, {
|
|
key: "onPageChange",
|
|
value: function onPageChange(event) {
|
|
if (this.props.onPage) {
|
|
this.props.onPage(event);
|
|
} else {
|
|
this.setState({
|
|
first: event.first,
|
|
rows: event.rows
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "isEmpty",
|
|
value: function isEmpty() {
|
|
return !this.props.value || this.props.value.length === 0;
|
|
}
|
|
}, {
|
|
key: "sort",
|
|
value: function sort() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.value) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
value.sort(function (data1, data2) {
|
|
var value1 = ObjectUtils.resolveFieldData(data1, _this4.props.sortField);
|
|
var value2 = ObjectUtils.resolveFieldData(data2, _this4.props.sortField);
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
|
return _this4.props.sortOrder * result;
|
|
});
|
|
return value;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
if (this.props.loading) {
|
|
var iconClassName = classNames('p-dataview-loading-icon pi-spin', this.props.loadingIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dataview-loading-overlay p-component-overlay"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: iconClassName
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderTopPaginator",
|
|
value: function renderTopPaginator() {
|
|
if (this.props.paginator && (this.props.paginatorPosition !== 'bottom' || this.props.paginatorPosition === 'both')) {
|
|
return this.createPaginator('top');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderBottomPaginator",
|
|
value: function renderBottomPaginator() {
|
|
if (this.props.paginator && (this.props.paginatorPosition !== 'top' || this.props.paginatorPosition === 'both')) {
|
|
return this.createPaginator('bottom');
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderEmptyMessage",
|
|
value: function renderEmptyMessage() {
|
|
if (!this.props.loading) {
|
|
var content = this.props.emptyMessage || localeOption('emptyMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-col-12 col-12 p-dataview-emptymessage"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dataview-header"
|
|
}, this.props.header);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dataview-footer"
|
|
}, " ", this.props.footer);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems(value) {
|
|
var _this5 = this;
|
|
|
|
if (value && value.length) {
|
|
if (this.props.paginator) {
|
|
var rows = this.props.onPage ? this.props.rows : this.state.rows;
|
|
var first = this.props.lazy ? 0 : this.props.onPage ? this.props.first : this.state.first;
|
|
var totalRecords = this.getTotalRecords();
|
|
var last = Math.min(rows + first, totalRecords);
|
|
var items = [];
|
|
|
|
for (var i = first; i < last; i++) {
|
|
var val = value[i];
|
|
val && items.push( /*#__PURE__*/React__default["default"].createElement(DataViewItem, {
|
|
key: this.getItemRenderKey(value) || i,
|
|
template: this.props.itemTemplate,
|
|
layout: this.props.layout,
|
|
item: val
|
|
}));
|
|
}
|
|
|
|
return items;
|
|
} else {
|
|
return value.map(function (item, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement(DataViewItem, {
|
|
key: _this5.getItemRenderKey(item) || index,
|
|
template: _this5.props.itemTemplate,
|
|
layout: _this5.props.layout,
|
|
item: item
|
|
});
|
|
});
|
|
}
|
|
} else {
|
|
return this.renderEmptyMessage();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent(value) {
|
|
var items = this.renderItems(value);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dataview-content"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-grid p-nogutter grid grid-nogutter"
|
|
}, items));
|
|
}
|
|
}, {
|
|
key: "processData",
|
|
value: function processData() {
|
|
var data = this.props.value;
|
|
|
|
if (data && data.length) {
|
|
if (this.props.sortField) {
|
|
data = this.sort();
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var value = this.processData();
|
|
var className = classNames('p-dataview p-component', {
|
|
'p-dataview-list': this.props.layout === 'list',
|
|
'p-dataview-grid': this.props.layout === 'grid',
|
|
'p-dataview-loading': this.props.loading
|
|
}, this.props.className);
|
|
var loader = this.renderLoader();
|
|
var topPaginator = this.renderTopPaginator();
|
|
var bottomPaginator = this.renderBottomPaginator();
|
|
var header = this.renderHeader();
|
|
var footer = this.renderFooter();
|
|
var content = this.renderContent(value);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
style: this.props.style,
|
|
className: className
|
|
}, loader, header, topPaginator, content, bottomPaginator, footer);
|
|
}
|
|
}]);
|
|
|
|
return DataView;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DataView, "defaultProps", {
|
|
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',
|
|
itemTemplate: null,
|
|
onPage: null
|
|
});
|
|
|
|
function _createSuper$1o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1o(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var DeferredContent = /*#__PURE__*/function (_Component) {
|
|
_inherits(DeferredContent, _Component);
|
|
|
|
var _super = _createSuper$1o(DeferredContent);
|
|
|
|
function DeferredContent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, DeferredContent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
loaded: false
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(DeferredContent, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.loaded) {
|
|
if (this.shouldLoad()) this.load();else this.bindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this2 = this;
|
|
|
|
this.documentScrollListener = function () {
|
|
if (_this2.shouldLoad()) {
|
|
_this2.load();
|
|
|
|
_this2.unbindScrollListener();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', this.documentScrollListener);
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.documentScrollListener) {
|
|
window.removeEventListener('scroll', this.documentScrollListener);
|
|
this.documentScrollListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "shouldLoad",
|
|
value: function shouldLoad() {
|
|
if (this.state.loaded) {
|
|
return false;
|
|
} else {
|
|
var rect = this.container.getBoundingClientRect();
|
|
var docElement = document.documentElement;
|
|
var winHeight = docElement.clientHeight;
|
|
return winHeight >= rect.top;
|
|
}
|
|
}
|
|
}, {
|
|
key: "load",
|
|
value: function load(event) {
|
|
this.setState({
|
|
loaded: true
|
|
});
|
|
|
|
if (this.props.onLoad) {
|
|
this.props.onLoad(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindScrollListener();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.container = el;
|
|
}
|
|
}, this.state.loaded ? this.props.children : null);
|
|
}
|
|
}]);
|
|
|
|
return DeferredContent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(DeferredContent, "defaultProps", {
|
|
onload: null
|
|
});
|
|
|
|
function _createSuper$1n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Divider = /*#__PURE__*/function (_Component) {
|
|
_inherits(Divider, _Component);
|
|
|
|
var _super = _createSuper$1n(Divider);
|
|
|
|
function Divider() {
|
|
_classCallCheck(this, Divider);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Divider, [{
|
|
key: "isHorizontal",
|
|
get: function get() {
|
|
return this.props.layout === 'horizontal';
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
get: function get() {
|
|
return this.props.layout === 'vertical';
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var dividerClassName = classNames("p-divider p-component p-divider-".concat(this.props.layout, " p-divider-").concat(this.props.type), {
|
|
'p-divider-left': this.isHorizontal && (!this.props.align || this.props.align === 'left'),
|
|
'p-divider-right': this.isHorizontal && this.props.align === 'right',
|
|
'p-divider-center': this.isHorizontal && this.props.align === 'center' || this.isVertical && (!this.props.align || this.props.align === 'center'),
|
|
'p-divider-top': this.isVertical && this.props.align === 'top',
|
|
'p-divider-bottom': this.isVertical && this.props.align === 'bottom'
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: dividerClassName,
|
|
style: this.props.style,
|
|
role: "separator"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-divider-content"
|
|
}, this.props.children));
|
|
}
|
|
}]);
|
|
|
|
return Divider;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Divider, "defaultProps", {
|
|
align: null,
|
|
layout: 'horizontal',
|
|
type: 'solid',
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1m(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Editor = /*#__PURE__*/function (_Component) {
|
|
_inherits(Editor, _Component);
|
|
|
|
var _super = _createSuper$1m(Editor);
|
|
|
|
function Editor() {
|
|
_classCallCheck(this, Editor);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Editor, [{
|
|
key: "getQuill",
|
|
value: function getQuill() {
|
|
return this.quill;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this = this;
|
|
|
|
import('quill').then(function (module) {
|
|
if (module && module["default"] && DomHandler.isExist(_this.editorElement)) {
|
|
_this.quill = new module["default"](_this.editorElement, {
|
|
modules: _objectSpread$r({
|
|
toolbar: _this.props.showHeader ? _this.toolbarElement : false
|
|
}, _this.props.modules),
|
|
placeholder: _this.props.placeholder,
|
|
readOnly: _this.props.readOnly,
|
|
theme: _this.props.theme,
|
|
formats: _this.props.formats
|
|
});
|
|
|
|
if (_this.props.value) {
|
|
_this.quill.setContents(_this.quill.clipboard.convert(_this.props.value));
|
|
}
|
|
|
|
_this.quill.on('text-change', function (delta, source) {
|
|
var html = _this.editorElement.children[0].innerHTML;
|
|
|
|
var text = _this.quill.getText();
|
|
|
|
if (html === '<p><br></p>') {
|
|
html = null;
|
|
}
|
|
|
|
if (_this.props.onTextChange) {
|
|
_this.props.onTextChange({
|
|
htmlValue: html,
|
|
textValue: text,
|
|
delta: delta,
|
|
source: source
|
|
});
|
|
}
|
|
});
|
|
|
|
_this.quill.on('selection-change', function (range, oldRange, source) {
|
|
if (_this.props.onSelectionChange) {
|
|
_this.props.onSelectionChange({
|
|
range: range,
|
|
oldRange: oldRange,
|
|
source: source
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}).then(function () {
|
|
if (_this.quill && _this.quill.getModule('toolbar')) {
|
|
_this.props.onLoad && _this.props.onLoad(_this.quill);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props.value !== prevProps.value && this.quill && !this.quill.hasFocus()) {
|
|
if (this.props.value) this.quill.setContents(this.quill.clipboard.convert(this.props.value));else this.quill.setText('');
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var containerClass = classNames('p-component p-editor-container', this.props.className);
|
|
var toolbarHeader = null;
|
|
|
|
if (this.props.showHeader === false) {
|
|
toolbarHeader = '';
|
|
this.toolbarElement = undefined;
|
|
} else if (this.props.headerTemplate) {
|
|
toolbarHeader = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.toolbarElement = el;
|
|
},
|
|
className: "p-editor-toolbar"
|
|
}, this.props.headerTemplate);
|
|
} else {
|
|
toolbarHeader = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.toolbarElement = el;
|
|
},
|
|
className: "p-editor-toolbar"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "ql-header",
|
|
defaultValue: "0"
|
|
}, /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "1"
|
|
}, "Heading"), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "2"
|
|
}, "Subheading"), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "0"
|
|
}, "Normal")), /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "ql-font"
|
|
}, /*#__PURE__*/React__default["default"].createElement("option", null), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "serif"
|
|
}), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "monospace"
|
|
}))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-bold",
|
|
"aria-label": "Bold"
|
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-italic",
|
|
"aria-label": "Italic"
|
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-underline",
|
|
"aria-label": "Underline"
|
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "ql-color"
|
|
}), /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "ql-background"
|
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-list",
|
|
value: "ordered",
|
|
"aria-label": "Ordered List"
|
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-list",
|
|
value: "bullet",
|
|
"aria-label": "Unordered List"
|
|
}), /*#__PURE__*/React__default["default"].createElement("select", {
|
|
className: "ql-align"
|
|
}, /*#__PURE__*/React__default["default"].createElement("option", {
|
|
defaultValue: true
|
|
}), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "center"
|
|
}), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "right"
|
|
}), /*#__PURE__*/React__default["default"].createElement("option", {
|
|
value: "justify"
|
|
}))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-link",
|
|
"aria-label": "Insert Link"
|
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-image",
|
|
"aria-label": "Insert Image"
|
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-code-block",
|
|
"aria-label": "Insert Code Block"
|
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "ql-formats"
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "ql-clean",
|
|
"aria-label": "Remove Styles"
|
|
})));
|
|
}
|
|
|
|
var content = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.editorElement = el;
|
|
},
|
|
className: "p-editor-content",
|
|
style: this.props.style
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: containerClass
|
|
}, toolbarHeader, content);
|
|
}
|
|
}]);
|
|
|
|
return Editor;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Editor, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1l(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Fieldset = /*#__PURE__*/function (_Component) {
|
|
_inherits(Fieldset, _Component);
|
|
|
|
var _super = _createSuper$1l(Fieldset);
|
|
|
|
function Fieldset(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Fieldset);
|
|
|
|
_this = _super.call(this, props);
|
|
var state = {
|
|
id: props.id
|
|
};
|
|
|
|
if (!_this.props.onToggle) {
|
|
state = _objectSpread$q(_objectSpread$q({}, state), {}, {
|
|
collapsed: props.collapsed
|
|
});
|
|
}
|
|
|
|
_this.state = state;
|
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
|
_this.contentRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Fieldset, [{
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.toggleable) {
|
|
var collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;
|
|
if (collapsed) this.expand(event);else this.collapse(event);
|
|
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: !collapsed
|
|
});
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "expand",
|
|
value: function expand(event) {
|
|
if (!this.props.onToggle) {
|
|
this.setState({
|
|
collapsed: false
|
|
});
|
|
}
|
|
|
|
if (this.props.onExpand) {
|
|
this.props.onExpand(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "collapse",
|
|
value: function collapse(event) {
|
|
if (!this.props.onToggle) {
|
|
this.setState({
|
|
collapsed: true
|
|
});
|
|
}
|
|
|
|
if (this.props.onCollapse) {
|
|
this.props.onCollapse(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isCollapsed",
|
|
value: function isCollapsed() {
|
|
return this.props.toggleable ? this.props.onToggle ? this.props.collapsed : this.state.collapsed : false;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent(collapsed) {
|
|
var id = this.state.id + '_content';
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.contentRef,
|
|
classNames: "p-toggleable-content",
|
|
timeout: {
|
|
enter: 1000,
|
|
exit: 450
|
|
},
|
|
"in": !collapsed,
|
|
unmountOnExit: true,
|
|
options: this.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.contentRef,
|
|
id: id,
|
|
className: "p-toggleable-content",
|
|
"aria-hidden": collapsed,
|
|
role: "region",
|
|
"aria-labelledby": this.state.id + '_header'
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-fieldset-content"
|
|
}, this.props.children)));
|
|
}
|
|
}, {
|
|
key: "renderToggleIcon",
|
|
value: function renderToggleIcon(collapsed) {
|
|
if (this.props.toggleable) {
|
|
var className = classNames('p-fieldset-toggler pi', {
|
|
'pi-plus': collapsed,
|
|
'pi-minus': !collapsed
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderLegendContent",
|
|
value: function renderLegendContent(collapsed) {
|
|
if (this.props.toggleable) {
|
|
var toggleIcon = this.renderToggleIcon(collapsed);
|
|
var ariaControls = this.state.id + '_content';
|
|
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: '#' + ariaControls,
|
|
"aria-controls": ariaControls,
|
|
id: this.state.id + '_header',
|
|
"aria-expanded": !collapsed,
|
|
tabIndex: this.props.toggleable ? null : -1
|
|
}, toggleIcon, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-fieldset-legend-text"
|
|
}, this.props.legend), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-fieldset-legend-text",
|
|
id: this.state.id + '_header'
|
|
}, this.props.legend);
|
|
}
|
|
}, {
|
|
key: "renderLegend",
|
|
value: function renderLegend(collapsed) {
|
|
var legendContent = this.renderLegendContent(collapsed);
|
|
|
|
if (this.props.legend != null || this.props.toggleable) {
|
|
return /*#__PURE__*/React__default["default"].createElement("legend", {
|
|
className: "p-fieldset-legend p-unselectable-text",
|
|
onClick: this.toggle
|
|
}, legendContent);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-fieldset p-component', this.props.className, {
|
|
'p-fieldset-toggleable': this.props.toggleable
|
|
});
|
|
var collapsed = this.isCollapsed();
|
|
var legend = this.renderLegend(collapsed);
|
|
var content = this.renderContent(collapsed);
|
|
return /*#__PURE__*/React__default["default"].createElement("fieldset", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.props.onClick
|
|
}, legend, content);
|
|
}
|
|
}]);
|
|
|
|
return Fieldset;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Fieldset, "defaultProps", {
|
|
id: null,
|
|
legend: null,
|
|
className: null,
|
|
style: null,
|
|
toggleable: null,
|
|
collapsed: null,
|
|
transitionOptions: null,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onClick: null
|
|
});
|
|
|
|
function _createSuper$1k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1k(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var UIMessageComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(UIMessageComponent, _Component);
|
|
|
|
var _super = _createSuper$1k(UIMessageComponent);
|
|
|
|
function UIMessageComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, UIMessageComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(UIMessageComponent, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!this.props.message.sticky) {
|
|
this.timeout = setTimeout(function () {
|
|
_this2.onClose(null);
|
|
}, this.props.message.life || 3000);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClose",
|
|
value: function onClose(event) {
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
if (this.props.onClose) {
|
|
this.props.onClose(this.props.message);
|
|
}
|
|
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick() {
|
|
if (this.props.onClick) {
|
|
this.props.onClick(this.props.message);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderCloseIcon",
|
|
value: function renderCloseIcon() {
|
|
if (this.props.message.closable !== false) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-message-close p-link",
|
|
onClick: this.onClose
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-message-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMessage",
|
|
value: function renderMessage() {
|
|
if (this.props.message) {
|
|
var _this$props$message = this.props.message,
|
|
severity = _this$props$message.severity,
|
|
content = _this$props$message.content,
|
|
summary = _this$props$message.summary,
|
|
detail = _this$props$message.detail;
|
|
var icon = classNames('p-message-icon pi ', {
|
|
'pi-info-circle': severity === 'info',
|
|
'pi-check': severity === 'success',
|
|
'pi-exclamation-triangle': severity === 'warn',
|
|
'pi-times-circle': severity === 'error'
|
|
});
|
|
return content || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-message-summary"
|
|
}, summary), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-message-detail"
|
|
}, detail));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var severity = this.props.message.severity;
|
|
var className = 'p-message p-component p-message-' + severity;
|
|
var closeIcon = this.renderCloseIcon();
|
|
var message = this.renderMessage();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-message-wrapper"
|
|
}, message, closeIcon));
|
|
}
|
|
}]);
|
|
|
|
return UIMessageComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(UIMessageComponent, "defaultProps", {
|
|
message: null,
|
|
onClose: null,
|
|
onClick: null
|
|
});
|
|
|
|
var UIMessage = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(UIMessageComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$1j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1j(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var messageIdx$1 = 0;
|
|
var Messages = /*#__PURE__*/function (_Component) {
|
|
_inherits(Messages, _Component);
|
|
|
|
var _super = _createSuper$1j(Messages);
|
|
|
|
function Messages(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Messages);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
messages: []
|
|
};
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Messages, [{
|
|
key: "show",
|
|
value: function show(value) {
|
|
if (value) {
|
|
var newMessages = [];
|
|
|
|
if (Array.isArray(value)) {
|
|
for (var i = 0; i < value.length; i++) {
|
|
value[i].id = messageIdx$1++;
|
|
newMessages = [].concat(_toConsumableArray(this.state.messages), _toConsumableArray(value));
|
|
}
|
|
} else {
|
|
value.id = messageIdx$1++;
|
|
newMessages = this.state.messages ? [].concat(_toConsumableArray(this.state.messages), [value]) : [value];
|
|
}
|
|
|
|
this.setState({
|
|
messages: newMessages
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
this.setState({
|
|
messages: []
|
|
});
|
|
}
|
|
}, {
|
|
key: "replace",
|
|
value: function replace(value) {
|
|
var _this2 = this;
|
|
|
|
this.setState({
|
|
messages: []
|
|
}, function () {
|
|
return _this2.show(value);
|
|
});
|
|
}
|
|
}, {
|
|
key: "onClose",
|
|
value: function onClose(message) {
|
|
var newMessages = this.state.messages.filter(function (msg) {
|
|
return msg.id !== message.id;
|
|
});
|
|
this.setState({
|
|
messages: newMessages
|
|
});
|
|
|
|
if (this.props.onRemove) {
|
|
this.props.onRemove(message);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: this.props.className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, this.state.messages.map(function (message) {
|
|
var messageRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: messageRef,
|
|
key: message.id,
|
|
classNames: "p-message",
|
|
unmountOnExit: true,
|
|
timeout: {
|
|
enter: 300,
|
|
exit: 300
|
|
},
|
|
options: _this3.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement(UIMessage, {
|
|
ref: messageRef,
|
|
message: message,
|
|
onClick: _this3.props.onClick,
|
|
onClose: _this3.onClose
|
|
}));
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return Messages;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Messages, "defaultProps", {
|
|
id: null,
|
|
className: null,
|
|
style: null,
|
|
transitionOptions: null,
|
|
onRemove: null,
|
|
onClick: null
|
|
});
|
|
|
|
function _createSuper$1i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1i(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1i() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ProgressBar = /*#__PURE__*/function (_Component) {
|
|
_inherits(ProgressBar, _Component);
|
|
|
|
var _super = _createSuper$1i(ProgressBar);
|
|
|
|
function ProgressBar() {
|
|
_classCallCheck(this, ProgressBar);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(ProgressBar, [{
|
|
key: "renderLabel",
|
|
value: function renderLabel() {
|
|
if (this.props.showValue && this.props.value != null) {
|
|
var label = this.props.displayValueTemplate ? this.props.displayValueTemplate(this.props.value) : this.props.value + this.props.unit;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-progressbar-label"
|
|
}, label);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderDeterminate",
|
|
value: function renderDeterminate() {
|
|
var className = classNames('p-progressbar p-component p-progressbar-determinate', this.props.className);
|
|
var label = this.renderLabel();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
role: "progressbar",
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
"aria-valuemin": "0",
|
|
"aria-valuenow": this.props.value,
|
|
"aria-valuemax": "100",
|
|
"aria-label": this.props.value
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-progressbar-value p-progressbar-value-animate",
|
|
style: {
|
|
width: this.props.value + '%',
|
|
display: 'block',
|
|
backgroundColor: this.props.color
|
|
}
|
|
}), label);
|
|
}
|
|
}, {
|
|
key: "renderIndeterminate",
|
|
value: function renderIndeterminate() {
|
|
var className = classNames('p-progressbar p-component p-progressbar-indeterminate', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
role: "progressbar",
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-progressbar-indeterminate-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-progressbar-value p-progressbar-value-animate",
|
|
style: {
|
|
backgroundColor: this.props.color
|
|
}
|
|
})));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.props.mode === 'determinate') return this.renderDeterminate();else if (this.props.mode === 'indeterminate') return this.renderIndeterminate();else throw new Error(this.props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
|
|
}
|
|
}]);
|
|
|
|
return ProgressBar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ProgressBar, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
showValue: true,
|
|
unit: '%',
|
|
style: null,
|
|
className: null,
|
|
mode: 'determinate',
|
|
displayValueTemplate: null,
|
|
color: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1h(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1h() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var FileUpload = /*#__PURE__*/function (_Component) {
|
|
_inherits(FileUpload, _Component);
|
|
|
|
var _super = _createSuper$1h(FileUpload);
|
|
|
|
function FileUpload(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, FileUpload);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
files: [],
|
|
msgs: [],
|
|
focused: false,
|
|
progress: 0
|
|
};
|
|
_this.choose = _this.choose.bind(_assertThisInitialized(_this));
|
|
_this.upload = _this.upload.bind(_assertThisInitialized(_this));
|
|
_this.clear = _this.clear.bind(_assertThisInitialized(_this));
|
|
_this.onFileSelect = _this.onFileSelect.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnter = _this.onDragEnter.bind(_assertThisInitialized(_this));
|
|
_this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onSimpleUploaderClick = _this.onSimpleUploaderClick.bind(_assertThisInitialized(_this));
|
|
_this.duplicateIEEvent = false;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(FileUpload, [{
|
|
key: "hasFiles",
|
|
value: function hasFiles() {
|
|
return this.state.files && this.state.files.length > 0;
|
|
}
|
|
}, {
|
|
key: "isImage",
|
|
value: function isImage(file) {
|
|
return /^image\//.test(file.type);
|
|
}
|
|
}, {
|
|
key: "chooseDisabled",
|
|
value: function chooseDisabled() {
|
|
return this.props.disabled || this.props.fileLimit && this.props.fileLimit <= this.state.files.length + this.uploadedFileCount;
|
|
}
|
|
}, {
|
|
key: "uploadDisabled",
|
|
value: function uploadDisabled() {
|
|
return this.props.disabled || !this.hasFiles();
|
|
}
|
|
}, {
|
|
key: "cancelDisabled",
|
|
value: function cancelDisabled() {
|
|
return this.props.disabled || !this.hasFiles();
|
|
}
|
|
}, {
|
|
key: "chooseButtonLabel",
|
|
value: function chooseButtonLabel() {
|
|
return this.props.chooseLabel || this.props.chooseOptions.label || localeOption('choose');
|
|
}
|
|
}, {
|
|
key: "uploadButtonLabel",
|
|
value: function uploadButtonLabel() {
|
|
return this.props.uploadLabel || this.props.uploadOptions.label || localeOption('upload');
|
|
}
|
|
}, {
|
|
key: "cancelButtonLabel",
|
|
value: function cancelButtonLabel() {
|
|
return this.props.cancelLabel || this.props.cancelOptions.label || localeOption('cancel');
|
|
}
|
|
}, {
|
|
key: "remove",
|
|
value: function remove(event, index) {
|
|
this.clearInputElement();
|
|
|
|
var currentFiles = _toConsumableArray(this.state.files);
|
|
|
|
var removedFile = this.state.files[index];
|
|
currentFiles.splice(index, 1);
|
|
this.setState({
|
|
files: currentFiles
|
|
});
|
|
|
|
if (this.props.onRemove) {
|
|
this.props.onRemove({
|
|
originalEvent: event,
|
|
file: removedFile
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearInputElement",
|
|
value: function clearInputElement() {
|
|
if (this.fileInput) {
|
|
this.fileInput.value = '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearIEInput",
|
|
value: function clearIEInput() {
|
|
if (this.fileInput) {
|
|
this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
|
|
|
|
this.fileInput.value = '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "formatSize",
|
|
value: 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];
|
|
}
|
|
}, {
|
|
key: "onFileSelect",
|
|
value: function onFileSelect(event) {
|
|
var _this2 = this;
|
|
|
|
if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
|
|
this.duplicateIEEvent = false;
|
|
return;
|
|
}
|
|
|
|
this.setState({
|
|
msgs: []
|
|
});
|
|
this.files = this.state.files ? _toConsumableArray(this.state.files) : [];
|
|
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
var file = files[i];
|
|
|
|
if (!this.isFileSelected(file)) {
|
|
if (this.validate(file)) {
|
|
if (this.isImage(file)) {
|
|
file.objectURL = window.URL.createObjectURL(file);
|
|
}
|
|
|
|
this.files.push(file);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.setState({
|
|
files: this.files
|
|
}, function () {
|
|
if (_this2.hasFiles() && _this2.props.auto) {
|
|
_this2.upload();
|
|
}
|
|
});
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
files: files
|
|
});
|
|
}
|
|
|
|
if (event.type !== 'drop' && this.isIE11()) {
|
|
this.clearIEInput();
|
|
} else {
|
|
this.clearInputElement();
|
|
}
|
|
|
|
if (this.props.mode === 'basic' && this.files.length > 0) {
|
|
this.fileInput.style.display = 'none';
|
|
}
|
|
}
|
|
}, {
|
|
key: "isFileSelected",
|
|
value: function isFileSelected(file) {
|
|
var _iterator = _createForOfIteratorHelper$b(this.state.files),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var sFile = _step.value;
|
|
if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) return true;
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isIE11",
|
|
value: function isIE11() {
|
|
return !!window['MSInputMethodContext'] && !!document['documentMode'];
|
|
}
|
|
}, {
|
|
key: "validate",
|
|
value: function validate(file) {
|
|
if (this.props.maxFileSize && file.size > this.props.maxFileSize) {
|
|
var message = {
|
|
severity: 'error',
|
|
summary: this.props.invalidFileSizeMessageSummary.replace('{0}', file.name),
|
|
detail: this.props.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.props.maxFileSize))
|
|
};
|
|
|
|
if (this.props.mode === 'advanced') {
|
|
this.messagesUI.show(message);
|
|
}
|
|
|
|
if (this.props.onValidationFail) {
|
|
this.props.onValidationFail(file);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "upload",
|
|
value: function upload() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.customUpload) {
|
|
if (this.props.fileLimit) {
|
|
this.uploadedFileCount += this.state.files.length;
|
|
}
|
|
|
|
if (this.props.uploadHandler) {
|
|
this.props.uploadHandler({
|
|
files: this.state.files,
|
|
options: {
|
|
clear: this.clear,
|
|
props: this.props
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
this.setState({
|
|
msgs: []
|
|
});
|
|
var xhr = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
|
|
if (this.props.onBeforeUpload) {
|
|
this.props.onBeforeUpload({
|
|
'xhr': xhr,
|
|
'formData': formData
|
|
});
|
|
}
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$b(this.state.files),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var file = _step2.value;
|
|
formData.append(this.props.name, file, file.name);
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
|
|
xhr.upload.addEventListener('progress', function (event) {
|
|
if (event.lengthComputable) {
|
|
_this3.setState({
|
|
progress: Math.round(event.loaded * 100 / event.total)
|
|
}, function () {
|
|
if (_this3.props.onProgress) {
|
|
_this3.props.onProgress({
|
|
originalEvent: event,
|
|
progress: _this3.state.progress
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
_this3.setState({
|
|
progress: 0
|
|
});
|
|
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
if (_this3.props.fileLimit) {
|
|
_this3.uploadedFileCount += _this3.state.files.length;
|
|
}
|
|
|
|
if (_this3.props.onUpload) {
|
|
_this3.props.onUpload({
|
|
xhr: xhr,
|
|
files: _this3.state.files
|
|
});
|
|
}
|
|
} else {
|
|
if (_this3.props.onError) {
|
|
_this3.props.onError({
|
|
xhr: xhr,
|
|
files: _this3.state.files
|
|
});
|
|
}
|
|
}
|
|
|
|
_this3.clear();
|
|
}
|
|
};
|
|
|
|
xhr.open('POST', this.props.url, true);
|
|
|
|
if (this.props.onBeforeSend) {
|
|
this.props.onBeforeSend({
|
|
'xhr': xhr,
|
|
'formData': formData
|
|
});
|
|
}
|
|
|
|
xhr.withCredentials = this.props.withCredentials;
|
|
xhr.send(formData);
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
this.setState({
|
|
files: []
|
|
});
|
|
|
|
if (this.props.onClear) {
|
|
this.props.onClear();
|
|
}
|
|
|
|
this.clearInputElement();
|
|
}
|
|
}, {
|
|
key: "choose",
|
|
value: function choose() {
|
|
this.fileInput.click();
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.which === 13) {
|
|
// enter
|
|
this.choose();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnter",
|
|
value: function onDragEnter(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
DomHandler.addClass(this.content, 'p-fileupload-highlight');
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
DomHandler.removeClass(this.content, 'p-fileupload-highlight');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
if (!this.props.disabled) {
|
|
DomHandler.removeClass(this.content, 'p-fileupload-highlight');
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|
var allowDrop = this.props.multiple || files && files.length === 0;
|
|
|
|
if (allowDrop) {
|
|
this.onFileSelect(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSimpleUploaderClick",
|
|
value: function onSimpleUploaderClick() {
|
|
if (this.hasFiles()) {
|
|
this.upload();
|
|
} else {
|
|
this.fileInput.click();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderChooseButton",
|
|
value: function renderChooseButton() {
|
|
var _this4 = this;
|
|
|
|
var _this$props$chooseOpt = this.props.chooseOptions,
|
|
className = _this$props$chooseOpt.className,
|
|
style = _this$props$chooseOpt.style,
|
|
icon = _this$props$chooseOpt.icon,
|
|
iconOnly = _this$props$chooseOpt.iconOnly;
|
|
var chooseClassName = classNames('p-button p-fileupload-choose p-component', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-button-icon-only': iconOnly
|
|
}, className);
|
|
var labelClassName = 'p-button-label p-clickable';
|
|
var label = iconOnly ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: labelClassName,
|
|
dangerouslySetInnerHTML: {
|
|
__html: " "
|
|
}
|
|
}) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: labelClassName
|
|
}, this.chooseButtonLabel());
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: chooseClassName,
|
|
style: style,
|
|
onClick: this.choose,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
tabIndex: 0
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this4.fileInput = el;
|
|
},
|
|
type: "file",
|
|
onChange: this.onFileSelect,
|
|
multiple: this.props.multiple,
|
|
accept: this.props.accept,
|
|
disabled: this.chooseDisabled()
|
|
}), IconUtils.getJSXIcon(icon || 'pi pi-fw pi-plus', {
|
|
className: 'p-button-icon p-button-icon-left p-clickable'
|
|
}, {
|
|
props: this.props
|
|
}), label, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderFile",
|
|
value: function renderFile(file, index) {
|
|
var _this5 = this;
|
|
|
|
var preview = this.isImage(file) ? /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
alt: file.name,
|
|
role: "presentation",
|
|
src: file.objectURL,
|
|
width: this.props.previewWidth
|
|
})) : null;
|
|
var fileName = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-fileupload-filename"
|
|
}, file.name);
|
|
var size = /*#__PURE__*/React__default["default"].createElement("div", null, this.formatSize(file.size));
|
|
var removeButton = /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-times",
|
|
onClick: function onClick(e) {
|
|
return _this5.remove(e, index);
|
|
}
|
|
}));
|
|
var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, preview, fileName, size, removeButton);
|
|
|
|
if (this.props.itemTemplate) {
|
|
var defaultContentOptions = {
|
|
onRemove: function onRemove(event) {
|
|
return _this5.remove(event, index);
|
|
},
|
|
previewElement: preview,
|
|
fileNameElement: fileName,
|
|
sizeElement: size,
|
|
removeElement: removeButton,
|
|
formatSize: this.formatSize(file.size),
|
|
files: this.state.files,
|
|
index: index,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.itemTemplate, file, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-fileupload-row",
|
|
key: file.name + file.type + file.size
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderFiles",
|
|
value: function renderFiles() {
|
|
var _this6 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-fileupload-files"
|
|
}, this.state.files.map(function (file, index) {
|
|
return _this6.renderFile(file, index);
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderEmptyContent",
|
|
value: function renderEmptyContent() {
|
|
if (this.props.emptyTemplate && !this.hasFiles()) {
|
|
return ObjectUtils.getJSXElement(this.props.emptyTemplate, this.props);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderProgressBarContent",
|
|
value: function renderProgressBarContent() {
|
|
if (this.props.progressBarTemplate) {
|
|
return ObjectUtils.getJSXElement(this.props.progressBarTemplate, this.props);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(ProgressBar, {
|
|
value: this.state.progress,
|
|
showValue: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderAdvanced",
|
|
value: function renderAdvanced() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-fileupload p-fileupload-advanced p-component', this.props.className);
|
|
var headerClassName = classNames('p-fileupload-buttonbar', this.props.headerClassName);
|
|
var contentClassName = classNames('p-fileupload-content', this.props.contentClassName);
|
|
var uploadButton, cancelButton, filesList, progressBar;
|
|
var chooseButton = this.renderChooseButton();
|
|
var emptyContent = this.renderEmptyContent();
|
|
|
|
if (!this.props.auto) {
|
|
var uploadOptions = this.props.uploadOptions;
|
|
var cancelOptions = this.props.cancelOptions;
|
|
var uploadLabel = !uploadOptions.iconOnly ? this.uploadButtonLabel() : '';
|
|
var cancelLabel = !cancelOptions.iconOnly ? this.cancelButtonLabel() : '';
|
|
uploadButton = /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
label: uploadLabel,
|
|
icon: uploadOptions.icon || 'pi pi-upload',
|
|
onClick: this.upload,
|
|
disabled: this.uploadDisabled(),
|
|
style: uploadOptions.style,
|
|
className: uploadOptions.className
|
|
});
|
|
cancelButton = /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
label: cancelLabel,
|
|
icon: cancelOptions.icon || 'pi pi-times',
|
|
onClick: this.clear,
|
|
disabled: this.cancelDisabled(),
|
|
style: cancelOptions.style,
|
|
className: cancelOptions.className
|
|
});
|
|
}
|
|
|
|
if (this.hasFiles()) {
|
|
filesList = this.renderFiles();
|
|
progressBar = this.renderProgressBarContent();
|
|
}
|
|
|
|
var header = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: headerClassName,
|
|
style: this.props.headerStyle
|
|
}, chooseButton, uploadButton, cancelButton);
|
|
|
|
if (this.props.headerTemplate) {
|
|
var defaultContentOptions = {
|
|
className: headerClassName,
|
|
chooseButton: chooseButton,
|
|
uploadButton: uploadButton,
|
|
cancelButton: cancelButton,
|
|
element: header,
|
|
props: this.props
|
|
};
|
|
header = ObjectUtils.getJSXElement(this.props.headerTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, header, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
_this7.content = el;
|
|
},
|
|
className: contentClassName,
|
|
style: this.props.contentStyle,
|
|
onDragEnter: this.onDragEnter,
|
|
onDragOver: this.onDragOver,
|
|
onDragLeave: this.onDragLeave,
|
|
onDrop: this.onDrop
|
|
}, progressBar, /*#__PURE__*/React__default["default"].createElement(Messages, {
|
|
ref: function ref(el) {
|
|
return _this7.messagesUI = el;
|
|
}
|
|
}), filesList, emptyContent));
|
|
}
|
|
}, {
|
|
key: "renderBasic",
|
|
value: function renderBasic() {
|
|
var _this8 = this;
|
|
|
|
var hasFiles = this.hasFiles();
|
|
var chooseOptions = this.props.chooseOptions;
|
|
var className = classNames('p-fileupload p-fileupload-basic p-component', this.props.className);
|
|
var buttonClassName = classNames('p-button p-component p-fileupload-choose', {
|
|
'p-fileupload-choose-selected': hasFiles,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
}, chooseOptions.className);
|
|
var chooseIcon = chooseOptions.icon || classNames({
|
|
'pi pi-plus': !chooseOptions.icon && (!hasFiles || this.props.auto),
|
|
'pi pi-upload': !chooseOptions.icon && hasFiles && !this.props.auto
|
|
});
|
|
var labelClassName = 'p-button-label p-clickable';
|
|
var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: labelClassName,
|
|
dangerouslySetInnerHTML: {
|
|
__html: " "
|
|
}
|
|
}) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: labelClassName
|
|
}, this.chooseButtonLabel());
|
|
var label = this.props.auto ? chooseLabel : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: labelClassName
|
|
}, hasFiles ? this.state.files[0].name : chooseLabel);
|
|
var icon = IconUtils.getJSXIcon(chooseIcon, {
|
|
className: 'p-button-icon p-button-icon-left'
|
|
}, {
|
|
props: this.props,
|
|
hasFiles: hasFiles
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(Messages, {
|
|
ref: function ref(el) {
|
|
return _this8.messagesUI = el;
|
|
}
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: buttonClassName,
|
|
style: chooseOptions.style,
|
|
onMouseUp: this.onSimpleUploaderClick,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
tabIndex: 0
|
|
}, icon, label, !hasFiles && /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this8.fileInput = el;
|
|
},
|
|
type: "file",
|
|
accept: this.props.accept,
|
|
multiple: this.props.multiple,
|
|
disabled: this.props.disabled,
|
|
onChange: this.onFileSelect
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.props.mode === 'advanced') return this.renderAdvanced();else if (this.props.mode === 'basic') return this.renderBasic();
|
|
}
|
|
}]);
|
|
|
|
return FileUpload;
|
|
}(React.Component);
|
|
|
|
_defineProperty(FileUpload, "defaultProps", {
|
|
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,
|
|
onUpload: null,
|
|
onError: null,
|
|
onClear: null,
|
|
onSelect: null,
|
|
onProgress: null,
|
|
onValidationFail: null,
|
|
uploadHandler: null,
|
|
onRemove: null
|
|
});
|
|
|
|
function _createSuper$1g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var FullCalendar = /*#__PURE__*/function (_Component) {
|
|
_inherits(FullCalendar, _Component);
|
|
|
|
var _super = _createSuper$1g(FullCalendar);
|
|
|
|
function FullCalendar() {
|
|
_classCallCheck(this, FullCalendar);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(FullCalendar, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
console.warn("FullCalendar component is deprecated. Use FullCalendar component of '@fullcalendar/react' package.");
|
|
this.config = {
|
|
theme: true
|
|
};
|
|
|
|
if (this.props.options) {
|
|
for (var prop in this.props.options) {
|
|
this.config[prop] = this.props.options[prop];
|
|
}
|
|
}
|
|
|
|
this.initialize();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (!this.calendar) {
|
|
this.initialize();
|
|
} else {
|
|
if (!ObjectUtils.equals(prevProps.events, this.props.events)) {
|
|
this.calendar.removeAllEventSources();
|
|
this.calendar.addEventSource(this.props.events);
|
|
}
|
|
|
|
if (!ObjectUtils.equals(prevProps.options, this.props.options)) {
|
|
for (var prop in this.props.options) {
|
|
var optionValue = this.props.options[prop];
|
|
this.config[prop] = optionValue;
|
|
this.calendar.setOption(prop, optionValue);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "initialize",
|
|
value: function initialize() {
|
|
var _this = this;
|
|
|
|
import('@fullcalendar/core').then(function (module) {
|
|
if (module && module.Calendar) {
|
|
_this.calendar = new module.Calendar(_this.element, _this.config);
|
|
|
|
_this.calendar.render();
|
|
|
|
if (_this.props.events) {
|
|
_this.calendar.removeAllEventSources();
|
|
|
|
_this.calendar.addEventSource(_this.props.events);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.calendar) {
|
|
this.calendar.destroy();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
},
|
|
style: this.props.style,
|
|
className: this.props.className
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return FullCalendar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(FullCalendar, "defaultProps", {
|
|
id: null,
|
|
events: [],
|
|
style: null,
|
|
className: null,
|
|
options: null
|
|
});
|
|
|
|
function _createSuper$1f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1f(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1f() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var GalleriaItemComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(GalleriaItemComponent, _Component);
|
|
|
|
var _super = _createSuper$1f(GalleriaItemComponent);
|
|
|
|
function GalleriaItemComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, GalleriaItemComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.navForward = _this.navForward.bind(_assertThisInitialized(_this));
|
|
_this.navBackward = _this.navBackward.bind(_assertThisInitialized(_this));
|
|
_this.next = _this.next.bind(_assertThisInitialized(_this));
|
|
_this.prev = _this.prev.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(GalleriaItemComponent, [{
|
|
key: "step",
|
|
value: function step(index) {
|
|
if (this.itemsContainer) {
|
|
this.itemsContainer.style.transform = this.isVertical() ? "translate3d(0, ".concat(index * 100, "%, 0)") : "translate3d(".concat(index * 100, "%, 0, 0)");
|
|
this.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
}
|
|
}, {
|
|
key: "next",
|
|
value: function next() {
|
|
var nextItemIndex = this.props.activeItemIndex + 1;
|
|
this.props.onActiveItemChange({
|
|
index: this.props.circular && this.props.value.length - 1 === this.props.activeItemIndex ? 0 : nextItemIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: "prev",
|
|
value: function prev() {
|
|
var prevItemIndex = this.props.activeItemIndex !== 0 ? this.props.activeItemIndex - 1 : 0;
|
|
this.props.onActiveItemChange({
|
|
index: this.props.circular && this.props.activeItemIndex === 0 ? this.props.value.length - 1 : prevItemIndex
|
|
});
|
|
}
|
|
}, {
|
|
key: "stopSlideShow",
|
|
value: function stopSlideShow() {
|
|
if (this.props.slideShowActive && this.props.stopSlideShow) {
|
|
this.props.stopSlideShow();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navBackward",
|
|
value: function navBackward(e) {
|
|
this.stopSlideShow();
|
|
this.prev();
|
|
|
|
if (e && e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navForward",
|
|
value: function navForward(e) {
|
|
this.stopSlideShow();
|
|
this.next();
|
|
|
|
if (e && e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onIndicatorClick",
|
|
value: function onIndicatorClick(index) {
|
|
this.stopSlideShow();
|
|
this.props.onActiveItemChange({
|
|
index: index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onIndicatorMouseEnter",
|
|
value: function onIndicatorMouseEnter(index) {
|
|
if (this.props.changeItemOnIndicatorHover) {
|
|
this.stopSlideShow();
|
|
this.props.onActiveItemChange({
|
|
index: index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onIndicatorKeyDown",
|
|
value: function onIndicatorKeyDown(event, index) {
|
|
if (event.which === 13) {
|
|
this.stopSlideShow();
|
|
this.props.onActiveItemChange({
|
|
index: index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.autoPlay) {
|
|
this.props.startSlideShow();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderBackwardNavigator",
|
|
value: function renderBackwardNavigator() {
|
|
if (this.props.showItemNavigators) {
|
|
var isDisabled = !this.props.circular && this.props.activeItemIndex === 0;
|
|
var buttonClassName = classNames('p-galleria-item-prev p-galleria-item-nav p-link', {
|
|
'p-disabled': isDisabled
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonClassName,
|
|
onClick: this.navBackward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-galleria-item-prev-icon pi pi-chevron-left"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderForwardNavigator",
|
|
value: function renderForwardNavigator() {
|
|
if (this.props.showItemNavigators) {
|
|
var isDisabled = !this.props.circular && this.props.activeItemIndex === this.props.value.length - 1;
|
|
var buttonClassName = classNames('p-galleria-item-next p-galleria-item-nav p-link', {
|
|
'p-disabled': isDisabled
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: buttonClassName,
|
|
onClick: this.navForward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-galleria-item-next-icon pi pi-chevron-right"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCaption",
|
|
value: function renderCaption() {
|
|
if (this.props.caption) {
|
|
var content = this.props.caption(this.props.value[this.props.activeItemIndex]);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-caption"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderIndicator",
|
|
value: function renderIndicator(index) {
|
|
var _this2 = this;
|
|
|
|
var indicator = this.props.indicator && this.props.indicator(index);
|
|
var isActive = this.props.activeItemIndex === index;
|
|
var indicatorItemClassName = classNames('p-galleria-indicator', {
|
|
'p-highlight': isActive
|
|
});
|
|
|
|
if (!indicator) {
|
|
indicator = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
tabIndex: -1,
|
|
className: "p-link"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: indicatorItemClassName,
|
|
key: 'p-galleria-indicator-' + index,
|
|
tabIndex: 0,
|
|
onClick: function onClick() {
|
|
return _this2.onIndicatorClick(index);
|
|
},
|
|
onMouseEnter: function onMouseEnter() {
|
|
return _this2.onIndicatorMouseEnter(index);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this2.onIndicatorKeyDown(e, index);
|
|
}
|
|
}, indicator);
|
|
}
|
|
}, {
|
|
key: "renderIndicators",
|
|
value: function renderIndicators() {
|
|
if (this.props.showIndicators) {
|
|
var indicatorsContentClassName = classNames('p-galleria-indicators p-reset', this.props.indicatorsContentClassName);
|
|
var indicators = [];
|
|
|
|
for (var i = 0; i < this.props.value.length; i++) {
|
|
indicators.push(this.renderIndicator(i));
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: indicatorsContentClassName
|
|
}, indicators);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var content = this.props.itemTemplate && this.props.itemTemplate(this.props.value[this.props.activeItemIndex]);
|
|
var backwardNavigator = this.renderBackwardNavigator();
|
|
var forwardNavigator = this.renderForwardNavigator();
|
|
var caption = this.renderCaption();
|
|
var indicators = this.renderIndicators();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.props.forwardRef(el);
|
|
},
|
|
className: "p-galleria-item-wrapper"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-item-container"
|
|
}, backwardNavigator, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-item"
|
|
}, content), forwardNavigator, caption), indicators);
|
|
}
|
|
}]);
|
|
|
|
return GalleriaItemComponent;
|
|
}(React.Component);
|
|
|
|
var GalleriaItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(GalleriaItemComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$1e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1e(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1e() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var GalleriaThumbnailItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(GalleriaThumbnailItem, _Component);
|
|
|
|
var _super = _createSuper$1e(GalleriaThumbnailItem);
|
|
|
|
function GalleriaThumbnailItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, GalleriaThumbnailItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemKeyDown = _this.onItemKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(GalleriaThumbnailItem, [{
|
|
key: "onItemClick",
|
|
value: function onItemClick(event) {
|
|
this.props.onItemClick({
|
|
originalEvent: event,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event) {
|
|
if (event.which === 13) {
|
|
this.props.onItemClick({
|
|
originalEvent: event,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.template && this.props.template(this.props.item);
|
|
var itemClassName = classNames(this.props.className, 'p-galleria-thumbnail-item', {
|
|
'p-galleria-thumbnail-item-current': this.props.current,
|
|
'p-galleria-thumbnail-item-active': this.props.active,
|
|
'p-galleria-thumbnail-item-start': this.props.start,
|
|
'p-galleria-thumbnail-item-end': this.props.end
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: itemClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-thumbnail-item-content",
|
|
tabIndex: this.props.active ? 0 : null,
|
|
onClick: this.onItemClick,
|
|
onKeyDown: this.onItemKeyDown
|
|
}, content));
|
|
}
|
|
}]);
|
|
|
|
return GalleriaThumbnailItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(GalleriaThumbnailItem, "defaultProps", {
|
|
index: null,
|
|
template: null,
|
|
item: null,
|
|
current: false,
|
|
active: false,
|
|
start: false,
|
|
end: false,
|
|
className: null,
|
|
onItemClick: null
|
|
});
|
|
|
|
var GalleriaThumbnails = /*#__PURE__*/function (_Component2) {
|
|
_inherits(GalleriaThumbnails, _Component2);
|
|
|
|
var _super2 = _createSuper$1e(GalleriaThumbnails);
|
|
|
|
function GalleriaThumbnails(props) {
|
|
var _this2;
|
|
|
|
_classCallCheck(this, GalleriaThumbnails);
|
|
|
|
_this2 = _super2.call(this, props);
|
|
_this2.state = {
|
|
numVisible: props.numVisible,
|
|
totalShiftedItems: 0,
|
|
page: 0
|
|
};
|
|
_this2.navForward = _this2.navForward.bind(_assertThisInitialized(_this2));
|
|
_this2.navBackward = _this2.navBackward.bind(_assertThisInitialized(_this2));
|
|
_this2.onTransitionEnd = _this2.onTransitionEnd.bind(_assertThisInitialized(_this2));
|
|
_this2.onTouchStart = _this2.onTouchStart.bind(_assertThisInitialized(_this2));
|
|
_this2.onTouchMove = _this2.onTouchMove.bind(_assertThisInitialized(_this2));
|
|
_this2.onTouchEnd = _this2.onTouchEnd.bind(_assertThisInitialized(_this2));
|
|
_this2.onItemClick = _this2.onItemClick.bind(_assertThisInitialized(_this2));
|
|
_this2.attributeSelector = UniqueComponentId();
|
|
return _this2;
|
|
}
|
|
|
|
_createClass(GalleriaThumbnails, [{
|
|
key: "step",
|
|
value: function step(dir) {
|
|
var totalShiftedItems = this.state.totalShiftedItems + dir;
|
|
|
|
if (dir < 0 && -1 * totalShiftedItems + this.state.numVisible > this.props.value.length - 1) {
|
|
totalShiftedItems = this.state.numVisible - this.props.value.length;
|
|
} else if (dir > 0 && totalShiftedItems > 0) {
|
|
totalShiftedItems = 0;
|
|
}
|
|
|
|
if (this.props.circular) {
|
|
if (dir < 0 && this.props.value.length - 1 === this.props.activeItemIndex) {
|
|
totalShiftedItems = 0;
|
|
} else if (dir > 0 && this.props.activeItemIndex === 0) {
|
|
totalShiftedItems = this.state.numVisible - this.props.value.length;
|
|
}
|
|
}
|
|
|
|
if (this.itemsContainer) {
|
|
DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
|
|
this.itemsContainer.style.transform = this.props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0, 0)");
|
|
this.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
|
|
this.setState({
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
}
|
|
}, {
|
|
key: "stopSlideShow",
|
|
value: function stopSlideShow() {
|
|
if (this.props.slideShowActive && this.props.stopSlideShow) {
|
|
this.props.stopSlideShow();
|
|
}
|
|
}
|
|
}, {
|
|
key: "getMedianItemIndex",
|
|
value: function getMedianItemIndex() {
|
|
var index = Math.floor(this.state.numVisible / 2);
|
|
return this.state.numVisible % 2 ? index : index - 1;
|
|
}
|
|
}, {
|
|
key: "navBackward",
|
|
value: function navBackward(e) {
|
|
this.stopSlideShow();
|
|
var prevItemIndex = this.props.activeItemIndex !== 0 ? this.props.activeItemIndex - 1 : 0;
|
|
var diff = prevItemIndex + this.state.totalShiftedItems;
|
|
|
|
if (this.state.numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.state.totalShiftedItems !== 0 || this.props.circular)) {
|
|
this.step(1);
|
|
}
|
|
|
|
this.props.onActiveItemChange({
|
|
index: this.props.circular && this.props.activeItemIndex === 0 ? this.props.value.length - 1 : prevItemIndex
|
|
});
|
|
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navForward",
|
|
value: function navForward(e) {
|
|
this.stopSlideShow();
|
|
var nextItemIndex = this.props.activeItemIndex + 1;
|
|
|
|
if (nextItemIndex + this.state.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.state.totalShiftedItems < this.getTotalPageNumber() - 1 || this.props.circular)) {
|
|
this.step(-1);
|
|
}
|
|
|
|
this.props.onActiveItemChange({
|
|
index: this.props.circular && this.props.value.length - 1 === this.props.activeItemIndex ? 0 : nextItemIndex
|
|
});
|
|
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: function onItemClick(event) {
|
|
this.stopSlideShow();
|
|
var selectedItemIndex = event.index;
|
|
|
|
if (selectedItemIndex !== this.props.activeItemIndex) {
|
|
var diff = selectedItemIndex + this.state.totalShiftedItems;
|
|
var dir = 0;
|
|
|
|
if (selectedItemIndex < this.props.activeItemIndex) {
|
|
dir = this.state.numVisible - diff - 1 - this.getMedianItemIndex();
|
|
|
|
if (dir > 0 && -1 * this.state.totalShiftedItems !== 0) {
|
|
this.step(dir);
|
|
}
|
|
} else {
|
|
dir = this.getMedianItemIndex() - diff;
|
|
|
|
if (dir < 0 && -1 * this.state.totalShiftedItems < this.getTotalPageNumber() - 1) {
|
|
this.step(dir);
|
|
}
|
|
}
|
|
|
|
this.props.onActiveItemChange({
|
|
index: selectedItemIndex
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTransitionEnd",
|
|
value: function onTransitionEnd(e) {
|
|
if (this.itemsContainer && e.propertyName === 'transform') {
|
|
DomHandler.addClass(this.itemsContainer, 'p-items-hidden');
|
|
this.itemsContainer.style.transition = '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchStart",
|
|
value: function onTouchStart(e) {
|
|
var touchobj = e.changedTouches[0];
|
|
this.startPos = {
|
|
x: touchobj.pageX,
|
|
y: touchobj.pageY
|
|
};
|
|
}
|
|
}, {
|
|
key: "onTouchMove",
|
|
value: function onTouchMove(e) {
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd(e) {
|
|
var touchobj = e.changedTouches[0];
|
|
|
|
if (this.props.isVertical) {
|
|
this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
|
|
} else {
|
|
this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
|
|
}
|
|
}
|
|
}, {
|
|
key: "changePageOnTouch",
|
|
value: function changePageOnTouch(e, diff) {
|
|
if (diff < 0) {
|
|
// left
|
|
this.navForward(e);
|
|
} else {
|
|
// right
|
|
this.navBackward(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getTotalPageNumber",
|
|
value: function getTotalPageNumber() {
|
|
return this.props.value.length > this.state.numVisible ? this.props.value.length - this.state.numVisible + 1 : 0;
|
|
}
|
|
}, {
|
|
key: "createStyle",
|
|
value: function createStyle() {
|
|
if (!this.thumbnailsStyle) {
|
|
this.thumbnailsStyle = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
}
|
|
|
|
var innerHTML = "\n .p-galleria-thumbnail-items[".concat(this.attributeSelector, "] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100 / this.state.numVisible, "%\n }\n ");
|
|
|
|
if (this.props.responsiveOptions) {
|
|
this.responsiveOptions = _toConsumableArray(this.props.responsiveOptions);
|
|
this.responsiveOptions.sort(function (data1, data2) {
|
|
var value1 = data1.breakpoint;
|
|
var value2 = data2.breakpoint;
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
|
return -1 * result;
|
|
});
|
|
|
|
for (var i = 0; i < this.responsiveOptions.length; i++) {
|
|
var res = this.responsiveOptions[i];
|
|
innerHTML += "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-galleria-thumbnail-items[").concat(this.attributeSelector, "] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
|
|
}
|
|
}
|
|
|
|
this.thumbnailsStyle.innerHTML = innerHTML;
|
|
}
|
|
}, {
|
|
key: "calculatePosition",
|
|
value: function calculatePosition() {
|
|
if (this.itemsContainer && this.responsiveOptions) {
|
|
var windowWidth = window.innerWidth;
|
|
var matchedResponsiveData = {
|
|
numVisible: this.props.numVisible
|
|
};
|
|
|
|
for (var i = 0; i < this.responsiveOptions.length; i++) {
|
|
var res = this.responsiveOptions[i];
|
|
|
|
if (parseInt(res.breakpoint, 10) >= windowWidth) {
|
|
matchedResponsiveData = res;
|
|
}
|
|
}
|
|
|
|
if (this.state.numVisible !== matchedResponsiveData.numVisible) {
|
|
this.setState({
|
|
numVisible: matchedResponsiveData.numVisible
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentListeners",
|
|
value: function bindDocumentListeners() {
|
|
var _this3 = this;
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function () {
|
|
_this3.calculatePosition();
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentListeners",
|
|
value: function unbindDocumentListeners() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.itemsContainer) {
|
|
this.itemsContainer.setAttribute(this.attributeSelector, '');
|
|
}
|
|
|
|
this.createStyle();
|
|
this.calculatePosition();
|
|
|
|
if (this.props.responsiveOptions) {
|
|
this.bindDocumentListeners();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var totalShiftedItems = this.state.totalShiftedItems;
|
|
|
|
if (prevState.numVisible !== this.state.numVisible || prevProps.activeItemIndex !== this.props.activeItemIndex) {
|
|
if (this.props.activeItemIndex <= this.getMedianItemIndex()) {
|
|
totalShiftedItems = 0;
|
|
} else if (this.props.value.length - this.state.numVisible + this.getMedianItemIndex() < this.props.activeItemIndex) {
|
|
totalShiftedItems = this.state.numVisible - this.props.value.length;
|
|
} else if (this.props.value.length - this.state.numVisible < this.props.activeItemIndex && this.state.numVisible % 2 === 0) {
|
|
totalShiftedItems = this.props.activeItemIndex * -1 + this.getMedianItemIndex() + 1;
|
|
} else {
|
|
totalShiftedItems = this.props.activeItemIndex * -1 + this.getMedianItemIndex();
|
|
}
|
|
|
|
if (totalShiftedItems !== this.state.totalShiftedItems) {
|
|
this.setState({
|
|
totalShiftedItems: totalShiftedItems
|
|
});
|
|
}
|
|
|
|
this.itemsContainer.style.transform = this.props.isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / this.state.numVisible), "%, 0, 0)");
|
|
|
|
if (prevProps.activeItemIndex !== this.props.activeItemIndex) {
|
|
DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
|
|
this.itemsContainer.style.transition = 'transform 500ms ease 0s';
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.responsiveOptions) {
|
|
this.unbindDocumentListeners();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this4 = this;
|
|
|
|
return this.props.value.map(function (item, index) {
|
|
var firstIndex = _this4.state.totalShiftedItems * -1,
|
|
lastIndex = firstIndex + _this4.state.numVisible - 1,
|
|
isActive = firstIndex <= index && lastIndex >= index,
|
|
start = firstIndex === index,
|
|
end = lastIndex === index,
|
|
current = _this4.props.activeItemIndex === index;
|
|
return /*#__PURE__*/React__default["default"].createElement(GalleriaThumbnailItem, {
|
|
key: index,
|
|
index: index,
|
|
template: _this4.props.itemTemplate,
|
|
item: item,
|
|
active: isActive,
|
|
start: start,
|
|
end: end,
|
|
onItemClick: _this4.onItemClick,
|
|
current: current
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderBackwardNavigator",
|
|
value: function renderBackwardNavigator() {
|
|
if (this.props.showThumbnailNavigators) {
|
|
var isDisabled = !this.props.circular && this.props.activeItemIndex === 0 || this.props.value.length <= this.state.numVisible;
|
|
var buttonClassName = classNames('p-galleria-thumbnail-prev p-link', {
|
|
'p-disabled': isDisabled
|
|
}),
|
|
iconClassName = classNames('p-galleria-thumbnail-prev-icon pi', {
|
|
'pi-chevron-left': !this.props.isVertical,
|
|
'pi-chevron-up': this.props.isVertical
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: buttonClassName,
|
|
onClick: this.navBackward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderForwardNavigator",
|
|
value: function renderForwardNavigator() {
|
|
if (this.props.showThumbnailNavigators) {
|
|
var isDisabled = !this.props.circular && this.props.activeItemIndex === this.props.value.length - 1 || this.props.value.length <= this.state.numVisible;
|
|
var buttonClassName = classNames('p-galleria-thumbnail-next p-link', {
|
|
'p-disabled': isDisabled
|
|
}),
|
|
iconClassName = classNames('p-galleria-thumbnail-next-icon pi', {
|
|
'pi-chevron-right': !this.props.isVertical,
|
|
'pi-chevron-down': this.props.isVertical
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: buttonClassName,
|
|
onClick: this.navForward,
|
|
disabled: isDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this5 = this;
|
|
|
|
var items = this.renderItems();
|
|
var height = this.props.isVertical ? this.props.contentHeight : '';
|
|
var backwardNavigator = this.renderBackwardNavigator();
|
|
var forwardNavigator = this.renderForwardNavigator();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-thumbnail-container"
|
|
}, backwardNavigator, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-thumbnail-items-container",
|
|
style: {
|
|
'height': height
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.itemsContainer = el;
|
|
},
|
|
className: "p-galleria-thumbnail-items",
|
|
onTransitionEnd: this.onTransitionEnd,
|
|
onTouchStart: this.onTouchStart,
|
|
onTouchMove: this.onTouchMove,
|
|
onTouchEnd: this.onTouchEnd
|
|
}, items)), forwardNavigator);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-thumbnail-wrapper"
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return GalleriaThumbnails;
|
|
}(React.Component);
|
|
|
|
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; }
|
|
|
|
function _createSuper$1d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Galleria = /*#__PURE__*/function (_Component) {
|
|
_inherits(Galleria, _Component);
|
|
|
|
var _super = _createSuper$1d(Galleria);
|
|
|
|
function Galleria(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Galleria);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false,
|
|
numVisible: props.numVisible,
|
|
slideShowActive: false
|
|
};
|
|
|
|
if (!_this.props.onItemChange) {
|
|
_this.state = _objectSpread$p(_objectSpread$p({}, _this.state), {}, {
|
|
activeIndex: props.activeIndex
|
|
});
|
|
}
|
|
|
|
_this.onActiveItemChange = _this.onActiveItemChange.bind(_assertThisInitialized(_this));
|
|
_this.show = _this.show.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.startSlideShow = _this.startSlideShow.bind(_assertThisInitialized(_this));
|
|
_this.stopSlideShow = _this.stopSlideShow.bind(_assertThisInitialized(_this));
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntering = _this.onEntering.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.galleriaRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Galleria, [{
|
|
key: "activeItemIndex",
|
|
get: function get() {
|
|
return this.props.onItemChange ? this.props.activeIndex : this.state.activeIndex;
|
|
}
|
|
}, {
|
|
key: "onActiveItemChange",
|
|
value: function onActiveItemChange(event) {
|
|
if (this.props.onItemChange) {
|
|
this.props.onItemChange(event);
|
|
} else {
|
|
this.setState({
|
|
activeIndex: event.index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
visible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
visible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}, {
|
|
key: "onEntering",
|
|
value: function onEntering() {
|
|
ZIndexUtils.set('modal', this.mask, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['modal']);
|
|
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-component-overlay-enter');
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.mask);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "isAutoPlayActive",
|
|
value: function isAutoPlayActive() {
|
|
return this.state.slideShowActive;
|
|
}
|
|
}, {
|
|
key: "startSlideShow",
|
|
value: function startSlideShow() {
|
|
var _this2 = this;
|
|
|
|
this.interval = setInterval(function () {
|
|
var activeIndex = _this2.props.circular && _this2.props.value.length - 1 === _this2.activeItemIndex ? 0 : _this2.activeItemIndex + 1;
|
|
|
|
_this2.onActiveItemChange({
|
|
index: activeIndex
|
|
});
|
|
}, this.props.transitionInterval);
|
|
this.setState({
|
|
slideShowActive: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "stopSlideShow",
|
|
value: function stopSlideShow() {
|
|
if (this.interval) {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
this.setState({
|
|
slideShowActive: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "getPositionClassName",
|
|
value: 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) : '';
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
value: function isVertical() {
|
|
return this.props.thumbnailsPosition === 'left' || this.props.thumbnailsPosition === 'right';
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (prevProps.value !== this.props.value) {
|
|
if (this.props.value && this.props.value.length < this.state.numVisible) {
|
|
this.setState({
|
|
numVisible: this.props.value.length
|
|
});
|
|
}
|
|
}
|
|
|
|
if (prevProps.numVisible !== this.props.numVisible) {
|
|
this.setState({
|
|
numVisible: this.props.numVisible
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.state.slideShowActive) {
|
|
this.stopSlideShow();
|
|
}
|
|
|
|
ZIndexUtils.clear(this.mask);
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-header"
|
|
}, this.props.header);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-footer"
|
|
}, this.props.footer);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this3 = this;
|
|
|
|
var isVertical = this.isVertical();
|
|
var thumbnailsPosClassName = this.props.showThumbnails && this.getPositionClassName('p-galleria-thumbnails', this.props.thumbnailsPosition);
|
|
var indicatorPosClassName = this.props.showIndicators && this.getPositionClassName('p-galleria-indicators', this.props.indicatorsPosition);
|
|
var galleriaClassName = classNames('p-galleria p-component', this.props.className, {
|
|
'p-galleria-fullscreen': this.props.fullScreen,
|
|
'p-galleria-indicator-onitem': this.props.showIndicatorsOnItem,
|
|
'p-galleria-item-nav-onhover': this.props.showItemNavigatorsOnHover && !this.props.fullScreen
|
|
}, thumbnailsPosClassName, indicatorPosClassName);
|
|
var closeIcon = this.props.fullScreen && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-galleria-close p-link",
|
|
onClick: this.hide
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-galleria-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
var header = this.renderHeader();
|
|
var footer = this.renderFooter();
|
|
var element = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.galleriaRef,
|
|
id: this.props.id,
|
|
className: galleriaClassName,
|
|
style: this.props.style
|
|
}, closeIcon, header, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-galleria-content"
|
|
}, /*#__PURE__*/React__default["default"].createElement(GalleriaItem, {
|
|
ref: function ref(el) {
|
|
return _this3.previewContent = el;
|
|
},
|
|
value: this.props.value,
|
|
activeItemIndex: this.activeItemIndex,
|
|
onActiveItemChange: this.onActiveItemChange,
|
|
itemTemplate: this.props.item,
|
|
circular: this.props.circular,
|
|
caption: this.props.caption,
|
|
showIndicators: this.props.showIndicators,
|
|
changeItemOnIndicatorHover: this.props.changeItemOnIndicatorHover,
|
|
indicator: this.props.indicator,
|
|
showItemNavigators: this.props.showItemNavigators,
|
|
autoPlay: this.props.autoPlay,
|
|
slideShowActive: this.state.slideShowActive,
|
|
startSlideShow: this.startSlideShow,
|
|
stopSlideShow: this.stopSlideShow
|
|
}), this.props.showThumbnails && /*#__PURE__*/React__default["default"].createElement(GalleriaThumbnails, {
|
|
value: this.props.value,
|
|
activeItemIndex: this.activeItemIndex,
|
|
onActiveItemChange: this.onActiveItemChange,
|
|
itemTemplate: this.props.thumbnail,
|
|
numVisible: this.state.numVisible,
|
|
responsiveOptions: this.props.responsiveOptions,
|
|
circular: this.props.circular,
|
|
isVertical: isVertical,
|
|
contentHeight: this.props.verticalThumbnailViewPortHeight,
|
|
showThumbnailNavigators: this.props.showThumbnailNavigators,
|
|
autoPlay: this.props.autoPlay,
|
|
slideShowActive: this.state.slideShowActive,
|
|
stopSlideShow: this.stopSlideShow
|
|
})), footer);
|
|
return element;
|
|
}
|
|
}, {
|
|
key: "renderGalleria",
|
|
value: function renderGalleria() {
|
|
var _this4 = this;
|
|
|
|
var element = this.renderElement();
|
|
|
|
if (this.props.fullScreen) {
|
|
var maskClassName = classNames('p-galleria-mask', {
|
|
'p-galleria-visible': this.state.visible
|
|
});
|
|
var galleriaWrapper = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.mask = el;
|
|
},
|
|
className: maskClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.galleriaRef,
|
|
classNames: "p-galleria",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 150,
|
|
exit: 150
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntering: this.onEntering,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, element));
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: galleriaWrapper
|
|
});
|
|
} else {
|
|
return element;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return this.props.value && this.props.value.length > 0 && this.renderGalleria();
|
|
}
|
|
}]);
|
|
|
|
return Galleria;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Galleria, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$1c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var GMap = /*#__PURE__*/function (_Component) {
|
|
_inherits(GMap, _Component);
|
|
|
|
var _super = _createSuper$1c(GMap);
|
|
|
|
function GMap() {
|
|
_classCallCheck(this, GMap);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(GMap, [{
|
|
key: "initMap",
|
|
value: function initMap() {
|
|
this.map = new google.maps.Map(this.container, this.props.options);
|
|
|
|
if (this.props.onMapReady) {
|
|
this.props.onMapReady({
|
|
map: this.map
|
|
});
|
|
}
|
|
|
|
this.initOverlays(this.props.overlays);
|
|
this.bindMapEvent('click', this.props.onMapClick);
|
|
this.bindMapEvent('dragend', this.props.onMapDragEnd);
|
|
this.bindMapEvent('zoom_changed', this.props.onZoomChanged);
|
|
}
|
|
}, {
|
|
key: "initOverlays",
|
|
value: function initOverlays(overlays) {
|
|
if (overlays) {
|
|
var _iterator = _createForOfIteratorHelper$a(overlays),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var overlay = _step.value;
|
|
overlay.setMap(this.map);
|
|
this.bindOverlayEvents(overlay);
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindOverlayEvents",
|
|
value: function bindOverlayEvents(overlay) {
|
|
var _this = this;
|
|
|
|
overlay.addListener('click', function (event) {
|
|
if (_this.props.onOverlayClick) {
|
|
_this.props.onOverlayClick({
|
|
originalEvent: event,
|
|
overlay: overlay,
|
|
map: _this.map
|
|
});
|
|
}
|
|
});
|
|
|
|
if (overlay.getDraggable()) {
|
|
this.bindDragEvents(overlay);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDragEvents",
|
|
value: function bindDragEvents(overlay) {
|
|
this.bindDragEvent(overlay, 'dragstart', this.props.onOverlayDragStart);
|
|
this.bindDragEvent(overlay, 'drag', this.props.onOverlayDrag);
|
|
this.bindDragEvent(overlay, 'dragend', this.props.onOverlayDragEnd);
|
|
}
|
|
}, {
|
|
key: "bindMapEvent",
|
|
value: function bindMapEvent(eventName, callback) {
|
|
this.map.addListener(eventName, function (event) {
|
|
if (callback) {
|
|
callback(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "bindDragEvent",
|
|
value: function bindDragEvent(overlay, eventName, callback) {
|
|
var _this2 = this;
|
|
|
|
overlay.addListener(eventName, function (event) {
|
|
if (callback) {
|
|
callback({
|
|
originalEvent: event,
|
|
overlay: overlay,
|
|
map: _this2.map
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "getMap",
|
|
value: function getMap() {
|
|
return this.map;
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
if (prevProps.overlays !== this.props.overlays) {
|
|
if (prevProps.overlays) {
|
|
var _iterator2 = _createForOfIteratorHelper$a(prevProps.overlays),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var overlay = _step2.value;
|
|
google.maps.event.clearInstanceListeners(overlay);
|
|
overlay.setMap(null);
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
}
|
|
|
|
this.initOverlays(this.props.overlays);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.initMap();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.container = el;
|
|
},
|
|
style: this.props.style,
|
|
className: this.props.className
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return GMap;
|
|
}(React.Component);
|
|
|
|
_defineProperty(GMap, "defaultProps", {
|
|
options: null,
|
|
overlays: null,
|
|
style: null,
|
|
className: null,
|
|
onMapReady: null,
|
|
onMapClick: null,
|
|
onMapDragEnd: null,
|
|
onZoomChanged: null,
|
|
onOverlayDragStart: null,
|
|
onOverlayDrag: null,
|
|
onOverlayDragEnd: null,
|
|
onOverlayClick: null
|
|
});
|
|
|
|
function _createSuper$1b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1b(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var InplaceDisplay = /*#__PURE__*/function (_Component) {
|
|
_inherits(InplaceDisplay, _Component);
|
|
|
|
var _super = _createSuper$1b(InplaceDisplay);
|
|
|
|
function InplaceDisplay() {
|
|
_classCallCheck(this, InplaceDisplay);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(InplaceDisplay, [{
|
|
key: "render",
|
|
value: function render() {
|
|
return this.props.children;
|
|
}
|
|
}]);
|
|
|
|
return InplaceDisplay;
|
|
}(React.Component);
|
|
var InplaceContent = /*#__PURE__*/function (_Component2) {
|
|
_inherits(InplaceContent, _Component2);
|
|
|
|
var _super2 = _createSuper$1b(InplaceContent);
|
|
|
|
function InplaceContent() {
|
|
_classCallCheck(this, InplaceContent);
|
|
|
|
return _super2.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(InplaceContent, [{
|
|
key: "render",
|
|
value: function render() {
|
|
return this.props.children;
|
|
}
|
|
}]);
|
|
|
|
return InplaceContent;
|
|
}(React.Component);
|
|
var Inplace = /*#__PURE__*/function (_Component3) {
|
|
_inherits(Inplace, _Component3);
|
|
|
|
var _super3 = _createSuper$1b(Inplace);
|
|
|
|
function Inplace(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Inplace);
|
|
|
|
_this = _super3.call(this, props);
|
|
|
|
if (!_this.props.onToggle) {
|
|
_this.state = {
|
|
active: false
|
|
};
|
|
}
|
|
|
|
_this.open = _this.open.bind(_assertThisInitialized(_this));
|
|
_this.close = _this.close.bind(_assertThisInitialized(_this));
|
|
_this.onDisplayKeyDown = _this.onDisplayKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Inplace, [{
|
|
key: "open",
|
|
value: function open(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.onOpen) {
|
|
this.props.onOpen(event);
|
|
}
|
|
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: true
|
|
});
|
|
} else {
|
|
this.setState({
|
|
active: true
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "close",
|
|
value: function close(event) {
|
|
if (this.props.onClose) {
|
|
this.props.onClose(event);
|
|
}
|
|
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: false
|
|
});
|
|
} else {
|
|
this.setState({
|
|
active: false
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDisplayKeyDown",
|
|
value: function onDisplayKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this.open(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "isActive",
|
|
value: function isActive() {
|
|
return this.props.onToggle ? this.props.active : this.state.active;
|
|
}
|
|
}, {
|
|
key: "renderDisplay",
|
|
value: function renderDisplay(content) {
|
|
var className = classNames('p-inplace-display', {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
onClick: this.open,
|
|
onKeyDown: this.onDisplayKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
"aria-label": this.props.ariaLabel
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderCloseButton",
|
|
value: function renderCloseButton() {
|
|
if (this.props.closable) {
|
|
return /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
className: "p-inplace-content-close",
|
|
icon: "pi pi-times",
|
|
onClick: this.close
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent(content) {
|
|
var closeButton = this.renderCloseButton();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-inplace-content"
|
|
}, content, closeButton);
|
|
}
|
|
}, {
|
|
key: "renderChildren",
|
|
value: function renderChildren() {
|
|
var _this2 = this;
|
|
|
|
var active = this.isActive();
|
|
return React__default["default"].Children.map(this.props.children, function (child, i) {
|
|
if (active && child.type === InplaceContent) {
|
|
return _this2.renderContent(child);
|
|
} else if (!active && child.type === InplaceDisplay) {
|
|
return _this2.renderDisplay(child);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-inplace p-component', {
|
|
'p-inplace-closable': this.props.closable
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, this.renderChildren());
|
|
}
|
|
}]);
|
|
|
|
return Inplace;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Inplace, "defaultProps", {
|
|
style: null,
|
|
className: null,
|
|
active: false,
|
|
closable: false,
|
|
disabled: false,
|
|
tabIndex: 0,
|
|
ariaLabel: null,
|
|
onOpen: null,
|
|
onClose: null,
|
|
onToggle: null
|
|
});
|
|
|
|
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 _createSuper$1a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var InputMask = /*#__PURE__*/function (_Component) {
|
|
_inherits(InputMask, _Component);
|
|
|
|
var _super = _createSuper$1a(InputMask);
|
|
|
|
function InputMask(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, InputMask);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onKeyPress = _this.onKeyPress.bind(_assertThisInitialized(_this));
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(InputMask, [{
|
|
key: "caret",
|
|
value: function caret(first, last) {
|
|
var range, begin, end;
|
|
var inputEl = this.inputRef && this.inputRef.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
|
|
};
|
|
}
|
|
}
|
|
}, {
|
|
key: "isCompleted",
|
|
value: function isCompleted() {
|
|
for (var i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
|
|
if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "getPlaceholder",
|
|
value: function getPlaceholder(i) {
|
|
if (i < this.props.slotChar.length) {
|
|
return this.props.slotChar.charAt(i);
|
|
}
|
|
|
|
return this.props.slotChar.charAt(0);
|
|
}
|
|
}, {
|
|
key: "getValue",
|
|
value: function getValue() {
|
|
return this.props.unmask ? this.getUnmaskedValue() : this.inputRef && this.inputRef.current && this.inputRef.current.value;
|
|
}
|
|
}, {
|
|
key: "seekNext",
|
|
value: function seekNext(pos) {
|
|
while (++pos < this.len && !this.tests[pos]) {
|
|
}
|
|
|
|
return pos;
|
|
}
|
|
}, {
|
|
key: "seekPrev",
|
|
value: function seekPrev(pos) {
|
|
while (--pos >= 0 && !this.tests[pos]) {
|
|
}
|
|
|
|
return pos;
|
|
}
|
|
}, {
|
|
key: "shiftL",
|
|
value: function shiftL(begin, end) {
|
|
var i, j;
|
|
|
|
if (begin < 0) {
|
|
return;
|
|
}
|
|
|
|
for (i = begin, j = this.seekNext(end); i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
if (j < this.len && this.tests[i].test(this.buffer[j])) {
|
|
this.buffer[i] = this.buffer[j];
|
|
this.buffer[j] = this.getPlaceholder(j);
|
|
} else {
|
|
break;
|
|
}
|
|
|
|
j = this.seekNext(j);
|
|
}
|
|
}
|
|
|
|
this.writeBuffer();
|
|
this.caret(Math.max(this.firstNonMaskPos, begin));
|
|
}
|
|
}, {
|
|
key: "shiftR",
|
|
value: function shiftR(pos) {
|
|
var i, c, j, t;
|
|
|
|
for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
j = this.seekNext(i);
|
|
t = this.buffer[i];
|
|
this.buffer[i] = c;
|
|
|
|
if (j < this.len && this.tests[j].test(t)) {
|
|
c = t;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "handleAndroidInput",
|
|
value: function handleAndroidInput(e) {
|
|
var curVal = this.inputRef.current.value;
|
|
var pos = this.caret();
|
|
|
|
if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
|
|
// a deletion or backspace happened
|
|
this.checkVal(true);
|
|
|
|
while (pos.begin > 0 && !this.tests[pos.begin - 1]) {
|
|
pos.begin--;
|
|
}
|
|
|
|
if (pos.begin === 0) {
|
|
while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin]) {
|
|
pos.begin++;
|
|
}
|
|
}
|
|
|
|
this.caret(pos.begin, pos.begin);
|
|
} else {
|
|
this.checkVal(true);
|
|
|
|
while (pos.begin < this.len && !this.tests[pos.begin]) {
|
|
pos.begin++;
|
|
}
|
|
|
|
this.caret(pos.begin, pos.begin);
|
|
}
|
|
|
|
if (this.props.onComplete && this.isCompleted()) {
|
|
this.props.onComplete({
|
|
originalEvent: e,
|
|
value: this.getValue()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(e) {
|
|
this.focus = false;
|
|
this.checkVal();
|
|
this.updateModel(e);
|
|
this.updateFilledState();
|
|
|
|
if (this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
|
|
if (this.inputRef.current.value !== this.focusText) {
|
|
var event = document.createEvent('HTMLEvents');
|
|
event.initEvent('change', true, false);
|
|
this.inputRef.current.dispatchEvent(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(e) {
|
|
if (this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var k = e.which || e.keyCode,
|
|
pos,
|
|
begin,
|
|
end;
|
|
var iPhone = /iphone/i.test(DomHandler.getUserAgent());
|
|
this.oldVal = this.inputRef.current.value; //backspace, delete, and escape get special treatment
|
|
|
|
if (k === 8 || k === 46 || iPhone && k === 127) {
|
|
pos = this.caret();
|
|
begin = pos.begin;
|
|
end = pos.end;
|
|
|
|
if (end - begin === 0) {
|
|
begin = k !== 46 ? this.seekPrev(begin) : end = this.seekNext(begin - 1);
|
|
end = k === 46 ? this.seekNext(end) : end;
|
|
}
|
|
|
|
this.clearBuffer(begin, end);
|
|
this.shiftL(begin, end - 1);
|
|
this.updateModel(e);
|
|
e.preventDefault();
|
|
} else if (k === 13) {
|
|
// enter
|
|
this.onBlur(e);
|
|
this.updateModel(e);
|
|
} else if (k === 27) {
|
|
// escape
|
|
this.inputRef.current.value = this.focusText;
|
|
this.caret(0, this.checkVal());
|
|
this.updateModel(e);
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyPress",
|
|
value: function onKeyPress(e) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var k = e.which || e.keyCode,
|
|
pos = this.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) {
|
|
this.clearBuffer(pos.begin, pos.end);
|
|
this.shiftL(pos.begin, pos.end - 1);
|
|
}
|
|
|
|
p = this.seekNext(pos.begin - 1);
|
|
|
|
if (p < this.len) {
|
|
c = String.fromCharCode(k);
|
|
|
|
if (this.tests[p].test(c)) {
|
|
this.shiftR(p);
|
|
this.buffer[p] = c;
|
|
this.writeBuffer();
|
|
next = this.seekNext(p);
|
|
|
|
if (/android/i.test(DomHandler.getUserAgent())) {
|
|
//Path for CSP Violation on FireFox OS 1.1
|
|
var proxy = function proxy() {
|
|
_this2.caret(next);
|
|
};
|
|
|
|
setTimeout(proxy, 0);
|
|
} else {
|
|
this.caret(next);
|
|
}
|
|
|
|
if (pos.begin <= this.lastRequiredNonMaskPos) {
|
|
completed = this.isCompleted();
|
|
}
|
|
}
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
|
|
this.updateModel(e);
|
|
|
|
if (this.props.onComplete && completed) {
|
|
this.props.onComplete({
|
|
originalEvent: e,
|
|
value: this.getValue()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearBuffer",
|
|
value: function clearBuffer(start, end) {
|
|
var i;
|
|
|
|
for (i = start; i < end && i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
this.buffer[i] = this.getPlaceholder(i);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "writeBuffer",
|
|
value: function writeBuffer() {
|
|
this.inputRef.current.value = this.buffer.join('');
|
|
}
|
|
}, {
|
|
key: "checkVal",
|
|
value: function checkVal(allow) {
|
|
this.isValueChecked = true; //try to place characters where they belong
|
|
|
|
var test = this.inputRef.current.value,
|
|
lastMatch = -1,
|
|
i,
|
|
c,
|
|
pos;
|
|
|
|
for (i = 0, pos = 0; i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
this.buffer[i] = this.getPlaceholder(i);
|
|
|
|
while (pos++ < test.length) {
|
|
c = test.charAt(pos - 1);
|
|
|
|
if (this.tests[i].test(c)) {
|
|
this.buffer[i] = c;
|
|
lastMatch = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (pos > test.length) {
|
|
this.clearBuffer(i + 1, this.len);
|
|
break;
|
|
}
|
|
} else {
|
|
if (this.buffer[i] === test.charAt(pos)) {
|
|
pos++;
|
|
}
|
|
|
|
if (i < this.partialPosition) {
|
|
lastMatch = i;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (allow) {
|
|
this.writeBuffer();
|
|
} else if (lastMatch + 1 < this.partialPosition) {
|
|
if (this.props.autoClear || this.buffer.join('') === this.defaultBuffer) {
|
|
// Invalid value. Remove it and replace it with the
|
|
// mask, which is the default behavior.
|
|
if (this.inputRef.current.value) this.inputRef.current.value = '';
|
|
this.clearBuffer(0, this.len);
|
|
} else {
|
|
// Invalid value, but we opt to show the value to the
|
|
// user and allow them to correct their mistake.
|
|
this.writeBuffer();
|
|
}
|
|
} else {
|
|
this.writeBuffer();
|
|
this.inputRef.current.value = this.inputRef.current.value.substring(0, lastMatch + 1);
|
|
}
|
|
|
|
return this.partialPosition ? i : this.firstNonMaskPos;
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(e) {
|
|
var _this3 = this;
|
|
|
|
if (this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
this.focus = true;
|
|
clearTimeout(this.caretTimeoutId);
|
|
var pos;
|
|
this.focusText = this.inputRef.current.value;
|
|
pos = this.checkVal();
|
|
this.caretTimeoutId = setTimeout(function () {
|
|
if (_this3.inputRef.current !== document.activeElement) {
|
|
return;
|
|
}
|
|
|
|
_this3.writeBuffer();
|
|
|
|
if (pos === _this3.props.mask.replace("?", "").length) {
|
|
_this3.caret(0, pos);
|
|
} else {
|
|
_this3.caret(pos);
|
|
}
|
|
|
|
_this3.updateFilledState();
|
|
}, 10);
|
|
|
|
if (this.props.onFocus) {
|
|
this.props.onFocus(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(event) {
|
|
if (this.androidChrome) this.handleAndroidInput(event);else this.handleInputChange(event);
|
|
}
|
|
}, {
|
|
key: "handleInputChange",
|
|
value: function handleInputChange(e) {
|
|
if (this.props.readOnly) {
|
|
return;
|
|
}
|
|
|
|
var pos = this.checkVal(true);
|
|
this.caret(pos);
|
|
this.updateModel(e);
|
|
|
|
if (this.props.onComplete && this.isCompleted()) {
|
|
this.props.onComplete({
|
|
originalEvent: e,
|
|
value: this.getValue()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "getUnmaskedValue",
|
|
value: function getUnmaskedValue() {
|
|
var unmaskedBuffer = [];
|
|
|
|
for (var i = 0; i < this.buffer.length; i++) {
|
|
var c = this.buffer[i];
|
|
|
|
if (this.tests[i] && c !== this.getPlaceholder(i)) {
|
|
unmaskedBuffer.push(c);
|
|
}
|
|
}
|
|
|
|
return unmaskedBuffer.join('');
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(e) {
|
|
if (this.props.onChange) {
|
|
var val = this.props.unmask ? this.getUnmaskedValue() : e && e.target.value;
|
|
this.props.onChange({
|
|
originalEvent: e,
|
|
value: this.defaultBuffer !== val ? val : '',
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: this.defaultBuffer !== val ? val : ''
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateFilledState",
|
|
value: function updateFilledState() {
|
|
if (this.inputRef && this.inputRef.current && this.inputRef.current.value && this.inputRef.current.value.length > 0) DomHandler.addClass(this.inputRef.current, 'p-filled');else DomHandler.removeClass(this.inputRef.current, 'p-filled');
|
|
}
|
|
}, {
|
|
key: "updateValue",
|
|
value: function updateValue(allow) {
|
|
var _this4 = this;
|
|
|
|
var pos;
|
|
|
|
if (this.inputRef && this.inputRef.current) {
|
|
if (this.props.value == null) {
|
|
this.inputRef.current.value = '';
|
|
} else {
|
|
this.inputRef.current.value = this.props.value;
|
|
pos = this.checkVal(allow);
|
|
setTimeout(function () {
|
|
if (_this4.inputRef && _this4.inputRef.current) {
|
|
_this4.writeBuffer();
|
|
|
|
return _this4.checkVal(allow);
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
this.focusText = this.inputRef.current.value;
|
|
}
|
|
|
|
this.updateFilledState();
|
|
return pos;
|
|
}
|
|
}, {
|
|
key: "isValueUpdated",
|
|
value: function isValueUpdated() {
|
|
return this.props.unmask ? this.props.value !== this.getUnmaskedValue() : this.defaultBuffer !== this.inputRef.current.value && this.inputRef.current.value !== this.props.value;
|
|
}
|
|
}, {
|
|
key: "init",
|
|
value: function init() {
|
|
if (this.props.mask) {
|
|
this.tests = [];
|
|
this.partialPosition = this.props.mask.length;
|
|
this.len = this.props.mask.length;
|
|
this.firstNonMaskPos = null;
|
|
this.defs = {
|
|
'9': '[0-9]',
|
|
'a': '[A-Za-z]',
|
|
'*': '[A-Za-z0-9]'
|
|
};
|
|
var ua = DomHandler.getUserAgent();
|
|
this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
|
|
var maskTokens = this.props.mask.split('');
|
|
|
|
for (var i = 0; i < maskTokens.length; i++) {
|
|
var c = maskTokens[i];
|
|
|
|
if (c === '?') {
|
|
this.len--;
|
|
this.partialPosition = i;
|
|
} else if (this.defs[c]) {
|
|
this.tests.push(new RegExp(this.defs[c]));
|
|
|
|
if (this.firstNonMaskPos === null) {
|
|
this.firstNonMaskPos = this.tests.length - 1;
|
|
}
|
|
|
|
if (i < this.partialPosition) {
|
|
this.lastRequiredNonMaskPos = this.tests.length - 1;
|
|
}
|
|
} else {
|
|
this.tests.push(null);
|
|
}
|
|
}
|
|
|
|
this.buffer = [];
|
|
|
|
for (var _i = 0; _i < maskTokens.length; _i++) {
|
|
var _c = maskTokens[_i];
|
|
|
|
if (_c !== '?') {
|
|
if (this.defs[_c]) this.buffer.push(this.getPlaceholder(_i));else this.buffer.push(_c);
|
|
}
|
|
}
|
|
|
|
this.defaultBuffer = this.buffer.join('');
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
this.init();
|
|
this.updateValue();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$o({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (this.isValueUpdated()) {
|
|
this.updateValue();
|
|
}
|
|
|
|
if (prevProps.mask !== this.props.mask) {
|
|
this.init();
|
|
this.caret(this.updateValue(true));
|
|
this.updateModel();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.inputRef.current,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var inputMaskClassName = classNames('p-inputmask', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
id: this.props.id,
|
|
ref: this.inputRef,
|
|
type: this.props.type,
|
|
name: this.props.name,
|
|
style: this.props.style,
|
|
className: inputMaskClassName,
|
|
placeholder: this.props.placeholder,
|
|
size: this.props.size,
|
|
maxLength: this.props.maxLength,
|
|
tabIndex: this.props.tabIndex,
|
|
disabled: this.props.disabled,
|
|
readOnly: this.props.readOnly,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
onKeyPress: this.onKeyPress,
|
|
onInput: this.onInput,
|
|
onPaste: this.handleInputChange,
|
|
required: this.props.required,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return InputMask;
|
|
}(React.Component);
|
|
|
|
_defineProperty(InputMask, "defaultProps", {
|
|
id: null,
|
|
inputRef: 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,
|
|
ariaLabelledBy: null,
|
|
onComplete: null,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$19(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$19(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$19() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var InputSwitch = /*#__PURE__*/function (_Component) {
|
|
_inherits(InputSwitch, _Component);
|
|
|
|
var _super = _createSuper$19(InputSwitch);
|
|
|
|
function InputSwitch(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, InputSwitch);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(InputSwitch, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.toggle(event);
|
|
this.inputRef.current.focus();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.onChange) {
|
|
var value = this.isChecked() ? this.props.falseValue : this.props.trueValue;
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(event) {
|
|
var _this2 = this;
|
|
|
|
var currentEvent = event;
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this2.props.onFocus) {
|
|
_this2.props.onFocus(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
var _this3 = this;
|
|
|
|
var currentEvent = event;
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this3.props.onBlur) {
|
|
_this3.props.onBlur(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this.onClick(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$n({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "isChecked",
|
|
value: function isChecked() {
|
|
return this.props.checked === this.props.trueValue;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var checked = this.isChecked();
|
|
var className = classNames('p-inputswitch p-component', {
|
|
'p-inputswitch-checked': checked,
|
|
'p-disabled': this.props.disabled,
|
|
'p-inputswitch-focus': this.state.focused
|
|
}, this.props.className);
|
|
var inputSwitchProps = ObjectUtils.findDiffKeys(this.props, InputSwitch.defaultProps);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends({
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick,
|
|
role: "checkbox",
|
|
"aria-checked": checked
|
|
}, inputSwitchProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: "checkbox",
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
checked: checked,
|
|
onChange: this.toggle,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
disabled: this.props.disabled,
|
|
role: "switch",
|
|
"aria-checked": checked,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-inputswitch-slider"
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return InputSwitch;
|
|
}(React.Component);
|
|
|
|
_defineProperty(InputSwitch, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
style: null,
|
|
className: null,
|
|
inputId: null,
|
|
name: null,
|
|
checked: false,
|
|
trueValue: true,
|
|
falseValue: false,
|
|
disabled: false,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$18(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$18(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$18() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var InputTextareaComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(InputTextareaComponent, _Component);
|
|
|
|
var _super = _createSuper$18(InputTextareaComponent);
|
|
|
|
function InputTextareaComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, InputTextareaComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_this));
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.elementRef = /*#__PURE__*/React.createRef(_this.props.forwardRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(InputTextareaComponent, [{
|
|
key: "onFocus",
|
|
value: function onFocus(e) {
|
|
if (this.props.autoResize) {
|
|
this.resize();
|
|
}
|
|
|
|
if (this.props.onFocus) {
|
|
this.props.onFocus(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(e) {
|
|
if (this.props.autoResize) {
|
|
this.resize();
|
|
}
|
|
|
|
if (this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyUp",
|
|
value: function onKeyUp(e) {
|
|
if (this.props.autoResize) {
|
|
this.resize();
|
|
}
|
|
|
|
if (this.props.onKeyUp) {
|
|
this.props.onKeyUp(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(e) {
|
|
if (this.props.autoResize) {
|
|
this.resize();
|
|
}
|
|
|
|
if (e.target.value.length > 0) DomHandler.addClass(e.target, 'p-filled');else DomHandler.removeClass(e.target, 'p-filled');
|
|
|
|
if (this.props.onInput) {
|
|
this.props.onInput(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "resize",
|
|
value: function resize(initial) {
|
|
var inputEl = this.elementRef && this.elementRef.current;
|
|
|
|
if (inputEl && DomHandler.isVisible(inputEl)) {
|
|
if (!this.cachedScrollHeight) {
|
|
this.cachedScrollHeight = inputEl.scrollHeight;
|
|
inputEl.style.overflow = "hidden";
|
|
}
|
|
|
|
if (this.cachedScrollHeight !== 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";
|
|
}
|
|
|
|
this.cachedScrollHeight = inputEl.scrollHeight;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isFilled",
|
|
value: function isFilled() {
|
|
return this.props.value != null && this.props.value.toString().length > 0 || this.props.defaultValue != null && this.props.defaultValue.toString().length > 0 || this.elementRef && this.elementRef.current && this.elementRef.current.value.toString().length > 0;
|
|
}
|
|
}, {
|
|
key: "updateForwardRef",
|
|
value: function updateForwardRef() {
|
|
var ref = this.props.forwardRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.elementRef.current);
|
|
} else {
|
|
ref.current = this.elementRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateForwardRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
|
|
if (this.props.autoResize) {
|
|
this.resize(true);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$m({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (this.props.autoResize) {
|
|
this.resize(true);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.elementRef.current,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-inputtextarea p-inputtext p-component', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-filled': this.isFilled(),
|
|
'p-inputtextarea-resizable': this.props.autoResize
|
|
}, this.props.className);
|
|
var textareaProps = ObjectUtils.findDiffKeys(this.props, InputTextareaComponent.defaultProps);
|
|
return /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
|
|
ref: this.elementRef
|
|
}, textareaProps, {
|
|
className: className,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyUp: this.onKeyUp,
|
|
onInput: this.onInput
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return InputTextareaComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(InputTextareaComponent, "defaultProps", {
|
|
autoResize: false,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
onInput: null,
|
|
forwardRef: null
|
|
});
|
|
|
|
var InputTextarea = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(InputTextareaComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$17(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$17(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$17() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Knob = /*#__PURE__*/function (_Component) {
|
|
_inherits(Knob, _Component);
|
|
|
|
var _super = _createSuper$17(Knob);
|
|
|
|
function Knob(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Knob);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
_this.radius = 40;
|
|
_this.midX = 50;
|
|
_this.midY = 50;
|
|
_this.minRadians = 4 * Math.PI / 3;
|
|
_this.maxRadians = -Math.PI / 3;
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
|
|
_this.onTouchStart = _this.onTouchStart.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
|
|
_this.onTouchMove = _this.onTouchMove.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Knob, [{
|
|
key: "updateValue",
|
|
value: function updateValue(offsetX, offsetY) {
|
|
var dx = offsetX - this.props.size / 2;
|
|
var dy = this.props.size / 2 - offsetY;
|
|
var angle = Math.atan2(dy, dx);
|
|
var start = -Math.PI / 2 - Math.PI / 6;
|
|
this.updateModel(angle, start);
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(angle, start) {
|
|
var mappedValue;
|
|
if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.props.min, this.props.max);else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.props.min, this.props.max);else return;
|
|
|
|
if (this.props.onChange) {
|
|
var newValue = Math.round((mappedValue - this.props.min) / this.props.step) * this.props.step + this.props.min;
|
|
this.props.onChange({
|
|
value: newValue
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "mapRange",
|
|
value: function mapRange(x, inMin, inMax, outMin, outMax) {
|
|
return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.windowMouseMoveListener = this.onMouseMove;
|
|
this.windowMouseUpListener = this.onMouseUp;
|
|
window.addEventListener('mousemove', this.windowMouseMoveListener);
|
|
window.addEventListener('mouseup', this.windowMouseUpListener);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseUp",
|
|
value: function onMouseUp(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
window.removeEventListener('mousemove', this.windowMouseMoveListener);
|
|
window.removeEventListener('mouseup', this.windowMouseUpListener);
|
|
this.windowMouseMoveListener = null;
|
|
this.windowMouseUpListener = null;
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchStart",
|
|
value: function onTouchStart(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.windowTouchMoveListener = this.onTouchMove;
|
|
this.windowTouchEndListener = this.onTouchEnd;
|
|
window.addEventListener('touchmove', this.windowTouchMoveListener, {
|
|
passive: false,
|
|
cancelable: false
|
|
});
|
|
window.addEventListener('touchend', this.windowTouchEndListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
window.removeEventListener('touchmove', this.windowTouchMoveListener);
|
|
window.removeEventListener('touchend', this.windowTouchEndListener);
|
|
this.windowTouchMoveListener = null;
|
|
this.windowTouchEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseMove",
|
|
value: function onMouseMove(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.updateValue(event.offsetX, event.offsetY);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTouchMove",
|
|
value: function onTouchMove(event) {
|
|
if (!this.props.disabled && !this.props.readOnly && event.touches.length === 1) {
|
|
var rect = this.element.getBoundingClientRect();
|
|
var touch = event.targetTouches.item(0);
|
|
var offsetX = touch.clientX - rect.left;
|
|
var offsetY = touch.clientY - rect.top;
|
|
this.updateValue(offsetX, offsetY);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "rangePath",
|
|
value: function rangePath() {
|
|
return "M ".concat(this.minX(), " ").concat(this.minY(), " A ").concat(this.radius, " ").concat(this.radius, " 0 1 1 ").concat(this.maxX(), " ").concat(this.maxY());
|
|
}
|
|
}, {
|
|
key: "valuePath",
|
|
value: function valuePath() {
|
|
return "M ".concat(this.zeroX(), " ").concat(this.zeroY(), " A ").concat(this.radius, " ").concat(this.radius, " 0 ").concat(this.largeArc(), " ").concat(this.sweep(), " ").concat(this.valueX(), " ").concat(this.valueY());
|
|
}
|
|
}, {
|
|
key: "zeroRadians",
|
|
value: function zeroRadians() {
|
|
if (this.props.min > 0 && this.props.max > 0) return this.mapRange(this.props.min, this.props.min, this.props.max, this.minRadians, this.maxRadians);else return this.mapRange(0, this.props.min, this.props.max, this.minRadians, this.maxRadians);
|
|
}
|
|
}, {
|
|
key: "valueRadians",
|
|
value: function valueRadians() {
|
|
return this.mapRange(this.props.value, this.props.min, this.props.max, this.minRadians, this.maxRadians);
|
|
}
|
|
}, {
|
|
key: "minX",
|
|
value: function minX() {
|
|
return this.midX + Math.cos(this.minRadians) * this.radius;
|
|
}
|
|
}, {
|
|
key: "minY",
|
|
value: function minY() {
|
|
return this.midY - Math.sin(this.minRadians) * this.radius;
|
|
}
|
|
}, {
|
|
key: "maxX",
|
|
value: function maxX() {
|
|
return this.midX + Math.cos(this.maxRadians) * this.radius;
|
|
}
|
|
}, {
|
|
key: "maxY",
|
|
value: function maxY() {
|
|
return this.midY - Math.sin(this.maxRadians) * this.radius;
|
|
}
|
|
}, {
|
|
key: "zeroX",
|
|
value: function zeroX() {
|
|
return this.midX + Math.cos(this.zeroRadians()) * this.radius;
|
|
}
|
|
}, {
|
|
key: "zeroY",
|
|
value: function zeroY() {
|
|
return this.midY - Math.sin(this.zeroRadians()) * this.radius;
|
|
}
|
|
}, {
|
|
key: "valueX",
|
|
value: function valueX() {
|
|
return this.midX + Math.cos(this.valueRadians()) * this.radius;
|
|
}
|
|
}, {
|
|
key: "valueY",
|
|
value: function valueY() {
|
|
return this.midY - Math.sin(this.valueRadians()) * this.radius;
|
|
}
|
|
}, {
|
|
key: "largeArc",
|
|
value: function largeArc() {
|
|
return Math.abs(this.zeroRadians() - this.valueRadians()) < Math.PI ? 0 : 1;
|
|
}
|
|
}, {
|
|
key: "sweep",
|
|
value: function sweep() {
|
|
return this.valueRadians() > this.zeroRadians() ? 0 : 1;
|
|
}
|
|
}, {
|
|
key: "valueToDisplay",
|
|
value: function valueToDisplay() {
|
|
return this.props.valueTemplate.replace("{value}", this.props.value.toString());
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var containerClassName = classNames('p-knob p-component', {
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.className);
|
|
var text = this.props.showValue && /*#__PURE__*/React__default["default"].createElement("text", {
|
|
x: 50,
|
|
y: 57,
|
|
textAnchor: 'middle',
|
|
fill: this.props.textColor,
|
|
className: 'p-knob-text',
|
|
name: this.props.name
|
|
}, this.valueToDisplay());
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: containerClassName,
|
|
style: this.props.style,
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
viewBox: "0 0 100 100",
|
|
width: this.props.size,
|
|
height: this.props.size,
|
|
onClick: this.onClick,
|
|
onMouseDown: this.onMouseDown,
|
|
onMouseUp: this.onMouseUp,
|
|
onTouchStart: this.onTouchStart,
|
|
onTouchEnd: this.onTouchEnd
|
|
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
d: this.rangePath(),
|
|
strokeWidth: this.props.strokeWidth,
|
|
stroke: this.props.rangeColor,
|
|
className: 'p-knob-range'
|
|
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
d: this.valuePath(),
|
|
strokeWidth: this.props.strokeWidth,
|
|
stroke: this.props.valueColor,
|
|
className: 'p-knob-value'
|
|
}), text));
|
|
}
|
|
}]);
|
|
|
|
return Knob;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Knob, "defaultProps", {
|
|
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-d, LightGray)',
|
|
textColor: 'var(--text-color-secondary, Black)',
|
|
valueTemplate: '{value}',
|
|
onChange: null
|
|
});
|
|
|
|
function _createSuper$16(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$16(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$16() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ListBoxItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(ListBoxItem, _Component);
|
|
|
|
var _super = _createSuper$16(ListBoxItem);
|
|
|
|
function ListBoxItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ListBoxItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ListBoxItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd(event) {
|
|
if (this.props.onTouchEnd) {
|
|
this.props.onTouchEnd({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
var item = event.currentTarget;
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(item);
|
|
|
|
if (nextItem) {
|
|
nextItem.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(item);
|
|
|
|
if (prevItem) {
|
|
prevItem.focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || DomHandler.hasClass(nextItem, 'p-listbox-item-group') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || DomHandler.hasClass(prevItem, 'p-listbox-item-group') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-listbox-item', {
|
|
'p-highlight': this.props.selected,
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.option.className);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
onClick: this.onClick,
|
|
onTouchEnd: this.onTouchEnd,
|
|
onKeyDown: this.onKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
"aria-label": this.props.label,
|
|
key: this.props.label,
|
|
role: "option",
|
|
"aria-selected": this.props.selected
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return ListBoxItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ListBoxItem, "defaultProps", {
|
|
option: null,
|
|
label: null,
|
|
selected: false,
|
|
disabled: false,
|
|
tabIndex: null,
|
|
onClick: null,
|
|
onTouchEnd: null,
|
|
template: null
|
|
});
|
|
|
|
function _createSuper$15(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$15(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$15() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ListBoxHeader = /*#__PURE__*/function (_Component) {
|
|
_inherits(ListBoxHeader, _Component);
|
|
|
|
var _super = _createSuper$15(ListBoxHeader);
|
|
|
|
function ListBoxHeader(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ListBoxHeader);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onFilter = _this.onFilter.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ListBoxHeader, [{
|
|
key: "onFilter",
|
|
value: function onFilter(event) {
|
|
if (this.props.onFilter) {
|
|
this.props.onFilter({
|
|
originalEvent: event,
|
|
value: event.target.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-listbox-header"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-listbox-filter-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
type: "text",
|
|
value: this.props.filter,
|
|
onChange: this.onFilter,
|
|
className: "p-listbox-filter",
|
|
disabled: this.props.disabled,
|
|
placeholder: this.props.filterPlaceholder
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-listbox-filter-icon pi pi-search"
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return ListBoxHeader;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ListBoxHeader, "defaultProps", {
|
|
filter: null,
|
|
filterPlaceholder: null,
|
|
disabled: false,
|
|
onFilter: null
|
|
});
|
|
|
|
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; }
|
|
|
|
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; }
|
|
|
|
function _createSuper$14(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$14(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$14() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ListBox = /*#__PURE__*/function (_Component) {
|
|
_inherits(ListBox, _Component);
|
|
|
|
var _super = _createSuper$14(ListBox);
|
|
|
|
function ListBox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ListBox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
|
|
if (!_this.props.onFilterValueChange) {
|
|
_this.state.filterValue = '';
|
|
}
|
|
|
|
_this.onFilter = _this.onFilter.bind(_assertThisInitialized(_this));
|
|
_this.onOptionSelect = _this.onOptionSelect.bind(_assertThisInitialized(_this));
|
|
_this.onOptionTouchEnd = _this.onOptionTouchEnd.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ListBox, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$l({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "getFilterValue",
|
|
value: function getFilterValue() {
|
|
return (this.props.onFilterValueChange ? this.props.filterValue : this.state.filterValue) || '';
|
|
}
|
|
}, {
|
|
key: "onOptionSelect",
|
|
value: function onOptionSelect(event) {
|
|
var option = event.option;
|
|
|
|
if (this.props.disabled || this.isOptionDisabled(option)) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.multiple) this.onOptionSelectMultiple(event.originalEvent, option);else this.onOptionSelectSingle(event.originalEvent, option);
|
|
this.optionTouched = false;
|
|
}
|
|
}, {
|
|
key: "onOptionTouchEnd",
|
|
value: function onOptionTouchEnd() {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.optionTouched = true;
|
|
}
|
|
}, {
|
|
key: "onOptionSelectSingle",
|
|
value: function onOptionSelectSingle(event, option) {
|
|
var selected = this.isSelected(option);
|
|
var valueChanged = false;
|
|
var value = null;
|
|
var metaSelection = this.optionTouched ? false : this.props.metaKeySelection;
|
|
|
|
if (metaSelection) {
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|
|
|
if (selected) {
|
|
if (metaKey) {
|
|
value = null;
|
|
valueChanged = true;
|
|
}
|
|
} else {
|
|
value = this.getOptionValue(option);
|
|
valueChanged = true;
|
|
}
|
|
} else {
|
|
value = selected ? null : this.getOptionValue(option);
|
|
valueChanged = true;
|
|
}
|
|
|
|
if (valueChanged) {
|
|
this.updateModel(event, value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOptionSelectMultiple",
|
|
value: function onOptionSelectMultiple(event, option) {
|
|
var selected = this.isSelected(option);
|
|
var valueChanged = false;
|
|
var value = null;
|
|
var metaSelection = this.optionTouched ? false : this.props.metaKeySelection;
|
|
|
|
if (metaSelection) {
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|
|
|
if (selected) {
|
|
if (metaKey) value = this.removeOption(option);else value = [this.getOptionValue(option)];
|
|
valueChanged = true;
|
|
} else {
|
|
value = metaKey ? this.props.value || [] : [];
|
|
value = [].concat(_toConsumableArray(value), [this.getOptionValue(option)]);
|
|
valueChanged = true;
|
|
}
|
|
} else {
|
|
if (selected) value = this.removeOption(option);else value = [].concat(_toConsumableArray(this.props.value || []), [this.getOptionValue(option)]);
|
|
valueChanged = true;
|
|
}
|
|
|
|
if (valueChanged) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilter",
|
|
value: function onFilter(event) {
|
|
var originalEvent = event.originalEvent,
|
|
value = event.value;
|
|
|
|
if (this.props.onFilterValueChange) {
|
|
this.props.onFilterValueChange({
|
|
originalEvent: originalEvent,
|
|
value: value
|
|
});
|
|
} else {
|
|
this.setState({
|
|
filterValue: value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(event, value) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "removeOption",
|
|
value: function removeOption(option) {
|
|
var _this2 = this;
|
|
|
|
return this.props.value.filter(function (val) {
|
|
return !ObjectUtils.equals(val, _this2.getOptionValue(option), _this2.props.dataKey);
|
|
});
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(option) {
|
|
var selected = false;
|
|
var optionValue = this.getOptionValue(option);
|
|
|
|
if (this.props.multiple) {
|
|
if (this.props.value) {
|
|
var _iterator = _createForOfIteratorHelper$9(this.props.value),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var val = _step.value;
|
|
|
|
if (ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
|
|
selected = true;
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
} else {
|
|
selected = ObjectUtils.equals(this.props.value, optionValue, this.props.dataKey);
|
|
}
|
|
|
|
return selected;
|
|
}
|
|
}, {
|
|
key: "filter",
|
|
value: function filter(option) {
|
|
var filterValue = this.getFilterValue().trim().toLocaleLowerCase(this.props.filterLocale);
|
|
var optionLabel = this.getOptionLabel(option).toLocaleLowerCase(this.props.filterLocale);
|
|
return optionLabel.indexOf(filterValue) > -1;
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
var filter = this.getFilterValue();
|
|
return filter && filter.trim().length > 0;
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionRenderKey",
|
|
value: function getOptionRenderKey(option) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
|
|
}
|
|
}, {
|
|
key: "isOptionDisabled",
|
|
value: function isOptionDisabled(option) {
|
|
if (this.props.optionDisabled) {
|
|
return ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
|
|
}
|
|
|
|
return option && option['disabled'] !== undefined ? option['disabled'] : false;
|
|
}
|
|
}, {
|
|
key: "getOptionGroupRenderKey",
|
|
value: function getOptionGroupRenderKey(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupLabel",
|
|
value: function getOptionGroupLabel(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
|
|
}
|
|
}, {
|
|
key: "getVisibleOptions",
|
|
value: function getVisibleOptions() {
|
|
if (this.hasFilter()) {
|
|
var filterValue = this.getFilterValue().trim().toLocaleLowerCase(this.props.filterLocale);
|
|
var searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var filteredGroups = [];
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$9(this.props.options),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var optgroup = _step2.value;
|
|
var filteredSubOptions = FilterService.filter(this.getOptionGroupChildren(optgroup), searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
|
|
if (filteredSubOptions && filteredSubOptions.length) {
|
|
filteredGroups.push(_objectSpread$l(_objectSpread$l({}, optgroup), {
|
|
items: filteredSubOptions
|
|
}));
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
|
|
return filteredGroups;
|
|
} else {
|
|
return FilterService.filter(this.props.options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
}
|
|
} else {
|
|
return this.props.options;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderGroupChildren",
|
|
value: function renderGroupChildren(optionGroup) {
|
|
var _this3 = this;
|
|
|
|
var groupChildren = this.getOptionGroupChildren(optionGroup);
|
|
return groupChildren.map(function (option, j) {
|
|
var optionLabel = _this3.getOptionLabel(option);
|
|
|
|
var optionKey = j + '_' + _this3.getOptionRenderKey(option);
|
|
|
|
var disabled = _this3.isOptionDisabled(option);
|
|
|
|
var tabIndex = disabled ? null : _this3.props.tabIndex || 0;
|
|
return /*#__PURE__*/React__default["default"].createElement(ListBoxItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: _this3.props.itemTemplate,
|
|
selected: _this3.isSelected(option),
|
|
onClick: _this3.onOptionSelect,
|
|
onTouchEnd: _this3.onOptionTouchEnd,
|
|
tabIndex: tabIndex,
|
|
disabled: disabled
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(option, index) {
|
|
if (this.props.optionGroupLabel) {
|
|
var groupContent = this.props.optionGroupTemplate ? ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.getOptionGroupLabel(option);
|
|
var groupChildrenContent = this.renderGroupChildren(option);
|
|
var key = index + '_' + this.getOptionGroupRenderKey(option);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: key
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-listbox-item-group"
|
|
}, groupContent), groupChildrenContent);
|
|
} else {
|
|
var optionLabel = this.getOptionLabel(option);
|
|
var optionKey = index + '_' + this.getOptionRenderKey(option);
|
|
var disabled = this.isOptionDisabled(option);
|
|
var tabIndex = disabled ? null : this.props.tabIndex || 0;
|
|
return /*#__PURE__*/React__default["default"].createElement(ListBoxItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: this.props.itemTemplate,
|
|
selected: this.isSelected(option),
|
|
onClick: this.onOptionSelect,
|
|
onTouchEnd: this.onOptionTouchEnd,
|
|
tabIndex: tabIndex,
|
|
disabled: disabled
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems(visibleOptions) {
|
|
var _this4 = this;
|
|
|
|
if (visibleOptions && visibleOptions.length) {
|
|
return visibleOptions.map(function (option, index) {
|
|
return _this4.renderItem(option, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderList",
|
|
value: function renderList(visibleOptions) {
|
|
var _this5 = this;
|
|
|
|
if (this.props.virtualScrollerOptions) {
|
|
var virtualScrollerProps = _objectSpread$l(_objectSpread$l({}, this.props.virtualScrollerOptions), {
|
|
items: visibleOptions,
|
|
onLazyLoad: function onLazyLoad(event) {
|
|
return _this5.props.virtualScrollerOptions.onLazyLoad(_objectSpread$l(_objectSpread$l({}, event), {
|
|
filter: _this5.getFilterValue()
|
|
}));
|
|
},
|
|
itemTemplate: function itemTemplate(item, options) {
|
|
return item && _this5.renderItem(item, options.index);
|
|
},
|
|
contentTemplate: function contentTemplate(options) {
|
|
var className = classNames('p-listbox-list', options.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: options.contentRef,
|
|
className: className,
|
|
role: "listbox",
|
|
"aria-multiselectable": _this5.props.multiple
|
|
}, options.children);
|
|
}
|
|
});
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(VirtualScroller, _extends({
|
|
ref: function ref(el) {
|
|
return _this5.virtualScrollerRef = el;
|
|
}
|
|
}, virtualScrollerProps));
|
|
} else {
|
|
var items = this.renderItems(visibleOptions);
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-listbox-list",
|
|
role: "listbox",
|
|
"aria-multiselectable": this.props.multiple
|
|
}, items);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames('p-listbox p-component', {
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.className);
|
|
var listClassName = classNames('p-listbox-list-wrapper', this.props.listClassName);
|
|
var visibleOptions = this.getVisibleOptions();
|
|
var list = this.renderList(visibleOptions);
|
|
var header;
|
|
|
|
if (this.props.filter) {
|
|
header = /*#__PURE__*/React__default["default"].createElement(ListBoxHeader, {
|
|
filter: this.getFilterValue(),
|
|
onFilter: this.onFilter,
|
|
disabled: this.props.disabled,
|
|
filterPlaceholder: this.props.filterPlaceholder
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, header, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.wrapper = el;
|
|
},
|
|
className: listClassName,
|
|
style: this.props.listStyle
|
|
}, list));
|
|
}
|
|
}]);
|
|
|
|
return ListBox;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ListBox, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
options: null,
|
|
optionLabel: null,
|
|
optionValue: null,
|
|
optionDisabled: null,
|
|
optionGroupLabel: null,
|
|
optionGroupChildren: null,
|
|
optionGroupTemplate: null,
|
|
itemTemplate: null,
|
|
style: null,
|
|
listStyle: null,
|
|
listClassName: null,
|
|
className: null,
|
|
virtualScrollerOptions: null,
|
|
disabled: null,
|
|
dataKey: null,
|
|
multiple: false,
|
|
metaKeySelection: false,
|
|
filter: false,
|
|
filterBy: null,
|
|
filterValue: null,
|
|
filterMatchMode: 'contains',
|
|
filterPlaceholder: null,
|
|
filterLocale: undefined,
|
|
tabIndex: 0,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onChange: null,
|
|
onFilterValueChange: null
|
|
});
|
|
|
|
function _createSuper$13(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$13(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$13() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MegaMenu = /*#__PURE__*/function (_Component) {
|
|
_inherits(MegaMenu, _Component);
|
|
|
|
var _super = _createSuper$13(MegaMenu);
|
|
|
|
function MegaMenu(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MegaMenu);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: null
|
|
};
|
|
_this.onLeafClick = _this.onLeafClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MegaMenu, [{
|
|
key: "onLeafClick",
|
|
value: function onLeafClick(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (!item.url) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: event,
|
|
item: item
|
|
});
|
|
}
|
|
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
}, {
|
|
key: "onCategoryMouseEnter",
|
|
value: function onCategoryMouseEnter(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.state.activeItem) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onCategoryClick",
|
|
value: function onCategoryClick(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (!item.url) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: event,
|
|
item: this.props.item
|
|
});
|
|
}
|
|
|
|
if (item.items) {
|
|
if (this.state.activeItem && this.state.activeItem === item) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onCategoryKeyDown",
|
|
value: function onCategoryKeyDown(event, item) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (this.isHorizontal()) this.expandMenu(item);else this.navigateToNextItem(listItem);
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
if (this.isVertical()) this.navigateToPrevItem(listItem);else if (item.items && item === this.state.activeItem) this.collapseMenu();
|
|
event.preventDefault();
|
|
break;
|
|
//right
|
|
|
|
case 39:
|
|
if (this.isHorizontal()) this.navigateToNextItem(listItem);else this.expandMenu(item);
|
|
event.preventDefault();
|
|
break;
|
|
//left
|
|
|
|
case 37:
|
|
if (this.isHorizontal()) this.navigateToPrevItem(listItem);else if (item.items && item === this.state.activeItem) this.collapseMenu();
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "expandMenu",
|
|
value: function expandMenu(item) {
|
|
if (item.items) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "collapseMenu",
|
|
value: function collapseMenu(item) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "navigateToNextItem",
|
|
value: function navigateToNextItem(listItem) {
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navigateToPrevItem",
|
|
value: function navigateToPrevItem(listItem) {
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "isHorizontal",
|
|
value: function isHorizontal() {
|
|
return this.props.orientation === 'horizontal';
|
|
}
|
|
}, {
|
|
key: "isVertical",
|
|
value: function isVertical() {
|
|
return this.props.orientation === 'vertical';
|
|
}
|
|
}, {
|
|
key: "getColumnClassName",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.container && !_this2.container.contains(event.target)) {
|
|
_this2.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenuIcon",
|
|
value: function renderSubmenuIcon(item) {
|
|
if (item.items) {
|
|
var className = classNames('p-submenu-icon pi', {
|
|
'pi-angle-down': this.isHorizontal(),
|
|
'pi-angle-right': this.isVertical()
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderSubmenuItem",
|
|
value: function renderSubmenuItem(item, index) {
|
|
var _this3 = this;
|
|
|
|
if (item.separator) {
|
|
return this.renderSeparator(index);
|
|
} else {
|
|
var className = 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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: linkClassName,
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this3.onLeafClick(event, item);
|
|
},
|
|
role: "menuitem",
|
|
"aria-disabled": item.disabled
|
|
}, icon, label, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this3.onLeafClick(event, item);
|
|
},
|
|
className: linkClassName,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
role: "none"
|
|
}, content);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(submenu) {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-megamenu-submenu-header', {
|
|
'p-disabled': submenu.disabled
|
|
}, submenu.className);
|
|
var items = submenu.items.map(function (item, index) {
|
|
return _this4.renderSubmenuItem(item, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: submenu.label
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
style: submenu.style,
|
|
role: "presentation",
|
|
"aria-disabled": submenu.disabled
|
|
}, submenu.label), items);
|
|
}
|
|
}, {
|
|
key: "renderSubmenus",
|
|
value: function renderSubmenus(column) {
|
|
var _this5 = this;
|
|
|
|
return column.map(function (submenu, index) {
|
|
return _this5.renderSubmenu(submenu, index);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderColumn",
|
|
value: function renderColumn(category, column, index, columnClassName) {
|
|
var submenus = this.renderSubmenus(column);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: category.label + '_column_' + index,
|
|
className: columnClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-megamenu-submenu",
|
|
role: "menu"
|
|
}, submenus));
|
|
}
|
|
}, {
|
|
key: "renderColumns",
|
|
value: function renderColumns(category) {
|
|
var _this6 = this;
|
|
|
|
if (category.items) {
|
|
var columnClassName = this.getColumnClassName(category);
|
|
return category.items.map(function (column, index) {
|
|
return _this6.renderColumn(category, column, index, columnClassName);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCategoryPanel",
|
|
value: function renderCategoryPanel(category) {
|
|
if (category.items) {
|
|
var columns = this.renderColumns(category);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-megamenu-panel"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-megamenu-grid"
|
|
}, columns));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCategory",
|
|
value: function renderCategory(category, index) {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-menuitem', {
|
|
'p-menuitem-active': category === this.state.activeItem
|
|
}, category.className);
|
|
var linkClassName = classNames('p-menuitem-link', {
|
|
'p-disabled': category.disabled
|
|
});
|
|
var iconClassName = classNames('p-menuitem-icon', category.icon);
|
|
var icon = category.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = category.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, category.label);
|
|
var itemContent = category.template ? ObjectUtils.getJSXElement(category.template, category) : null;
|
|
var submenuIcon = this.renderSubmenuIcon(category);
|
|
var panel = this.renderCategoryPanel(category);
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: category.label + '_' + index,
|
|
className: className,
|
|
style: category.style,
|
|
onMouseEnter: function onMouseEnter(e) {
|
|
return _this7.onCategoryMouseEnter(e, category);
|
|
},
|
|
role: "none"
|
|
}, /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: category.url || '#',
|
|
className: linkClassName,
|
|
target: category.target,
|
|
onClick: function onClick(e) {
|
|
return _this7.onCategoryClick(e, category);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this7.onCategoryKeyDown(e, category);
|
|
},
|
|
role: "menuitem",
|
|
"aria-haspopup": category.items != null
|
|
}, icon, label, itemContent, submenuIcon, /*#__PURE__*/React__default["default"].createElement(Ripple, null)), panel);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this8 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this8.renderCategory(item, index, true);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCustomContent",
|
|
value: function renderCustomContent() {
|
|
if (this.props.children) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-megamenu-custom"
|
|
}, this.props.children);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this9 = this;
|
|
|
|
var className = classNames('p-megamenu p-component', {
|
|
'p-megamenu-horizontal': this.props.orientation === 'horizontal',
|
|
'p-megamenu-vertical': this.props.orientation === 'vertical'
|
|
}, this.props.className);
|
|
var menu = this.renderMenu();
|
|
var customContent = this.renderCustomContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this9.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-megamenu-root-list",
|
|
role: "menubar"
|
|
}, menu), customContent);
|
|
}
|
|
}]);
|
|
|
|
return MegaMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(MegaMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
style: null,
|
|
className: null,
|
|
orientation: 'horizontal'
|
|
});
|
|
|
|
function _createSuper$12(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$12(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$12() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Menu = /*#__PURE__*/function (_Component) {
|
|
_inherits(Menu, _Component);
|
|
|
|
var _super = _createSuper$12(Menu);
|
|
|
|
function Menu(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Menu);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: !props.popup
|
|
};
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.menuRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Menu, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (this.props.popup) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.target
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: 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 (this.props.popup) {
|
|
this.hide(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event, item) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.popup) {
|
|
if (this.state.visible) this.hide(event);else this.show(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(event) {
|
|
var _this2 = this;
|
|
|
|
this.target = event.currentTarget;
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
if (_this2.props.onShow) {
|
|
_this2.props.onShow(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(event) {
|
|
var _this3 = this;
|
|
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
if (_this3.props.onHide) {
|
|
_this3.props.onHide(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
ZIndexUtils.set('menu', this.menuRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['menu']);
|
|
DomHandler.absolutePosition(this.menuRef.current, this.target);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentListeners();
|
|
this.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.target = null;
|
|
this.unbindDocumentListeners();
|
|
this.unbindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "bindDocumentListeners",
|
|
value: function bindDocumentListeners() {
|
|
var _this4 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this4.state.visible && _this4.isOutsideClicked(event)) {
|
|
_this4.hide(event);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function (event) {
|
|
if (_this4.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide(event);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentListeners",
|
|
value: function unbindDocumentListeners() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function (event) {
|
|
if (_this5.state.visible) {
|
|
_this5.hide(event);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.menuRef && this.menuRef.current && !(this.menuRef.current.isSameNode(event.target) || this.menuRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentListeners();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(submenu, index) {
|
|
var _this6 = this;
|
|
|
|
var className = classNames('p-submenu-header', {
|
|
'p-disabled': submenu.disabled
|
|
}, submenu.className);
|
|
var items = submenu.items.map(function (item, index) {
|
|
return _this6.renderMenuitem(item, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: submenu.label + '_' + index
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
style: submenu.style,
|
|
role: "presentation",
|
|
"aria-disabled": submenu.disabled
|
|
}, submenu.label), items);
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this7 = this;
|
|
|
|
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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var tabIndex = item.disabled ? null : 0;
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: linkClassName,
|
|
role: "menuitem",
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this7.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this7.onItemKeyDown(event, item);
|
|
},
|
|
tabIndex: tabIndex,
|
|
"aria-disabled": item.disabled
|
|
}, icon, label);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this7.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this7.onItemKeyDown(event, item);
|
|
},
|
|
className: linkClassName,
|
|
tabIndex: tabIndex,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
role: "none"
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) {
|
|
return this.renderSeparator(index);
|
|
} else {
|
|
if (item.items) return this.renderSubmenu(item, index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this8 = this;
|
|
|
|
return this.props.model.map(function (item, index) {
|
|
return _this8.renderItem(item, index);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
if (this.props.model) {
|
|
var className = classNames('p-menu p-component', this.props.className, {
|
|
'p-menu-overlay': this.props.popup
|
|
});
|
|
var menuitems = this.renderMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.menuRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.menuRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onPanelClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-menu-list p-reset",
|
|
role: "menu"
|
|
}, menuitems)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return this.props.popup ? /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
}) : element;
|
|
}
|
|
}]);
|
|
|
|
return Menu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Menu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
popup: false,
|
|
style: null,
|
|
className: null,
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$11(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$11(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$11() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MenubarSubComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(MenubarSubComponent, _Component);
|
|
|
|
var _super = _createSuper$11(MenubarSubComponent);
|
|
|
|
function MenubarSubComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MenubarSubComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: null
|
|
};
|
|
_this.onLeafClick = _this.onLeafClick.bind(_assertThisInitialized(_this));
|
|
_this.onChildItemKeyDown = _this.onChildItemKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MenubarSubComponent, [{
|
|
key: "getElementRef",
|
|
value: function getElementRef(el) {
|
|
this.element = el;
|
|
|
|
if (this.props.forwardRef) {
|
|
return this.props.forwardRef(el);
|
|
}
|
|
|
|
return this.element;
|
|
}
|
|
}, {
|
|
key: "onItemMouseEnter",
|
|
value: function onItemMouseEnter(event, item) {
|
|
if (item.disabled || this.props.mobileActive) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.root) {
|
|
if (this.state.activeItem || this.props.popup) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
} else {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: 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) {
|
|
if (this.state.activeItem && item === this.state.activeItem) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
} else {
|
|
this.onLeafClick();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event, item) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (this.props.root) {
|
|
if (item.items) {
|
|
this.expandSubmenu(item, listItem);
|
|
}
|
|
} else {
|
|
this.navigateToNextItem(listItem);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
if (!this.props.root) {
|
|
this.navigateToPrevItem(listItem);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//right
|
|
|
|
case 39:
|
|
if (this.props.root) {
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
} else {
|
|
if (item.items) {
|
|
this.expandSubmenu(item, listItem);
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//left
|
|
|
|
case 37:
|
|
if (this.props.root) {
|
|
this.navigateToPrevItem(listItem);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown(event, listItem);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onChildItemKeyDown",
|
|
value: function onChildItemKeyDown(event, childListItem) {
|
|
if (this.props.root) {
|
|
//up
|
|
if (event.which === 38 && childListItem.previousElementSibling == null) {
|
|
this.collapseMenu(childListItem);
|
|
}
|
|
} else {
|
|
//left
|
|
if (event.which === 37) {
|
|
this.collapseMenu(childListItem);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "expandSubmenu",
|
|
value: function expandSubmenu(item, listItem) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
setTimeout(function () {
|
|
listItem.children[1].children[0].children[0].focus();
|
|
}, 50);
|
|
}
|
|
}, {
|
|
key: "collapseMenu",
|
|
value: function collapseMenu(listItem) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
listItem.parentElement.previousElementSibling.focus();
|
|
}
|
|
}, {
|
|
key: "navigateToNextItem",
|
|
value: function navigateToNextItem(listItem) {
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "navigateToPrevItem",
|
|
value: function navigateToPrevItem(listItem) {
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "onLeafClick",
|
|
value: function onLeafClick() {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
|
|
if (this.props.onLeafClick) {
|
|
this.props.onLeafClick();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.element && !_this2.element.contains(event.target)) {
|
|
_this2.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.parentActive && !this.props.parentActive) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(item) {
|
|
if (item.items) {
|
|
return /*#__PURE__*/React__default["default"].createElement(MenubarSub, {
|
|
model: item.items,
|
|
mobileActive: this.props.mobileActive,
|
|
onLeafClick: this.onLeafClick,
|
|
onKeyDown: this.onChildItemKeyDown,
|
|
parentActive: item === this.state.activeItem
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this3 = this;
|
|
|
|
var className = classNames('p-menuitem', {
|
|
'p-menuitem-active': this.state.activeItem === 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': this.props.root,
|
|
'pi-angle-right': !this.props.root
|
|
});
|
|
var icon = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var submenu = this.renderSubmenu(item);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
role: "menuitem",
|
|
className: linkClassName,
|
|
target: item.target,
|
|
"aria-haspopup": item.items != null,
|
|
onClick: function onClick(event) {
|
|
return _this3.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this3.onItemKeyDown(event, item);
|
|
}
|
|
}, icon, label, submenuIcon, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this3.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this3.onItemKeyDown(event, item);
|
|
},
|
|
className: linkClassName,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
submenuIconClassName: submenuIconClassName,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
role: "none",
|
|
className: className,
|
|
style: item.style,
|
|
onMouseEnter: function onMouseEnter(event) {
|
|
return _this3.onItemMouseEnter(event, item);
|
|
}
|
|
}, content, submenu);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) return this.renderSeparator(index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this4.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this5 = this;
|
|
|
|
var className = classNames({
|
|
'p-submenu-list': !this.props.root,
|
|
'p-menubar-root-list': this.props.root
|
|
});
|
|
var submenu = this.renderMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this5.getElementRef(el);
|
|
},
|
|
className: className,
|
|
role: this.props.root ? 'menubar' : 'menu'
|
|
}, submenu);
|
|
}
|
|
}]);
|
|
|
|
return MenubarSubComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(MenubarSubComponent, "defaultProps", {
|
|
model: null,
|
|
root: false,
|
|
className: null,
|
|
popup: false,
|
|
onLeafClick: null,
|
|
onKeyDown: null,
|
|
parentActive: false,
|
|
mobileActive: false,
|
|
forwardRef: null
|
|
});
|
|
|
|
var MenubarSub = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(MenubarSubComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$10(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$10(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$10() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Menubar = /*#__PURE__*/function (_Component) {
|
|
_inherits(Menubar, _Component);
|
|
|
|
var _super = _createSuper$10(Menubar);
|
|
|
|
function Menubar(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Menubar);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
mobileActive: false
|
|
};
|
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
|
_this.onLeafClick = _this.onLeafClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Menubar, [{
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
var _this2 = this;
|
|
|
|
event.preventDefault();
|
|
this.setState(function (prevState) {
|
|
return {
|
|
mobileActive: !prevState.mobileActive
|
|
};
|
|
}, function () {
|
|
if (_this2.state.mobileActive) {
|
|
ZIndexUtils.set('menu', _this2.rootmenu, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']);
|
|
|
|
_this2.bindDocumentClickListener();
|
|
} else {
|
|
_this2.unbindDocumentClickListener();
|
|
|
|
ZIndexUtils.clear(_this2.rootmenu);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this3.state.mobileActive && _this3.isOutsideClicked(event)) {
|
|
_this3.setState({
|
|
mobileActive: false
|
|
}, function () {
|
|
_this3.unbindDocumentClickListener();
|
|
|
|
ZIndexUtils.clear(_this3.rootmenu);
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.rootmenu !== event.target && !this.rootmenu.contains(event.target) && this.menubutton !== event.target && !this.menubutton.contains(event.target);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onLeafClick",
|
|
value: function onLeafClick() {
|
|
var _this4 = this;
|
|
|
|
this.setState({
|
|
mobileActive: false
|
|
}, function () {
|
|
_this4.unbindDocumentClickListener();
|
|
|
|
ZIndexUtils.clear(_this4.rootmenu);
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
ZIndexUtils.clear(this.rootmenu);
|
|
}
|
|
}, {
|
|
key: "renderCustomContent",
|
|
value: function renderCustomContent() {
|
|
if (this.props.children) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-menubar-custom"
|
|
}, this.props.children);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderStartContent",
|
|
value: function renderStartContent() {
|
|
if (this.props.start) {
|
|
var start = ObjectUtils.getJSXElement(this.props.start, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-menubar-start"
|
|
}, start);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderEndContent",
|
|
value: function renderEndContent() {
|
|
if (this.props.end) {
|
|
var end = ObjectUtils.getJSXElement(this.props.end, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-menubar-end"
|
|
}, end);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuButton",
|
|
value: function renderMenuButton() {
|
|
var _this5 = this;
|
|
|
|
/* eslint-disable */
|
|
var button = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
ref: function ref(el) {
|
|
return _this5.menubutton = el;
|
|
},
|
|
href: '#',
|
|
role: "button",
|
|
tabIndex: 0,
|
|
className: "p-menubar-button",
|
|
onClick: this.toggle
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-bars"
|
|
}));
|
|
/* eslint-enable */
|
|
|
|
return button;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames('p-menubar p-component', {
|
|
'p-menubar-mobile-active': this.state.mobileActive
|
|
}, this.props.className);
|
|
var start = this.renderStartContent();
|
|
var end = this.renderEndContent();
|
|
var menuButton = this.renderMenuButton();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, start, menuButton, /*#__PURE__*/React__default["default"].createElement(MenubarSub, {
|
|
ref: function ref(el) {
|
|
return _this6.rootmenu = el;
|
|
},
|
|
model: this.props.model,
|
|
root: true,
|
|
mobileActive: this.state.mobileActive,
|
|
onLeafClick: this.onLeafClick
|
|
}), end);
|
|
}
|
|
}]);
|
|
|
|
return Menubar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Menubar, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
style: null,
|
|
className: null,
|
|
start: null,
|
|
end: null
|
|
});
|
|
|
|
function _createSuper$$(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$$(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$$() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Message = /*#__PURE__*/function (_Component) {
|
|
_inherits(Message, _Component);
|
|
|
|
var _super = _createSuper$$(Message);
|
|
|
|
function Message() {
|
|
_classCallCheck(this, Message);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Message, [{
|
|
key: "getContent",
|
|
value: function getContent() {
|
|
if (this.props.content) {
|
|
return ObjectUtils.getJSXElement(this.props.content, this.props);
|
|
}
|
|
|
|
var text = ObjectUtils.getJSXElement(this.props.text, this.props);
|
|
var icon = classNames('p-inline-message-icon pi', {
|
|
'pi-info-circle': this.props.severity === 'info',
|
|
'pi-exclamation-triangle': this.props.severity === 'warn',
|
|
'pi-times-circle': this.props.severity === 'error',
|
|
'pi-check': this.props.severity === 'success'
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-inline-message-text"
|
|
}, text));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-inline-message p-component', {
|
|
'p-inline-message-info': this.props.severity === 'info',
|
|
'p-inline-message-warn': this.props.severity === 'warn',
|
|
'p-inline-message-error': this.props.severity === 'error',
|
|
'p-inline-message-success': this.props.severity === 'success',
|
|
'p-inline-message-icon-only': !this.props.text
|
|
}, this.props.className);
|
|
var content = this.getContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
"aria-live": "polite",
|
|
className: className,
|
|
style: this.props.style,
|
|
role: "alert"
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return Message;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Message, "defaultProps", {
|
|
id: null,
|
|
className: null,
|
|
style: null,
|
|
text: null,
|
|
severity: 'info',
|
|
content: null
|
|
});
|
|
|
|
function _createSuper$_(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$_(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$_() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MultiSelectHeader = /*#__PURE__*/function (_Component) {
|
|
_inherits(MultiSelectHeader, _Component);
|
|
|
|
var _super = _createSuper$_(MultiSelectHeader);
|
|
|
|
function MultiSelectHeader(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MultiSelectHeader);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onFilter = _this.onFilter.bind(_assertThisInitialized(_this));
|
|
_this.onSelectAll = _this.onSelectAll.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MultiSelectHeader, [{
|
|
key: "onFilter",
|
|
value: function onFilter(event) {
|
|
if (this.props.onFilter) {
|
|
this.props.onFilter({
|
|
originalEvent: event,
|
|
query: event.target.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSelectAll",
|
|
value: function onSelectAll(event) {
|
|
if (this.props.onSelectAll) {
|
|
this.props.onSelectAll({
|
|
originalEvent: event,
|
|
checked: this.props.selectAll
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderFilterElement",
|
|
value: function renderFilterElement() {
|
|
if (this.props.filter) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-filter-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
type: "text",
|
|
role: "textbox",
|
|
value: this.props.filterValue,
|
|
onChange: this.onFilter,
|
|
className: "p-multiselect-filter",
|
|
placeholder: this.props.filterPlaceholder
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-multiselect-filter-icon pi pi-search"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var filterElement = this.renderFilterElement();
|
|
var checkboxElement = this.props.showSelectAll && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
|
|
checked: this.props.selectAll,
|
|
onChange: this.onSelectAll,
|
|
role: "checkbox",
|
|
"aria-checked": this.props.selectAll
|
|
});
|
|
var closeElement = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-multiselect-close p-link",
|
|
onClick: this.props.onClose
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-multiselect-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
var element = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-header"
|
|
}, checkboxElement, filterElement, closeElement);
|
|
|
|
if (this.props.template) {
|
|
var defaultOptions = {
|
|
className: 'p-multiselect-header',
|
|
checkboxElement: checkboxElement,
|
|
checked: this.props.selectAll,
|
|
onChange: this.onSelectAll,
|
|
filterElement: filterElement,
|
|
closeElement: closeElement,
|
|
closeElementClassName: 'p-multiselect-close p-link',
|
|
closeIconClassName: 'p-multiselect-close-icon pi pi-times',
|
|
onCloseClick: this.props.onClose,
|
|
element: element,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.template, defaultOptions);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
}]);
|
|
|
|
return MultiSelectHeader;
|
|
}(React.Component);
|
|
|
|
function _createSuper$Z(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$Z(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$Z() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MultiSelectItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(MultiSelectItem, _Component);
|
|
|
|
var _super = _createSuper$Z(MultiSelectItem);
|
|
|
|
function MultiSelectItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MultiSelectItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MultiSelectItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-multiselect-item', {
|
|
'p-highlight': this.props.selected,
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.option.className);
|
|
var checkboxClassName = classNames('p-checkbox-box', {
|
|
'p-highlight': this.props.selected
|
|
});
|
|
var checkboxIcon = classNames('p-checkbox-icon p-c', {
|
|
'pi pi-check': this.props.selected
|
|
});
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
|
|
var tabIndex = this.props.disabled ? null : this.props.tabIndex || 0;
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
onClick: this.onClick,
|
|
tabIndex: tabIndex,
|
|
onKeyDown: this.onKeyDown,
|
|
role: "option",
|
|
"aria-selected": this.props.selected
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-checkbox p-component"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: checkboxClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: checkboxIcon
|
|
}))), /*#__PURE__*/React__default["default"].createElement("span", null, content), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return MultiSelectItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(MultiSelectItem, "defaultProps", {
|
|
option: null,
|
|
label: null,
|
|
selected: false,
|
|
disabled: false,
|
|
tabIndex: null,
|
|
template: null,
|
|
onClick: null,
|
|
onKeyDown: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$Y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$Y(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$Y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(MultiSelectPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$Y(MultiSelectPanelComponent);
|
|
|
|
function MultiSelectPanelComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MultiSelectPanelComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MultiSelectPanelComponent, [{
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
var _this2 = this;
|
|
|
|
this.props.onEnter(function () {
|
|
if (_this2.virtualScrollerRef) {
|
|
var selectedIndex = _this2.props.getSelectedOptionIndex();
|
|
|
|
if (selectedIndex !== -1) {
|
|
_this2.virtualScrollerRef.scrollToIndex(selectedIndex);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
if (this.virtualScrollerRef) {
|
|
this.virtualScrollerRef.scrollToIndex(0);
|
|
}
|
|
|
|
this.props.onFilterInputChange && this.props.onFilterInputChange(event);
|
|
}
|
|
}, {
|
|
key: "isEmptyFilter",
|
|
value: function isEmptyFilter() {
|
|
return !(this.props.visibleOptions && this.props.visibleOptions.length) && this.props.hasFilter();
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
return /*#__PURE__*/React__default["default"].createElement(MultiSelectHeader, {
|
|
filter: this.props.filter,
|
|
filterValue: this.props.filterValue,
|
|
onFilter: this.onFilterInputChange,
|
|
filterPlaceholder: this.props.filterPlaceholder,
|
|
onClose: this.props.onCloseClick,
|
|
showSelectAll: this.props.showSelectAll,
|
|
selectAll: this.props.isAllSelected(),
|
|
onSelectAll: this.props.onSelectAll,
|
|
template: this.props.panelHeaderTemplate
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.panelFooterTemplate) {
|
|
var content = ObjectUtils.getJSXElement(this.props.panelFooterTemplate, this.props, this.props.onOverlayHide);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-footer"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderGroupChildren",
|
|
value: function renderGroupChildren(optionGroup) {
|
|
var _this3 = this;
|
|
|
|
var groupChildren = this.props.getOptionGroupChildren(optionGroup);
|
|
return groupChildren.map(function (option, j) {
|
|
var optionLabel = _this3.props.getOptionLabel(option);
|
|
|
|
var optionKey = j + '_' + _this3.props.getOptionRenderKey(option);
|
|
|
|
var disabled = _this3.props.isOptionDisabled(option);
|
|
|
|
var tabIndex = disabled ? null : _this3.props.tabIndex || 0;
|
|
return /*#__PURE__*/React__default["default"].createElement(MultiSelectItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: _this3.props.itemTemplate,
|
|
selected: _this3.props.isSelected(option),
|
|
onClick: _this3.props.onOptionSelect,
|
|
onKeyDown: _this3.props.onOptionKeyDown,
|
|
tabIndex: tabIndex,
|
|
disabled: disabled
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderEmptyFilter",
|
|
value: function renderEmptyFilter() {
|
|
var emptyFilterMessage = ObjectUtils.getJSXElement(this.props.emptyFilterMessage, this.props) || localeOption('emptyFilterMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-multiselect-empty-message"
|
|
}, emptyFilterMessage);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(option, index) {
|
|
if (this.props.optionGroupLabel) {
|
|
var groupContent = this.props.optionGroupTemplate ? ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
|
|
var groupChildrenContent = this.renderGroupChildren(option);
|
|
var key = index + '_' + this.props.getOptionGroupRenderKey(option);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: key
|
|
}, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-multiselect-item-group"
|
|
}, groupContent), groupChildrenContent);
|
|
} else {
|
|
var optionLabel = this.props.getOptionLabel(option);
|
|
var optionKey = index + '_' + this.props.getOptionRenderKey(option);
|
|
var disabled = this.props.isOptionDisabled(option);
|
|
var tabIndex = disabled ? null : this.props.tabIndex || 0;
|
|
return /*#__PURE__*/React__default["default"].createElement(MultiSelectItem, {
|
|
key: optionKey,
|
|
label: optionLabel,
|
|
option: option,
|
|
template: this.props.itemTemplate,
|
|
selected: this.props.isSelected(option),
|
|
onClick: this.props.onOptionSelect,
|
|
onKeyDown: this.props.onOptionKeyDown,
|
|
tabIndex: tabIndex,
|
|
disabled: disabled
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.visibleOptions && this.props.visibleOptions.length) {
|
|
return this.props.visibleOptions.map(function (option, index) {
|
|
return _this4.renderItem(option, index);
|
|
});
|
|
} else if (this.props.hasFilter()) {
|
|
return this.renderEmptyFilter();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this5 = this;
|
|
|
|
if (this.props.virtualScrollerOptions) {
|
|
var virtualScrollerProps = _objectSpread$k(_objectSpread$k({}, this.props.virtualScrollerOptions), {
|
|
style: _objectSpread$k(_objectSpread$k({}, this.props.virtualScrollerOptions.style), {
|
|
height: this.props.scrollHeight
|
|
}),
|
|
className: classNames('p-multiselect-items-wrapper', this.props.virtualScrollerOptions.className),
|
|
items: this.props.visibleOptions,
|
|
onLazyLoad: function onLazyLoad(event) {
|
|
return _this5.props.virtualScrollerOptions.onLazyLoad(_objectSpread$k(_objectSpread$k({}, event), {
|
|
filter: _this5.props.filterValue
|
|
}));
|
|
},
|
|
itemTemplate: function itemTemplate(item, options) {
|
|
return item && _this5.renderItem(item, options.index);
|
|
},
|
|
contentTemplate: function contentTemplate(options) {
|
|
var className = classNames('p-multiselect-items p-component', options.className);
|
|
var content = _this5.isEmptyFilter() ? _this5.renderEmptyFilter() : options.children;
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: options.contentRef,
|
|
className: className,
|
|
role: "listbox",
|
|
"aria-multiselectable": true
|
|
}, content);
|
|
}
|
|
});
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(VirtualScroller, _extends({
|
|
ref: function ref(el) {
|
|
return _this5.virtualScrollerRef = el;
|
|
}
|
|
}, virtualScrollerProps));
|
|
} else {
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-items-wrapper",
|
|
style: {
|
|
maxHeight: this.props.scrollHeight
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-multiselect-items p-component",
|
|
role: "listbox",
|
|
"aria-multiselectable": true
|
|
}, items));
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var panelClassName = classNames('p-multiselect-panel p-component', {
|
|
'p-multiselect-limited': !this.props.allowOptionSelect()
|
|
}, this.props.panelClassName);
|
|
var header = this.renderHeader();
|
|
var content = this.renderContent();
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: panelClassName,
|
|
style: this.props.panelStyle,
|
|
onClick: this.props.onClick
|
|
}, header, content, footer));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return MultiSelectPanelComponent;
|
|
}(React.Component);
|
|
|
|
var MultiSelectPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(MultiSelectPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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; }
|
|
|
|
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; }
|
|
|
|
function _createSuper$X(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$X(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$X() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MultiSelect = /*#__PURE__*/function (_Component) {
|
|
_inherits(MultiSelect, _Component);
|
|
|
|
var _super = _createSuper$X(MultiSelect);
|
|
|
|
function MultiSelect(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MultiSelect);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
filter: '',
|
|
focused: false,
|
|
overlayVisible: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onOptionSelect = _this.onOptionSelect.bind(_assertThisInitialized(_this));
|
|
_this.onOptionKeyDown = _this.onOptionKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onCloseClick = _this.onCloseClick.bind(_assertThisInitialized(_this));
|
|
_this.onSelectAll = _this.onSelectAll.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.getOptionLabel = _this.getOptionLabel.bind(_assertThisInitialized(_this));
|
|
_this.getOptionRenderKey = _this.getOptionRenderKey.bind(_assertThisInitialized(_this));
|
|
_this.isOptionDisabled = _this.isOptionDisabled.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupChildren = _this.getOptionGroupChildren.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupLabel = _this.getOptionGroupLabel.bind(_assertThisInitialized(_this));
|
|
_this.getOptionGroupRenderKey = _this.getOptionGroupRenderKey.bind(_assertThisInitialized(_this));
|
|
_this.allowOptionSelect = _this.allowOptionSelect.bind(_assertThisInitialized(_this));
|
|
_this.isSelected = _this.isSelected.bind(_assertThisInitialized(_this));
|
|
_this.isAllSelected = _this.isAllSelected.bind(_assertThisInitialized(_this));
|
|
_this.hasFilter = _this.hasFilter.bind(_assertThisInitialized(_this));
|
|
_this.getSelectedOptionIndex = _this.getSelectedOptionIndex.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.onOptionKeyDown = _this.onOptionKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MultiSelect, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "allowOptionSelect",
|
|
value: function allowOptionSelect() {
|
|
return !this.props.selectionLimit || !this.props.value || this.props.value && this.props.value.length < this.props.selectionLimit;
|
|
}
|
|
}, {
|
|
key: "onOptionSelect",
|
|
value: function onOptionSelect(event) {
|
|
var _this2 = this;
|
|
|
|
var originalEvent = event.originalEvent,
|
|
option = event.option;
|
|
|
|
if (this.props.disabled || this.isOptionDisabled(option)) {
|
|
return;
|
|
}
|
|
|
|
var optionValue = this.getOptionValue(option);
|
|
var isOptionValueUsed = this.isOptionValueUsed(option);
|
|
var selected = this.isSelected(option);
|
|
var allowOptionSelect = this.allowOptionSelect();
|
|
if (selected) this.updateModel(originalEvent, this.props.value.filter(function (val) {
|
|
return !ObjectUtils.equals(isOptionValueUsed ? val : _this2.getOptionValue(val), optionValue, _this2.equalityKey());
|
|
}));else if (allowOptionSelect) this.updateModel(originalEvent, [].concat(_toConsumableArray(this.props.value || []), [optionValue]));
|
|
}
|
|
}, {
|
|
key: "onOptionKeyDown",
|
|
value: function onOptionKeyDown(event) {
|
|
var originalEvent = event.originalEvent;
|
|
var listItem = originalEvent.currentTarget;
|
|
|
|
switch (originalEvent.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.focus();
|
|
}
|
|
|
|
originalEvent.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.focus();
|
|
}
|
|
|
|
originalEvent.preventDefault();
|
|
break;
|
|
//enter and space
|
|
|
|
case 13:
|
|
case 32:
|
|
this.onOptionSelect(event);
|
|
originalEvent.preventDefault();
|
|
break;
|
|
//escape
|
|
|
|
case 27:
|
|
this.hide();
|
|
this.inputRef.current.focus();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled && !this.isPanelClicked(event) && !DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !this.isClearClicked(event)) {
|
|
if (this.state.overlayVisible) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
|
|
this.inputRef.current.focus();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (!this.state.overlayVisible && event.altKey) {
|
|
this.show();
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (this.state.overlayVisible) this.hide();else this.show();
|
|
event.preventDefault();
|
|
break;
|
|
//escape
|
|
|
|
case 27:
|
|
this.hide();
|
|
break;
|
|
//tab
|
|
|
|
case 9:
|
|
if (this.state.overlayVisible) {
|
|
var firstFocusableElement = DomHandler.getFirstFocusableElement(this.overlayRef.current);
|
|
|
|
if (firstFocusableElement) {
|
|
firstFocusableElement.focus();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSelectAll",
|
|
value: function onSelectAll(event) {
|
|
var _this3 = this;
|
|
|
|
if (this.props.onSelectAll) {
|
|
this.props.onSelectAll(event);
|
|
} else {
|
|
var value = null;
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (event.checked) {
|
|
value = [];
|
|
|
|
if (visibleOptions) {
|
|
var selectedOptions = visibleOptions.filter(function (option) {
|
|
return _this3.isOptionDisabled(option) && _this3.isSelected(option);
|
|
});
|
|
value = selectedOptions.map(function (option) {
|
|
return _this3.getOptionValue(option);
|
|
});
|
|
}
|
|
} else if (visibleOptions) {
|
|
visibleOptions = visibleOptions.filter(function (option) {
|
|
return !_this3.isOptionDisabled(option);
|
|
});
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
value = [];
|
|
visibleOptions.forEach(function (optionGroup) {
|
|
return value = [].concat(_toConsumableArray(value), _toConsumableArray(_this3.getOptionGroupChildren(optionGroup).filter(function (option) {
|
|
return !_this3.isOptionDisabled(option);
|
|
}).map(function (option) {
|
|
return _this3.getOptionValue(option);
|
|
})));
|
|
});
|
|
} else {
|
|
value = visibleOptions.map(function (option) {
|
|
return _this3.getOptionValue(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
this.updateModel(event.originalEvent, value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateModel",
|
|
value: function updateModel(event, value) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
var _this4 = this;
|
|
|
|
var filter = event.query;
|
|
this.setState({
|
|
filter: filter
|
|
}, function () {
|
|
if (_this4.props.onFilter) {
|
|
_this4.props.onFilter({
|
|
originalEvent: event,
|
|
filter: filter
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "resetFilter",
|
|
value: function resetFilter() {
|
|
var _this5 = this;
|
|
|
|
var filter = '';
|
|
this.setState({
|
|
filter: filter
|
|
}, function () {
|
|
_this5.props.onFilter && _this5.props.onFilter({
|
|
filter: filter
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter(callback) {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
this.scrollInView();
|
|
callback && callback();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
if (this.props.filter && this.props.resetFilterOnHide) {
|
|
this.resetFilter();
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.label.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: function scrollInView() {
|
|
var highlightItem = DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
|
|
|
|
if (highlightItem) {
|
|
highlightItem.scrollIntoView({
|
|
block: 'nearest',
|
|
inline: 'start'
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onCloseClick",
|
|
value: function onCloseClick(event) {
|
|
this.hide();
|
|
this.inputRef.current.focus();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
}, {
|
|
key: "getSelectedOptionIndex",
|
|
value: function getSelectedOptionIndex() {
|
|
if (this.props.value != null && this.props.options) {
|
|
if (this.props.optionGroupLabel) {
|
|
for (var i = 0; i < this.props.options.length; i++) {
|
|
var selectedOptionIndex = this.findOptionIndexInList(this.props.value, this.getOptionGroupChildren(this.props.options[i]));
|
|
|
|
if (selectedOptionIndex !== -1) {
|
|
return {
|
|
group: i,
|
|
option: selectedOptionIndex
|
|
};
|
|
}
|
|
}
|
|
} else {
|
|
return this.findOptionIndexInList(this.props.value, this.props.options);
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
}
|
|
}, {
|
|
key: "findOptionIndexInList",
|
|
value: function findOptionIndexInList(value, list) {
|
|
var _this6 = this;
|
|
|
|
var key = this.equalityKey();
|
|
return list.findIndex(function (item) {
|
|
return value.some(function (val) {
|
|
return ObjectUtils.equals(val, _this6.getOptionValue(item), key);
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(option) {
|
|
var _this7 = this;
|
|
|
|
var selected = false;
|
|
|
|
if (this.props.value) {
|
|
var optionValue = this.getOptionValue(option);
|
|
var isOptionValueUsed = this.isOptionValueUsed(option);
|
|
var key = this.equalityKey();
|
|
selected = this.props.value.some(function (val) {
|
|
return ObjectUtils.equals(isOptionValueUsed ? val : _this7.getOptionValue(val), optionValue, key);
|
|
});
|
|
}
|
|
|
|
return selected;
|
|
}
|
|
}, {
|
|
key: "getLabelByValue",
|
|
value: function getLabelByValue(val) {
|
|
var option;
|
|
|
|
if (this.props.options) {
|
|
if (this.props.optionGroupLabel) {
|
|
var _iterator = _createForOfIteratorHelper$8(this.props.options),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var optionGroup = _step.value;
|
|
option = this.findOptionByValue(val, this.getOptionGroupChildren(optionGroup));
|
|
|
|
if (option) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
} else {
|
|
option = this.findOptionByValue(val, this.props.options);
|
|
}
|
|
}
|
|
|
|
return option ? this.getOptionLabel(option) : null;
|
|
}
|
|
}, {
|
|
key: "findOptionByValue",
|
|
value: function findOptionByValue(val, list) {
|
|
var key = this.equalityKey();
|
|
|
|
var _iterator2 = _createForOfIteratorHelper$8(list),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var option = _step2.value;
|
|
var optionValue = this.getOptionValue(option);
|
|
|
|
if (ObjectUtils.equals(optionValue, val, key)) {
|
|
return option;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(event) {
|
|
var _this8 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this8.props.onFocus) {
|
|
_this8.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
var _this9 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this9.props.onBlur) {
|
|
_this9.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this10 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this10.state.overlayVisible && _this10.isOutsideClicked(event)) {
|
|
_this10.hide();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this11 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this11.state.overlayVisible) {
|
|
_this11.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this12 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this12.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this12.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.isClearClicked(event) || this.container.contains(event.target) || this.isPanelClicked(event));
|
|
}
|
|
}, {
|
|
key: "isClearClicked",
|
|
value: function isClearClicked(event) {
|
|
return DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
|
|
}
|
|
}, {
|
|
key: "isPanelClicked",
|
|
value: function isPanelClicked(event) {
|
|
return this.overlayRef && this.overlayRef.current && this.overlayRef.current.contains(event.target);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$j({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (this.state.overlayVisible && this.hasFilter()) {
|
|
this.alignOverlay();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
return this.state.filter && this.state.filter.trim().length > 0;
|
|
}
|
|
}, {
|
|
key: "isAllSelected",
|
|
value: function isAllSelected() {
|
|
var _this13 = this;
|
|
|
|
if (this.props.onSelectAll) {
|
|
return this.props.selectAll;
|
|
} else {
|
|
var visibleOptions = this.getVisibleOptions();
|
|
|
|
if (ObjectUtils.isEmpty(visibleOptions)) {
|
|
return false;
|
|
}
|
|
|
|
visibleOptions = visibleOptions.filter(function (option) {
|
|
return !_this13.isOptionDisabled(option);
|
|
});
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var _iterator3 = _createForOfIteratorHelper$8(visibleOptions),
|
|
_step3;
|
|
|
|
try {
|
|
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
var optionGroup = _step3.value;
|
|
var visibleOptionsGroupChildren = this.getOptionGroupChildren(optionGroup).filter(function (option) {
|
|
return !_this13.isOptionDisabled(option);
|
|
});
|
|
|
|
var _iterator4 = _createForOfIteratorHelper$8(visibleOptionsGroupChildren),
|
|
_step4;
|
|
|
|
try {
|
|
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
var option = _step4.value;
|
|
|
|
if (!this.isSelected(option)) {
|
|
return false;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator4.e(err);
|
|
} finally {
|
|
_iterator4.f();
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator3.e(err);
|
|
} finally {
|
|
_iterator3.f();
|
|
}
|
|
} else {
|
|
var _iterator5 = _createForOfIteratorHelper$8(visibleOptions),
|
|
_step5;
|
|
|
|
try {
|
|
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
|
|
var _option = _step5.value;
|
|
|
|
if (!this.isSelected(_option)) {
|
|
return false;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator5.e(err);
|
|
} finally {
|
|
_iterator5.f();
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
if (this.props.optionValue) {
|
|
var data = ObjectUtils.resolveFieldData(option, this.props.optionValue);
|
|
return data !== null ? data : option;
|
|
}
|
|
|
|
return option && option['value'] !== undefined ? option['value'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionRenderKey",
|
|
value: function getOptionRenderKey(option) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupRenderKey",
|
|
value: function getOptionGroupRenderKey(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupLabel",
|
|
value: function getOptionGroupLabel(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
|
|
}
|
|
}, {
|
|
key: "getOptionGroupChildren",
|
|
value: function getOptionGroupChildren(optionGroup) {
|
|
return ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
|
|
}
|
|
}, {
|
|
key: "isOptionDisabled",
|
|
value: function isOptionDisabled(option) {
|
|
if (this.props.optionDisabled) {
|
|
return ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
|
|
}
|
|
|
|
return option && option['disabled'] !== undefined ? option['disabled'] : false;
|
|
}
|
|
}, {
|
|
key: "isOptionValueUsed",
|
|
value: function isOptionValueUsed(option) {
|
|
return this.props.optionValue || option && option['value'] !== undefined;
|
|
}
|
|
}, {
|
|
key: "getVisibleOptions",
|
|
value: function getVisibleOptions() {
|
|
if (this.hasFilter()) {
|
|
var filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
|
|
var searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
|
|
|
|
if (this.props.optionGroupLabel) {
|
|
var filteredGroups = [];
|
|
|
|
var _iterator6 = _createForOfIteratorHelper$8(this.props.options),
|
|
_step6;
|
|
|
|
try {
|
|
for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
|
|
var optgroup = _step6.value;
|
|
var filteredSubOptions = FilterService.filter(this.getOptionGroupChildren(optgroup), searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
|
|
if (filteredSubOptions && filteredSubOptions.length) {
|
|
filteredGroups.push(_objectSpread$j(_objectSpread$j({}, optgroup), {
|
|
items: filteredSubOptions
|
|
}));
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator6.e(err);
|
|
} finally {
|
|
_iterator6.f();
|
|
}
|
|
|
|
return filteredGroups;
|
|
} else {
|
|
return FilterService.filter(this.props.options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
|
|
}
|
|
} else {
|
|
return this.props.options;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isEmpty",
|
|
value: function isEmpty() {
|
|
return !this.props.value || this.props.value.length === 0;
|
|
}
|
|
}, {
|
|
key: "equalityKey",
|
|
value: function equalityKey() {
|
|
return this.props.optionValue ? null : this.props.dataKey;
|
|
}
|
|
}, {
|
|
key: "checkValidity",
|
|
value: function checkValidity() {
|
|
return this.inputRef.current.checkValidity();
|
|
}
|
|
}, {
|
|
key: "removeChip",
|
|
value: function removeChip(event, item) {
|
|
var key = this.equalityKey();
|
|
var value = this.props.value.filter(function (val) {
|
|
return !ObjectUtils.equals(val, item, key);
|
|
});
|
|
this.updateModel(event, value);
|
|
}
|
|
}, {
|
|
key: "getSelectedItemsLabel",
|
|
value: function getSelectedItemsLabel() {
|
|
var pattern = /{(.*?)}/;
|
|
|
|
if (pattern.test(this.props.selectedItemsLabel)) {
|
|
return this.props.selectedItemsLabel.replace(this.props.selectedItemsLabel.match(pattern)[0], this.props.value.length + '');
|
|
}
|
|
|
|
return this.props.selectedItemsLabel;
|
|
}
|
|
}, {
|
|
key: "getLabel",
|
|
value: function getLabel() {
|
|
var label;
|
|
|
|
if (!this.isEmpty() && !this.props.fixedPlaceholder) {
|
|
if (this.props.maxSelectedLabels && this.props.value.length > this.props.maxSelectedLabels) {
|
|
return this.getSelectedItemsLabel();
|
|
} else {
|
|
label = '';
|
|
|
|
for (var i = 0; i < this.props.value.length; i++) {
|
|
if (i !== 0) {
|
|
label += ',';
|
|
}
|
|
|
|
label += this.getLabelByValue(this.props.value[i]);
|
|
}
|
|
|
|
return label;
|
|
}
|
|
}
|
|
|
|
return label;
|
|
}
|
|
}, {
|
|
key: "getLabelContent",
|
|
value: function getLabelContent() {
|
|
var _this14 = this;
|
|
|
|
if (this.props.selectedItemTemplate) {
|
|
if (!this.isEmpty()) {
|
|
if (this.props.maxSelectedLabels && this.props.value.length > this.props.maxSelectedLabels) {
|
|
return this.getSelectedItemsLabel();
|
|
} else {
|
|
return this.props.value.map(function (val, index) {
|
|
var item = ObjectUtils.getJSXElement(_this14.props.selectedItemTemplate, val);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
key: index
|
|
}, item);
|
|
});
|
|
}
|
|
} else {
|
|
return ObjectUtils.getJSXElement(this.props.selectedItemTemplate);
|
|
}
|
|
} else {
|
|
if (this.props.display === 'chip' && !this.isEmpty()) {
|
|
var value = this.props.value.slice(0, this.props.maxSelectedLabels || this.props.value.length);
|
|
return value.map(function (val) {
|
|
var label = _this14.getLabelByValue(val);
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-token",
|
|
key: label
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-multiselect-token-label"
|
|
}, label), !_this14.props.disabled && IconUtils.getJSXIcon(_this14.props.removeIcon, {
|
|
className: 'p-multiselect-token-icon',
|
|
onClick: function onClick(e) {
|
|
return _this14.removeChip(e, val);
|
|
}
|
|
}, {
|
|
props: _this14.props
|
|
}));
|
|
});
|
|
}
|
|
|
|
return this.getLabel();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderClearIcon",
|
|
value: function renderClearIcon() {
|
|
var _this15 = this;
|
|
|
|
var empty = this.isEmpty();
|
|
|
|
if (!empty && this.props.showClear && !this.props.disabled) {
|
|
return /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-multiselect-clear-icon pi pi-times",
|
|
onClick: function onClick(e) {
|
|
return _this15.updateModel(e, null);
|
|
}
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel() {
|
|
var _this16 = this;
|
|
|
|
var empty = this.isEmpty();
|
|
var content = this.getLabelContent();
|
|
var labelClassName = classNames('p-multiselect-label', {
|
|
'p-placeholder': empty && this.props.placeholder,
|
|
'p-multiselect-label-empty': empty && !this.props.placeholder && !this.props.selectedItemTemplate,
|
|
'p-multiselect-items-label': !empty && this.props.display !== 'chip' && this.props.value.length > this.props.maxSelectedLabels
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this16.label = el;
|
|
},
|
|
className: "p-multiselect-label-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: labelClassName
|
|
}, content || this.props.placeholder || 'empty'));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this17 = this;
|
|
|
|
var className = classNames('p-multiselect p-component p-inputwrapper', {
|
|
'p-multiselect-chip': this.props.display === 'chip',
|
|
'p-disabled': this.props.disabled,
|
|
'p-multiselect-clearable': this.props.showClear && !this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-inputwrapper-filled': this.props.value && this.props.value.length > 0,
|
|
'p-inputwrapper-focus': this.state.focused || this.state.overlayVisible
|
|
}, this.props.className);
|
|
var visibleOptions = this.getVisibleOptions();
|
|
var label = this.renderLabel();
|
|
var clearIcon = this.renderClearIcon();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
onClick: this.onClick,
|
|
ref: function ref(el) {
|
|
return _this17.container = el;
|
|
},
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
readOnly: true,
|
|
type: "text",
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
role: "listbox",
|
|
"aria-haspopup": "listbox",
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
"aria-expanded": this.state.overlayVisible,
|
|
disabled: this.props.disabled,
|
|
tabIndex: this.props.tabIndex
|
|
})), label, clearIcon, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-multiselect-trigger"
|
|
}, IconUtils.getJSXIcon(this.props.dropdownIcon, {
|
|
className: 'p-multiselect-trigger-icon p-c'
|
|
}, {
|
|
props: this.props
|
|
})), /*#__PURE__*/React__default["default"].createElement(MultiSelectPanel, _extends({
|
|
ref: this.overlayRef,
|
|
visibleOptions: visibleOptions
|
|
}, this.props, {
|
|
onClick: this.onPanelClick,
|
|
onOverlayHide: this.hide,
|
|
filterValue: this.state.filter,
|
|
hasFilter: this.hasFilter,
|
|
onFilterInputChange: this.onFilterInputChange,
|
|
onCloseClick: this.onCloseClick,
|
|
onSelectAll: this.onSelectAll,
|
|
getOptionLabel: this.getOptionLabel,
|
|
getOptionRenderKey: this.getOptionRenderKey,
|
|
isOptionDisabled: this.isOptionDisabled,
|
|
getOptionGroupChildren: this.getOptionGroupChildren,
|
|
getOptionGroupLabel: this.getOptionGroupLabel,
|
|
getOptionGroupRenderKey: this.getOptionGroupRenderKey,
|
|
isSelected: this.isSelected,
|
|
getSelectedOptionIndex: this.getSelectedOptionIndex,
|
|
isAllSelected: this.isAllSelected,
|
|
onOptionSelect: this.onOptionSelect,
|
|
allowOptionSelect: this.allowOptionSelect,
|
|
onOptionKeyDown: this.onOptionKeyDown,
|
|
"in": this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return MultiSelect;
|
|
}(React.Component);
|
|
|
|
_defineProperty(MultiSelect, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
name: null,
|
|
value: null,
|
|
options: null,
|
|
optionLabel: null,
|
|
optionValue: null,
|
|
optionDisabled: null,
|
|
optionGroupLabel: null,
|
|
optionGroupChildren: null,
|
|
optionGroupTemplate: null,
|
|
display: 'comma',
|
|
style: null,
|
|
className: null,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
virtualScrollerOptions: null,
|
|
scrollHeight: '200px',
|
|
placeholder: null,
|
|
fixedPlaceholder: false,
|
|
disabled: false,
|
|
showClear: false,
|
|
filter: false,
|
|
filterBy: null,
|
|
filterMatchMode: 'contains',
|
|
filterPlaceholder: null,
|
|
filterLocale: undefined,
|
|
emptyFilterMessage: null,
|
|
resetFilterOnHide: false,
|
|
tabIndex: 0,
|
|
dataKey: null,
|
|
inputId: null,
|
|
appendTo: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
maxSelectedLabels: null,
|
|
selectionLimit: null,
|
|
selectedItemsLabel: '{0} items selected',
|
|
ariaLabelledBy: null,
|
|
itemTemplate: null,
|
|
selectedItemTemplate: null,
|
|
panelHeaderTemplate: null,
|
|
panelFooterTemplate: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
removeIcon: 'pi pi-times-circle',
|
|
showSelectAll: true,
|
|
selectAll: false,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null,
|
|
onShow: null,
|
|
onHide: null,
|
|
onFilter: null,
|
|
onSelectAll: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$W(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$W(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$W() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var MultiStateCheckbox = /*#__PURE__*/function (_Component) {
|
|
_inherits(MultiStateCheckbox, _Component);
|
|
|
|
var _super = _createSuper$W(MultiStateCheckbox);
|
|
|
|
function MultiStateCheckbox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, MultiStateCheckbox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(MultiStateCheckbox, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled && !this.props.readOnly) {
|
|
this.toggle(event);
|
|
this.inputRef.current.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option;
|
|
}
|
|
}, {
|
|
key: "equalityKey",
|
|
value: function equalityKey() {
|
|
return this.props.optionValue ? null : this.props.dataKey;
|
|
}
|
|
}, {
|
|
key: "findSelectedOptionMap",
|
|
value: function findSelectedOptionMap() {
|
|
var _this2 = this;
|
|
|
|
var option, index;
|
|
|
|
if (this.props.options) {
|
|
var key = this.equalityKey();
|
|
index = this.props.options.findIndex(function (option) {
|
|
return ObjectUtils.equals(_this2.props.value, _this2.getOptionValue(option), key);
|
|
});
|
|
option = this.props.options[index];
|
|
}
|
|
|
|
return {
|
|
option: option,
|
|
index: index
|
|
};
|
|
}
|
|
}, {
|
|
key: "findNextOption",
|
|
value: function findNextOption() {
|
|
if (this.props.options) {
|
|
var _this$findSelectedOpt = this.findSelectedOptionMap(),
|
|
index = _this$findSelectedOpt.index;
|
|
|
|
return index === this.props.options.length - 1 ? this.props.empty ? null : this.props.options[0] : this.props.options[index + 1];
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
var newValue = this.getOptionValue(this.findNextOption());
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: newValue
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip && !this.props.disabled) {
|
|
this.renderTooltip();
|
|
}
|
|
|
|
if (!this.props.empty && this.props.value === null) {
|
|
this.toggle();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$i({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderIcon",
|
|
value: function renderIcon(option) {
|
|
var icon = option && option.icon || '';
|
|
var className = classNames('p-checkbox-icon p-c', _defineProperty({}, "".concat(icon), true));
|
|
var content = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className
|
|
});
|
|
|
|
if (this.props.iconTemplate) {
|
|
var defaultOptions = {
|
|
option: option,
|
|
className: className,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.iconTemplate, defaultOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var _this$findSelectedOpt2 = this.findSelectedOptionMap(),
|
|
option = _this$findSelectedOpt2.option;
|
|
|
|
var containerClassName = classNames('p-multistatecheckbox p-checkbox p-component', this.props.className);
|
|
var boxClassName = classNames('p-checkbox-box', {
|
|
'p-highlight': !!option,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
}, option && option.className);
|
|
var icon = this.renderIcon(option);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClassName,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: "checkbox",
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
disabled: this.props.disabled,
|
|
readOnly: this.props.readOnly,
|
|
defaultChecked: !!option
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClassName,
|
|
ref: function ref(el) {
|
|
return _this3.box = el;
|
|
},
|
|
role: "checkbox",
|
|
"aria-checked": !!option,
|
|
style: option && option.style
|
|
}, icon));
|
|
}
|
|
}]);
|
|
|
|
return MultiStateCheckbox;
|
|
}(React.Component);
|
|
|
|
_defineProperty(MultiStateCheckbox, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
inputId: null,
|
|
value: null,
|
|
options: null,
|
|
optionValue: null,
|
|
iconTemplate: null,
|
|
dataKey: null,
|
|
name: null,
|
|
style: null,
|
|
className: null,
|
|
disabled: false,
|
|
readOnly: false,
|
|
empty: true,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onChange: null
|
|
});
|
|
|
|
function _createSuper$V(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$V(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$V() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var OrderListControls = /*#__PURE__*/function (_Component) {
|
|
_inherits(OrderListControls, _Component);
|
|
|
|
var _super = _createSuper$V(OrderListControls);
|
|
|
|
function OrderListControls() {
|
|
var _this;
|
|
|
|
_classCallCheck(this, OrderListControls);
|
|
|
|
_this = _super.call(this);
|
|
_this.moveUp = _this.moveUp.bind(_assertThisInitialized(_this));
|
|
_this.moveTop = _this.moveTop.bind(_assertThisInitialized(_this));
|
|
_this.moveDown = _this.moveDown.bind(_assertThisInitialized(_this));
|
|
_this.moveBottom = _this.moveBottom.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(OrderListControls, [{
|
|
key: "moveUp",
|
|
value: function moveUp(event) {
|
|
if (this.props.selection) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
for (var i = 0; i < this.props.selection.length; i++) {
|
|
var selectedItem = this.props.selection[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = value[selectedItemIndex];
|
|
var temp = value[selectedItemIndex - 1];
|
|
value[selectedItemIndex - 1] = movedItem;
|
|
value[selectedItemIndex] = temp;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: value,
|
|
direction: 'up'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveTop",
|
|
value: function moveTop(event) {
|
|
if (this.props.selection) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
for (var i = 0; i < this.props.selection.length; i++) {
|
|
var selectedItem = this.props.selection[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = value.splice(selectedItemIndex, 1)[0];
|
|
value.unshift(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: value,
|
|
direction: 'top'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveDown",
|
|
value: function moveDown(event) {
|
|
if (this.props.selection) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
for (var i = this.props.selection.length - 1; i >= 0; i--) {
|
|
var selectedItem = this.props.selection[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, this.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 (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: value,
|
|
direction: 'down'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveBottom",
|
|
value: function moveBottom(event) {
|
|
if (this.props.selection) {
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
for (var i = this.props.selection.length - 1; i >= 0; i--) {
|
|
var selectedItem = this.props.selection[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== value.length - 1) {
|
|
var movedItem = value.splice(selectedItemIndex, 1)[0];
|
|
value.push(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: value,
|
|
direction: 'bottom'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-orderlist-controls"
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-angle-up",
|
|
onClick: this.moveUp
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-angle-double-up",
|
|
onClick: this.moveTop
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-angle-down",
|
|
onClick: this.moveDown
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-angle-double-down",
|
|
onClick: this.moveBottom
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return OrderListControls;
|
|
}(React.Component);
|
|
|
|
function _createSuper$U(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$U(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$U() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var OrderListSubList = /*#__PURE__*/function (_Component) {
|
|
_inherits(OrderListSubList, _Component);
|
|
|
|
var _super = _createSuper$U(OrderListSubList);
|
|
|
|
function OrderListSubList(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, OrderListSubList);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onListMouseMove = _this.onListMouseMove.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(OrderListSubList, [{
|
|
key: "isSelected",
|
|
value: function isSelected(item) {
|
|
return ObjectUtils.findIndexInList(item, this.props.selection, this.props.dataKey) !== -1;
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event, index) {
|
|
this.dragging = true;
|
|
this.draggedItemIndex = index;
|
|
|
|
if (this.props.dragdropScope) {
|
|
event.dataTransfer.setData('text', 'orderlist');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event, index) {
|
|
if (this.draggedItemIndex !== index && this.draggedItemIndex + 1 !== index) {
|
|
this.dragOverItemIndex = index;
|
|
DomHandler.addClass(event.target, 'p-orderlist-droppoint-highlight');
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
this.dragOverItemIndex = null;
|
|
DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
var dropIndex = this.draggedItemIndex > this.dragOverItemIndex ? this.dragOverItemIndex : this.dragOverItemIndex === 0 ? 0 : this.dragOverItemIndex - 1;
|
|
|
|
var value = _toConsumableArray(this.props.value);
|
|
|
|
ObjectUtils.reorderArray(value, this.draggedItemIndex, dropIndex);
|
|
this.dragOverItemIndex = null;
|
|
DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd(event) {
|
|
this.dragging = false;
|
|
}
|
|
}, {
|
|
key: "onListMouseMove",
|
|
value: function onListMouseMove(event) {
|
|
if (this.dragging) {
|
|
var offsetY = this.listElement.getBoundingClientRect().top + DomHandler.getWindowScrollTop();
|
|
var bottomDiff = offsetY + this.listElement.clientHeight - event.pageY;
|
|
var topDiff = event.pageY - offsetY;
|
|
if (bottomDiff < 25 && bottomDiff > 0) this.listElement.scrollTop += 15;else if (topDiff < 25 && topDiff > 0) this.listElement.scrollTop -= 15;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderDropPoint",
|
|
value: function renderDropPoint(index, key) {
|
|
var _this2 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: key,
|
|
className: "p-orderlist-droppoint",
|
|
onDragOver: function onDragOver(e) {
|
|
return _this2.onDragOver(e, index + 1);
|
|
},
|
|
onDragLeave: this.onDragLeave,
|
|
onDrop: this.onDrop
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var header = null;
|
|
var items = null;
|
|
|
|
if (this.props.header) {
|
|
header = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-orderlist-header"
|
|
}, this.props.header);
|
|
}
|
|
|
|
if (this.props.value) {
|
|
items = this.props.value.map(function (item, i) {
|
|
var content = _this3.props.itemTemplate ? _this3.props.itemTemplate(item) : item;
|
|
var itemClassName = classNames('p-orderlist-item', {
|
|
'p-highlight': _this3.isSelected(item)
|
|
}, _this3.props.className);
|
|
var key = JSON.stringify(item);
|
|
|
|
if (_this3.props.dragdrop) {
|
|
var _items = [_this3.renderDropPoint(i, key + '_droppoint'), /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: key,
|
|
className: itemClassName,
|
|
onClick: function onClick(e) {
|
|
return _this3.props.onItemClick({
|
|
originalEvent: e,
|
|
value: item,
|
|
index: i
|
|
});
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this3.props.onItemKeyDown({
|
|
originalEvent: e,
|
|
value: item,
|
|
index: i
|
|
});
|
|
},
|
|
role: "option",
|
|
"aria-selected": _this3.isSelected(item),
|
|
draggable: "true",
|
|
onDragStart: function onDragStart(e) {
|
|
return _this3.onDragStart(e, i);
|
|
},
|
|
onDragEnd: _this3.onDragEnd,
|
|
tabIndex: _this3.props.tabIndex
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null))];
|
|
|
|
if (i === _this3.props.value.length - 1) {
|
|
_items.push(_this3.renderDropPoint(item, i, key + '_droppoint_end'));
|
|
}
|
|
|
|
return _items;
|
|
} else {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: JSON.stringify(item),
|
|
className: itemClassName,
|
|
role: "option",
|
|
"aria-selected": _this3.isSelected(item),
|
|
onClick: function onClick(e) {
|
|
return _this3.props.onItemClick({
|
|
originalEvent: e,
|
|
value: item,
|
|
index: i
|
|
});
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this3.props.onItemKeyDown({
|
|
originalEvent: e,
|
|
value: item,
|
|
index: i
|
|
});
|
|
},
|
|
tabIndex: _this3.props.tabIndex
|
|
}, content);
|
|
}
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-orderlist-list-container"
|
|
}, header, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this3.listElement = el;
|
|
},
|
|
className: "p-orderlist-list",
|
|
style: this.props.listStyle,
|
|
onDragOver: this.onListMouseMove,
|
|
role: "listbox",
|
|
"aria-multiselectable": true
|
|
}, items));
|
|
}
|
|
}]);
|
|
|
|
return OrderListSubList;
|
|
}(React.Component);
|
|
|
|
function _createSuper$T(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$T(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$T() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var OrderList = /*#__PURE__*/function (_Component) {
|
|
_inherits(OrderList, _Component);
|
|
|
|
var _super = _createSuper$T(OrderList);
|
|
|
|
function OrderList(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, OrderList);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
selection: []
|
|
};
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemKeyDown = _this.onItemKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onReorder = _this.onReorder.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(OrderList, [{
|
|
key: "onItemClick",
|
|
value: function onItemClick(event) {
|
|
var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
|
|
var index = ObjectUtils.findIndexInList(event.value, this.state.selection, this.props.dataKey);
|
|
var selected = index !== -1;
|
|
var selection;
|
|
|
|
if (selected) {
|
|
if (metaKey) selection = this.state.selection.filter(function (val, i) {
|
|
return i !== index;
|
|
});else selection = [event.value];
|
|
} else {
|
|
if (metaKey) selection = [].concat(_toConsumableArray(this.state.selection), [event.value]);else selection = [event.value];
|
|
}
|
|
|
|
this.setState({
|
|
selection: selection
|
|
});
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event) {
|
|
var listItem = event.originalEvent.currentTarget;
|
|
|
|
switch (event.originalEvent.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onItemClick(event);
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "onReorder",
|
|
value: function onReorder(event) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
event: event.originalEvent,
|
|
value: event.value
|
|
});
|
|
}
|
|
|
|
this.reorderDirection = event.direction;
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
if (this.reorderDirection) {
|
|
this.updateListScroll();
|
|
this.reorderDirection = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateListScroll",
|
|
value: function updateListScroll() {
|
|
var listItems = DomHandler.find(this.subList.listElement, '.p-orderlist-item.p-highlight');
|
|
|
|
if (listItems && listItems.length) {
|
|
switch (this.reorderDirection) {
|
|
case 'up':
|
|
DomHandler.scrollInView(this.subList.listElement, listItems[0]);
|
|
break;
|
|
|
|
case 'top':
|
|
this.subList.listElement.scrollTop = 0;
|
|
break;
|
|
|
|
case 'down':
|
|
DomHandler.scrollInView(this.subList.listElement, listItems[listItems.length - 1]);
|
|
break;
|
|
|
|
case 'bottom':
|
|
this.subList.listElement.scrollTop = this.subList.listElement.scrollHeight;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-orderlist p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(OrderListControls, {
|
|
value: this.props.value,
|
|
selection: this.state.selection,
|
|
onReorder: this.onReorder,
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React__default["default"].createElement(OrderListSubList, {
|
|
ref: function ref(el) {
|
|
return _this2.subList = el;
|
|
},
|
|
value: this.props.value,
|
|
selection: this.state.selection,
|
|
onItemClick: this.onItemClick,
|
|
onItemKeyDown: this.onItemKeyDown,
|
|
itemTemplate: this.props.itemTemplate,
|
|
header: this.props.header,
|
|
listStyle: this.props.listStyle,
|
|
dataKey: this.props.dataKey,
|
|
dragdrop: this.props.dragdrop,
|
|
onDragStart: this.onDragStart,
|
|
onDragEnter: this.onDragEnter,
|
|
onDragEnd: this.onDragEnd,
|
|
onDragLeave: this.onDragEnter,
|
|
onDrop: this.onDrop,
|
|
onChange: this.props.onChange,
|
|
tabIndex: this.props.tabIndex
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return OrderList;
|
|
}(React.Component);
|
|
|
|
_defineProperty(OrderList, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
header: null,
|
|
style: null,
|
|
className: null,
|
|
listStyle: null,
|
|
dragdrop: false,
|
|
tabIndex: 0,
|
|
dataKey: null,
|
|
onChange: null,
|
|
itemTemplate: null
|
|
});
|
|
|
|
function _createSuper$S(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$S(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$S() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var OrganizationChartNode = /*#__PURE__*/function (_Component) {
|
|
_inherits(OrganizationChartNode, _Component);
|
|
|
|
var _super = _createSuper$S(OrganizationChartNode);
|
|
|
|
function OrganizationChartNode(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, OrganizationChartNode);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.node = _this.props.node;
|
|
_this.state = {
|
|
expanded: _this.node.expanded
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(OrganizationChartNode, [{
|
|
key: "getLeaf",
|
|
value: function getLeaf() {
|
|
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
|
|
}
|
|
}, {
|
|
key: "getColspan",
|
|
value: function getColspan() {
|
|
return this.node.children && this.node.children.length ? this.node.children.length * 2 : null;
|
|
}
|
|
}, {
|
|
key: "onNodeClick",
|
|
value: function onNodeClick(event, node) {
|
|
this.props.onNodeClick(event, node);
|
|
}
|
|
}, {
|
|
key: "toggleNode",
|
|
value: function toggleNode(event, node) {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
expanded: !prevState.expanded
|
|
};
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected() {
|
|
return this.props.isSelected(this.node);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
this.node = this.props.node;
|
|
var colspan = this.getColspan();
|
|
var nodeClassName = classNames('p-organizationchart-node-content', this.node.className, {
|
|
'p-organizationchart-selectable-node': this.props.selectionMode && this.node.selectable !== false,
|
|
'p-highlight': this.isSelected()
|
|
}),
|
|
nodeLabel = this.props.nodeTemplate && this.props.nodeTemplate(this.node) ? /*#__PURE__*/React__default["default"].createElement("div", null, this.props.nodeTemplate(this.node)) : /*#__PURE__*/React__default["default"].createElement("div", null, this.node.label),
|
|
toggleIcon = classNames('p-node-toggler-icon', {
|
|
'pi pi-chevron-down': this.state.expanded,
|
|
'pi pi-chevron-up': !this.state.expanded
|
|
}),
|
|
nodeContent = /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
colSpan: colspan
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: nodeClassName,
|
|
onClick: function onClick(e) {
|
|
return _this2.onNodeClick(e, _this2.node);
|
|
}
|
|
}, nodeLabel,
|
|
/* eslint-disable */
|
|
!this.getLeaf() && /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: "#",
|
|
className: "p-node-toggler",
|
|
onClick: function onClick(e) {
|
|
return _this2.toggleNode(e, _this2.node);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: toggleIcon
|
|
}))
|
|
/* eslint-enable */
|
|
)));
|
|
|
|
var _visibility = !this.getLeaf() && this.state.expanded ? 'inherit' : 'hidden',
|
|
linesDown = /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
style: {
|
|
visibility: _visibility
|
|
},
|
|
className: "p-organizationchart-lines"
|
|
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
colSpan: colspan
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-organizationchart-line-down"
|
|
}))),
|
|
nodeChildLength = this.node.children && this.node.children.length,
|
|
linesMiddle = /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
style: {
|
|
visibility: _visibility
|
|
},
|
|
className: "p-organizationchart-lines"
|
|
}, this.node.children && this.node.children.length === 1 && /*#__PURE__*/React__default["default"].createElement("td", {
|
|
colSpan: this.getColspan()
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-organizationchart-line-down"
|
|
})), this.node.children && this.node.children.length > 1 && this.node.children.map(function (item, index) {
|
|
var leftClass = classNames('p-organizationchart-line-left', {
|
|
'p-organizationchart-line-top': index !== 0
|
|
}),
|
|
rightClass = classNames('p-organizationchart-line-right', {
|
|
'p-organizationchart-line-top': index !== nodeChildLength - 1
|
|
});
|
|
return [/*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: index + '_lineleft',
|
|
className: leftClass
|
|
}, "\xA0"), /*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: index + '_lineright',
|
|
className: rightClass
|
|
}, "\xA0")];
|
|
})),
|
|
childNodes = /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
style: {
|
|
visibility: _visibility
|
|
},
|
|
className: "p-organizationchart-nodes"
|
|
}, this.node.children && this.node.children.map(function (child, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: index,
|
|
colSpan: "2"
|
|
}, /*#__PURE__*/React__default["default"].createElement(OrganizationChartNode, {
|
|
node: child,
|
|
nodeTemplate: _this2.props.nodeTemplate,
|
|
selectionMode: _this2.props.selectionMode,
|
|
onNodeClick: _this2.props.onNodeClick,
|
|
isSelected: _this2.props.isSelected
|
|
}));
|
|
}));
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("table", {
|
|
className: "p-organizationchart-table"
|
|
}, /*#__PURE__*/React__default["default"].createElement("tbody", null, nodeContent, linesDown, linesMiddle, childNodes));
|
|
}
|
|
}]);
|
|
|
|
return OrganizationChartNode;
|
|
}(React.Component);
|
|
|
|
_defineProperty(OrganizationChartNode, "defaultProps", {
|
|
node: null,
|
|
nodeTemplate: null,
|
|
root: false,
|
|
first: false,
|
|
last: false,
|
|
selectionMode: null,
|
|
onNodeClick: null,
|
|
isSelected: null
|
|
});
|
|
|
|
var OrganizationChart = /*#__PURE__*/function (_Component2) {
|
|
_inherits(OrganizationChart, _Component2);
|
|
|
|
var _super2 = _createSuper$S(OrganizationChart);
|
|
|
|
function OrganizationChart(props) {
|
|
var _this3;
|
|
|
|
_classCallCheck(this, OrganizationChart);
|
|
|
|
_this3 = _super2.call(this, props);
|
|
_this3.root = _this3.props.value && _this3.props.value.length ? _this3.props.value[0] : null;
|
|
_this3.onNodeClick = _this3.onNodeClick.bind(_assertThisInitialized(_this3));
|
|
_this3.isSelected = _this3.isSelected.bind(_assertThisInitialized(_this3));
|
|
return _this3;
|
|
}
|
|
|
|
_createClass(OrganizationChart, [{
|
|
key: "onNodeClick",
|
|
value: function onNodeClick(event, node) {
|
|
if (this.props.selectionMode) {
|
|
var eventTarget = event.target;
|
|
|
|
if (eventTarget.className && (eventTarget.className.indexOf('p-node-toggler') !== -1 || eventTarget.className.indexOf('p-node-toggler-icon') !== -1)) {
|
|
return;
|
|
}
|
|
|
|
if (node.selectable === false) {
|
|
return;
|
|
}
|
|
|
|
var index = this.findIndexInSelection(node);
|
|
var selected = index >= 0;
|
|
var selection;
|
|
|
|
if (this.props.selectionMode === 'single') {
|
|
if (selected) {
|
|
selection = null;
|
|
|
|
if (this.props.onNodeUnselect) {
|
|
this.props.onNodeUnselect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
} else {
|
|
selection = node;
|
|
|
|
if (this.props.onNodeSelect) {
|
|
this.props.onNodeSelect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
}
|
|
} else if (this.props.selectionMode === 'multiple') {
|
|
if (selected) {
|
|
selection = this.props.selection.filter(function (val, i) {
|
|
return i !== index;
|
|
});
|
|
|
|
if (this.props.onNodeUnselect) {
|
|
this.props.onNodeUnselect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
} else {
|
|
selection = [].concat(_toConsumableArray(this.props.selection || []), [node]);
|
|
|
|
if (this.props.onNodeSelect) {
|
|
this.props.onNodeSelect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: event,
|
|
data: selection
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "findIndexInSelection",
|
|
value: function findIndexInSelection(node) {
|
|
var index = -1;
|
|
|
|
if (this.props.selectionMode && this.props.selection) {
|
|
if (this.props.selectionMode === 'single') {
|
|
index = this.props.selection === node ? 0 : -1;
|
|
} else if (this.props.selectionMode === 'multiple') {
|
|
for (var i = 0; i < this.props.selection.length; i++) {
|
|
if (this.props.selection[i] === node) {
|
|
index = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return index;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(node) {
|
|
return this.findIndexInSelection(node) !== -1;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
this.root = this.props.value && this.props.value.length ? this.props.value[0] : null;
|
|
var className = classNames('p-organizationchart p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
style: this.props.style,
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement(OrganizationChartNode, {
|
|
node: this.root,
|
|
nodeTemplate: this.props.nodeTemplate,
|
|
selectionMode: this.props.selectionMode,
|
|
onNodeClick: this.onNodeClick,
|
|
isSelected: this.isSelected
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return OrganizationChart;
|
|
}(React.Component);
|
|
|
|
_defineProperty(OrganizationChart, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
style: null,
|
|
className: null,
|
|
selectionMode: null,
|
|
selection: null,
|
|
nodeTemplate: null,
|
|
onSelectionChange: null,
|
|
onNodeSelect: null,
|
|
onNodeUnselect: null
|
|
});
|
|
|
|
function _createSuper$R(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$R(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$R() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var OverlayPanel = /*#__PURE__*/function (_Component) {
|
|
_inherits(OverlayPanel, _Component);
|
|
|
|
var _super = _createSuper$R(OverlayPanel);
|
|
|
|
function OverlayPanel(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, OverlayPanel);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false
|
|
};
|
|
_this.onCloseClick = _this.onCloseClick.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.onContentClick = _this.onContentClick.bind(_assertThisInitialized(_this));
|
|
_this.attributeSelector = UniqueComponentId();
|
|
_this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(OverlayPanel, [{
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener && this.props.dismissable) {
|
|
this.documentClickListener = function (event) {
|
|
if (!_this2.isPanelClicked && _this2.isOutsideClicked(event.target)) {
|
|
_this2.hide();
|
|
}
|
|
|
|
_this2.isPanelClicked = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function () {
|
|
if (_this3.state.visible) {
|
|
_this3.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return this.overlayRef && this.overlayRef.current && !(this.overlayRef.current.isSameNode(target) || this.overlayRef.current.contains(target));
|
|
}
|
|
}, {
|
|
key: "hasTargetChanged",
|
|
value: function hasTargetChanged(event, target) {
|
|
return this.target != null && this.target !== (target || event.currentTarget || event.target);
|
|
}
|
|
}, {
|
|
key: "onCloseClick",
|
|
value: function onCloseClick(event) {
|
|
this.hide();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
this.isPanelClicked = true;
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.target
|
|
});
|
|
}
|
|
}, {
|
|
key: "onContentClick",
|
|
value: function onContentClick() {
|
|
this.isPanelClicked = true;
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event, target) {
|
|
var _this5 = this;
|
|
|
|
if (this.state.visible) {
|
|
this.hide();
|
|
|
|
if (this.hasTargetChanged(event, target)) {
|
|
this.target = target || event.currentTarget || event.target;
|
|
setTimeout(function () {
|
|
_this5.show(event, _this5.target);
|
|
}, 200);
|
|
}
|
|
} else {
|
|
this.show(event, target);
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(event, target) {
|
|
var _this6 = this;
|
|
|
|
this.target = target || event.currentTarget || event.target;
|
|
|
|
if (this.state.visible) {
|
|
this.align();
|
|
} else {
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
_this6.overlayEventListener = function (e) {
|
|
if (!_this6.isOutsideClicked(e.target)) {
|
|
_this6.isPanelClicked = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', _this6.overlayEventListener);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
var _this7 = this;
|
|
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
OverlayService.off('overlay-click', _this7.overlayEventListener);
|
|
_this7.overlayEventListener = null;
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.overlayRef.current.setAttribute(this.attributeSelector, '');
|
|
this.align();
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "align",
|
|
value: function align() {
|
|
if (this.target) {
|
|
DomHandler.absolutePosition(this.overlayRef.current, this.target);
|
|
var containerOffset = DomHandler.getOffset(this.overlayRef.current);
|
|
var targetOffset = DomHandler.getOffset(this.target);
|
|
var arrowLeft = 0;
|
|
|
|
if (containerOffset.left < targetOffset.left) {
|
|
arrowLeft = targetOffset.left - containerOffset.left;
|
|
}
|
|
|
|
this.overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
|
|
|
|
if (containerOffset.top < targetOffset.top) {
|
|
DomHandler.addClass(this.overlayRef.current, 'p-overlaypanel-flipped');
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "createStyle",
|
|
value: function createStyle() {
|
|
if (!this.styleElement) {
|
|
this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
|
|
var innerHTML = '';
|
|
|
|
for (var breakpoint in this.props.breakpoints) {
|
|
innerHTML += "\n @media screen and (max-width: ".concat(breakpoint, ") {\n .p-overlaypanel[").concat(this.attributeSelector, "] {\n width: ").concat(this.props.breakpoints[breakpoint], " !important;\n }\n }\n ");
|
|
}
|
|
|
|
this.styleElement.innerHTML = innerHTML;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.breakpoints) {
|
|
this.createStyle();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
|
|
|
|
if (this.overlayEventListener) {
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderCloseIcon",
|
|
value: function renderCloseIcon() {
|
|
if (this.props.showCloseIcon) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-overlaypanel-close p-link",
|
|
onClick: this.onCloseClick,
|
|
"aria-label": this.props.ariaCloseLabel
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-overlaypanel-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-overlaypanel p-component', this.props.className);
|
|
var closeIcon = this.renderCloseIcon();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-overlaypanel",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onPanelClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-overlaypanel-content",
|
|
onClick: this.onContentClick,
|
|
onMouseDown: this.onContentClick
|
|
}, this.props.children), closeIcon));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return OverlayPanel;
|
|
}(React.Component);
|
|
|
|
_defineProperty(OverlayPanel, "defaultProps", {
|
|
id: null,
|
|
dismissable: true,
|
|
showCloseIcon: false,
|
|
style: null,
|
|
className: null,
|
|
appendTo: null,
|
|
breakpoints: null,
|
|
ariaCloseLabel: 'close',
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$Q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$Q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$Q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Panel = /*#__PURE__*/function (_Component) {
|
|
_inherits(Panel, _Component);
|
|
|
|
var _super = _createSuper$Q(Panel);
|
|
|
|
function Panel(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Panel);
|
|
|
|
_this = _super.call(this, props);
|
|
var state = {
|
|
id: _this.props.id
|
|
};
|
|
|
|
if (!_this.props.onToggle) {
|
|
state = _objectSpread$h(_objectSpread$h({}, state), {}, {
|
|
collapsed: _this.props.collapsed
|
|
});
|
|
}
|
|
|
|
_this.state = state;
|
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
|
_this.contentRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Panel, [{
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.toggleable) {
|
|
var collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;
|
|
if (collapsed) this.expand(event);else this.collapse(event);
|
|
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: !collapsed
|
|
});
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "expand",
|
|
value: function expand(event) {
|
|
if (!this.props.onToggle) {
|
|
this.setState({
|
|
collapsed: false
|
|
});
|
|
}
|
|
|
|
if (this.props.onExpand) {
|
|
this.props.onExpand(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "collapse",
|
|
value: function collapse(event) {
|
|
if (!this.props.onToggle) {
|
|
this.setState({
|
|
collapsed: true
|
|
});
|
|
}
|
|
|
|
if (this.props.onCollapse) {
|
|
this.props.onCollapse(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isCollapsed",
|
|
value: function isCollapsed() {
|
|
return this.props.toggleable ? this.props.onToggle ? this.props.collapsed : this.state.collapsed : false;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderToggleIcon",
|
|
value: function renderToggleIcon(collapsed) {
|
|
if (this.props.toggleable) {
|
|
var id = this.state.id + '_label';
|
|
var ariaControls = this.state.id + '_content';
|
|
var toggleIcon = collapsed ? this.props.expandIcon : this.props.collapseIcon;
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-panel-header-icon p-panel-toggler p-link",
|
|
onClick: this.toggle,
|
|
id: id,
|
|
"aria-controls": ariaControls,
|
|
"aria-expanded": !collapsed,
|
|
role: "tab"
|
|
}, IconUtils.getJSXIcon(toggleIcon, {
|
|
props: this.props,
|
|
collapsed: collapsed
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader(collapsed) {
|
|
var header = ObjectUtils.getJSXElement(this.props.header, this.props);
|
|
var icons = ObjectUtils.getJSXElement(this.props.icons, this.props);
|
|
var togglerElement = this.renderToggleIcon(collapsed);
|
|
var titleElement = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-panel-title",
|
|
id: this.state.id + '_header'
|
|
}, header);
|
|
var iconsElement = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-panel-icons"
|
|
}, icons, togglerElement);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-panel-header"
|
|
}, titleElement, iconsElement);
|
|
|
|
if (this.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 ? this.props.expandIcon : this.props.collapseIcon,
|
|
onTogglerClick: this.toggle,
|
|
titleElement: titleElement,
|
|
iconsElement: iconsElement,
|
|
togglerElement: togglerElement,
|
|
element: content,
|
|
props: this.props,
|
|
collapsed: collapsed
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.headerTemplate, defaultContentOptions);
|
|
} else if (this.props.header || this.props.toggleable) {
|
|
return content;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent(collapsed) {
|
|
var id = this.state.id + '_content';
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.contentRef,
|
|
classNames: "p-toggleable-content",
|
|
timeout: {
|
|
enter: 1000,
|
|
exit: 450
|
|
},
|
|
"in": !collapsed,
|
|
unmountOnExit: true,
|
|
options: this.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.contentRef,
|
|
className: "p-toggleable-content",
|
|
"aria-hidden": collapsed,
|
|
role: "region",
|
|
id: id,
|
|
"aria-labelledby": this.state.id + '_header'
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-panel-content"
|
|
}, this.props.children)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-panel p-component', {
|
|
'p-panel-toggleable': this.props.toggleable
|
|
}, this.props.className);
|
|
var collapsed = this.isCollapsed();
|
|
var header = this.renderHeader(collapsed);
|
|
var content = this.renderContent(collapsed);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, header, content);
|
|
}
|
|
}]);
|
|
|
|
return Panel;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Panel, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
function _createSuper$P(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$P(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$P() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var PanelMenuSub = /*#__PURE__*/function (_Component) {
|
|
_inherits(PanelMenuSub, _Component);
|
|
|
|
var _super = _createSuper$P(PanelMenuSub);
|
|
|
|
function PanelMenuSub(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PanelMenuSub);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: _this.findActiveItem()
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PanelMenuSub, [{
|
|
key: "onItemClick",
|
|
value: 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 = this.state.activeItem;
|
|
var active = this.isItemActive(item);
|
|
|
|
if (active) {
|
|
item.expanded = false;
|
|
this.setState({
|
|
activeItem: this.props.multiple ? activeItem.filter(function (a_item) {
|
|
return a_item !== item;
|
|
}) : null
|
|
});
|
|
} else {
|
|
if (!this.props.multiple && activeItem) {
|
|
activeItem.expanded = false;
|
|
}
|
|
|
|
item.expanded = true;
|
|
this.setState({
|
|
activeItem: this.props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "findActiveItem",
|
|
value: function findActiveItem() {
|
|
if (this.props.model) {
|
|
if (this.props.multiple) {
|
|
return this.props.model.filter(function (item) {
|
|
return item.expanded;
|
|
});
|
|
} else {
|
|
var activeItem = null;
|
|
this.props.model.forEach(function (item) {
|
|
if (item.expanded) {
|
|
if (!activeItem) activeItem = item;else item.expanded = false;
|
|
}
|
|
});
|
|
return activeItem;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "isItemActive",
|
|
value: function isItemActive(item) {
|
|
return this.state.activeItem && (this.props.multiple ? this.state.activeItem.indexOf(item) > -1 : this.state.activeItem === item);
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(item, active) {
|
|
var submenuWrapperClassName = classNames('p-toggleable-content', {
|
|
'p-toggleable-content-collapsed': !active
|
|
});
|
|
var submenuContentRef = /*#__PURE__*/React__default["default"].createRef();
|
|
|
|
if (item.items) {
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: submenuContentRef,
|
|
classNames: "p-toggleable-content",
|
|
timeout: {
|
|
enter: 1000,
|
|
exit: 450
|
|
},
|
|
"in": active,
|
|
unmountOnExit: true
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: submenuContentRef,
|
|
className: submenuWrapperClassName
|
|
}, /*#__PURE__*/React__default["default"].createElement(PanelMenuSub, {
|
|
model: item.items,
|
|
multiple: this.props.multiple
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this2 = this;
|
|
|
|
var active = this.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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var submenu = this.renderSubmenu(item, active);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: linkClassName,
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
role: "menuitem",
|
|
"aria-disabled": item.disabled
|
|
}, submenuIcon, icon, label);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
className: linkClassName,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
submenuIconClassName: submenuIconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
leaf: !item.items,
|
|
active: active
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
role: "none"
|
|
}, content, submenu);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) return this.renderSeparator(index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this3.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-submenu-list', this.props.className);
|
|
var menu = this.renderMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: className,
|
|
role: "tree"
|
|
}, menu);
|
|
}
|
|
}]);
|
|
|
|
return PanelMenuSub;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PanelMenuSub, "defaultProps", {
|
|
model: null,
|
|
multiple: false
|
|
});
|
|
|
|
var PanelMenu = /*#__PURE__*/function (_Component2) {
|
|
_inherits(PanelMenu, _Component2);
|
|
|
|
var _super2 = _createSuper$P(PanelMenu);
|
|
|
|
function PanelMenu(props) {
|
|
var _this4;
|
|
|
|
_classCallCheck(this, PanelMenu);
|
|
|
|
_this4 = _super2.call(this, props);
|
|
_this4.state = {
|
|
id: props.id,
|
|
activeItem: _this4.findActiveItem()
|
|
};
|
|
return _this4;
|
|
}
|
|
|
|
_createClass(PanelMenu, [{
|
|
key: "onItemClick",
|
|
value: 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 = this.state.activeItem;
|
|
var active = this.isItemActive(item);
|
|
|
|
if (active) {
|
|
item.expanded = false;
|
|
this.setState({
|
|
activeItem: this.props.multiple ? activeItem.filter(function (a_item) {
|
|
return a_item !== item;
|
|
}) : null
|
|
});
|
|
} else {
|
|
if (!this.props.multiple && activeItem) {
|
|
activeItem.expanded = false;
|
|
}
|
|
|
|
item.expanded = true;
|
|
this.setState({
|
|
activeItem: this.props.multiple ? [].concat(_toConsumableArray(activeItem || []), [item]) : item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "findActiveItem",
|
|
value: function findActiveItem() {
|
|
if (this.props.model) {
|
|
if (this.props.multiple) {
|
|
return this.props.model.filter(function (item) {
|
|
return item.expanded;
|
|
});
|
|
} else {
|
|
var activeItem = null;
|
|
this.props.model.forEach(function (item) {
|
|
if (item.expanded) {
|
|
if (!activeItem) activeItem = item;else item.expanded = false;
|
|
}
|
|
});
|
|
return activeItem;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "isItemActive",
|
|
value: function isItemActive(item) {
|
|
return this.state.activeItem && (this.props.multiple ? this.state.activeItem.indexOf(item) > -1 : this.state.activeItem === item);
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderPanel",
|
|
value: function renderPanel(item, index) {
|
|
var _this5 = this;
|
|
|
|
var active = this.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 submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var itemIcon = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var contentWrapperClassName = classNames('p-toggleable-content', {
|
|
'p-toggleable-content-collapsed': !active
|
|
});
|
|
var menuContentRef = /*#__PURE__*/React__default["default"].createRef();
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: "p-panelmenu-header-link",
|
|
onClick: function onClick(e) {
|
|
return _this5.onItemClick(e, item);
|
|
},
|
|
"aria-expanded": active,
|
|
id: this.state.id + '_header',
|
|
"aria-controls": this.state.id + 'content',
|
|
"aria-disabled": item.disabled
|
|
}, submenuIcon, itemIcon, label);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this5.onItemClick(event, item);
|
|
},
|
|
className: 'p-panelmenu-header-link',
|
|
labelClassName: 'p-menuitem-text',
|
|
submenuIconClassName: submenuIconClassName,
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
leaf: !item.items,
|
|
active: active
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: headerClassName,
|
|
style: item.style
|
|
}, content), /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: menuContentRef,
|
|
classNames: "p-toggleable-content",
|
|
timeout: {
|
|
enter: 1000,
|
|
exit: 450
|
|
},
|
|
"in": active,
|
|
unmountOnExit: true,
|
|
options: this.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: menuContentRef,
|
|
className: contentWrapperClassName,
|
|
role: "region",
|
|
id: this.state.id + '_content',
|
|
"aria-labelledby": this.state.id + '_header'
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-panelmenu-content"
|
|
}, /*#__PURE__*/React__default["default"].createElement(PanelMenuSub, {
|
|
model: item.items,
|
|
className: "p-panelmenu-root-submenu",
|
|
multiple: this.props.multiple
|
|
})))));
|
|
}
|
|
}, {
|
|
key: "renderPanels",
|
|
value: function renderPanels() {
|
|
var _this6 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this6.renderPanel(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-panelmenu p-component', this.props.className);
|
|
var panels = this.renderPanels();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, panels);
|
|
}
|
|
}]);
|
|
|
|
return PanelMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PanelMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
style: null,
|
|
className: null,
|
|
multiple: false,
|
|
transitionOptions: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$O(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$O(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$O() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Password = /*#__PURE__*/function (_Component) {
|
|
_inherits(Password, _Component);
|
|
|
|
var _super = _createSuper$O(Password);
|
|
|
|
function Password(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Password);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
overlayVisible: false,
|
|
meter: null,
|
|
infoText: _this.promptLabel(),
|
|
focused: false,
|
|
unmasked: false
|
|
};
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyup = _this.onKeyup.bind(_assertThisInitialized(_this));
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.onMaskToggle = _this.onMaskToggle.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
_this.mediumCheckRegExp = new RegExp(_this.props.mediumRegex);
|
|
_this.strongCheckRegExp = new RegExp(_this.props.strongRegex);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Password, [{
|
|
key: "promptLabel",
|
|
value: function promptLabel() {
|
|
return this.props.promptLabel || localeOption('passwordPrompt');
|
|
}
|
|
}, {
|
|
key: "weakLabel",
|
|
value: function weakLabel() {
|
|
return this.props.weakLabel || localeOption('weak');
|
|
}
|
|
}, {
|
|
key: "mediumLabel",
|
|
value: function mediumLabel() {
|
|
return this.props.mediumLabel || localeOption('medium');
|
|
}
|
|
}, {
|
|
key: "strongLabel",
|
|
value: function strongLabel() {
|
|
return this.props.strongLabel || localeOption('strong');
|
|
}
|
|
}, {
|
|
key: "isFilled",
|
|
value: function isFilled() {
|
|
return this.props.value != null && this.props.value.toString().length > 0 || this.props.defaultValue != null && this.props.defaultValue.toString().length > 0 || this.inputRef && this.inputRef.current && DomHandler.hasClass(this.inputRef.current, 'p-filled');
|
|
}
|
|
}, {
|
|
key: "getInputType",
|
|
value: function getInputType() {
|
|
return this.state.unmasked ? 'text' : 'password';
|
|
}
|
|
}, {
|
|
key: "updateLabels",
|
|
value: function updateLabels() {
|
|
if (this.state.meter) {
|
|
var label = null;
|
|
|
|
switch (this.state.meter.strength) {
|
|
case 'weak':
|
|
label = this.weakLabel();
|
|
break;
|
|
|
|
case 'medium':
|
|
label = this.mediumLabel();
|
|
break;
|
|
|
|
case 'strong':
|
|
label = this.strongLabel();
|
|
break;
|
|
}
|
|
|
|
if (label && this.state.infoText !== label) {
|
|
this.setState({
|
|
infoText: label
|
|
});
|
|
}
|
|
} else {
|
|
var promptLabel = this.promptLabel();
|
|
|
|
if (this.state.infoText !== promptLabel) {
|
|
this.setState({
|
|
infoText: promptLabel
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (this.props.feedback) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMaskToggle",
|
|
value: function onMaskToggle() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
unmasked: !prevState.unmasked
|
|
};
|
|
});
|
|
}
|
|
}, {
|
|
key: "showOverlay",
|
|
value: function showOverlay() {
|
|
this.updateLabels();
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hideOverlay",
|
|
value: function hideOverlay() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
if (this.inputRef && this.inputRef.current) {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.inputRef.current.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(event) {
|
|
var _this2 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
if (_this2.props.feedback) {
|
|
_this2.showOverlay();
|
|
}
|
|
|
|
if (_this2.props.onFocus) {
|
|
_this2.props.onFocus(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
var _this3 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
if (_this3.props.feedback) {
|
|
_this3.hideOverlay();
|
|
}
|
|
|
|
if (_this3.props.onBlur) {
|
|
_this3.props.onBlur(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyup",
|
|
value: function onKeyup(e) {
|
|
var _this4 = this;
|
|
|
|
var keyCode = e.keyCode || e.which;
|
|
|
|
if (this.props.feedback) {
|
|
var value = e.target.value;
|
|
var label = null;
|
|
var meter = null;
|
|
|
|
switch (this.testStrength(value)) {
|
|
case 1:
|
|
label = this.weakLabel();
|
|
meter = {
|
|
strength: 'weak',
|
|
width: '33.33%'
|
|
};
|
|
break;
|
|
|
|
case 2:
|
|
label = this.mediumLabel();
|
|
meter = {
|
|
strength: 'medium',
|
|
width: '66.66%'
|
|
};
|
|
break;
|
|
|
|
case 3:
|
|
label = this.strongLabel();
|
|
meter = {
|
|
strength: 'strong',
|
|
width: '100%'
|
|
};
|
|
break;
|
|
|
|
default:
|
|
label = this.promptLabel();
|
|
meter = null;
|
|
break;
|
|
}
|
|
|
|
this.setState({
|
|
meter: meter,
|
|
infoText: label
|
|
}, function () {
|
|
if (!!keyCode && !_this4.state.overlayVisible) {
|
|
_this4.showOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (this.props.onKeyUp) {
|
|
this.props.onKeyUp(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(event, validatePattern) {
|
|
if (this.props.onInput) {
|
|
this.props.onInput(event, validatePattern);
|
|
}
|
|
|
|
if (!this.props.onChange) {
|
|
if (event.target.value.length > 0) DomHandler.addClass(this.container, 'p-inputwrapper-filled');else DomHandler.removeClass(this.container, 'p-inputwrapper-filled');
|
|
}
|
|
}
|
|
}, {
|
|
key: "testStrength",
|
|
value: function testStrength(str) {
|
|
var level = 0;
|
|
if (this.strongCheckRegExp.test(str)) level = 3;else if (this.mediumCheckRegExp.test(str)) level = 2;else if (str.length) level = 1;
|
|
return level;
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.inputEl, function () {
|
|
if (_this5.state.overlayVisible) {
|
|
_this5.hideOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this6 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this6.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this6.hideOverlay();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$g({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
|
|
if (prevProps.mediumRegex !== this.props.mediumRegex) {
|
|
this.mediumCheckRegExp = new RegExp(this.props.mediumRegex);
|
|
}
|
|
|
|
if (prevProps.strongRegex !== this.props.strongRegex) {
|
|
this.strongCheckRegExp = new RegExp(this.props.strongRegex);
|
|
}
|
|
|
|
if (!this.isFilled() && DomHandler.hasClass(this.container, 'p-inputwrapper-filled')) {
|
|
DomHandler.removeClass(this.container, 'p-inputwrapper-filled');
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.inputEl,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderIcon",
|
|
value: function renderIcon() {
|
|
if (this.props.toggleMask) {
|
|
var iconClassName = this.state.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
|
|
var content = /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: iconClassName,
|
|
onClick: this.onMaskToggle
|
|
});
|
|
|
|
if (this.props.icon) {
|
|
var defaultIconOptions = {
|
|
onClick: this.onMaskToggle,
|
|
className: iconClassName,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.icon, defaultIconOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderPanel",
|
|
value: function renderPanel() {
|
|
var panelClassName = classNames('p-password-panel p-component', this.props.panelClassName);
|
|
|
|
var _ref = this.state.meter || {
|
|
strength: '',
|
|
width: '0%'
|
|
},
|
|
strength = _ref.strength,
|
|
width = _ref.width;
|
|
|
|
var header = ObjectUtils.getJSXElement(this.props.header, this.props);
|
|
var footer = ObjectUtils.getJSXElement(this.props.footer, this.props);
|
|
var content = this.props.content ? ObjectUtils.getJSXElement(this.props.content, this.props) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-password-meter"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-password-strength ".concat(strength),
|
|
style: {
|
|
width: width
|
|
}
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-password-info"
|
|
}, this.state.infoText));
|
|
var panel = /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.overlayVisible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
className: panelClassName,
|
|
style: this.props.panelStyle,
|
|
onClick: this.onPanelClick
|
|
}, header, content, footer));
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: panel,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this7 = this;
|
|
|
|
var containerClassName = classNames('p-password p-component p-inputwrapper', {
|
|
'p-inputwrapper-filled': this.isFilled(),
|
|
'p-inputwrapper-focus': this.state.focused,
|
|
'p-input-icon-right': this.props.toggleMask
|
|
}, this.props.className);
|
|
var inputClassName = classNames('p-password-input', this.props.inputClassName);
|
|
var type = this.getInputType();
|
|
var inputProps = ObjectUtils.findDiffKeys(this.props, Password.defaultProps);
|
|
var icon = this.renderIcon();
|
|
var panel = this.renderPanel();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(InputText, _extends({
|
|
ref: this.inputRef,
|
|
id: this.props.inputId
|
|
}, inputProps, {
|
|
type: type,
|
|
className: inputClassName,
|
|
style: this.props.inputStyle,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyUp: this.onKeyup,
|
|
onInput: this.onInput
|
|
})), icon, panel);
|
|
}
|
|
}]);
|
|
|
|
return Password;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Password, "defaultProps", {
|
|
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
|
|
});
|
|
|
|
function _createSuper$N(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$N(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$N() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListItem, _Component);
|
|
|
|
var _super = _createSuper$N(PickListItem);
|
|
|
|
function PickListItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
value: this.props.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown({
|
|
originalEvent: event,
|
|
value: this.props.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.template ? this.props.template(this.props.value) : this.props.value;
|
|
var className = classNames('p-picklist-item', {
|
|
'p-highlight': this.props.selected
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
role: "option",
|
|
"aria-selected": this.props.selected
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return PickListItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PickListItem, "defaultProps", {
|
|
value: null,
|
|
className: null,
|
|
template: null,
|
|
selected: false,
|
|
tabIndex: null,
|
|
onClick: null,
|
|
onKeyDown: null
|
|
});
|
|
|
|
function _createSuper$M(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$M(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$M() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var PickListSubListComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListSubListComponent, _Component);
|
|
|
|
var _super = _createSuper$M(PickListSubListComponent);
|
|
|
|
function PickListSubListComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListSubListComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemKeyDown = _this.onItemKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListSubListComponent, [{
|
|
key: "onItemClick",
|
|
value: function onItemClick(event) {
|
|
var originalEvent = event.originalEvent;
|
|
var item = event.value;
|
|
|
|
var selection = _toConsumableArray(this.props.selection);
|
|
|
|
var index = ObjectUtils.findIndexInList(item, selection, this.props.dataKey);
|
|
var selected = index !== -1;
|
|
var metaSelection = this.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 (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
event: originalEvent,
|
|
value: selection
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event) {
|
|
var listItem = event.originalEvent.currentTarget;
|
|
|
|
switch (event.originalEvent.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.focus();
|
|
}
|
|
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onItemClick(event);
|
|
event.originalEvent.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(item) {
|
|
return ObjectUtils.findIndexInList(item, this.props.selection, this.props.dataKey) !== -1;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var header = null;
|
|
var items = null;
|
|
var wrapperClassName = classNames('p-picklist-list-wrapper', this.props.className);
|
|
var listClassName = classNames('p-picklist-list', this.props.listClassName);
|
|
|
|
if (this.props.header) {
|
|
header = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-picklist-header"
|
|
}, ObjectUtils.getJSXElement(this.props.header, this.props));
|
|
}
|
|
|
|
if (this.props.list) {
|
|
items = this.props.list.map(function (item, i) {
|
|
return /*#__PURE__*/React__default["default"].createElement(PickListItem, {
|
|
key: JSON.stringify(item),
|
|
value: item,
|
|
template: _this2.props.itemTemplate,
|
|
selected: _this2.isSelected(item),
|
|
onClick: _this2.onItemClick,
|
|
onKeyDown: _this2.onItemKeyDown,
|
|
tabIndex: _this2.props.tabIndex
|
|
});
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: wrapperClassName
|
|
}, header, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: listClassName,
|
|
style: this.props.style,
|
|
role: "listbox",
|
|
"aria-multiselectable": true
|
|
}, items));
|
|
}
|
|
}]);
|
|
|
|
return PickListSubListComponent;
|
|
}(React.Component);
|
|
|
|
var PickListSubList = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(PickListSubListComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$L(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$L(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$L() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListControls = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListControls, _Component);
|
|
|
|
var _super = _createSuper$L(PickListControls);
|
|
|
|
function PickListControls(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListControls);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.moveUp = _this.moveUp.bind(_assertThisInitialized(_this));
|
|
_this.moveTop = _this.moveTop.bind(_assertThisInitialized(_this));
|
|
_this.moveDown = _this.moveDown.bind(_assertThisInitialized(_this));
|
|
_this.moveBottom = _this.moveBottom.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListControls, [{
|
|
key: "moveUp",
|
|
value: function moveUp(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = 0; i < selectedItems.length; i++) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = list[selectedItemIndex];
|
|
var temp = list[selectedItemIndex - 1];
|
|
list[selectedItemIndex - 1] = movedItem;
|
|
list[selectedItemIndex] = temp;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'up'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveTop",
|
|
value: function moveTop(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = 0; i < selectedItems.length; i++) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== 0) {
|
|
var movedItem = list.splice(selectedItemIndex, 1)[0];
|
|
list.unshift(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'top'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveDown",
|
|
value: function moveDown(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = selectedItems.length - 1; i >= 0; i--) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.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 (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'down'
|
|
});
|
|
}
|
|
|
|
this.movedDown = true;
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveBottom",
|
|
value: function moveBottom(event) {
|
|
var selectedItems = this.props.selection;
|
|
|
|
if (selectedItems && selectedItems.length) {
|
|
var list = _toConsumableArray(this.props.list);
|
|
|
|
for (var i = selectedItems.length - 1; i >= 0; i--) {
|
|
var selectedItem = selectedItems[i];
|
|
var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, this.props.dataKey);
|
|
|
|
if (selectedItemIndex !== list.length - 1) {
|
|
var movedItem = list.splice(selectedItemIndex, 1)[0];
|
|
list.push(movedItem);
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.props.onReorder) {
|
|
this.props.onReorder({
|
|
originalEvent: event,
|
|
value: list,
|
|
direction: 'bottom'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var moveDisabled = !this.props.selection.length;
|
|
var className = classNames('p-picklist-buttons', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-up",
|
|
onClick: this.moveUp
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-up",
|
|
onClick: this.moveTop
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-down",
|
|
onClick: this.moveDown
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-down",
|
|
onClick: this.moveBottom
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickListControls;
|
|
}(React.Component);
|
|
|
|
function _createSuper$K(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$K(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$K() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickListTransferControls = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickListTransferControls, _Component);
|
|
|
|
var _super = _createSuper$K(PickListTransferControls);
|
|
|
|
function PickListTransferControls(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickListTransferControls);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.moveRight = _this.moveRight.bind(_assertThisInitialized(_this));
|
|
_this.moveAllRight = _this.moveAllRight.bind(_assertThisInitialized(_this));
|
|
_this.moveLeft = _this.moveLeft.bind(_assertThisInitialized(_this));
|
|
_this.moveAllLeft = _this.moveAllLeft.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickListTransferControls, [{
|
|
key: "moveRight",
|
|
value: function moveRight(event) {
|
|
var selection = this.props.sourceSelection;
|
|
|
|
if (ObjectUtils.isNotEmpty(selection)) {
|
|
var targetList = _toConsumableArray(this.props.target);
|
|
|
|
var sourceList = _toConsumableArray(this.props.source);
|
|
|
|
for (var i = 0; i < selection.length; i++) {
|
|
var selectedItem = selection[i];
|
|
|
|
if (ObjectUtils.findIndexInList(selectedItem, targetList, this.props.dataKey) === -1) {
|
|
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList, this.props.dataKey), 1)[0]);
|
|
}
|
|
}
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'toTarget'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveAllRight",
|
|
value: function moveAllRight(event) {
|
|
if (this.props.source) {
|
|
var targetList = [].concat(_toConsumableArray(this.props.target), _toConsumableArray(this.props.source));
|
|
var sourceList = [];
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'allToTarget'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveLeft",
|
|
value: function moveLeft(event) {
|
|
var selection = this.props.targetSelection;
|
|
|
|
if (ObjectUtils.isNotEmpty(selection)) {
|
|
var targetList = _toConsumableArray(this.props.target);
|
|
|
|
var sourceList = _toConsumableArray(this.props.source);
|
|
|
|
for (var i = 0; i < selection.length; i++) {
|
|
var selectedItem = selection[i];
|
|
|
|
if (ObjectUtils.findIndexInList(selectedItem, sourceList, this.props.dataKey) === -1) {
|
|
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList, this.props.dataKey), 1)[0]);
|
|
}
|
|
}
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'toSource'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveAllLeft",
|
|
value: function moveAllLeft(event) {
|
|
if (this.props.source) {
|
|
var sourceList = [].concat(_toConsumableArray(this.props.source), _toConsumableArray(this.props.target));
|
|
var targetList = [];
|
|
|
|
if (this.props.onTransfer) {
|
|
this.props.onTransfer({
|
|
originalEvent: event,
|
|
source: sourceList,
|
|
target: targetList,
|
|
direction: 'allToSource'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var moveRightDisabled = ObjectUtils.isEmpty(this.props.sourceSelection);
|
|
var moveLeftDisabled = ObjectUtils.isEmpty(this.props.targetSelection);
|
|
var moveAllRightDisabled = ObjectUtils.isEmpty(this.props.source);
|
|
var moveAllLeftDisabled = ObjectUtils.isEmpty(this.props.target);
|
|
var className = classNames('p-picklist-buttons p-picklist-transfer-buttons', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveRightDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-right",
|
|
onClick: this.moveRight
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveAllRightDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-right",
|
|
onClick: this.moveAllRight
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveLeftDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-left",
|
|
onClick: this.moveLeft
|
|
}), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
disabled: moveAllLeftDisabled,
|
|
type: "button",
|
|
icon: "pi pi-angle-double-left",
|
|
onClick: this.moveAllLeft
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickListTransferControls;
|
|
}(React.Component);
|
|
|
|
function _createSuper$J(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$J(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$J() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var PickList = /*#__PURE__*/function (_Component) {
|
|
_inherits(PickList, _Component);
|
|
|
|
var _super = _createSuper$J(PickList);
|
|
|
|
function PickList(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, PickList);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
|
|
if (!_this.props.onSourceSelectionChange) {
|
|
_this.state.sourceSelection = [];
|
|
}
|
|
|
|
if (!_this.props.onTargetSelectionChange) {
|
|
_this.state.targetSelection = [];
|
|
}
|
|
|
|
_this.onSourceReorder = _this.onSourceReorder.bind(_assertThisInitialized(_this));
|
|
_this.onTargetReorder = _this.onTargetReorder.bind(_assertThisInitialized(_this));
|
|
_this.onTransfer = _this.onTransfer.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(PickList, [{
|
|
key: "getSourceSelection",
|
|
value: function getSourceSelection() {
|
|
return this.props.onSourceSelectionChange ? this.props.sourceSelection : this.state.sourceSelection;
|
|
}
|
|
}, {
|
|
key: "getTargetSelection",
|
|
value: function getTargetSelection() {
|
|
return this.props.onTargetSelectionChange ? this.props.targetSelection : this.state.targetSelection;
|
|
}
|
|
}, {
|
|
key: "onSourceReorder",
|
|
value: function onSourceReorder(event) {
|
|
this.handleChange(event, event.value, this.props.target);
|
|
this.reorderedListElement = this.sourceListElement;
|
|
this.reorderDirection = event.direction;
|
|
}
|
|
}, {
|
|
key: "onTargetReorder",
|
|
value: function onTargetReorder(event) {
|
|
this.handleChange(event, this.props.source, event.value);
|
|
this.reorderedListElement = this.targetListElement;
|
|
this.reorderDirection = event.direction;
|
|
}
|
|
}, {
|
|
key: "handleScrollPosition",
|
|
value: function handleScrollPosition(listElement, direction) {
|
|
if (listElement) {
|
|
var listContainer = DomHandler.findSingle(listElement, '.p-picklist-list');
|
|
|
|
switch (direction) {
|
|
case 'up':
|
|
this.scrollInView(listContainer, -1);
|
|
break;
|
|
|
|
case 'top':
|
|
listContainer.scrollTop = 0;
|
|
break;
|
|
|
|
case 'down':
|
|
this.scrollInView(listContainer, 1);
|
|
break;
|
|
|
|
case 'bottom':
|
|
listContainer.scrollTop = listContainer.scrollHeight;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "handleChange",
|
|
value: function handleChange(event, source, target) {
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
source: source,
|
|
target: target
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onTransfer",
|
|
value: function onTransfer(event) {
|
|
var originalEvent = event.originalEvent,
|
|
source = event.source,
|
|
target = event.target,
|
|
direction = event.direction;
|
|
|
|
switch (direction) {
|
|
case 'toTarget':
|
|
if (this.props.onMoveToTarget) {
|
|
this.props.onMoveToTarget({
|
|
originalEvent: originalEvent,
|
|
value: this.getSourceSelection()
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'allToTarget':
|
|
if (this.props.onMoveAllToTarget) {
|
|
this.props.onMoveAllToTarget({
|
|
originalEvent: originalEvent,
|
|
value: this.props.source
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'toSource':
|
|
if (this.props.onMoveToSource) {
|
|
this.props.onMoveToSource({
|
|
originalEvent: originalEvent,
|
|
value: this.getTargetSelection()
|
|
});
|
|
}
|
|
|
|
break;
|
|
|
|
case 'allToSource':
|
|
if (this.props.onMoveAllToSource) {
|
|
this.props.onMoveAllToSource({
|
|
originalEvent: originalEvent,
|
|
value: this.props.target
|
|
});
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
this.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: []
|
|
}, 'sourceSelection', this.props.onSourceSelectionChange);
|
|
this.onSelectionChange({
|
|
originalEvent: originalEvent,
|
|
value: []
|
|
}, 'targetSelection', this.props.onTargetSelectionChange);
|
|
this.handleChange(event, source, target);
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: 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]);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSelectionChange",
|
|
value: function onSelectionChange(e, stateKey, callback) {
|
|
if (callback) {
|
|
callback(e);
|
|
} else {
|
|
this.setState(_defineProperty({}, stateKey, e.value));
|
|
}
|
|
|
|
if (ObjectUtils.isNotEmpty(this.state.sourceSelection) && stateKey === 'targetSelection') {
|
|
this.setState({
|
|
sourceSelection: []
|
|
});
|
|
} else if (ObjectUtils.isNotEmpty(this.state.targetSelection) && stateKey === 'sourceSelection') {
|
|
this.setState({
|
|
targetSelection: []
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
if (this.reorderedListElement) {
|
|
this.handleScrollPosition(this.reorderedListElement, this.reorderDirection);
|
|
this.reorderedListElement = null;
|
|
this.reorderDirection = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-picklist p-component', this.props.className);
|
|
var sourceSelection = this.getSourceSelection();
|
|
var targetSelection = this.getTargetSelection();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, this.props.showSourceControls && /*#__PURE__*/React__default["default"].createElement(PickListControls, {
|
|
list: this.props.source,
|
|
selection: sourceSelection,
|
|
onReorder: this.onSourceReorder,
|
|
className: "p-picklist-source-controls",
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React__default["default"].createElement(PickListSubList, {
|
|
ref: function ref(el) {
|
|
return _this2.sourceListElement = el;
|
|
},
|
|
list: this.props.source,
|
|
selection: sourceSelection,
|
|
onSelectionChange: function onSelectionChange(e) {
|
|
return _this2.onSelectionChange(e, 'sourceSelection', _this2.props.onSourceSelectionChange);
|
|
},
|
|
itemTemplate: this.props.itemTemplate,
|
|
header: this.props.sourceHeader,
|
|
style: this.props.sourceStyle,
|
|
className: "p-picklist-source-wrapper",
|
|
listClassName: "p-picklist-source",
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
tabIndex: this.props.tabIndex,
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React__default["default"].createElement(PickListTransferControls, {
|
|
onTransfer: this.onTransfer,
|
|
source: this.props.source,
|
|
target: this.props.target,
|
|
sourceSelection: sourceSelection,
|
|
targetSelection: targetSelection,
|
|
dataKey: this.props.dataKey
|
|
}), /*#__PURE__*/React__default["default"].createElement(PickListSubList, {
|
|
ref: function ref(el) {
|
|
return _this2.targetListElement = el;
|
|
},
|
|
list: this.props.target,
|
|
selection: targetSelection,
|
|
onSelectionChange: function onSelectionChange(e) {
|
|
return _this2.onSelectionChange(e, 'targetSelection', _this2.props.onTargetSelectionChange);
|
|
},
|
|
itemTemplate: this.props.itemTemplate,
|
|
header: this.props.targetHeader,
|
|
style: this.props.targetStyle,
|
|
className: "p-picklist-target-wrapper",
|
|
listClassName: "p-picklist-target",
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
tabIndex: this.props.tabIndex,
|
|
dataKey: this.props.dataKey
|
|
}), this.props.showTargetControls && /*#__PURE__*/React__default["default"].createElement(PickListControls, {
|
|
list: this.props.target,
|
|
selection: targetSelection,
|
|
onReorder: this.onTargetReorder,
|
|
className: "p-picklist-target-controls",
|
|
dataKey: this.props.dataKey
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return PickList;
|
|
}(React.Component);
|
|
|
|
_defineProperty(PickList, "defaultProps", {
|
|
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,
|
|
tabIndex: 0,
|
|
dataKey: null,
|
|
itemTemplate: null,
|
|
onChange: null,
|
|
onMoveToSource: null,
|
|
onMoveAllToSource: null,
|
|
onMoveToTarget: null,
|
|
onMoveAllToTarget: null,
|
|
onSourceSelectionChange: null,
|
|
onTargetSelectionChange: null
|
|
});
|
|
|
|
function _createSuper$I(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$I(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$I() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ProgressSpinner = /*#__PURE__*/function (_Component) {
|
|
_inherits(ProgressSpinner, _Component);
|
|
|
|
var _super = _createSuper$I(ProgressSpinner);
|
|
|
|
function ProgressSpinner() {
|
|
_classCallCheck(this, ProgressSpinner);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(ProgressSpinner, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var spinnerClass = classNames('p-progress-spinner', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
style: this.props.style,
|
|
className: spinnerClass,
|
|
role: "alert",
|
|
"aria-busy": true
|
|
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
className: "p-progress-spinner-svg",
|
|
viewBox: "25 25 50 50",
|
|
style: {
|
|
animationDuration: this.props.animationDuration
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("circle", {
|
|
className: "p-progress-spinner-circle",
|
|
cx: "50",
|
|
cy: "50",
|
|
r: "20",
|
|
fill: this.props.fill,
|
|
strokeWidth: this.props.strokeWidth,
|
|
strokeMiterlimit: "10"
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return ProgressSpinner;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ProgressSpinner, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
strokeWidth: "2",
|
|
fill: "none",
|
|
animationDuration: "2s"
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$H(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$H(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$H() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var RadioButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(RadioButton, _Component);
|
|
|
|
var _super = _createSuper$H(RadioButton);
|
|
|
|
function RadioButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, RadioButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(RadioButton, [{
|
|
key: "select",
|
|
value: function select(e) {
|
|
this.inputRef.current.checked = true;
|
|
this.onClick(e);
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(e) {
|
|
if (!this.props.disabled && this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: e,
|
|
value: this.props.value,
|
|
checked: !this.props.checked,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: this.props.value,
|
|
checked: !this.props.checked
|
|
}
|
|
});
|
|
this.inputRef.current.checked = !this.props.checked;
|
|
this.inputRef.current.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$f({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
if (this.inputRef && this.inputRef.current) {
|
|
this.inputRef.current.checked = this.props.checked;
|
|
}
|
|
|
|
var containerClass = classNames('p-radiobutton p-component', {
|
|
'p-radiobutton-checked': this.props.checked,
|
|
'p-radiobutton-disabled': this.props.disabled,
|
|
'p-radiobutton-focused': this.state.focused
|
|
}, this.props.className);
|
|
var boxClass = classNames('p-radiobutton-box', {
|
|
'p-highlight': this.props.checked,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClass,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
id: this.props.inputId,
|
|
type: "radio",
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
name: this.props.name,
|
|
defaultChecked: this.props.checked,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
disabled: this.props.disabled,
|
|
required: this.props.required,
|
|
tabIndex: this.props.tabIndex
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClass,
|
|
ref: function ref(el) {
|
|
_this2.box = el;
|
|
},
|
|
role: "radio",
|
|
"aria-checked": this.props.checked
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-radiobutton-icon"
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return RadioButton;
|
|
}(React.Component);
|
|
|
|
_defineProperty(RadioButton, "defaultProps", {
|
|
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,
|
|
ariaLabelledBy: null,
|
|
onChange: null
|
|
});
|
|
|
|
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 _createSuper$G(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$G(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$G() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Rating = /*#__PURE__*/function (_Component) {
|
|
_inherits(Rating, _Component);
|
|
|
|
var _super = _createSuper$G(Rating);
|
|
|
|
function Rating(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Rating);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.clear = _this.clear.bind(_assertThisInitialized(_this));
|
|
_this.onStarKeyDown = _this.onStarKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onCancelKeyDown = _this.onCancelKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Rating, [{
|
|
key: "rate",
|
|
value: function rate(event, i) {
|
|
if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: i,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: i
|
|
}
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear(event) {
|
|
if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: null,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: null
|
|
}
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "shouldComponentUpdate",
|
|
value: function shouldComponentUpdate(nextProps, nextState) {
|
|
if (nextProps.value === this.props.value && nextProps.disabled === this.props.disabled) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "onStarKeyDown",
|
|
value: function onStarKeyDown(event, value) {
|
|
if (event.key === 'Enter') {
|
|
this.rate(event, value);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onCancelKeyDown",
|
|
value: function onCancelKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this.clear(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getFocusIndex",
|
|
value: function getFocusIndex() {
|
|
return this.props.disabled || this.props.readOnly ? null : 0;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$e({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderStars",
|
|
value: function renderStars() {
|
|
var _this2 = this;
|
|
|
|
var starsArray = [];
|
|
|
|
for (var i = 0; i < this.props.stars; i++) {
|
|
starsArray[i] = i + 1;
|
|
}
|
|
|
|
var stars = starsArray.map(function (value) {
|
|
var iconClass = classNames('p-rating-icon', {
|
|
'pi pi-star': !_this2.props.value || value > _this2.props.value,
|
|
'pi pi-star-fill': value <= _this2.props.value
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClass,
|
|
onClick: function onClick(e) {
|
|
return _this2.rate(e, value);
|
|
},
|
|
key: value,
|
|
tabIndex: _this2.getFocusIndex(),
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this2.onStarKeyDown(e, value);
|
|
}
|
|
});
|
|
});
|
|
return stars;
|
|
}
|
|
}, {
|
|
key: "renderCancelIcon",
|
|
value: function renderCancelIcon() {
|
|
if (this.props.cancel) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-rating-icon p-rating-cancel pi pi-ban",
|
|
onClick: this.clear,
|
|
tabIndex: this.getFocusIndex(),
|
|
onKeyDown: this.onCancelKeyDown
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var className = classNames('p-rating', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-rating-readonly': this.props.readOnly
|
|
}, this.props.className);
|
|
var cancelIcon = this.renderCancelIcon();
|
|
var stars = this.renderStars();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, cancelIcon, stars);
|
|
}
|
|
}]);
|
|
|
|
return Rating;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Rating, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
disabled: false,
|
|
readOnly: false,
|
|
stars: 5,
|
|
cancel: true,
|
|
style: null,
|
|
className: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
onChange: null
|
|
});
|
|
|
|
function _createSuper$F(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$F(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$F() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Row = /*#__PURE__*/function (_Component) {
|
|
_inherits(Row, _Component);
|
|
|
|
var _super = _createSuper$F(Row);
|
|
|
|
function Row() {
|
|
_classCallCheck(this, Row);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Row, [{
|
|
key: "render",
|
|
value: function render() {
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", null, this.props.children);
|
|
}
|
|
}]);
|
|
|
|
return Row;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Row, "defaultProps", {
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$E(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$E(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$E() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ScrollPanel = /*#__PURE__*/function (_Component) {
|
|
_inherits(ScrollPanel, _Component);
|
|
|
|
var _super = _createSuper$E(ScrollPanel);
|
|
|
|
function ScrollPanel(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ScrollPanel);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.moveBar = _this.moveBar.bind(_assertThisInitialized(_this));
|
|
_this.onXBarMouseDown = _this.onXBarMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onYBarMouseDown = _this.onYBarMouseDown.bind(_assertThisInitialized(_this));
|
|
_this.onDocumentMouseMove = _this.onDocumentMouseMove.bind(_assertThisInitialized(_this));
|
|
_this.onDocumentMouseUp = _this.onDocumentMouseUp.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ScrollPanel, [{
|
|
key: "calculateContainerHeight",
|
|
value: function calculateContainerHeight() {
|
|
var containerStyles = getComputedStyle(this.container),
|
|
xBarStyles = getComputedStyle(this.xBar),
|
|
pureContainerHeight = DomHandler.getHeight(this.container) - parseInt(xBarStyles['height'], 10);
|
|
|
|
if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
|
|
if (this.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
|
|
this.container.style.height = containerStyles['max-height'];
|
|
} else {
|
|
this.container.style.height = this.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "moveBar",
|
|
value: function moveBar() {
|
|
var _this2 = this;
|
|
|
|
/* horizontal scroll */
|
|
var totalWidth = this.content.scrollWidth;
|
|
var ownWidth = this.content.clientWidth;
|
|
var bottom = (this.container.clientHeight - this.xBar.clientHeight) * -1;
|
|
this.scrollXRatio = ownWidth / totalWidth;
|
|
/* vertical scroll */
|
|
|
|
var totalHeight = this.content.scrollHeight;
|
|
var ownHeight = this.content.clientHeight;
|
|
var right = (this.container.clientWidth - this.yBar.clientWidth) * -1;
|
|
this.scrollYRatio = ownHeight / totalHeight;
|
|
this.frame = this.requestAnimationFrame(function () {
|
|
if (_this2.scrollXRatio >= 1) {
|
|
DomHandler.addClass(_this2.xBar, 'p-scrollpanel-hidden');
|
|
} else {
|
|
DomHandler.removeClass(_this2.xBar, 'p-scrollpanel-hidden');
|
|
_this2.xBar.style.cssText = 'width:' + Math.max(_this2.scrollXRatio * 100, 10) + '%; left:' + _this2.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
|
|
}
|
|
|
|
if (_this2.scrollYRatio >= 1) {
|
|
DomHandler.addClass(_this2.yBar, 'p-scrollpanel-hidden');
|
|
} else {
|
|
DomHandler.removeClass(_this2.yBar, 'p-scrollpanel-hidden');
|
|
_this2.yBar.style.cssText = 'height:' + Math.max(_this2.scrollYRatio * 100, 10) + '%; top: calc(' + _this2.content.scrollTop / totalHeight * 100 + '% - ' + _this2.xBar.clientHeight + 'px);right:' + right + 'px;';
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onYBarMouseDown",
|
|
value: function onYBarMouseDown(e) {
|
|
this.isYBarClicked = true;
|
|
this.lastPageY = e.pageY;
|
|
DomHandler.addClass(this.yBar, 'p-scrollpanel-grabbed');
|
|
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
|
document.addEventListener('mousemove', this.onDocumentMouseMove);
|
|
document.addEventListener('mouseup', this.onDocumentMouseUp);
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onXBarMouseDown",
|
|
value: function onXBarMouseDown(e) {
|
|
this.isXBarClicked = true;
|
|
this.lastPageX = e.pageX;
|
|
DomHandler.addClass(this.xBar, 'p-scrollpanel-grabbed');
|
|
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
|
document.addEventListener('mousemove', this.onDocumentMouseMove);
|
|
document.addEventListener('mouseup', this.onDocumentMouseUp);
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDocumentMouseMove",
|
|
value: function onDocumentMouseMove(e) {
|
|
if (this.isXBarClicked) {
|
|
this.onMouseMoveForXBar(e);
|
|
} else if (this.isYBarClicked) {
|
|
this.onMouseMoveForYBar(e);
|
|
} else {
|
|
this.onMouseMoveForXBar(e);
|
|
this.onMouseMoveForYBar(e);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMouseMoveForXBar",
|
|
value: function onMouseMoveForXBar(e) {
|
|
var _this3 = this;
|
|
|
|
var deltaX = e.pageX - this.lastPageX;
|
|
this.lastPageX = e.pageX;
|
|
this.frame = this.requestAnimationFrame(function () {
|
|
_this3.content.scrollLeft += deltaX / _this3.scrollXRatio;
|
|
});
|
|
}
|
|
}, {
|
|
key: "onMouseMoveForYBar",
|
|
value: function onMouseMoveForYBar(e) {
|
|
var _this4 = this;
|
|
|
|
var deltaY = e.pageY - this.lastPageY;
|
|
this.lastPageY = e.pageY;
|
|
this.frame = this.requestAnimationFrame(function () {
|
|
_this4.content.scrollTop += deltaY / _this4.scrollYRatio;
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDocumentMouseUp",
|
|
value: function onDocumentMouseUp(e) {
|
|
DomHandler.removeClass(this.yBar, 'p-scrollpanel-grabbed');
|
|
DomHandler.removeClass(this.xBar, 'p-scrollpanel-grabbed');
|
|
DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
|
|
document.removeEventListener('mousemove', this.onDocumentMouseMove);
|
|
document.removeEventListener('mouseup', this.onDocumentMouseUp);
|
|
this.isXBarClicked = false;
|
|
this.isYBarClicked = false;
|
|
}
|
|
}, {
|
|
key: "requestAnimationFrame",
|
|
value: function requestAnimationFrame(f) {
|
|
var frame = window.requestAnimationFrame || this.timeoutFrame;
|
|
return frame(f);
|
|
}
|
|
}, {
|
|
key: "refresh",
|
|
value: function refresh() {
|
|
this.moveBar();
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.moveBar();
|
|
this.moveBar = this.moveBar.bind(this);
|
|
window.addEventListener('resize', this.moveBar);
|
|
this.calculateContainerHeight();
|
|
this.initialized = true;
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.initialized) {
|
|
window.removeEventListener('resize', this.moveBar);
|
|
}
|
|
|
|
if (this.frame) {
|
|
window.cancelAnimationFrame(this.frame);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this5 = this;
|
|
|
|
var className = classNames('p-scrollpanel p-component', this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-scrollpanel-wrapper"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.content = el;
|
|
},
|
|
className: "p-scrollpanel-content",
|
|
onScroll: this.moveBar,
|
|
onMouseEnter: this.moveBar
|
|
}, this.props.children)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.xBar = el;
|
|
},
|
|
className: "p-scrollpanel-bar p-scrollpanel-bar-x",
|
|
onMouseDown: this.onXBarMouseDown
|
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.yBar = el;
|
|
},
|
|
className: "p-scrollpanel-bar p-scrollpanel-bar-y",
|
|
onMouseDown: this.onYBarMouseDown
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return ScrollPanel;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ScrollPanel, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$D(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$D(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$D() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ScrollTop = /*#__PURE__*/function (_Component) {
|
|
_inherits(ScrollTop, _Component);
|
|
|
|
var _super = _createSuper$D(ScrollTop);
|
|
|
|
function ScrollTop(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ScrollTop);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.scrollElementRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ScrollTop, [{
|
|
key: "onClick",
|
|
value: function onClick() {
|
|
var scrollElement = this.props.target === 'window' ? window : this.helper.parentElement;
|
|
scrollElement.scroll({
|
|
top: 0,
|
|
behavior: this.props.behavior
|
|
});
|
|
}
|
|
}, {
|
|
key: "checkVisibility",
|
|
value: function checkVisibility(scrollY) {
|
|
this.setState({
|
|
visible: scrollY > this.props.threshold
|
|
});
|
|
}
|
|
}, {
|
|
key: "bindParentScrollListener",
|
|
value: function bindParentScrollListener() {
|
|
var _this2 = this;
|
|
|
|
this.scrollListener = function () {
|
|
_this2.checkVisibility(_this2.helper.parentElement.scrollTop);
|
|
};
|
|
|
|
this.helper.parentElement.addEventListener('scroll', this.scrollListener);
|
|
}
|
|
}, {
|
|
key: "bindDocumentScrollListener",
|
|
value: function bindDocumentScrollListener() {
|
|
var _this3 = this;
|
|
|
|
this.scrollListener = function () {
|
|
_this3.checkVisibility(DomHandler.getWindowScrollTop());
|
|
};
|
|
|
|
window.addEventListener('scroll', this.scrollListener);
|
|
}
|
|
}, {
|
|
key: "unbindParentScrollListener",
|
|
value: function unbindParentScrollListener() {
|
|
if (this.scrollListener) {
|
|
this.helper.parentElement.removeEventListener('scroll', this.scrollListener);
|
|
this.scrollListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentScrollListener",
|
|
value: function unbindDocumentScrollListener() {
|
|
if (this.scrollListener) {
|
|
window.removeEventListener('scroll', this.scrollListener);
|
|
this.scrollListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
ZIndexUtils.set('overlay', this.scrollElementRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.scrollElementRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.target === 'window') this.bindDocumentScrollListener();else if (this.props.target === 'parent') this.bindParentScrollListener();
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.target === 'window') this.unbindDocumentScrollListener();else if (this.props.target === 'parent') this.unbindParentScrollListener();
|
|
ZIndexUtils.clear(this.scrollElementRef.current);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-scrolltop p-link p-component', {
|
|
'p-scrolltop-sticky': this.props.target !== 'window'
|
|
}, this.props.className);
|
|
var isTargetParent = this.props.target === 'parent';
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.scrollElementRef,
|
|
classNames: "p-scrolltop",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 150,
|
|
exit: 150
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
ref: this.scrollElementRef,
|
|
type: "button",
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, IconUtils.getJSXIcon(this.props.icon, {
|
|
className: 'p-scrolltop-icon'
|
|
}, {
|
|
props: this.props
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null))), isTargetParent && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this4.helper = el;
|
|
},
|
|
className: "p-scrolltop-helper"
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return ScrollTop;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ScrollTop, "defaultProps", {
|
|
target: 'window',
|
|
threshold: 400,
|
|
icon: 'pi pi-chevron-up',
|
|
behavior: 'smooth',
|
|
className: null,
|
|
style: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$C(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$C(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$C() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SelectButtonItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(SelectButtonItem, _Component);
|
|
|
|
var _super = _createSuper$C(SelectButtonItem);
|
|
|
|
function SelectButtonItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SelectButtonItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SelectButtonItem, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
option: this.props.option
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
var keyCode = event.which;
|
|
|
|
if (keyCode === 32 || keyCode === 13) {
|
|
//space and enter
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
if (this.props.template) {
|
|
return this.props.template(this.props.option);
|
|
} else {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-button-label p-c"
|
|
}, this.props.label);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-button p-component', {
|
|
'p-highlight': this.props.selected,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
}, this.props.className);
|
|
var content = this.renderContent();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
role: "button",
|
|
"aria-label": this.props.label,
|
|
"aria-pressed": this.props.selected,
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown,
|
|
tabIndex: this.props.tabIndex,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur
|
|
}, content, !this.props.disabled && /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return SelectButtonItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SelectButtonItem, "defaultProps", {
|
|
option: null,
|
|
label: null,
|
|
className: null,
|
|
selected: null,
|
|
tabIndex: null,
|
|
ariaLabelledBy: null,
|
|
template: null,
|
|
onClick: null
|
|
});
|
|
|
|
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; }
|
|
|
|
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; }
|
|
|
|
function _createSuper$B(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$B(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$B() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SelectButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(SelectButton, _Component);
|
|
|
|
var _super = _createSuper$B(SelectButton);
|
|
|
|
function SelectButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SelectButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onOptionClick = _this.onOptionClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SelectButton, [{
|
|
key: "onOptionClick",
|
|
value: function onOptionClick(event) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.disabled || this.isOptionDisabled(event.option)) {
|
|
return;
|
|
}
|
|
|
|
var selected = this.isSelected(event.option);
|
|
|
|
if (selected && !this.props.unselectable) {
|
|
return;
|
|
}
|
|
|
|
var optionValue = this.getOptionValue(event.option);
|
|
var newValue;
|
|
|
|
if (this.props.multiple) {
|
|
var currentValue = this.props.value ? _toConsumableArray(this.props.value) : [];
|
|
if (selected) newValue = currentValue.filter(function (val) {
|
|
return !ObjectUtils.equals(val, optionValue, _this2.props.dataKey);
|
|
});else newValue = [].concat(_toConsumableArray(currentValue), [optionValue]);
|
|
} else {
|
|
if (selected) newValue = null;else newValue = optionValue;
|
|
}
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
value: newValue,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: newValue
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "getOptionLabel",
|
|
value: function getOptionLabel(option) {
|
|
return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
|
|
}
|
|
}, {
|
|
key: "getOptionValue",
|
|
value: function getOptionValue(option) {
|
|
return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
|
|
}
|
|
}, {
|
|
key: "isOptionDisabled",
|
|
value: function isOptionDisabled(option) {
|
|
if (this.props.optionDisabled) {
|
|
return ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
|
|
}
|
|
|
|
return option && option['disabled'] !== undefined ? option['disabled'] : false;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(option) {
|
|
var selected = false;
|
|
var optionValue = this.getOptionValue(option);
|
|
|
|
if (this.props.multiple) {
|
|
if (this.props.value && this.props.value.length) {
|
|
var _iterator = _createForOfIteratorHelper$7(this.props.value),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var val = _step.value;
|
|
|
|
if (ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
|
|
selected = true;
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
} else {
|
|
selected = ObjectUtils.equals(this.props.value, optionValue, this.props.dataKey);
|
|
}
|
|
|
|
return selected;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$d({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.options && this.props.options.length) {
|
|
return this.props.options.map(function (option, index) {
|
|
var isDisabled = _this3.props.disabled || _this3.isOptionDisabled(option);
|
|
|
|
var optionLabel = _this3.getOptionLabel(option);
|
|
|
|
var tabIndex = isDisabled ? null : 0;
|
|
return /*#__PURE__*/React__default["default"].createElement(SelectButtonItem, {
|
|
key: "".concat(optionLabel, "_").concat(index),
|
|
label: optionLabel,
|
|
className: option.className,
|
|
option: option,
|
|
onClick: _this3.onOptionClick,
|
|
template: _this3.props.itemTemplate,
|
|
selected: _this3.isSelected(option),
|
|
tabIndex: tabIndex,
|
|
disabled: isDisabled,
|
|
ariaLabelledBy: _this3.props.ariaLabelledBy
|
|
});
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-selectbutton p-buttonset p-component', this.props.className);
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this4.element = el;
|
|
},
|
|
className: className,
|
|
style: this.props.style,
|
|
role: "group"
|
|
}, items);
|
|
}
|
|
}]);
|
|
|
|
return SelectButton;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SelectButton, "defaultProps", {
|
|
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,
|
|
ariaLabelledBy: null,
|
|
itemTemplate: null,
|
|
onChange: null
|
|
});
|
|
|
|
function _createSuper$A(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$A(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$A() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Sidebar = /*#__PURE__*/function (_Component) {
|
|
_inherits(Sidebar, _Component);
|
|
|
|
var _super = _createSuper$A(Sidebar);
|
|
|
|
function Sidebar(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Sidebar);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
maskVisible: false,
|
|
visible: false
|
|
};
|
|
_this.onMaskClick = _this.onMaskClick.bind(_assertThisInitialized(_this));
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.sidebarRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Sidebar, [{
|
|
key: "getPositionClass",
|
|
value: function getPositionClass() {
|
|
var _this2 = this;
|
|
|
|
var positions = ['left', 'right', 'top', 'bottom'];
|
|
var pos = positions.find(function (item) {
|
|
return item === _this2.props.position;
|
|
});
|
|
return pos ? "p-sidebar-".concat(pos) : '';
|
|
}
|
|
}, {
|
|
key: "focus",
|
|
value: function focus() {
|
|
var activeElement = document.activeElement;
|
|
var isActiveElementInDialog = activeElement && this.sidebarRef && this.sidebarRef.current.contains(activeElement);
|
|
|
|
if (!isActiveElementInDialog && this.props.showCloseIcon) {
|
|
this.closeIcon.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onMaskClick",
|
|
value: function onMaskClick(event) {
|
|
if (this.props.dismissable && this.props.modal && this.mask === event.target) {
|
|
this.onClose(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClose",
|
|
value: function onClose(event) {
|
|
this.props.onHide();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
if (this.props.onShow) {
|
|
this.props.onShow();
|
|
}
|
|
|
|
this.focus();
|
|
this.enableDocumentSettings();
|
|
}
|
|
}, {
|
|
key: "onExiting",
|
|
value: function onExiting() {
|
|
if (this.props.modal) {
|
|
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.mask);
|
|
this.setState({
|
|
maskVisible: false
|
|
});
|
|
this.disableDocumentSettings();
|
|
}
|
|
}, {
|
|
key: "enableDocumentSettings",
|
|
value: function enableDocumentSettings() {
|
|
this.bindGlobalListeners();
|
|
|
|
if (this.props.blockScroll) {
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "disableDocumentSettings",
|
|
value: function disableDocumentSettings() {
|
|
this.unbindGlobalListeners();
|
|
|
|
if (this.props.blockScroll) {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindGlobalListeners",
|
|
value: function bindGlobalListeners() {
|
|
if (this.props.closeOnEscape) {
|
|
this.bindDocumentEscapeListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindGlobalListeners",
|
|
value: function unbindGlobalListeners() {
|
|
this.unbindDocumentEscapeListener();
|
|
}
|
|
}, {
|
|
key: "bindDocumentEscapeListener",
|
|
value: function bindDocumentEscapeListener() {
|
|
var _this3 = this;
|
|
|
|
this.documentEscapeListener = function (event) {
|
|
if (event.which === 27) {
|
|
if (ZIndexUtils.get(_this3.mask) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) {
|
|
_this3.onClose(event);
|
|
}
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', this.documentEscapeListener);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentEscapeListener",
|
|
value: function unbindDocumentEscapeListener() {
|
|
if (this.documentEscapeListener) {
|
|
document.removeEventListener('keydown', this.documentEscapeListener);
|
|
this.documentEscapeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.visible) {
|
|
this.setState({
|
|
maskVisible: true,
|
|
visible: true
|
|
}, function () {
|
|
ZIndexUtils.set('modal', _this4.mask, PrimeReact.autoZIndex, _this4.props.baseZIndex || PrimeReact.zIndex['modal']);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var _this5 = this;
|
|
|
|
if (this.props.visible && !this.state.maskVisible) {
|
|
this.setState({
|
|
maskVisible: true
|
|
}, function () {
|
|
ZIndexUtils.set('modal', _this5.mask, PrimeReact.autoZIndex, _this5.props.baseZIndex || PrimeReact.zIndex['modal']);
|
|
});
|
|
}
|
|
|
|
if (this.props.visible !== this.state.visible && this.state.maskVisible) {
|
|
this.setState({
|
|
visible: this.props.visible
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.disableDocumentSettings();
|
|
ZIndexUtils.clear(this.mask);
|
|
}
|
|
}, {
|
|
key: "renderCloseIcon",
|
|
value: function renderCloseIcon() {
|
|
var _this6 = this;
|
|
|
|
if (this.props.showCloseIcon) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
ref: function ref(el) {
|
|
return _this6.closeIcon = el;
|
|
},
|
|
className: "p-sidebar-close p-sidebar-icon p-link",
|
|
onClick: this.onClose,
|
|
"aria-label": this.props.ariaCloseLabel
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-sidebar-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderIcons",
|
|
value: function renderIcons() {
|
|
if (this.props.icons) {
|
|
return ObjectUtils.getJSXElement(this.props.icons, this.props);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-sidebar p-component', this.props.className);
|
|
var maskClassName = classNames('p-sidebar-mask', {
|
|
'p-component-overlay p-component-overlay-enter': this.props.modal,
|
|
'p-sidebar-mask-scrollblocker': this.props.blockScroll,
|
|
'p-sidebar-visible': this.state.maskVisible,
|
|
'p-sidebar-full': this.props.fullScreen
|
|
}, this.props.maskClassName, this.getPositionClass());
|
|
var closeIcon = this.renderCloseIcon();
|
|
var icons = this.renderIcons();
|
|
var transitionTimeout = {
|
|
enter: this.props.fullScreen ? 150 : 300,
|
|
exit: this.props.fullScreen ? 150 : 300
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this7.mask = el;
|
|
},
|
|
style: this.props.maskStyle,
|
|
className: maskClassName,
|
|
onClick: this.onMaskClick
|
|
}, /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.sidebarRef,
|
|
classNames: "p-sidebar",
|
|
"in": this.state.visible,
|
|
timeout: transitionTimeout,
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEntered: this.onEntered,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.sidebarRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
role: "complementary"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-sidebar-header"
|
|
}, icons, closeIcon), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-sidebar-content"
|
|
}, this.props.children))));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.state.maskVisible) {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo,
|
|
visible: true
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return Sidebar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Sidebar, "defaultProps", {
|
|
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: 'close',
|
|
closeOnEscape: true,
|
|
icons: null,
|
|
modal: true,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$z(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$z(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$z() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Skeleton = /*#__PURE__*/function (_Component) {
|
|
_inherits(Skeleton, _Component);
|
|
|
|
var _super = _createSuper$z(Skeleton);
|
|
|
|
function Skeleton() {
|
|
_classCallCheck(this, Skeleton);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Skeleton, [{
|
|
key: "skeletonStyle",
|
|
value: function skeletonStyle() {
|
|
if (this.props.size) return {
|
|
width: this.props.size,
|
|
height: this.props.size,
|
|
borderRadius: this.props.borderRadius
|
|
};else return {
|
|
width: this.props.width,
|
|
height: this.props.height,
|
|
borderRadius: this.props.borderRadius
|
|
};
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var skeletonClassName = classNames('p-skeleton p-component', {
|
|
'p-skeleton-circle': this.props.shape === 'circle',
|
|
'p-skeleton-none': this.props.animation === 'none'
|
|
}, this.props.className);
|
|
var style = this.skeletonStyle();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
style: style,
|
|
className: skeletonClassName
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return Skeleton;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Skeleton, "defaultProps", {
|
|
shape: 'rectangle',
|
|
size: null,
|
|
width: '100%',
|
|
height: '1rem',
|
|
borderRadius: null,
|
|
animation: 'wave',
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$y(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SlideMenuSub = /*#__PURE__*/function (_Component) {
|
|
_inherits(SlideMenuSub, _Component);
|
|
|
|
var _super = _createSuper$y(SlideMenuSub);
|
|
|
|
function SlideMenuSub(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SlideMenuSub);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: null
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SlideMenuSub, [{
|
|
key: "onItemClick",
|
|
value: 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) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
this.props.onForward();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(item) {
|
|
if (item.items) {
|
|
return /*#__PURE__*/React__default["default"].createElement(SlideMenuSub, {
|
|
model: item.items,
|
|
index: this.props.index + 1,
|
|
menuWidth: this.props.menuWidth,
|
|
effectDuration: this.props.effectDuration,
|
|
onForward: this.props.onForward,
|
|
parentActive: item === this.state.activeItem
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this2 = this;
|
|
|
|
var active = this.state.activeItem === 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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var submenu = this.renderSubmenu(item);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: "p-menuitem-link",
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
"aria-disabled": item.disabled
|
|
}, icon, label, submenuIcon);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.onItemClick(event, item, index);
|
|
},
|
|
className: 'p-menuitem-link',
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
submenuIconClassName: submenuIconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
active: active
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style
|
|
}, content, submenu);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) return this.renderSeparator(index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this3.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames({
|
|
'p-slidemenu-rootlist': this.props.root,
|
|
'p-submenu-list': !this.props.root,
|
|
'p-active-submenu': this.props.parentActive
|
|
});
|
|
var style = {
|
|
width: this.props.menuWidth + 'px',
|
|
left: this.props.root ? -1 * this.props.level * this.props.menuWidth + 'px' : this.props.menuWidth + 'px',
|
|
transitionProperty: this.props.root ? 'left' : 'none',
|
|
transitionDuration: this.props.effectDuration + 'ms',
|
|
transitionTimingFunction: this.props.easing
|
|
};
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: className,
|
|
style: style
|
|
}, items);
|
|
}
|
|
}]);
|
|
|
|
return SlideMenuSub;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SlideMenuSub, "defaultProps", {
|
|
model: null,
|
|
level: 0,
|
|
easing: 'ease-out',
|
|
effectDuration: 250,
|
|
menuWidth: 190,
|
|
parentActive: false,
|
|
onForward: null
|
|
});
|
|
|
|
var SlideMenu = /*#__PURE__*/function (_Component2) {
|
|
_inherits(SlideMenu, _Component2);
|
|
|
|
var _super2 = _createSuper$y(SlideMenu);
|
|
|
|
function SlideMenu(props) {
|
|
var _this4;
|
|
|
|
_classCallCheck(this, SlideMenu);
|
|
|
|
_this4 = _super2.call(this, props);
|
|
_this4.state = {
|
|
level: 0,
|
|
visible: false
|
|
};
|
|
_this4.navigateBack = _this4.navigateBack.bind(_assertThisInitialized(_this4));
|
|
_this4.navigateForward = _this4.navigateForward.bind(_assertThisInitialized(_this4));
|
|
_this4.onEnter = _this4.onEnter.bind(_assertThisInitialized(_this4));
|
|
_this4.onEntered = _this4.onEntered.bind(_assertThisInitialized(_this4));
|
|
_this4.onExit = _this4.onExit.bind(_assertThisInitialized(_this4));
|
|
_this4.onExited = _this4.onExited.bind(_assertThisInitialized(_this4));
|
|
_this4.onPanelClick = _this4.onPanelClick.bind(_assertThisInitialized(_this4));
|
|
_this4.menuRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this4;
|
|
}
|
|
|
|
_createClass(SlideMenu, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (this.props.popup) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.target
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "navigateForward",
|
|
value: function navigateForward() {
|
|
this.setState({
|
|
level: this.state.level + 1
|
|
});
|
|
}
|
|
}, {
|
|
key: "navigateBack",
|
|
value: function navigateBack() {
|
|
this.setState({
|
|
level: this.state.level - 1
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderBackward",
|
|
value: function renderBackward() {
|
|
var _this5 = this;
|
|
|
|
var className = classNames('p-slidemenu-backward', {
|
|
'p-hidden': this.state.level === 0
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this5.backward = el;
|
|
},
|
|
className: className,
|
|
onClick: this.navigateBack
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-slidemenu-backward-icon pi pi-fw pi-chevron-left"
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", null, this.props.backLabel));
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.popup) {
|
|
if (this.state.visible) this.hide(event);else this.show(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(event) {
|
|
var _this6 = this;
|
|
|
|
this.target = event.currentTarget;
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
if (_this6.props.onShow) {
|
|
_this6.props.onShow(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(event) {
|
|
var _this7 = this;
|
|
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
if (_this7.props.onHide) {
|
|
_this7.props.onHide(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
if (this.props.autoZIndex) {
|
|
ZIndexUtils.set('menu', this.menuRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['menu']);
|
|
}
|
|
|
|
DomHandler.absolutePosition(this.menuRef.current, this.target);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindDocumentResizeListener();
|
|
this.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.target = null;
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentResizeListener();
|
|
this.unbindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
this.setState({
|
|
level: 0
|
|
});
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this8 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this8.state.visible && _this8.isOutsideClicked(event)) {
|
|
_this8.hide(event);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.menuRef && this.menuRef.current && !(this.menuRef.current.isSameNode(event.target) || this.menuRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListener",
|
|
value: function bindDocumentResizeListener() {
|
|
var _this9 = this;
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function (event) {
|
|
if (_this9.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this9.hide(event);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListener",
|
|
value: function unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this10 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function (event) {
|
|
if (_this10.state.visible) {
|
|
_this10.hide(event);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.props.model !== prevProps.model) {
|
|
this.setState({
|
|
level: 0
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this11 = this;
|
|
|
|
var className = classNames('p-slidemenu p-component', {
|
|
'p-slidemenu-overlay': this.props.popup
|
|
}, this.props.className);
|
|
var backward = this.renderBackward();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.menuRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": !this.props.popup || this.state.visible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.menuRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onPanelClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-slidemenu-wrapper",
|
|
style: {
|
|
height: this.props.viewportHeight + 'px'
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-slidemenu-content",
|
|
ref: function ref(el) {
|
|
return _this11.slideMenuContent = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement(SlideMenuSub, {
|
|
model: this.props.model,
|
|
root: true,
|
|
index: 0,
|
|
menuWidth: this.props.menuWidth,
|
|
effectDuration: this.props.effectDuration,
|
|
level: this.state.level,
|
|
parentActive: this.state.level === 0,
|
|
onForward: this.navigateForward
|
|
})), backward)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return this.props.popup ? /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
}) : element;
|
|
}
|
|
}]);
|
|
|
|
return SlideMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SlideMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
popup: false,
|
|
style: null,
|
|
className: null,
|
|
easing: 'ease-out',
|
|
effectDuration: 250,
|
|
backLabel: 'Back',
|
|
menuWidth: 190,
|
|
viewportHeight: 175,
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$x(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$x(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$x() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Slider = /*#__PURE__*/function (_Component) {
|
|
_inherits(Slider, _Component);
|
|
|
|
var _super = _createSuper$x(Slider);
|
|
|
|
function Slider(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Slider);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onBarClick = _this.onBarClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.handleIndex = 0;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Slider, [{
|
|
key: "value",
|
|
get: function get() {
|
|
return this.props.range ? this.props.value || [0, 100] : this.props.value || 0;
|
|
}
|
|
}, {
|
|
key: "spin",
|
|
value: function spin(event, dir) {
|
|
var value = this.props.range ? this.value[this.handleIndex] : this.value;
|
|
var step = (this.props.step || 1) * dir;
|
|
this.updateValue(event, value + step);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event, index) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.dragging = true;
|
|
this.updateDomData();
|
|
this.sliderHandleClick = true;
|
|
this.handleIndex = index; //event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onMouseDown",
|
|
value: function onMouseDown(event, index) {
|
|
this.bindDragListeners();
|
|
this.onDragStart(event, index);
|
|
}
|
|
}, {
|
|
key: "onTouchStart",
|
|
value: function onTouchStart(event, index) {
|
|
this.bindTouchListeners();
|
|
this.onDragStart(event, index);
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event, index) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.handleIndex = index;
|
|
var key = event.key;
|
|
|
|
if (key === 'ArrowRight' || key === 'ArrowUp') {
|
|
this.spin(event, 1);
|
|
} else if (key === 'ArrowLeft' || key === 'ArrowDown') {
|
|
this.spin(event, -1);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onBarClick",
|
|
value: function onBarClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (!this.sliderHandleClick) {
|
|
this.updateDomData();
|
|
var value = this.setValue(event);
|
|
|
|
if (this.props.onSlideEnd) {
|
|
this.props.onSlideEnd({
|
|
originalEvent: event,
|
|
value: value
|
|
});
|
|
}
|
|
}
|
|
|
|
this.sliderHandleClick = false;
|
|
}
|
|
}, {
|
|
key: "onDrag",
|
|
value: function onDrag(event) {
|
|
if (this.dragging) {
|
|
this.setValue(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd(event) {
|
|
if (this.dragging) {
|
|
this.dragging = false;
|
|
|
|
if (this.props.onSlideEnd) {
|
|
this.props.onSlideEnd({
|
|
originalEvent: event,
|
|
value: this.props.value
|
|
});
|
|
}
|
|
|
|
this.unbindDragListeners();
|
|
this.unbindTouchListeners();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDragListeners",
|
|
value: function bindDragListeners() {
|
|
if (!this.dragListener) {
|
|
this.dragListener = this.onDrag.bind(this);
|
|
document.addEventListener('mousemove', this.dragListener);
|
|
}
|
|
|
|
if (!this.dragEndListener) {
|
|
this.dragEndListener = this.onDragEnd.bind(this);
|
|
document.addEventListener('mouseup', this.dragEndListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDragListeners",
|
|
value: function unbindDragListeners() {
|
|
if (this.dragListener) {
|
|
document.removeEventListener('mousemove', this.dragListener);
|
|
this.dragListener = null;
|
|
}
|
|
|
|
if (this.dragEndListener) {
|
|
document.removeEventListener('mouseup', this.dragEndListener);
|
|
this.dragEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindTouchListeners",
|
|
value: function bindTouchListeners() {
|
|
if (!this.dragListener) {
|
|
this.dragListener = this.onDrag.bind(this);
|
|
document.addEventListener('touchmove', this.dragListener);
|
|
}
|
|
|
|
if (!this.dragEndListener) {
|
|
this.dragEndListener = this.onDragEnd.bind(this);
|
|
document.addEventListener('touchend', this.dragEndListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindTouchListeners",
|
|
value: function unbindTouchListeners() {
|
|
if (this.dragListener) {
|
|
document.removeEventListener('touchmove', this.dragListener);
|
|
this.dragListener = null;
|
|
}
|
|
|
|
if (this.dragEndListener) {
|
|
document.removeEventListener('touchend', this.dragEndListener);
|
|
this.dragEndListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateDomData",
|
|
value: function updateDomData() {
|
|
var rect = this.el.getBoundingClientRect();
|
|
this.initX = rect.left + DomHandler.getWindowScrollLeft();
|
|
this.initY = rect.top + DomHandler.getWindowScrollTop();
|
|
this.barWidth = this.el.offsetWidth;
|
|
this.barHeight = this.el.offsetHeight;
|
|
}
|
|
}, {
|
|
key: "setValue",
|
|
value: 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 (this.props.orientation === 'horizontal') handleValue = (pageX - this.initX) * 100 / this.barWidth;else handleValue = (this.initY + this.barHeight - pageY) * 100 / this.barHeight;
|
|
var newValue = (this.props.max - this.props.min) * (handleValue / 100) + this.props.min;
|
|
|
|
if (this.props.step) {
|
|
var oldValue = this.props.range ? this.value[this.handleIndex] : this.value;
|
|
var diff = newValue - oldValue;
|
|
if (diff < 0) newValue = oldValue + Math.ceil(newValue / this.props.step - oldValue / this.props.step) * this.props.step;else if (diff > 0) newValue = oldValue + Math.floor(newValue / this.props.step - oldValue / this.props.step) * this.props.step;
|
|
} else {
|
|
newValue = Math.floor(newValue);
|
|
}
|
|
|
|
return this.updateValue(event, newValue);
|
|
}
|
|
}, {
|
|
key: "updateValue",
|
|
value: function updateValue(event, value) {
|
|
var parsedValue = parseFloat(value.toFixed(10));
|
|
var newValue = parsedValue;
|
|
|
|
if (this.props.range) {
|
|
if (this.handleIndex === 0) {
|
|
if (parsedValue < this.props.min) parsedValue = this.props.min;else if (parsedValue > this.value[1]) parsedValue = this.value[1];
|
|
} else {
|
|
if (parsedValue > this.props.max) parsedValue = this.props.max;else if (parsedValue < this.value[0]) parsedValue = this.value[0];
|
|
}
|
|
|
|
newValue = _toConsumableArray(this.value);
|
|
newValue[this.handleIndex] = parsedValue;
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue
|
|
});
|
|
}
|
|
} else {
|
|
if (parsedValue < this.props.min) parsedValue = this.props.min;else if (parsedValue > this.props.max) parsedValue = this.props.max;
|
|
newValue = parsedValue;
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue
|
|
});
|
|
}
|
|
}
|
|
|
|
return newValue;
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDragListeners();
|
|
this.unbindTouchListeners();
|
|
}
|
|
}, {
|
|
key: "renderHandle",
|
|
value: function renderHandle(leftValue, bottomValue, index) {
|
|
var _this2 = this;
|
|
|
|
var handleClassName = classNames('p-slider-handle', {
|
|
'p-slider-handle-start': index === 0,
|
|
'p-slider-handle-end': index === 1,
|
|
'p-slider-handle-active': this.handleIndex === index
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
onMouseDown: function onMouseDown(event) {
|
|
return _this2.onMouseDown(event, index);
|
|
},
|
|
onTouchStart: function onTouchStart(event) {
|
|
return _this2.onTouchStart(event, index);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this2.onKeyDown(event, index);
|
|
},
|
|
tabIndex: this.props.tabIndex,
|
|
className: handleClassName,
|
|
style: {
|
|
transition: this.dragging ? 'none' : null,
|
|
left: leftValue !== null && leftValue + '%',
|
|
bottom: bottomValue && bottomValue + '%'
|
|
},
|
|
role: "slider",
|
|
"aria-valuemin": this.props.min,
|
|
"aria-valuemax": this.props.max,
|
|
"aria-valuenow": leftValue || bottomValue,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderRangeSlider",
|
|
value: function renderRangeSlider() {
|
|
var values = this.value;
|
|
var horizontal = this.props.orientation === 'horizontal';
|
|
var handleValueStart = (values[0] < this.props.min ? 0 : values[0] - this.props.min) * 100 / (this.props.max - this.props.min);
|
|
var handleValueEnd = (values[1] > this.props.max ? 100 : values[1] - this.props.min) * 100 / (this.props.max - this.props.min);
|
|
var rangeStartHandle = horizontal ? this.renderHandle(handleValueStart, null, 0) : this.renderHandle(null, handleValueStart, 0);
|
|
var rangeEndHandle = horizontal ? this.renderHandle(handleValueEnd, null, 1) : this.renderHandle(null, handleValueEnd, 1);
|
|
var rangeStyle = horizontal ? {
|
|
left: handleValueStart + '%',
|
|
width: handleValueEnd - handleValueStart + '%'
|
|
} : {
|
|
bottom: handleValueStart + '%',
|
|
height: handleValueEnd - handleValueStart + '%'
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-slider-range",
|
|
style: rangeStyle
|
|
}), rangeStartHandle, rangeEndHandle);
|
|
}
|
|
}, {
|
|
key: "renderSingleSlider",
|
|
value: function renderSingleSlider() {
|
|
var value = this.value;
|
|
var handleValue;
|
|
if (value < this.props.min) handleValue = 0;else if (value > this.props.max) handleValue = 100;else handleValue = (value - this.props.min) * 100 / (this.props.max - this.props.min);
|
|
var rangeStyle = this.props.orientation === 'horizontal' ? {
|
|
width: handleValue + '%'
|
|
} : {
|
|
height: handleValue + '%'
|
|
};
|
|
var handle = this.props.orientation === 'horizontal' ? this.renderHandle(handleValue, null, null) : this.renderHandle(null, handleValue, null);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-slider-range",
|
|
style: rangeStyle
|
|
}), handle);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var className = classNames('p-slider p-component', this.props.className, {
|
|
'p-disabled': this.props.disabled,
|
|
'p-slider-horizontal': this.props.orientation === 'horizontal',
|
|
'p-slider-vertical': this.props.orientation === 'vertical'
|
|
});
|
|
var content = this.props.range ? this.renderRangeSlider() : this.renderSingleSlider();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this3.el = el;
|
|
},
|
|
style: this.props.style,
|
|
className: className,
|
|
onClick: this.onBarClick
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return Slider;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Slider, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
min: 0,
|
|
max: 100,
|
|
orientation: 'horizontal',
|
|
step: null,
|
|
range: false,
|
|
style: null,
|
|
className: null,
|
|
disabled: false,
|
|
tabIndex: 0,
|
|
ariaLabelledBy: null,
|
|
onChange: null,
|
|
onSlideEnd: null
|
|
});
|
|
|
|
function _createSuper$w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$w(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SplitButtonItem = /*#__PURE__*/function (_Component) {
|
|
_inherits(SplitButtonItem, _Component);
|
|
|
|
var _super = _createSuper$w(SplitButtonItem);
|
|
|
|
function SplitButtonItem(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SplitButtonItem);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SplitButtonItem, [{
|
|
key: "onClick",
|
|
value: function onClick(e) {
|
|
if (this.props.menuitem.command) {
|
|
this.props.menuitem.command({
|
|
originalEvent: e,
|
|
item: this.props.menuitem
|
|
});
|
|
}
|
|
|
|
if (this.props.onItemClick) {
|
|
this.props.onItemClick(e);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator() {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem() {
|
|
var _this2 = this;
|
|
|
|
var _this$props$menuitem = this.props.menuitem,
|
|
disabled = _this$props$menuitem.disabled,
|
|
icon = _this$props$menuitem.icon,
|
|
label = _this$props$menuitem.label,
|
|
template = _this$props$menuitem.template,
|
|
url = _this$props$menuitem.url,
|
|
target = _this$props$menuitem.target;
|
|
var className = classNames('p-menuitem-link', {
|
|
'p-disabled': disabled
|
|
});
|
|
var iconClassName = classNames('p-menuitem-icon', icon);
|
|
icon = icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
label = label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, label);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: url || '#',
|
|
role: "menuitem",
|
|
className: className,
|
|
target: target,
|
|
onClick: this.onClick
|
|
}, icon, label);
|
|
|
|
if (template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.onClick(event);
|
|
},
|
|
className: className,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(template, this.props.menuitem, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-menuitem",
|
|
role: "none"
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem() {
|
|
if (this.props.menuitem.separator) {
|
|
return this.renderSeparator();
|
|
}
|
|
|
|
return this.renderMenuitem();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var item = this.renderItem();
|
|
return item;
|
|
}
|
|
}]);
|
|
|
|
return SplitButtonItem;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SplitButtonItem, "defaultProps", {
|
|
menuitem: null,
|
|
onItemClick: null
|
|
});
|
|
|
|
function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var SplitButtonPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(SplitButtonPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$v(SplitButtonPanelComponent);
|
|
|
|
function SplitButtonPanelComponent() {
|
|
_classCallCheck(this, SplitButtonPanelComponent);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(SplitButtonPanelComponent, [{
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-menu p-menu-overlay p-component', this.props.menuClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.props.onEnter,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
style: this.props.menuStyle,
|
|
id: this.props.id,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-menu-list p-reset",
|
|
role: "menu"
|
|
}, this.props.children)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return SplitButtonPanelComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SplitButtonPanelComponent, "defaultProps", {
|
|
appendTo: null,
|
|
menuStyle: null,
|
|
menuClassName: null,
|
|
id: null,
|
|
onClick: null
|
|
});
|
|
|
|
var SplitButtonPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(SplitButtonPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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 _createSuper$u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$u(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SplitButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(SplitButton, _Component);
|
|
|
|
var _super = _createSuper$u(SplitButton);
|
|
|
|
function SplitButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SplitButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
id: props.id,
|
|
overlayVisible: false
|
|
};
|
|
_this.onDropdownButtonClick = _this.onDropdownButtonClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SplitButton, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDropdownButtonClick",
|
|
value: function onDropdownButtonClick() {
|
|
if (this.state.overlayVisible) this.hide();else this.show();
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: function onItemClick() {
|
|
this.hide();
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.defaultButton.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.state.overlayVisible && _this2.isOutsideClicked(event)) {
|
|
_this2.hide();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this3.state.overlayVisible) {
|
|
_this3.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && this.overlayRef && this.overlayRef.current && !this.overlayRef.current.contains(event.target);
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$c({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this5 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (menuitem, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement(SplitButtonItem, {
|
|
menuitem: menuitem,
|
|
key: index,
|
|
onItemClick: _this5.onItemClick
|
|
});
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames('p-splitbutton p-component', this.props.className, {
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var buttonClassName = classNames('p-splitbutton-defaultbutton', this.props.buttonClassName);
|
|
var menuButtonClassName = classNames('p-splitbutton-menubutton', this.props.menuButtonClassName);
|
|
var items = this.renderItems();
|
|
var buttonContent = this.props.buttonTemplate ? ObjectUtils.getJSXElement(this.props.buttonTemplate, this.props) : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.state.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
ref: function ref(el) {
|
|
return _this6.container = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
ref: function ref(el) {
|
|
return _this6.defaultButton = el;
|
|
},
|
|
type: "button",
|
|
className: buttonClassName,
|
|
icon: this.props.icon,
|
|
label: this.props.label,
|
|
onClick: this.props.onClick,
|
|
disabled: this.props.disabled,
|
|
tabIndex: this.props.tabIndex
|
|
}, buttonContent), /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
className: menuButtonClassName,
|
|
icon: this.props.dropdownIcon,
|
|
onClick: this.onDropdownButtonClick,
|
|
disabled: this.props.disabled,
|
|
"aria-expanded": this.state.overlayVisible,
|
|
"aria-haspopup": true,
|
|
"aria-owns": this.state.id + '_overlay'
|
|
}), /*#__PURE__*/React__default["default"].createElement(SplitButtonPanel, {
|
|
ref: this.overlayRef,
|
|
appendTo: this.props.appendTo,
|
|
id: this.state.id + '_overlay',
|
|
menuStyle: this.props.menuStyle,
|
|
menuClassName: this.props.menuClassName,
|
|
onClick: this.onPanelClick,
|
|
"in": this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited,
|
|
transitionOptions: this.props.transitionOptions
|
|
}, items));
|
|
}
|
|
}]);
|
|
|
|
return SplitButton;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SplitButton, "defaultProps", {
|
|
id: null,
|
|
label: null,
|
|
icon: null,
|
|
model: null,
|
|
disabled: null,
|
|
style: null,
|
|
className: null,
|
|
buttonClassName: null,
|
|
menuStyle: null,
|
|
menuClassName: null,
|
|
menuButtonClassName: null,
|
|
tabIndex: null,
|
|
appendTo: null,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
buttonTemplate: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
onClick: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$t(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SplitterPanel = /*#__PURE__*/function (_Component) {
|
|
_inherits(SplitterPanel, _Component);
|
|
|
|
var _super = _createSuper$t(SplitterPanel);
|
|
|
|
function SplitterPanel() {
|
|
_classCallCheck(this, SplitterPanel);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
return _createClass(SplitterPanel);
|
|
}(React.Component);
|
|
|
|
_defineProperty(SplitterPanel, "defaultProps", {
|
|
size: null,
|
|
minSize: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
var Splitter = /*#__PURE__*/function (_Component2) {
|
|
_inherits(Splitter, _Component2);
|
|
|
|
var _super2 = _createSuper$t(Splitter);
|
|
|
|
function Splitter() {
|
|
_classCallCheck(this, Splitter);
|
|
|
|
return _super2.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Splitter, [{
|
|
key: "bindMouseListeners",
|
|
value: function bindMouseListeners() {
|
|
var _this = this;
|
|
|
|
if (!this.mouseMoveListener) {
|
|
this.mouseMoveListener = function (event) {
|
|
return _this.onResize(event);
|
|
};
|
|
|
|
document.addEventListener('mousemove', this.mouseMoveListener);
|
|
}
|
|
|
|
if (!this.mouseUpListener) {
|
|
this.mouseUpListener = function (event) {
|
|
_this.onResizeEnd(event);
|
|
|
|
_this.unbindMouseListeners();
|
|
};
|
|
|
|
document.addEventListener('mouseup', this.mouseUpListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "validateResize",
|
|
value: function validateResize(newPrevPanelSize, newNextPanelSize) {
|
|
if (this.props.children[this.prevPanelIndex].props && this.props.children[this.prevPanelIndex].props.minSize && this.props.children[this.prevPanelIndex].props.minSize > newPrevPanelSize) {
|
|
return false;
|
|
}
|
|
|
|
if (this.props.children[this.prevPanelIndex + 1].props && this.props.children[this.prevPanelIndex + 1].props.minSize && this.props.children[this.prevPanelIndex + 1].props.minSize > newNextPanelSize) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "unbindMouseListeners",
|
|
value: function unbindMouseListeners() {
|
|
if (this.mouseMoveListener) {
|
|
document.removeEventListener('mousemove', this.mouseMoveListener);
|
|
this.mouseMoveListener = null;
|
|
}
|
|
|
|
if (this.mouseUpListener) {
|
|
document.removeEventListener('mouseup', this.mouseUpListener);
|
|
this.mouseUpListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
this.dragging = false;
|
|
this.size = null;
|
|
this.startPos = null;
|
|
this.prevPanelElement = null;
|
|
this.nextPanelElement = null;
|
|
this.prevPanelSize = null;
|
|
this.nextPanelSize = null;
|
|
this.gutterElement = null;
|
|
this.prevPanelIndex = null;
|
|
}
|
|
}, {
|
|
key: "isStateful",
|
|
value: function isStateful() {
|
|
return this.props.stateKey != null;
|
|
}
|
|
}, {
|
|
key: "getStorage",
|
|
value: function getStorage() {
|
|
switch (this.props.stateStorage) {
|
|
case 'local':
|
|
return window.localStorage;
|
|
|
|
case 'session':
|
|
return window.sessionStorage;
|
|
|
|
default:
|
|
throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
|
|
}
|
|
}
|
|
}, {
|
|
key: "saveState",
|
|
value: function saveState() {
|
|
this.getStorage().setItem(this.props.stateKey, JSON.stringify(this.panelSizes));
|
|
}
|
|
}, {
|
|
key: "restoreState",
|
|
value: function restoreState() {
|
|
var _this2 = this;
|
|
|
|
var storage = this.getStorage();
|
|
var stateString = storage.getItem(this.props.stateKey);
|
|
|
|
if (stateString) {
|
|
this.panelSizes = JSON.parse(stateString);
|
|
|
|
var children = _toConsumableArray(this.container.children).filter(function (child) {
|
|
return DomHandler.hasClass(child, 'p-splitter-panel');
|
|
});
|
|
|
|
children.forEach(function (child, i) {
|
|
child.style.flexBasis = 'calc(' + _this2.panelSizes[i] + '% - ' + (_this2.props.children.length - 1) * _this2.props.gutterSize + 'px)';
|
|
});
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "onResizeStart",
|
|
value: function onResizeStart(event, index) {
|
|
var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
|
|
var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
|
|
this.gutterElement = event.currentTarget;
|
|
this.size = this.props.layout === 'horizontal' ? DomHandler.getWidth(this.container) : DomHandler.getHeight(this.container);
|
|
this.dragging = true;
|
|
this.startPos = this.props.layout === 'horizontal' ? pageX : pageY;
|
|
this.prevPanelElement = this.gutterElement.previousElementSibling;
|
|
this.nextPanelElement = this.gutterElement.nextElementSibling;
|
|
this.prevPanelSize = 100 * (this.props.layout === 'horizontal' ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
|
|
this.nextPanelSize = 100 * (this.props.layout === 'horizontal' ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size;
|
|
this.prevPanelIndex = index;
|
|
DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
|
|
DomHandler.addClass(this.container, 'p-splitter-resizing');
|
|
}
|
|
}, {
|
|
key: "onResize",
|
|
value: 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 (this.props.layout === 'horizontal') newPos = pageX * 100 / this.size - this.startPos * 100 / this.size;else newPos = pageY * 100 / this.size - this.startPos * 100 / this.size;
|
|
var newPrevPanelSize = this.prevPanelSize + newPos;
|
|
var newNextPanelSize = this.nextPanelSize - newPos;
|
|
|
|
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
|
|
this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (this.props.children.length - 1) * this.props.gutterSize + 'px)';
|
|
this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (this.props.children.length - 1) * this.props.gutterSize + 'px)';
|
|
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
|
|
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onResizeEnd",
|
|
value: function onResizeEnd(event) {
|
|
if (this.isStateful()) {
|
|
this.saveState();
|
|
}
|
|
|
|
if (this.props.onResizeEnd) {
|
|
this.props.onResizeEnd({
|
|
originalEvent: event,
|
|
sizes: this.panelSizes
|
|
});
|
|
}
|
|
|
|
DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
|
|
DomHandler.removeClass(this.container, 'p-splitter-resizing');
|
|
this.clear();
|
|
}
|
|
}, {
|
|
key: "onGutterMouseDown",
|
|
value: function onGutterMouseDown(event, index) {
|
|
this.onResizeStart(event, index);
|
|
this.bindMouseListeners();
|
|
}
|
|
}, {
|
|
key: "onGutterTouchStart",
|
|
value: function onGutterTouchStart(event, index) {
|
|
this.onResizeStart(event, index);
|
|
this.windowTouchMoveListener = this.onGutterTouchMove.bind(this);
|
|
this.windowTouchEndListener = this.onGutterTouchEnd.bind(this);
|
|
window.addEventListener('touchmove', this.windowTouchMoveListener, {
|
|
passive: false,
|
|
cancelable: false
|
|
});
|
|
window.addEventListener('touchend', this.windowTouchEndListener);
|
|
}
|
|
}, {
|
|
key: "onGutterTouchMove",
|
|
value: function onGutterTouchMove(event) {
|
|
this.onResize(event);
|
|
}
|
|
}, {
|
|
key: "onGutterTouchEnd",
|
|
value: function onGutterTouchEnd(event) {
|
|
this.onResizeEnd(event);
|
|
window.removeEventListener('touchmove', this.windowTouchMoveListener);
|
|
window.removeEventListener('touchend', this.windowTouchEndListener);
|
|
this.windowTouchMoveListener = null;
|
|
this.windowTouchEndListener = null;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this3 = this;
|
|
|
|
if (this.panelElement) {
|
|
if (this.panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(this.panelElement, '.p-splitter'))) {
|
|
DomHandler.addClass(this.panelElement, 'p-splitter-panel-nested');
|
|
}
|
|
}
|
|
|
|
if (this.props.children && this.props.children.length) {
|
|
var initialized = false;
|
|
|
|
if (this.isStateful()) {
|
|
initialized = this.restoreState();
|
|
}
|
|
|
|
if (!initialized) {
|
|
var children = _toConsumableArray(this.container.children).filter(function (child) {
|
|
return DomHandler.hasClass(child, 'p-splitter-panel');
|
|
});
|
|
|
|
var _panelSizes = [];
|
|
this.props.children.map(function (panel, i) {
|
|
var panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
|
|
var panelSize = panelInitialSize || 100 / _this3.props.children.length;
|
|
_panelSizes[i] = panelSize;
|
|
children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (_this3.props.children.length - 1) * _this3.props.gutterSize + 'px)';
|
|
return _panelSizes;
|
|
});
|
|
this.panelSizes = _panelSizes;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderPanel",
|
|
value: function renderPanel(panel, index) {
|
|
var _this4 = this;
|
|
|
|
var panelClassName = classNames('p-splitter-panel', panel.props.className);
|
|
var gutterStyle = this.props.layout === 'horizontal' ? {
|
|
width: this.props.gutterSize + 'px'
|
|
} : {
|
|
height: this.props.gutterSize + 'px'
|
|
};
|
|
var gutter = index !== this.props.children.length - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.gutterElement = el;
|
|
},
|
|
className: 'p-splitter-gutter',
|
|
style: gutterStyle,
|
|
onMouseDown: function onMouseDown(event) {
|
|
return _this4.onGutterMouseDown(event, index);
|
|
},
|
|
onTouchStart: function onTouchStart(event) {
|
|
return _this4.onGutterTouchStart(event, index);
|
|
},
|
|
onTouchMove: function onTouchMove(event) {
|
|
return _this4.onGutterTouchMove(event);
|
|
},
|
|
onTouchEnd: function onTouchEnd(event) {
|
|
return _this4.onGutterTouchEnd(event);
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-splitter-gutter-handle"
|
|
}));
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.panelElement = el;
|
|
},
|
|
key: index,
|
|
className: panelClassName,
|
|
style: panel.props.style
|
|
}, panel.props.children), gutter);
|
|
}
|
|
}, {
|
|
key: "renderPanels",
|
|
value: function renderPanels() {
|
|
var _this5 = this;
|
|
|
|
return React__default["default"].Children.map(this.props.children, function (panel, index) {
|
|
return _this5.renderPanel(panel, index);
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames("p-splitter p-component p-splitter-".concat(this.props.layout), this.props.className);
|
|
var panels = this.renderPanels();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, panels);
|
|
}
|
|
}]);
|
|
|
|
return Splitter;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Splitter, "defaultProps", {
|
|
id: null,
|
|
className: null,
|
|
style: null,
|
|
layout: 'horizontal',
|
|
gutterSize: 4,
|
|
stateKey: null,
|
|
stateStorage: 'session',
|
|
onResizeEnd: null
|
|
});
|
|
|
|
function _createSuper$s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$s(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Steps = /*#__PURE__*/function (_Component) {
|
|
_inherits(Steps, _Component);
|
|
|
|
var _super = _createSuper$s(Steps);
|
|
|
|
function Steps() {
|
|
_classCallCheck(this, Steps);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Steps, [{
|
|
key: "itemClick",
|
|
value: function itemClick(event, item, index) {
|
|
if (this.props.readOnly || item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
item: item,
|
|
index: index
|
|
});
|
|
}
|
|
|
|
if (!item.url) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: event,
|
|
item: item,
|
|
index: index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
var _this = this;
|
|
|
|
var active = index === this.props.activeIndex;
|
|
var disabled = item.disabled || index !== this.props.activeIndex && this.props.readOnly;
|
|
var className = classNames('p-steps-item', item.className, {
|
|
'p-highlight p-steps-current': active,
|
|
'p-disabled': disabled
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-steps-title"
|
|
}, item.label);
|
|
var tabIndex = disabled ? -1 : '';
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: "p-menuitem-link",
|
|
role: "presentation",
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this.itemClick(event, item, index);
|
|
},
|
|
tabIndex: tabIndex,
|
|
"aria-disabled": disabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-steps-number"
|
|
}, index + 1), label);
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this.itemClick(event, item, index);
|
|
},
|
|
className: 'p-menuitem-link',
|
|
labelClassName: 'p-steps-title',
|
|
numberClassName: 'p-steps-number',
|
|
element: content,
|
|
props: this.props,
|
|
tabIndex: tabIndex,
|
|
active: active,
|
|
disabled: disabled
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
role: "tab",
|
|
"aria-selected": active,
|
|
"aria-expanded": active
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.model) {
|
|
var items = this.props.model.map(function (item, index) {
|
|
return _this2.renderItem(item, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
role: "tablist"
|
|
}, items);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-steps p-component', this.props.className, {
|
|
'p-readonly': this.props.readOnly
|
|
});
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, items);
|
|
}
|
|
}]);
|
|
|
|
return Steps;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Steps, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
activeIndex: 0,
|
|
readOnly: true,
|
|
style: null,
|
|
className: null,
|
|
onSelect: null
|
|
});
|
|
|
|
function _createSuper$r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$r(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TabMenu = /*#__PURE__*/function (_Component) {
|
|
_inherits(TabMenu, _Component);
|
|
|
|
var _super = _createSuper$r(TabMenu);
|
|
|
|
function TabMenu(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TabMenu);
|
|
|
|
_this = _super.call(this, props);
|
|
|
|
if (!_this.props.onTabChange) {
|
|
_this.state = {
|
|
activeIndex: props.activeIndex
|
|
};
|
|
}
|
|
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TabMenu, [{
|
|
key: "itemClick",
|
|
value: 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 (this.props.onTabChange) {
|
|
this.props.onTabChange({
|
|
originalEvent: event,
|
|
value: item,
|
|
index: index
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeIndex: index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "getActiveIndex",
|
|
value: function getActiveIndex() {
|
|
return this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(index) {
|
|
return index === (this.getActiveIndex() || 0);
|
|
}
|
|
}, {
|
|
key: "updateInkBar",
|
|
value: function updateInkBar() {
|
|
var activeIndex = this.getActiveIndex();
|
|
var tabHeader = this["tab_".concat(activeIndex)];
|
|
this.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
|
this.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.nav).left + 'px';
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInkBar();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
this.updateInkBar();
|
|
}
|
|
}, {
|
|
key: "renderMenuItem",
|
|
value: function renderMenuItem(item, index) {
|
|
var _this2 = this;
|
|
|
|
var active = this.isSelected(index);
|
|
var className = classNames('p-tabmenuitem', {
|
|
'p-highlight': active,
|
|
'p-disabled': item.disabled
|
|
}, item.className);
|
|
var iconClassName = classNames('p-menuitem-icon', item.icon);
|
|
var icon = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: "p-menuitem-link",
|
|
target: item.target,
|
|
onClick: function onClick(event) {
|
|
return _this2.itemClick(event, item, index);
|
|
},
|
|
role: "presentation"
|
|
}, icon, label, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this2.itemClick(event, item);
|
|
},
|
|
className: 'p-menuitem-link',
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
active: active,
|
|
index: index
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
ref: function ref(el) {
|
|
return _this2["tab_".concat(index)] = el;
|
|
},
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
role: "tab",
|
|
"aria-selected": active,
|
|
"aria-expanded": active,
|
|
"aria-disabled": item.disabled
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this3 = this;
|
|
|
|
return this.props.model.map(function (item, index) {
|
|
return _this3.renderMenuItem(item, index);
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.model) {
|
|
var className = classNames('p-tabmenu p-component', this.props.className);
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this4.nav = el;
|
|
},
|
|
className: "p-tabmenu-nav p-reset",
|
|
role: "tablist"
|
|
}, items, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
ref: function ref(el) {
|
|
return _this4.inkbar = el;
|
|
},
|
|
className: "p-tabmenu-ink-bar"
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return TabMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TabMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
activeIndex: 0,
|
|
style: null,
|
|
className: null,
|
|
onTabChange: null
|
|
});
|
|
|
|
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 _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TabPanel = /*#__PURE__*/function (_Component) {
|
|
_inherits(TabPanel, _Component);
|
|
|
|
var _super = _createSuper$q(TabPanel);
|
|
|
|
function TabPanel() {
|
|
_classCallCheck(this, TabPanel);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
return _createClass(TabPanel);
|
|
}(React.Component);
|
|
|
|
_defineProperty(TabPanel, "defaultProps", {
|
|
header: null,
|
|
headerTemplate: null,
|
|
leftIcon: null,
|
|
rightIcon: null,
|
|
closable: false,
|
|
disabled: false,
|
|
style: null,
|
|
className: null,
|
|
headerStyle: null,
|
|
headerClassName: null,
|
|
contentStyle: null,
|
|
contentClassName: null
|
|
});
|
|
|
|
var TabView = /*#__PURE__*/function (_Component2) {
|
|
_inherits(TabView, _Component2);
|
|
|
|
var _super2 = _createSuper$q(TabView);
|
|
|
|
function TabView(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TabView);
|
|
|
|
_this = _super2.call(this, props);
|
|
var state = {
|
|
id: props.id,
|
|
backwardIsDisabled: true,
|
|
forwardIsDisabled: false,
|
|
hiddenTabs: []
|
|
};
|
|
|
|
if (!_this.props.onTabChange) {
|
|
state = _objectSpread$b(_objectSpread$b({}, state), {}, {
|
|
activeIndex: props.activeIndex
|
|
});
|
|
}
|
|
|
|
_this.state = state;
|
|
_this.navBackward = _this.navBackward.bind(_assertThisInitialized(_this));
|
|
_this.navForward = _this.navForward.bind(_assertThisInitialized(_this));
|
|
_this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TabView, [{
|
|
key: "getActiveIndex",
|
|
value: function getActiveIndex() {
|
|
return this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(index) {
|
|
return index === this.getActiveIndex();
|
|
}
|
|
}, {
|
|
key: "shouldTabRender",
|
|
value: function shouldTabRender(tab, index) {
|
|
return tab && tab.type === TabPanel && this.state.hiddenTabs.every(function (_i) {
|
|
return _i !== index;
|
|
});
|
|
}
|
|
}, {
|
|
key: "findVisibleActiveTab",
|
|
value: function findVisibleActiveTab(i) {
|
|
var _this2 = this;
|
|
|
|
var tabsInfo = React__default["default"].Children.map(this.props.children, function (tab, index) {
|
|
if (_this2.shouldTabRender(tab, index)) {
|
|
return {
|
|
tab: tab,
|
|
index: index
|
|
};
|
|
}
|
|
});
|
|
return tabsInfo.find(function (_ref) {
|
|
var tab = _ref.tab,
|
|
index = _ref.index;
|
|
return !tab.props.disabled && index >= i;
|
|
}) || tabsInfo.reverse().find(function (_ref2) {
|
|
var tab = _ref2.tab,
|
|
index = _ref2.index;
|
|
return !tab.props.disabled && i > index;
|
|
});
|
|
}
|
|
}, {
|
|
key: "onTabHeaderClose",
|
|
value: function onTabHeaderClose(event, index) {
|
|
var _this3 = this;
|
|
|
|
var hiddenTabs = [].concat(_toConsumableArray(this.state.hiddenTabs), [index]);
|
|
this.setState({
|
|
hiddenTabs: hiddenTabs
|
|
}, function () {
|
|
var tabInfo = _this3.findVisibleActiveTab(index);
|
|
|
|
tabInfo && _this3.onTabHeaderClick(event, tabInfo.tab, tabInfo.index);
|
|
});
|
|
|
|
if (this.props.onTabClose) {
|
|
this.props.onTabClose({
|
|
originalEvent: event,
|
|
index: index
|
|
});
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onTabHeaderClick",
|
|
value: function onTabHeaderClick(event, tab, index) {
|
|
if (!tab.props.disabled) {
|
|
if (this.props.onTabChange) {
|
|
this.props.onTabChange({
|
|
originalEvent: event,
|
|
index: index
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeIndex: index
|
|
});
|
|
}
|
|
}
|
|
|
|
this.updateScrollBar(index);
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event, tab, index) {
|
|
if (event.code === 'Enter') {
|
|
this.onTabHeaderClick(event, tab, index);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateInkBar",
|
|
value: function updateInkBar() {
|
|
var activeIndex = this.getActiveIndex();
|
|
var tabHeader = this["tab_".concat(activeIndex)];
|
|
this.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
|
this.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.nav).left + 'px';
|
|
}
|
|
}, {
|
|
key: "updateScrollBar",
|
|
value: function updateScrollBar(index) {
|
|
var tabHeader = this["tab_".concat(index)];
|
|
|
|
if (tabHeader) {
|
|
tabHeader.scrollIntoView({
|
|
block: 'nearest'
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateButtonState",
|
|
value: function updateButtonState() {
|
|
var content = this.content;
|
|
var scrollLeft = content.scrollLeft,
|
|
scrollWidth = content.scrollWidth;
|
|
var width = DomHandler.getWidth(content);
|
|
this.setState({
|
|
backwardIsDisabled: scrollLeft === 0
|
|
});
|
|
this.setState({
|
|
forwardIsDisabled: scrollLeft === scrollWidth - width
|
|
});
|
|
}
|
|
}, {
|
|
key: "onScroll",
|
|
value: function onScroll(event) {
|
|
this.props.scrollable && this.updateButtonState();
|
|
event.preventDefault();
|
|
}
|
|
}, {
|
|
key: "getVisibleButtonWidths",
|
|
value: function getVisibleButtonWidths() {
|
|
var prevBtn = this.prevBtn;
|
|
var nextBtn = this.nextBtn;
|
|
return [prevBtn, nextBtn].reduce(function (acc, el) {
|
|
return el ? acc + DomHandler.getWidth(el) : acc;
|
|
}, 0);
|
|
}
|
|
}, {
|
|
key: "navBackward",
|
|
value: function navBackward() {
|
|
var content = this.content;
|
|
var width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
|
|
var pos = content.scrollLeft - width;
|
|
content.scrollLeft = pos <= 0 ? 0 : pos;
|
|
}
|
|
}, {
|
|
key: "navForward",
|
|
value: function navForward() {
|
|
var content = this.content;
|
|
var width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
|
|
var pos = content.scrollLeft + width;
|
|
var lastPos = content.scrollWidth - width;
|
|
content.scrollLeft = pos >= lastPos ? lastPos : pos;
|
|
}
|
|
}, {
|
|
key: "reset",
|
|
value: function reset() {
|
|
var state = {
|
|
backwardIsDisabled: true,
|
|
forwardIsDisabled: false,
|
|
hiddenTabs: []
|
|
};
|
|
|
|
if (this.props.onTabChange) {
|
|
this.props.onTabChange({
|
|
index: this.props.activeIndex
|
|
});
|
|
} else {
|
|
state = _objectSpread$b(_objectSpread$b({}, state), {}, {
|
|
activeIndex: this.props.activeIndex
|
|
});
|
|
}
|
|
|
|
this.setState(state);
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (!this.state.id) {
|
|
this.setState({
|
|
id: UniqueComponentId()
|
|
});
|
|
}
|
|
|
|
this.updateInkBar();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
this.updateInkBar();
|
|
|
|
if (prevProps.activeIndex !== this.props.activeIndex) {
|
|
this.updateScrollBar(this.props.activeIndex);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTabHeader",
|
|
value: function renderTabHeader(tab, index) {
|
|
var _this4 = this;
|
|
|
|
var selected = this.isSelected(index);
|
|
|
|
var style = _objectSpread$b(_objectSpread$b({}, tab.props.headerStyle || {}), tab.props.style || {});
|
|
|
|
var className = classNames('p-unselectable-text', {
|
|
'p-tabview-selected p-highlight': selected,
|
|
'p-disabled': tab.props.disabled
|
|
}, tab.props.headerClassName, tab.props.className);
|
|
var id = this.state.id + '_header_' + index;
|
|
var ariaControls = this.state.id + '_content_' + index;
|
|
var tabIndex = tab.props.disabled ? null : 0;
|
|
var leftIconElement = tab.props.leftIcon && /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: tab.props.leftIcon
|
|
});
|
|
var titleElement = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-tabview-title"
|
|
}, tab.props.header);
|
|
var rightIconElement = tab.props.rightIcon && /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: tab.props.rightIcon
|
|
});
|
|
var closableIconElement = tab.props.closable && /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-tabview-close pi pi-times",
|
|
onClick: function onClick(e) {
|
|
return _this4.onTabHeaderClose(e, index);
|
|
}
|
|
});
|
|
var content =
|
|
/*#__PURE__*/
|
|
|
|
/* eslint-disable */
|
|
React__default["default"].createElement("a", {
|
|
role: "tab",
|
|
className: "p-tabview-nav-link",
|
|
onClick: function onClick(event) {
|
|
return _this4.onTabHeaderClick(event, tab, index);
|
|
},
|
|
id: id,
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this4.onKeyDown(event, tab, index);
|
|
},
|
|
"aria-controls": ariaControls,
|
|
"aria-selected": selected,
|
|
tabIndex: tabIndex
|
|
}, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React__default["default"].createElement(Ripple, null))
|
|
/* eslint-enable */
|
|
;
|
|
|
|
if (tab.props.headerTemplate) {
|
|
var defaultContentOptions = {
|
|
className: 'p-tabview-nav-link',
|
|
titleClassName: 'p-tabview-title',
|
|
onClick: function onClick(event) {
|
|
return _this4.onTabHeaderClick(event, tab, index);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this4.onKeyDown(event, tab, index);
|
|
},
|
|
leftIconElement: leftIconElement,
|
|
titleElement: titleElement,
|
|
rightIconElement: rightIconElement,
|
|
element: content,
|
|
props: this.props,
|
|
index: index,
|
|
selected: selected,
|
|
ariaControls: ariaControls
|
|
};
|
|
content = ObjectUtils.getJSXElement(tab.props.headerTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
ref: function ref(el) {
|
|
return _this4["tab_".concat(index)] = el;
|
|
},
|
|
className: className,
|
|
style: style,
|
|
role: "presentation"
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderTabHeaders",
|
|
value: function renderTabHeaders() {
|
|
var _this5 = this;
|
|
|
|
return React__default["default"].Children.map(this.props.children, function (tab, index) {
|
|
if (_this5.shouldTabRender(tab, index)) {
|
|
return _this5.renderTabHeader(tab, index);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderNavigator",
|
|
value: function renderNavigator() {
|
|
var _this6 = this;
|
|
|
|
var headers = this.renderTabHeaders();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.content = el;
|
|
},
|
|
id: this.props.id,
|
|
className: "p-tabview-nav-content",
|
|
style: this.props.style,
|
|
onScroll: this.onScroll
|
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this6.nav = el;
|
|
},
|
|
className: "p-tabview-nav",
|
|
role: "tablist"
|
|
}, headers, /*#__PURE__*/React__default["default"].createElement("li", {
|
|
ref: function ref(el) {
|
|
return _this6.inkbar = el;
|
|
},
|
|
className: "p-tabview-ink-bar"
|
|
})));
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this7 = this;
|
|
|
|
var contents = React__default["default"].Children.map(this.props.children, function (tab, index) {
|
|
if (_this7.shouldTabRender(tab, index) && (!_this7.props.renderActiveOnly || _this7.isSelected(index))) {
|
|
return _this7.createContent(tab, index);
|
|
}
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tabview-panels"
|
|
}, contents);
|
|
}
|
|
}, {
|
|
key: "createContent",
|
|
value: function createContent(tab, index) {
|
|
var selected = this.isSelected(index);
|
|
|
|
var style = _objectSpread$b(_objectSpread$b({}, tab.props.contentStyle || {}), tab.props.style || {});
|
|
|
|
var className = classNames(tab.props.contentClassName, tab.props.className, 'p-tabview-panel', {
|
|
'p-hidden': !selected
|
|
});
|
|
var id = this.state.id + '_content_' + index;
|
|
var ariaLabelledBy = this.state.id + '_header_' + index;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: id,
|
|
"aria-labelledby": ariaLabelledBy,
|
|
"aria-hidden": !selected,
|
|
className: className,
|
|
style: style,
|
|
role: "tabpanel"
|
|
}, !this.props.renderActiveOnly ? tab.props.children : selected && tab.props.children);
|
|
}
|
|
}, {
|
|
key: "renderPrevButton",
|
|
value: function renderPrevButton() {
|
|
var _this8 = this;
|
|
|
|
if (this.props.scrollable && !this.state.backwardIsDisabled) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
ref: function ref(el) {
|
|
return _this8.prevBtn = el;
|
|
},
|
|
className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
|
|
onClick: this.navBackward,
|
|
type: "button"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-left"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderNextButton",
|
|
value: function renderNextButton() {
|
|
var _this9 = this;
|
|
|
|
if (this.props.scrollable && !this.state.forwardIsDisabled) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
ref: function ref(el) {
|
|
return _this9.nextBtn = el;
|
|
},
|
|
className: "p-tabview-nav-next p-tabview-nav-btn p-link",
|
|
onClick: this.navForward,
|
|
type: "button"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "pi pi-chevron-right"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-tabview p-component', this.props.className, {
|
|
'p-tabview-scrollable': this.props.scrollable
|
|
});
|
|
var navigator = this.renderNavigator();
|
|
var content = this.renderContent();
|
|
var prevButton = this.renderPrevButton();
|
|
var nextButton = this.renderNextButton();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tabview-nav-container"
|
|
}, prevButton, navigator, nextButton), content);
|
|
}
|
|
}]);
|
|
|
|
return TabView;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TabView, "defaultProps", {
|
|
id: null,
|
|
activeIndex: 0,
|
|
style: null,
|
|
className: null,
|
|
renderActiveOnly: true,
|
|
onTabChange: null,
|
|
onTabClose: null,
|
|
scrollable: false
|
|
});
|
|
|
|
function _createSuper$p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$p(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Tag = /*#__PURE__*/function (_Component) {
|
|
_inherits(Tag, _Component);
|
|
|
|
var _super = _createSuper$p(Tag);
|
|
|
|
function Tag() {
|
|
_classCallCheck(this, Tag);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Tag, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var tagClassName = classNames('p-tag p-component', {
|
|
'p-tag-info': this.props.severity === 'info',
|
|
'p-tag-success': this.props.severity === 'success',
|
|
'p-tag-warning': this.props.severity === 'warning',
|
|
'p-tag-danger': this.props.severity === 'danger',
|
|
'p-tag-rounded': this.props.rounded
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: tagClassName,
|
|
style: this.props.style
|
|
}, IconUtils.getJSXIcon(this.props.icon, {
|
|
className: 'p-tag-icon'
|
|
}, {
|
|
props: this.props
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-tag-value"
|
|
}, this.props.value), /*#__PURE__*/React__default["default"].createElement("span", null, this.props.children));
|
|
}
|
|
}]);
|
|
|
|
return Tag;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Tag, "defaultProps", {
|
|
value: null,
|
|
severity: null,
|
|
rounded: false,
|
|
icon: null,
|
|
style: null,
|
|
className: null
|
|
});
|
|
|
|
function _createSuper$o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$o(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TieredMenuSub = /*#__PURE__*/function (_Component) {
|
|
_inherits(TieredMenuSub, _Component);
|
|
|
|
var _super = _createSuper$o(TieredMenuSub);
|
|
|
|
function TieredMenuSub(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TieredMenuSub);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
activeItem: null
|
|
};
|
|
_this.onLeafClick = _this.onLeafClick.bind(_assertThisInitialized(_this));
|
|
_this.onChildItemKeyDown = _this.onChildItemKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TieredMenuSub, [{
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.parentActive && !this.props.parentActive) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
|
|
if (this.props.parentActive && !this.props.root) {
|
|
this.position();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.element && !_this2.element.contains(event.target)) {
|
|
_this2.setState({
|
|
activeItem: null
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "position",
|
|
value: function position() {
|
|
if (this.element) {
|
|
var parentItem = this.element.parentElement;
|
|
var containerOffset = DomHandler.getOffset(parentItem);
|
|
var viewport = DomHandler.getViewport();
|
|
var sublistWidth = this.element.offsetParent ? this.element.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.element);
|
|
var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
|
|
|
|
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
|
|
DomHandler.addClass(this.element, 'p-submenu-list-flipped');
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemMouseEnter",
|
|
value: function onItemMouseEnter(event, item) {
|
|
if (item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (this.props.root) {
|
|
if (this.state.activeItem || this.props.popup) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
} else {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: 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 (this.props.root) {
|
|
if (item.items) {
|
|
if (this.state.activeItem && item === this.state.activeItem) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
} else {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!item.items) {
|
|
this.onLeafClick();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onItemKeyDown",
|
|
value: function onItemKeyDown(event, item) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
var nextItem = this.findNextItem(listItem);
|
|
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up
|
|
|
|
case 38:
|
|
var prevItem = this.findPrevItem(listItem);
|
|
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//right
|
|
|
|
case 39:
|
|
if (item.items) {
|
|
this.setState({
|
|
activeItem: item
|
|
});
|
|
setTimeout(function () {
|
|
listItem.children[1].children[0].children[0].focus();
|
|
}, 50);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
|
|
if (this.props.onKeyDown) {
|
|
this.props.onKeyDown(event, listItem);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onChildItemKeyDown",
|
|
value: function onChildItemKeyDown(event, childListItem) {
|
|
//left
|
|
if (event.which === 37) {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
childListItem.parentElement.previousElementSibling.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextItem",
|
|
value: function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;else return null;
|
|
}
|
|
}, {
|
|
key: "findPrevItem",
|
|
value: function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;else return null;
|
|
}
|
|
}, {
|
|
key: "onLeafClick",
|
|
value: function onLeafClick() {
|
|
this.setState({
|
|
activeItem: null
|
|
});
|
|
|
|
if (this.props.onLeafClick) {
|
|
this.props.onLeafClick();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSeparator",
|
|
value: function renderSeparator(index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: 'separator_' + index,
|
|
className: "p-menu-separator",
|
|
role: "separator"
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderSubmenu",
|
|
value: function renderSubmenu(item) {
|
|
if (item.items) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TieredMenuSub, {
|
|
model: item.items,
|
|
onLeafClick: this.onLeafClick,
|
|
popup: this.props.popup,
|
|
onKeyDown: this.onChildItemKeyDown,
|
|
parentActive: item === this.state.activeItem
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMenuitem",
|
|
value: function renderMenuitem(item, index) {
|
|
var _this3 = this;
|
|
|
|
var active = this.state.activeItem === item;
|
|
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 = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-menuitem-text"
|
|
}, item.label);
|
|
var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: submenuIconClassName
|
|
});
|
|
var submenu = this.renderSubmenu(item);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: item.url || '#',
|
|
className: linkClassName,
|
|
target: item.target,
|
|
role: "menuitem",
|
|
"aria-haspopup": item.items != null,
|
|
onClick: function onClick(event) {
|
|
return _this3.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this3.onItemKeyDown(event, item);
|
|
},
|
|
"aria-disabled": item.disabled
|
|
}, icon, label, submenuIcon, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (item.template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this3.onItemClick(event, item);
|
|
},
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _this3.onItemKeyDown(event, item);
|
|
},
|
|
className: linkClassName,
|
|
labelClassName: 'p-menuitem-text',
|
|
iconClassName: iconClassName,
|
|
submenuIconClassName: submenuIconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
active: active
|
|
};
|
|
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: item.label + '_' + index,
|
|
className: className,
|
|
style: item.style,
|
|
onMouseEnter: function onMouseEnter(event) {
|
|
return _this3.onItemMouseEnter(event, item);
|
|
},
|
|
role: "none"
|
|
}, content, submenu);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
if (item.separator) return this.renderSeparator(index);else return this.renderMenuitem(item, index);
|
|
}
|
|
}, {
|
|
key: "renderMenu",
|
|
value: function renderMenu() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this4.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this5 = this;
|
|
|
|
var className = classNames({
|
|
'p-submenu-list': !this.props.root
|
|
});
|
|
var submenu = this.renderMenu();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this5.element = el;
|
|
},
|
|
className: className,
|
|
role: this.props.root ? 'menubar' : 'menu',
|
|
"aria-orientation": "horizontal"
|
|
}, submenu);
|
|
}
|
|
}]);
|
|
|
|
return TieredMenuSub;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TieredMenuSub, "defaultProps", {
|
|
model: null,
|
|
root: false,
|
|
className: null,
|
|
popup: false,
|
|
onLeafClick: null,
|
|
onKeyDown: null,
|
|
parentActive: false
|
|
});
|
|
|
|
function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TieredMenu = /*#__PURE__*/function (_Component) {
|
|
_inherits(TieredMenu, _Component);
|
|
|
|
var _super = _createSuper$n(TieredMenu);
|
|
|
|
function TieredMenu(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TieredMenu);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: !props.popup
|
|
};
|
|
_this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.menuRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TieredMenu, [{
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
if (this.props.popup) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.target
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
if (this.props.popup) {
|
|
if (this.state.visible) this.hide(event);else this.show(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show(event) {
|
|
var _this2 = this;
|
|
|
|
this.target = event.currentTarget;
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: true
|
|
}, function () {
|
|
if (_this2.props.onShow) {
|
|
_this2.props.onShow(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide(event) {
|
|
var _this3 = this;
|
|
|
|
var currentEvent = event;
|
|
this.setState({
|
|
visible: false
|
|
}, function () {
|
|
if (_this3.props.onHide) {
|
|
_this3.props.onHide(currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "onEnter",
|
|
value: function onEnter() {
|
|
if (this.props.autoZIndex) {
|
|
ZIndexUtils.set('menu', this.menuRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['menu']);
|
|
}
|
|
|
|
DomHandler.absolutePosition(this.menuRef.current, this.target);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.bindDocumentListeners();
|
|
this.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
this.target = null;
|
|
this.unbindDocumentListeners();
|
|
this.unbindScrollListener();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "bindDocumentListeners",
|
|
value: function bindDocumentListeners() {
|
|
this.bindDocumentClickListener();
|
|
this.bindDocumentResizeListener();
|
|
}
|
|
}, {
|
|
key: "unbindDocumentListeners",
|
|
value: function unbindDocumentListeners() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindDocumentResizeListener();
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this4.props.popup && _this4.state.visible && _this4.menuRef.current && !_this4.menuRef.current.contains(event.target)) {
|
|
_this4.hide(event);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentResizeListener",
|
|
value: function bindDocumentResizeListener() {
|
|
var _this5 = this;
|
|
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = function (event) {
|
|
if (_this5.state.visible && !DomHandler.isTouchDevice()) {
|
|
_this5.hide(event);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.documentResizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentResizeListener",
|
|
value: function unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener('resize', this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this6 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, function (event) {
|
|
if (_this6.state.visible) {
|
|
_this6.hide(event);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentListeners();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.menuRef.current);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-tieredmenu p-component', {
|
|
'p-tieredmenu-overlay': this.props.popup
|
|
}, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.menuRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.visible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.menuRef,
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onPanelClick
|
|
}, /*#__PURE__*/React__default["default"].createElement(TieredMenuSub, {
|
|
model: this.props.model,
|
|
root: true,
|
|
popup: this.props.popup
|
|
})));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return this.props.popup ? /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
}) : element;
|
|
}
|
|
}]);
|
|
|
|
return TieredMenu;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TieredMenu, "defaultProps", {
|
|
id: null,
|
|
model: null,
|
|
popup: false,
|
|
style: null,
|
|
className: null,
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
transitionOptions: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$m(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Timeline = /*#__PURE__*/function (_Component) {
|
|
_inherits(Timeline, _Component);
|
|
|
|
var _super = _createSuper$m(Timeline);
|
|
|
|
function Timeline() {
|
|
_classCallCheck(this, Timeline);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Timeline, [{
|
|
key: "getKey",
|
|
value: function getKey(item, index) {
|
|
return this.props.dataKey ? ObjectUtils.resolveFieldData(item, this.props.dataKey) : "pr_id__".concat(index);
|
|
}
|
|
}, {
|
|
key: "renderEvents",
|
|
value: function renderEvents() {
|
|
var _this = this;
|
|
|
|
return this.props.value && this.props.value.map(function (item, index) {
|
|
var opposite = ObjectUtils.getJSXElement(_this.props.opposite, item, index);
|
|
var marker = ObjectUtils.getJSXElement(_this.props.marker, item, index) || /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timeline-event-marker"
|
|
});
|
|
var connector = index !== _this.props.value.length - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timeline-event-connector"
|
|
});
|
|
var content = ObjectUtils.getJSXElement(_this.props.content, item, index);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: _this.getKey(item, index),
|
|
className: "p-timeline-event"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timeline-event-opposite"
|
|
}, opposite), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timeline-event-separator"
|
|
}, marker, connector), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-timeline-event-content"
|
|
}, content));
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _classNames;
|
|
|
|
var containerClassName = classNames('p-timeline p-component', (_classNames = {}, _defineProperty(_classNames, "p-timeline-".concat(this.props.align), true), _defineProperty(_classNames, "p-timeline-".concat(this.props.layout), true), _classNames), this.props.className);
|
|
var events = this.renderEvents();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, events);
|
|
}
|
|
}]);
|
|
|
|
return Timeline;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Timeline, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
align: 'left',
|
|
layout: 'vertical',
|
|
dataKey: null,
|
|
className: null,
|
|
style: null,
|
|
opposite: null,
|
|
marker: null,
|
|
content: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var ToastMessageComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(ToastMessageComponent, _Component);
|
|
|
|
var _super = _createSuper$l(ToastMessageComponent);
|
|
|
|
function ToastMessageComponent(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ToastMessageComponent);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ToastMessageComponent, [{
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
if (!this.props.message.sticky) {
|
|
this.timeout = setTimeout(function () {
|
|
_this2.onClose(null);
|
|
}, this.props.message.life || 3000);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClose",
|
|
value: function onClose() {
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
if (this.props.onClose) {
|
|
this.props.onClose(this.props.message);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick && !(DomHandler.hasClass(event.target, 'p-toast-icon-close') || DomHandler.hasClass(event.target, 'p-toast-icon-close-icon'))) {
|
|
this.props.onClick(this.props.message);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderCloseIcon",
|
|
value: function renderCloseIcon() {
|
|
if (this.props.message.closable !== false) {
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-toast-icon-close p-link",
|
|
onClick: this.onClose
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-toast-icon-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderMessage",
|
|
value: function renderMessage() {
|
|
if (this.props.message) {
|
|
var _this$props$message = this.props.message,
|
|
severity = _this$props$message.severity,
|
|
content = _this$props$message.content,
|
|
summary = _this$props$message.summary,
|
|
detail = _this$props$message.detail;
|
|
var contentEl = ObjectUtils.getJSXElement(content, _objectSpread$a(_objectSpread$a({}, this.props), {}, {
|
|
onClose: this.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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-toast-message-text"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-toast-summary"
|
|
}, summary), detail && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-toast-detail"
|
|
}, detail)));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var severity = this.props.message.severity;
|
|
var contentClassName = this.props.message.contentClassName;
|
|
var contentStyle = this.props.message.contentStyle;
|
|
var style = this.props.message.style;
|
|
var className = classNames('p-toast-message', {
|
|
'p-toast-message-info': severity === 'info',
|
|
'p-toast-message-warn': severity === 'warn',
|
|
'p-toast-message-error': severity === 'error',
|
|
'p-toast-message-success': severity === 'success'
|
|
}, this.props.message.className);
|
|
var message = this.renderMessage();
|
|
var closeIcon = this.renderCloseIcon();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
style: style,
|
|
role: "alert",
|
|
"aria-live": "assertive",
|
|
"aria-atomic": "true",
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: classNames('p-toast-message-content', contentClassName),
|
|
style: contentStyle
|
|
}, message, closeIcon));
|
|
}
|
|
}]);
|
|
|
|
return ToastMessageComponent;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ToastMessageComponent, "defaultProps", {
|
|
message: null,
|
|
onClose: null,
|
|
onClick: null
|
|
});
|
|
|
|
var ToastMessage = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(ToastMessageComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
function _createSuper$k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$k(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var messageIdx = 0;
|
|
var Toast = /*#__PURE__*/function (_Component) {
|
|
_inherits(Toast, _Component);
|
|
|
|
var _super = _createSuper$k(Toast);
|
|
|
|
function Toast(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Toast);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
messages: []
|
|
};
|
|
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Toast, [{
|
|
key: "show",
|
|
value: function show(value) {
|
|
if (value) {
|
|
if (value) {
|
|
var newMessages;
|
|
|
|
if (Array.isArray(value)) {
|
|
for (var i = 0; i < value.length; i++) {
|
|
value[i].id = messageIdx++;
|
|
newMessages = [].concat(_toConsumableArray(this.state.messages), _toConsumableArray(value));
|
|
}
|
|
} else {
|
|
value.id = messageIdx++;
|
|
newMessages = this.state.messages ? [].concat(_toConsumableArray(this.state.messages), [value]) : [value];
|
|
}
|
|
|
|
this.state.messages.length === 0 && ZIndexUtils.set('toast', this.container, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['toast']);
|
|
this.setState({
|
|
messages: newMessages
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
ZIndexUtils.clear(this.container);
|
|
this.setState({
|
|
messages: []
|
|
});
|
|
}
|
|
}, {
|
|
key: "onClose",
|
|
value: function onClose(message) {
|
|
var newMessages = this.state.messages.filter(function (msg) {
|
|
return msg.id !== message.id;
|
|
});
|
|
this.setState({
|
|
messages: newMessages
|
|
});
|
|
|
|
if (this.props.onRemove) {
|
|
this.props.onRemove(message);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited() {
|
|
this.state.messages.length === 0 && ZIndexUtils.clear(this.container);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
ZIndexUtils.clear(this.container);
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-toast p-component p-toast-' + this.props.position, this.props.className);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
_this2.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, this.state.messages.map(function (message) {
|
|
var messageRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: messageRef,
|
|
key: message.id,
|
|
classNames: "p-toast-message",
|
|
unmountOnExit: true,
|
|
timeout: {
|
|
enter: 300,
|
|
exit: 300
|
|
},
|
|
onEntered: _this2.onEntered,
|
|
onExited: _this2.onExited,
|
|
options: _this2.props.transitionOptions
|
|
}, /*#__PURE__*/React__default["default"].createElement(ToastMessage, {
|
|
ref: messageRef,
|
|
message: message,
|
|
onClick: _this2.props.onClick,
|
|
onClose: _this2.onClose
|
|
}));
|
|
})));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return Toast;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Toast, "defaultProps", {
|
|
id: null,
|
|
className: null,
|
|
style: null,
|
|
baseZIndex: 0,
|
|
position: 'top-right',
|
|
transitionOptions: null,
|
|
appendTo: 'self',
|
|
onClick: null,
|
|
onRemove: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
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; }
|
|
|
|
function _createSuper$j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$j(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var ToggleButton = /*#__PURE__*/function (_Component) {
|
|
_inherits(ToggleButton, _Component);
|
|
|
|
var _super = _createSuper$j(ToggleButton);
|
|
|
|
function ToggleButton(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, ToggleButton);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(ToggleButton, [{
|
|
key: "toggle",
|
|
value: function toggle(e) {
|
|
if (!this.props.disabled && this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: e,
|
|
value: !this.props.checked,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: !this.props.checked
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this.toggle(event);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "hasLabel",
|
|
value: function hasLabel() {
|
|
return this.props.onLabel && this.props.onLabel.length > 0 && this.props.offLabel && this.props.offLabel.length > 0;
|
|
}
|
|
}, {
|
|
key: "hasIcon",
|
|
value: function hasIcon() {
|
|
return this.props.onIcon && this.props.onIcon.length > 0 && this.props.offIcon && this.props.offIcon.length > 0;
|
|
}
|
|
}, {
|
|
key: "getLabel",
|
|
value: function getLabel() {
|
|
return this.hasLabel() ? this.props.checked ? this.props.onLabel : this.props.offLabel : ' ';
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.tooltip) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$9({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.container,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-button p-togglebutton p-component', {
|
|
'p-button-icon-only': this.hasIcon() && !this.hasLabel(),
|
|
'p-highlight': this.props.checked,
|
|
'p-disabled': this.props.disabled
|
|
}, this.props.className),
|
|
iconClassName = null;
|
|
var hasIcon = this.hasIcon();
|
|
var label = this.getLabel();
|
|
var icon = this.props.checked ? this.props.onIcon : this.props.offIcon;
|
|
|
|
if (hasIcon) {
|
|
iconClassName = classNames('p-button-icon p-c', {
|
|
'p-button-icon-left': this.props.iconPos === 'left' && label,
|
|
'p-button-icon-right': this.props.iconPos === 'right' && label
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.toggle,
|
|
onFocus: this.props.onFocus,
|
|
onBlur: this.props.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
tabIndex: !this.props.disabled && this.props.tabIndex,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
}, hasIcon && IconUtils.getJSXIcon(icon, {
|
|
className: iconClassName
|
|
}, {
|
|
props: this.props
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-button-label"
|
|
}, label), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}]);
|
|
|
|
return ToggleButton;
|
|
}(React.Component);
|
|
|
|
_defineProperty(ToggleButton, "defaultProps", {
|
|
id: null,
|
|
onIcon: null,
|
|
offIcon: null,
|
|
onLabel: 'Yes',
|
|
offLabel: 'No',
|
|
iconPos: 'left',
|
|
style: null,
|
|
className: null,
|
|
checked: false,
|
|
tabIndex: 0,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onChange: null,
|
|
onFocus: null,
|
|
onBlur: null
|
|
});
|
|
|
|
function _createSuper$i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$i(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$i() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Toolbar = /*#__PURE__*/function (_Component) {
|
|
_inherits(Toolbar, _Component);
|
|
|
|
var _super = _createSuper$i(Toolbar);
|
|
|
|
function Toolbar() {
|
|
_classCallCheck(this, Toolbar);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(Toolbar, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var toolbarClass = classNames('p-toolbar p-component', this.props.className);
|
|
var left = ObjectUtils.getJSXElement(this.props.left, this.props);
|
|
var right = ObjectUtils.getJSXElement(this.props.right, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: toolbarClass,
|
|
style: this.props.style,
|
|
role: "toolbar"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-toolbar-group-left"
|
|
}, left), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-toolbar-group-right"
|
|
}, right));
|
|
}
|
|
}]);
|
|
|
|
return Toolbar;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Toolbar, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
left: null,
|
|
right: null
|
|
});
|
|
|
|
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$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; }
|
|
|
|
function _createSuper$h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$h(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$h() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var UITreeNode = /*#__PURE__*/function (_Component) {
|
|
_inherits(UITreeNode, _Component);
|
|
|
|
var _super = _createSuper$h(UITreeNode);
|
|
|
|
function UITreeNode(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, UITreeNode);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onDoubleClick = _this.onDoubleClick.bind(_assertThisInitialized(_this));
|
|
_this.onRightClick = _this.onRightClick.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.onTogglerClick = _this.onTogglerClick.bind(_assertThisInitialized(_this));
|
|
_this.onNodeKeyDown = _this.onNodeKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.propagateUp = _this.propagateUp.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnter = _this.onDragEnter.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.onDropPointDragOver = _this.onDropPointDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDropPointDragEnter = _this.onDropPointDragEnter.bind(_assertThisInitialized(_this));
|
|
_this.onDropPointDragLeave = _this.onDropPointDragLeave.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(UITreeNode, [{
|
|
key: "isLeaf",
|
|
value: function isLeaf() {
|
|
return this.props.isNodeLeaf(this.props.node);
|
|
}
|
|
}, {
|
|
key: "expand",
|
|
value: function expand(event) {
|
|
var expandedKeys = this.props.expandedKeys ? _objectSpread$8({}, this.props.expandedKeys) : {};
|
|
expandedKeys[this.props.node.key] = true;
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: expandedKeys
|
|
});
|
|
this.invokeToggleEvents(event, true);
|
|
}
|
|
}, {
|
|
key: "collapse",
|
|
value: function collapse(event) {
|
|
var expandedKeys = _objectSpread$8({}, this.props.expandedKeys);
|
|
|
|
delete expandedKeys[this.props.node.key];
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: expandedKeys
|
|
});
|
|
this.invokeToggleEvents(event, false);
|
|
}
|
|
}, {
|
|
key: "onTogglerClick",
|
|
value: function onTogglerClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (this.isExpanded()) this.collapse(event);else this.expand(event);
|
|
}
|
|
}, {
|
|
key: "invokeToggleEvents",
|
|
value: function invokeToggleEvents(event, expanded) {
|
|
if (expanded) {
|
|
if (this.props.onExpand) {
|
|
this.props.onExpand({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.props.onCollapse) {
|
|
this.props.onCollapse({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isExpanded",
|
|
value: function isExpanded() {
|
|
return (this.props.expandedKeys ? this.props.expandedKeys[this.props.node.key] !== undefined : false) || this.props.node.expanded;
|
|
}
|
|
}, {
|
|
key: "onNodeKeyDown",
|
|
value: function onNodeKeyDown(event) {
|
|
if (this.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) {
|
|
this.focusNode(listElement.children[0]);
|
|
} else {
|
|
var nextNodeElement = nodeElement.nextElementSibling;
|
|
|
|
if (nextNodeElement) {
|
|
this.focusNode(nextNodeElement);
|
|
} else {
|
|
var nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
|
|
|
|
if (nextSiblingAncestor) {
|
|
this.focusNode(nextSiblingAncestor);
|
|
}
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//up arrow
|
|
|
|
case 38:
|
|
if (nodeElement.previousElementSibling) {
|
|
this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
|
|
} else {
|
|
var parentNodeElement = this.getParentNodeElement(nodeElement);
|
|
|
|
if (parentNodeElement) {
|
|
this.focusNode(parentNodeElement);
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//right arrow
|
|
|
|
case 39:
|
|
if (!this.isExpanded()) {
|
|
this.expand(event);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//left arrow
|
|
|
|
case 37:
|
|
if (this.isExpanded()) {
|
|
this.collapse(event);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findNextSiblingOfAncestor",
|
|
value: function findNextSiblingOfAncestor(nodeElement) {
|
|
var parentNodeElement = this.getParentNodeElement(nodeElement);
|
|
|
|
if (parentNodeElement) {
|
|
if (parentNodeElement.nextElementSibling) return parentNodeElement.nextElementSibling;else return this.findNextSiblingOfAncestor(parentNodeElement);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findLastVisibleDescendant",
|
|
value: function findLastVisibleDescendant(nodeElement) {
|
|
var childrenListElement = nodeElement.children[1];
|
|
|
|
if (childrenListElement) {
|
|
var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
|
|
return this.findLastVisibleDescendant(lastChildElement);
|
|
} else {
|
|
return nodeElement;
|
|
}
|
|
}
|
|
}, {
|
|
key: "getParentNodeElement",
|
|
value: function getParentNodeElement(nodeElement) {
|
|
var parentNodeElement = nodeElement.parentElement.parentElement;
|
|
return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
|
|
}
|
|
}, {
|
|
key: "focusNode",
|
|
value: function focusNode(element) {
|
|
element.children[0].focus();
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onClick) {
|
|
this.props.onClick({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
|
|
if (event.target.className && event.target.className.constructor === String && event.target.className.indexOf('p-tree-toggler') === 0 || this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.selectionMode && this.props.node.selectable !== false) {
|
|
var selectionKeys;
|
|
|
|
if (this.isCheckboxSelectionMode()) {
|
|
var checked = this.isChecked();
|
|
selectionKeys = this.props.selectionKeys ? _objectSpread$8({}, this.props.selectionKeys) : {};
|
|
|
|
if (checked) {
|
|
if (this.props.propagateSelectionDown) this.propagateDown(this.props.node, false, selectionKeys);else delete selectionKeys[this.props.node.key];
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp({
|
|
originalEvent: event,
|
|
check: false,
|
|
selectionKeys: selectionKeys
|
|
});
|
|
}
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.props.propagateSelectionDown) this.propagateDown(this.props.node, true, selectionKeys);else selectionKeys[this.props.node.key] = {
|
|
checked: true
|
|
};
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp({
|
|
originalEvent: event,
|
|
check: true,
|
|
selectionKeys: selectionKeys
|
|
});
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
var selected = this.isSelected();
|
|
var metaSelection = this.nodeTouched ? false : this.props.metaKeySelection;
|
|
|
|
if (metaSelection) {
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|
|
|
if (selected && metaKey) {
|
|
if (this.isSingleSelectionMode()) {
|
|
selectionKeys = null;
|
|
} else {
|
|
selectionKeys = _objectSpread$8({}, this.props.selectionKeys);
|
|
delete selectionKeys[this.props.node.key];
|
|
}
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.isSingleSelectionMode()) {
|
|
selectionKeys = this.props.node.key;
|
|
} else if (this.isMultipleSelectionMode()) {
|
|
selectionKeys = !metaKey ? {} : this.props.selectionKeys ? _objectSpread$8({}, this.props.selectionKeys) : {};
|
|
selectionKeys[this.props.node.key] = true;
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
if (this.isSingleSelectionMode()) {
|
|
if (selected) {
|
|
selectionKeys = null;
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
selectionKeys = this.props.node.key;
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
if (selected) {
|
|
selectionKeys = _objectSpread$8({}, this.props.selectionKeys);
|
|
delete selectionKeys[this.props.node.key];
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
selectionKeys = this.props.selectionKeys ? _objectSpread$8({}, this.props.selectionKeys) : {};
|
|
selectionKeys[this.props.node.key] = true;
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: event,
|
|
value: selectionKeys
|
|
});
|
|
}
|
|
}
|
|
|
|
this.nodeTouched = false;
|
|
}
|
|
}, {
|
|
key: "onDoubleClick",
|
|
value: function onDoubleClick(event) {
|
|
if (this.props.onDoubleClick) {
|
|
this.props.onDoubleClick({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRightClick",
|
|
value: function onRightClick(event) {
|
|
if (this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
DomHandler.clearSelection();
|
|
|
|
if (this.props.onContextMenuSelectionChange) {
|
|
this.props.onContextMenuSelectionChange({
|
|
originalEvent: event,
|
|
value: this.props.node.key
|
|
});
|
|
}
|
|
|
|
if (this.props.onContextMenu) {
|
|
this.props.onContextMenu({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "propagateUp",
|
|
value: function propagateUp(event) {
|
|
var check = event.check;
|
|
var selectionKeys = event.selectionKeys;
|
|
var checkedChildCount = 0;
|
|
var childPartialSelected = false;
|
|
|
|
var _iterator = _createForOfIteratorHelper$6(this.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 === this.props.node.children.length) {
|
|
selectionKeys[this.props.node.key] = {
|
|
checked: true,
|
|
partialChecked: false
|
|
};
|
|
} else {
|
|
if (!check) {
|
|
delete selectionKeys[this.props.node.key];
|
|
}
|
|
|
|
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.props.node.children.length) selectionKeys[this.props.node.key] = {
|
|
checked: false,
|
|
partialChecked: true
|
|
};else delete selectionKeys[this.props.node.key];
|
|
}
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "propagateDown",
|
|
value: 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++) {
|
|
this.propagateDown(node.children[i], check, selectionKeys);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected() {
|
|
if (this.props.selectionMode && this.props.selectionKeys) return this.isSingleSelectionMode() ? this.props.selectionKeys === this.props.node.key : this.props.selectionKeys[this.props.node.key] !== undefined;else return false;
|
|
}
|
|
}, {
|
|
key: "isChecked",
|
|
value: function isChecked() {
|
|
return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].checked : false;
|
|
}
|
|
}, {
|
|
key: "isPartialChecked",
|
|
value: function isPartialChecked() {
|
|
return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].partialChecked : false;
|
|
}
|
|
}, {
|
|
key: "isSingleSelectionMode",
|
|
value: function isSingleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'single';
|
|
}
|
|
}, {
|
|
key: "isMultipleSelectionMode",
|
|
value: function isMultipleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isCheckboxSelectionMode",
|
|
value: function isCheckboxSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'checkbox';
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd() {
|
|
this.nodeTouched = true;
|
|
}
|
|
}, {
|
|
key: "onDropPoint",
|
|
value: function onDropPoint(event, position) {
|
|
event.preventDefault();
|
|
|
|
if (this.props.node.droppable !== false) {
|
|
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
|
|
|
|
if (this.props.onDropPoint) {
|
|
this.props.onDropPoint({
|
|
originalEvent: event,
|
|
path: this.props.path,
|
|
index: this.props.index,
|
|
position: position
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDropPointDragOver",
|
|
value: function onDropPointDragOver(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
|
|
event.dataTransfer.dropEffect = 'move';
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDropPointDragEnter",
|
|
value: function onDropPointDragEnter(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
|
|
DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDropPointDragLeave",
|
|
value: function onDropPointDragLeave(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
|
|
DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
if (this.props.dragdropScope && this.props.node.droppable !== false) {
|
|
DomHandler.removeClass(this.contentElement, 'p-treenode-dragover');
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
if (this.props.onDrop) {
|
|
this.props.onDrop({
|
|
originalEvent: event,
|
|
path: this.props.path,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.props.node.droppable !== false) {
|
|
event.dataTransfer.dropEffect = 'move';
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnter",
|
|
value: function onDragEnter(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.props.node.droppable !== false) {
|
|
DomHandler.addClass(this.contentElement, 'p-treenode-dragover');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.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(this.contentElement, 'p-treenode-dragover');
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event) {
|
|
event.dataTransfer.setData("text", this.props.dragdropScope);
|
|
event.dataTransfer.setData(this.props.dragdropScope, this.props.dragdropScope);
|
|
|
|
if (this.props.onDragStart) {
|
|
this.props.onDragStart({
|
|
originalEvent: event,
|
|
path: this.props.path,
|
|
index: this.props.index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd(event) {
|
|
if (this.props.onDragEnd) {
|
|
this.props.onDragEnd({
|
|
originalEvent: event
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel() {
|
|
var content = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-treenode-label"
|
|
}, this.props.node.label);
|
|
|
|
if (this.props.nodeTemplate) {
|
|
var defaultContentOptions = {
|
|
onTogglerClick: this.onTogglerClick,
|
|
className: 'p-treenode-label',
|
|
element: content,
|
|
props: this.props,
|
|
expanded: this.isExpanded()
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.nodeTemplate, this.props.node, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderCheckbox",
|
|
value: function renderCheckbox() {
|
|
if (this.isCheckboxSelectionMode() && this.props.node.selectable !== false) {
|
|
var checked = this.isChecked();
|
|
var partialChecked = this.isPartialChecked();
|
|
var className = classNames('p-checkbox-box', {
|
|
'p-highlight': checked,
|
|
'p-indeterminate': partialChecked,
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var icon = classNames('p-checkbox-icon p-c', {
|
|
'pi pi-check': checked,
|
|
'pi pi-minus': partialChecked
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-checkbox p-component"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
role: "checkbox",
|
|
"aria-checked": checked
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderIcon",
|
|
value: function renderIcon(expanded) {
|
|
var icon = this.props.node.icon || (expanded ? this.props.node.expandedIcon : this.props.node.collapsedIcon);
|
|
|
|
if (icon) {
|
|
var className = classNames('p-treenode-icon', icon);
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: className
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderToggler",
|
|
value: function renderToggler(expanded) {
|
|
var iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {
|
|
'pi-chevron-right': !expanded,
|
|
'pi-chevron-down': expanded
|
|
});
|
|
var content = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-tree-toggler p-link",
|
|
tabIndex: -1,
|
|
onClick: this.onTogglerClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (this.props.togglerTemplate) {
|
|
var defaultContentOptions = {
|
|
onClick: this.onTogglerClick,
|
|
containerClassName: 'p-tree-toggler p-link',
|
|
iconClassName: 'p-tree-toggler-icon',
|
|
element: content,
|
|
props: this.props,
|
|
expanded: expanded
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.togglerTemplate, this.props.node, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderDropPoint",
|
|
value: function renderDropPoint(position) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.dragdropScope) {
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: "p-treenode-droppoint",
|
|
onDrop: function onDrop(event) {
|
|
return _this2.onDropPoint(event, position);
|
|
},
|
|
onDragOver: this.onDropPointDragOver,
|
|
onDragEnter: this.onDropPointDragEnter,
|
|
onDragLeave: this.onDropPointDragLeave
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this3 = this;
|
|
|
|
var selected = this.isSelected();
|
|
var checked = this.isChecked();
|
|
var className = classNames('p-treenode-content', this.props.node.className, {
|
|
'p-treenode-selectable': this.props.selectionMode && this.props.node.selectable !== false,
|
|
'p-highlight': this.isCheckboxSelectionMode() ? checked : selected,
|
|
'p-highlight-contextmenu': this.props.contextMenuSelectionKey && this.props.contextMenuSelectionKey === this.props.node.key,
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var expanded = this.isExpanded();
|
|
var toggler = this.renderToggler(expanded);
|
|
var checkbox = this.renderCheckbox();
|
|
var icon = this.renderIcon(expanded);
|
|
var label = this.renderLabel();
|
|
var tabIndex = this.props.disabled ? undefined : 0;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.contentElement = el;
|
|
},
|
|
className: className,
|
|
style: this.props.node.style,
|
|
onClick: this.onClick,
|
|
onDoubleClick: this.onDoubleClick,
|
|
onContextMenu: this.onRightClick,
|
|
onTouchEnd: this.onTouchEnd,
|
|
draggable: this.props.dragdropScope && this.props.node.draggable !== false && !this.props.disabled,
|
|
onDrop: this.onDrop,
|
|
onDragOver: this.onDragOver,
|
|
onDragEnter: this.onDragEnter,
|
|
onDragLeave: this.onDragLeave,
|
|
onDragStart: this.onDragStart,
|
|
onDragEnd: this.onDragEnd,
|
|
tabIndex: tabIndex,
|
|
onKeyDown: this.onNodeKeyDown,
|
|
role: "treeitem",
|
|
"aria-posinset": this.props.index + 1,
|
|
"aria-expanded": this.isExpanded(),
|
|
"aria-selected": checked || selected
|
|
}, toggler, checkbox, icon, label);
|
|
}
|
|
}, {
|
|
key: "renderChildren",
|
|
value: function renderChildren() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.node.children && this.props.node.children.length && this.isExpanded()) {
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: "p-treenode-children",
|
|
role: "group"
|
|
}, this.props.node.children.map(function (childNode, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement(UITreeNode, {
|
|
key: childNode.key || childNode.label,
|
|
node: childNode,
|
|
parent: _this4.props.node,
|
|
index: index,
|
|
last: index === _this4.props.node.children.length - 1,
|
|
path: _this4.props.path + '-' + index,
|
|
disabled: _this4.props.disabled,
|
|
selectionMode: _this4.props.selectionMode,
|
|
selectionKeys: _this4.props.selectionKeys,
|
|
onSelectionChange: _this4.props.onSelectionChange,
|
|
metaKeySelection: _this4.props.metaKeySelection,
|
|
propagateSelectionDown: _this4.props.propagateSelectionDown,
|
|
propagateSelectionUp: _this4.props.propagateSelectionUp,
|
|
contextMenuSelectionKey: _this4.props.contextMenuSelectionKey,
|
|
onContextMenuSelectionChange: _this4.props.onContextMenuSelectionChange,
|
|
onContextMenu: _this4.props.onContextMenu,
|
|
onExpand: _this4.props.onExpand,
|
|
onCollapse: _this4.props.onCollapse,
|
|
onSelect: _this4.props.onSelect,
|
|
onUnselect: _this4.props.onUnselect,
|
|
expandedKeys: _this4.props.expandedKeys,
|
|
onToggle: _this4.props.onToggle,
|
|
onPropagateUp: _this4.propagateUp,
|
|
nodeTemplate: _this4.props.nodeTemplate,
|
|
togglerTemplate: _this4.props.togglerTemplate,
|
|
isNodeLeaf: _this4.props.isNodeLeaf,
|
|
dragdropScope: _this4.props.dragdropScope,
|
|
onDragStart: _this4.props.onDragStart,
|
|
onDragEnd: _this4.props.onDragEnd,
|
|
onDrop: _this4.props.onDrop,
|
|
onDropPoint: _this4.props.onDropPoint
|
|
});
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderNode",
|
|
value: function renderNode() {
|
|
var className = classNames('p-treenode', {
|
|
'p-treenode-leaf': this.isLeaf()
|
|
}, this.props.node.className);
|
|
var content = this.renderContent();
|
|
var children = this.renderChildren();
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
className: className,
|
|
style: this.props.node.style
|
|
}, content, children);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var node = this.renderNode();
|
|
|
|
if (this.props.dragdropScope && !this.props.disabled) {
|
|
var beforeDropPoint = this.renderDropPoint(-1);
|
|
var afterDropPoint = this.props.last ? this.renderDropPoint(1) : null;
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, beforeDropPoint, node, afterDropPoint);
|
|
} else {
|
|
return node;
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return UITreeNode;
|
|
}(React.Component);
|
|
|
|
_defineProperty(UITreeNode, "defaultProps", {
|
|
node: null,
|
|
index: null,
|
|
last: null,
|
|
parent: null,
|
|
path: null,
|
|
disabled: false,
|
|
selectionMode: null,
|
|
selectionKeys: null,
|
|
contextMenuSelectionKey: null,
|
|
metaKeySelection: true,
|
|
expandedKeys: null,
|
|
propagateSelectionUp: true,
|
|
propagateSelectionDown: true,
|
|
dragdropScope: null,
|
|
ariaLabel: null,
|
|
ariaLabelledBy: null,
|
|
nodeTemplate: null,
|
|
togglerTemplate: null,
|
|
isNodeLeaf: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onSelectionChange: null,
|
|
onContextMenuSelectionChange: null,
|
|
onPropagateUp: null,
|
|
onDragStart: null,
|
|
onDragEnd: null,
|
|
onDrop: null,
|
|
onDropPoint: null,
|
|
onContextMenu: null,
|
|
onNodeClick: null,
|
|
onNodeDoubleClick: null
|
|
});
|
|
|
|
function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _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; }
|
|
|
|
function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Tree = /*#__PURE__*/function (_Component) {
|
|
_inherits(Tree, _Component);
|
|
|
|
var _super = _createSuper$g(Tree);
|
|
|
|
function Tree(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Tree);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {};
|
|
|
|
if (!_this.props.onFilterValueChange) {
|
|
_this.state['filterValue'] = '';
|
|
}
|
|
|
|
if (!_this.props.onToggle) {
|
|
_this.state['expandedKeys'] = _this.props.expandedKeys;
|
|
}
|
|
|
|
_this.isNodeLeaf = _this.isNodeLeaf.bind(_assertThisInitialized(_this));
|
|
_this.onToggle = _this.onToggle.bind(_assertThisInitialized(_this));
|
|
_this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onDropPoint = _this.onDropPoint.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputKeyDown = _this.onFilterInputKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Tree, [{
|
|
key: "getFilterValue",
|
|
value: function getFilterValue() {
|
|
return this.props.onFilterValueChange ? this.props.filterValue : this.state.filterValue;
|
|
}
|
|
}, {
|
|
key: "getExpandedKeys",
|
|
value: function getExpandedKeys() {
|
|
return this.props.onToggle ? this.props.expandedKeys : this.state.expandedKeys;
|
|
}
|
|
}, {
|
|
key: "getRootNode",
|
|
value: function getRootNode() {
|
|
return this.props.filter && this.filteredNodes ? this.filteredNodes : this.props.value;
|
|
}
|
|
}, {
|
|
key: "onToggle",
|
|
value: function onToggle(event) {
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle(event);
|
|
} else {
|
|
this.setState({
|
|
expandedKeys: event.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event) {
|
|
this.dragState = {
|
|
path: event.path,
|
|
index: event.index
|
|
};
|
|
}
|
|
}, {
|
|
key: "onDragEnd",
|
|
value: function onDragEnd() {
|
|
this.dragState = null;
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
if (this.validateDropNode(this.dragState.path, event.path)) {
|
|
var value = JSON.parse(JSON.stringify(this.props.value));
|
|
var dragPaths = this.dragState.path.split('-');
|
|
dragPaths.pop();
|
|
var dragNodeParent = this.findNode(value, dragPaths);
|
|
var dragNode = dragNodeParent ? dragNodeParent.children[this.dragState.index] : value[this.dragState.index];
|
|
var dropNode = this.findNode(value, event.path.split('-'));
|
|
if (dropNode.children) dropNode.children.push(dragNode);else dropNode.children = [dragNode];
|
|
if (dragNodeParent) dragNodeParent.children.splice(this.dragState.index, 1);else value.splice(this.dragState.index, 1);
|
|
|
|
if (this.props.onDragDrop) {
|
|
this.props.onDragDrop({
|
|
originalEvent: event.originalEvent,
|
|
value: value,
|
|
dragNode: dragNode,
|
|
dropNode: dropNode,
|
|
dropIndex: event.index
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDropPoint",
|
|
value: function onDropPoint(event) {
|
|
if (this.validateDropPoint(event)) {
|
|
var value = JSON.parse(JSON.stringify(this.props.value));
|
|
var dragPaths = this.dragState.path.split('-');
|
|
dragPaths.pop();
|
|
var dropPaths = event.path.split('-');
|
|
dropPaths.pop();
|
|
var dragNodeParent = this.findNode(value, dragPaths);
|
|
var dropNodeParent = this.findNode(value, dropPaths);
|
|
var dragNode = dragNodeParent ? dragNodeParent.children[this.dragState.index] : value[this.dragState.index];
|
|
var siblings = this.areSiblings(this.dragState.path, event.path);
|
|
if (dragNodeParent) dragNodeParent.children.splice(this.dragState.index, 1);else value.splice(this.dragState.index, 1);
|
|
|
|
if (event.position < 0) {
|
|
var dropIndex = siblings ? this.dragState.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 (this.props.onDragDrop) {
|
|
this.props.onDragDrop({
|
|
originalEvent: event.originalEvent,
|
|
value: value,
|
|
dragNode: dragNode,
|
|
dropNode: dropNodeParent,
|
|
dropIndex: event.index
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "validateDrop",
|
|
value: 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;
|
|
}
|
|
}
|
|
}, {
|
|
key: "validateDropNode",
|
|
value: function validateDropNode(dragPath, dropPath) {
|
|
var validateDrop = this.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;
|
|
}
|
|
}
|
|
}, {
|
|
key: "validateDropPoint",
|
|
value: function validateDropPoint(event) {
|
|
var validateDrop = this.validateDrop(this.dragState.path, event.path);
|
|
|
|
if (validateDrop) {
|
|
//child dropped to next sibling's drop point
|
|
if (event.position === -1 && this.areSiblings(this.dragState.path, event.path) && this.dragState.index + 1 === event.index) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "areSiblings",
|
|
value: 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('-'));
|
|
}
|
|
}, {
|
|
key: "findNode",
|
|
value: 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 this.findNode(nextSearchRoot, path);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isNodeLeaf",
|
|
value: function isNodeLeaf(node) {
|
|
return node.leaf === false ? false : !(node.children && node.children.length);
|
|
}
|
|
}, {
|
|
key: "onFilterInputKeyDown",
|
|
value: function onFilterInputKeyDown(event) {
|
|
//enter
|
|
if (event.which === 13) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
this.filterChanged = true;
|
|
var filterValue = event.target.value;
|
|
|
|
if (this.props.onFilterValueChange) {
|
|
this.props.onFilterValueChange({
|
|
originalEvent: event,
|
|
value: filterValue
|
|
});
|
|
} else {
|
|
this.setState({
|
|
filterValue: filterValue
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "filter",
|
|
value: function filter(value) {
|
|
this.setState({
|
|
filterValue: ObjectUtils.isNotEmpty(value) ? value : ''
|
|
}, this._filter);
|
|
}
|
|
}, {
|
|
key: "_filter",
|
|
value: function _filter() {
|
|
if (!this.filterChanged) {
|
|
return;
|
|
}
|
|
|
|
var filterValue = this.getFilterValue();
|
|
|
|
if (ObjectUtils.isEmpty(filterValue)) {
|
|
this.filteredNodes = this.props.value;
|
|
} else {
|
|
this.filteredNodes = [];
|
|
var searchFields = this.props.filterBy.split(',');
|
|
var filterText = filterValue.toLocaleLowerCase(this.props.filterLocale);
|
|
var isStrictMode = this.props.filterMode === 'strict';
|
|
|
|
var _iterator = _createForOfIteratorHelper$5(this.props.value),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var node = _step.value;
|
|
|
|
var copyNode = _objectSpread$7({}, node);
|
|
|
|
var paramsWithoutNode = {
|
|
searchFields: searchFields,
|
|
filterText: filterText,
|
|
isStrictMode: isStrictMode
|
|
};
|
|
|
|
if (isStrictMode && (this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && (this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode))) {
|
|
this.filteredNodes.push(copyNode);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
|
|
this.filterChanged = false;
|
|
}
|
|
}, {
|
|
key: "findFilteredNodes",
|
|
value: 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$7({}, childNode);
|
|
|
|
if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
|
|
matched = true;
|
|
node.children.push(copyChildNode);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
}
|
|
|
|
if (matched) {
|
|
node.expanded = true;
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isFilterMatched",
|
|
value: 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(this.props.filterLocale);
|
|
|
|
if (fieldValue.indexOf(filterText) > -1) {
|
|
matched = true;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator3.e(err);
|
|
} finally {
|
|
_iterator3.f();
|
|
}
|
|
|
|
if (!matched || isStrictMode && !this.isNodeLeaf(node)) {
|
|
matched = this.findFilteredNodes(node, {
|
|
searchFields: searchFields,
|
|
filterText: filterText,
|
|
isStrictMode: isStrictMode
|
|
}) || matched;
|
|
}
|
|
|
|
return matched;
|
|
}
|
|
}, {
|
|
key: "renderRootChild",
|
|
value: function renderRootChild(node, index, last) {
|
|
return /*#__PURE__*/React__default["default"].createElement(UITreeNode, {
|
|
key: node.key || node.label,
|
|
node: node,
|
|
index: index,
|
|
last: last,
|
|
path: String(index),
|
|
disabled: this.props.disabled,
|
|
selectionMode: this.props.selectionMode,
|
|
selectionKeys: this.props.selectionKeys,
|
|
onSelectionChange: this.props.onSelectionChange,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
contextMenuSelectionKey: this.props.contextMenuSelectionKey,
|
|
onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
|
|
onContextMenu: this.props.onContextMenu,
|
|
propagateSelectionDown: this.props.propagateSelectionDown,
|
|
propagateSelectionUp: this.props.propagateSelectionUp,
|
|
onExpand: this.props.onExpand,
|
|
onCollapse: this.props.onCollapse,
|
|
onSelect: this.props.onSelect,
|
|
onUnselect: this.props.onUnselect,
|
|
expandedKeys: this.getExpandedKeys(),
|
|
onToggle: this.onToggle,
|
|
nodeTemplate: this.props.nodeTemplate,
|
|
togglerTemplate: this.props.togglerTemplate,
|
|
isNodeLeaf: this.isNodeLeaf,
|
|
dragdropScope: this.props.dragdropScope,
|
|
onDragStart: this.onDragStart,
|
|
onDragEnd: this.onDragEnd,
|
|
onDrop: this.onDrop,
|
|
onDropPoint: this.onDropPoint,
|
|
onNodeClick: this.props.onNodeClick,
|
|
onNodeDoubleClick: this.props.onNodeDoubleClick
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderRootChildren",
|
|
value: function renderRootChildren() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.filter) {
|
|
this.filterChanged = true;
|
|
|
|
this._filter();
|
|
}
|
|
|
|
var value = this.getRootNode();
|
|
return value.map(function (node, index) {
|
|
return _this2.renderRootChild(node, index, index === value.length - 1);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderModel",
|
|
value: function renderModel() {
|
|
if (this.props.value) {
|
|
var rootNodes = this.renderRootChildren();
|
|
var contentClass = classNames('p-tree-container', this.props.contentClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
className: contentClass,
|
|
role: "tree",
|
|
"aria-label": this.props.ariaLabel,
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
style: this.props.contentStyle
|
|
}, rootNodes);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
if (this.props.loading) {
|
|
var icon = classNames('p-tree-loading-icon pi-spin', this.props.loadingIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tree-loading-overlay p-component-overlay"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: icon
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFilter",
|
|
value: function renderFilter() {
|
|
if (this.props.filter) {
|
|
var filterValue = this.getFilterValue();
|
|
filterValue = ObjectUtils.isNotEmpty(filterValue) ? filterValue : '';
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tree-filter-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
type: "text",
|
|
value: filterValue,
|
|
autoComplete: "off",
|
|
className: "p-tree-filter p-inputtext p-component",
|
|
placeholder: this.props.filterPlaceholder,
|
|
onKeyDown: this.onFilterInputKeyDown,
|
|
onChange: this.onFilterInputChange,
|
|
disabled: this.props.disabled
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-tree-filter-icon pi pi-search"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.showHeader) {
|
|
var filterElement = this.renderFilter();
|
|
var content = filterElement;
|
|
|
|
if (this.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: this.onFilterInputKeyDown,
|
|
onChange: this.onFilterInputChange
|
|
},
|
|
filterElement: filterElement,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.header, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tree-header"
|
|
}, content);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
var content = ObjectUtils.getJSXElement(this.props.footer, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-tree-footer"
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames('p-tree p-component', this.props.className, {
|
|
'p-tree-selectable': this.props.selectionMode,
|
|
'p-tree-loading': this.props.loading,
|
|
'p-disabled': this.props.disabled
|
|
});
|
|
var loader = this.renderLoader();
|
|
var content = this.renderModel();
|
|
var header = this.renderHeader();
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, loader, header, content, footer);
|
|
}
|
|
}]);
|
|
|
|
return Tree;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Tree, "defaultProps", {
|
|
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,
|
|
nodeTemplate: null,
|
|
togglerTemplate: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onDragDrop: null,
|
|
onContextMenu: null,
|
|
onFilterValueChange: null,
|
|
onNodeClick: null,
|
|
onNodeDoubleClick: null
|
|
});
|
|
|
|
function _createSuper$f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$f(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$f() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
var TreeSelectPanelComponent = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeSelectPanelComponent, _Component);
|
|
|
|
var _super = _createSuper$f(TreeSelectPanelComponent);
|
|
|
|
function TreeSelectPanelComponent() {
|
|
_classCallCheck(this, TreeSelectPanelComponent);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(TreeSelectPanelComponent, [{
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var className = classNames('p-treeselect-panel p-component', this.props.panelClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.props.forwardRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.props["in"],
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.props.onEnter,
|
|
onEntering: this.props.onEntering,
|
|
onEntered: this.props.onEntered,
|
|
onExit: this.props.onExit,
|
|
onExited: this.props.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.props.forwardRef,
|
|
className: className,
|
|
style: this.props.panelStyle,
|
|
onClick: this.props.onClick
|
|
}, this.props.header, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-items-wrapper",
|
|
style: {
|
|
maxHeight: this.props.scrollHeight || 'auto'
|
|
}
|
|
}, this.props.children), this.props.footer));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var element = this.renderElement();
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: this.props.appendTo
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return TreeSelectPanelComponent;
|
|
}(React.Component);
|
|
|
|
var TreeSelectPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeSelectPanelComponent, _extends({
|
|
forwardRef: ref
|
|
}, props));
|
|
});
|
|
|
|
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; }
|
|
|
|
function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$e(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$e() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeSelect = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeSelect, _Component);
|
|
|
|
var _super = _createSuper$e(TreeSelect);
|
|
|
|
function TreeSelect(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeSelect);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false,
|
|
overlayVisible: false,
|
|
expandedKeys: {}
|
|
};
|
|
|
|
if (!_this.props.onFilterValueChange) {
|
|
_this.state['filterValue'] = '';
|
|
}
|
|
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputFocus = _this.onInputFocus.bind(_assertThisInitialized(_this));
|
|
_this.onInputBlur = _this.onInputBlur.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputChange = _this.onFilterInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onFilterInputKeyDown = _this.onFilterInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayClick = _this.onOverlayClick.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onSelectionChange = _this.onSelectionChange.bind(_assertThisInitialized(_this));
|
|
_this.onNodeSelect = _this.onNodeSelect.bind(_assertThisInitialized(_this));
|
|
_this.onNodeUnselect = _this.onNodeUnselect.bind(_assertThisInitialized(_this));
|
|
_this.onNodeToggle = _this.onNodeToggle.bind(_assertThisInitialized(_this));
|
|
_this.onFilterValueChange = _this.onFilterValueChange.bind(_assertThisInitialized(_this));
|
|
_this.hide = _this.hide.bind(_assertThisInitialized(_this));
|
|
_this.show = _this.show.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeSelect, [{
|
|
key: "getFilterValue",
|
|
value: function getFilterValue() {
|
|
return this.props.onFilterValueChange ? this.props.filterValue : this.state.filterValue;
|
|
}
|
|
}, {
|
|
key: "getSelectedNodes",
|
|
value: function getSelectedNodes() {
|
|
var selectedNodes = [];
|
|
|
|
if (ObjectUtils.isNotEmpty(this.props.value) && this.props.options) {
|
|
var keys = this.props.selectionMode === 'single' ? _defineProperty({}, "".concat(this.props.value), true) : _objectSpread$6({}, this.props.value);
|
|
this.findSelectedNodes(null, keys, selectedNodes);
|
|
}
|
|
|
|
return selectedNodes;
|
|
}
|
|
}, {
|
|
key: "getLabel",
|
|
value: function getLabel() {
|
|
var value = this.getSelectedNodes();
|
|
return value.length ? value.map(function (node) {
|
|
return node.label;
|
|
}).join(', ') : this.props.placeholder;
|
|
}
|
|
}, {
|
|
key: "isValueEmpty",
|
|
value: function isValueEmpty() {
|
|
return !this.props.value || Object.keys(this.props.value).length === 0;
|
|
}
|
|
}, {
|
|
key: "hasNoOptions",
|
|
value: function hasNoOptions() {
|
|
return !this.props.options || this.props.options.length === 0;
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
this.setState({
|
|
overlayVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputFocus",
|
|
value: function onInputFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputBlur",
|
|
value: function onInputBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled && (!this.overlayRef || !this.overlayRef.current || !this.overlayRef.current.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
|
|
this.focusInput.focus();
|
|
|
|
if (this.state.overlayVisible) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSelectionChange",
|
|
value: function onSelectionChange(event) {
|
|
if (this.props.onChange) {
|
|
this.selfChange = true;
|
|
this.props.onChange({
|
|
originalEvent: event.originalEvent,
|
|
value: event.value,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: event.value
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onNodeSelect",
|
|
value: function onNodeSelect(node) {
|
|
this.props.onNodeSelect && this.props.onNodeSelect(node);
|
|
|
|
if (this.props.selectionMode === 'single') {
|
|
this.hide();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onNodeUnselect",
|
|
value: function onNodeUnselect(node) {
|
|
this.props.onNodeUnselect && this.props.onNodeUnselect(node);
|
|
}
|
|
}, {
|
|
key: "onNodeToggle",
|
|
value: function onNodeToggle(e) {
|
|
this.setState({
|
|
expandedKeys: e.value
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilterValueChange",
|
|
value: function onFilterValueChange(e) {
|
|
this.setState({
|
|
filterValue: e.value
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayClick",
|
|
value: function onOverlayClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (!this.state.overlayVisible && event.altKey) {
|
|
this.show();
|
|
}
|
|
|
|
break;
|
|
//space
|
|
|
|
case 32:
|
|
if (!this.state.overlayVisible) {
|
|
this.show();
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//enter and escape
|
|
|
|
case 13:
|
|
case 27:
|
|
if (this.state.overlayVisible) {
|
|
this.hide();
|
|
event.preventDefault();
|
|
}
|
|
|
|
break;
|
|
//tab
|
|
|
|
case 9:
|
|
this.hide();
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInputKeyDown",
|
|
value: function onFilterInputKeyDown(event) {
|
|
//enter
|
|
if (event.which === 13) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInputChange",
|
|
value: function onFilterInputChange(event) {
|
|
var filterValue = event.target.value;
|
|
|
|
if (this.props.onFilterValueChange) {
|
|
this.props.onFilterValueChange({
|
|
originalEvent: event,
|
|
value: filterValue
|
|
});
|
|
} else {
|
|
this.setState({
|
|
filterValue: filterValue
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "resetFilter",
|
|
value: function resetFilter() {
|
|
this.setState({
|
|
filterValue: ''
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
this.scrollInView();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
|
|
if (this.props.filter && this.props.filterInputAutoFocus) {
|
|
this.filterInput.focus();
|
|
}
|
|
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
if (this.props.filter && this.props.resetFilterOnHide) {
|
|
this.resetFilter();
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
DomHandler.alignOverlay(this.overlayRef.current, this.trigger.parentElement, this.props.appendTo || PrimeReact.appendTo);
|
|
}
|
|
}, {
|
|
key: "scrollInView",
|
|
value: function scrollInView() {
|
|
var highlightItem = DomHandler.findSingle(this.overlayRef.current, '.p-treenode-content.p-highlight');
|
|
|
|
if (highlightItem) {
|
|
highlightItem.scrollIntoView({
|
|
block: 'nearest',
|
|
inline: 'start'
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.state.overlayVisible && _this2.isOutsideClicked(event)) {
|
|
_this2.hide();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this3.state.overlayVisible) {
|
|
_this3.hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this4 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this4.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this4.hide();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.overlayRef && this.overlayRef.current.contains(event.target));
|
|
}
|
|
}, {
|
|
key: "findSelectedNodes",
|
|
value: function findSelectedNodes(node, keys, selectedNodes) {
|
|
if (node) {
|
|
if (this.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;
|
|
this.findSelectedNodes(childNode, keys, selectedNodes);
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
} else {
|
|
var _iterator2 = _createForOfIteratorHelper$4(this.props.options),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var _childNode = _step2.value;
|
|
this.findSelectedNodes(_childNode, keys, selectedNodes);
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(node, keys) {
|
|
return this.props.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
|
|
}
|
|
}, {
|
|
key: "updateTreeState",
|
|
value: function updateTreeState() {
|
|
var keys = this.props.selectionMode === 'single' ? _defineProperty({}, "".concat(this.props.value), true) : _objectSpread$6({}, this.props.value);
|
|
this.setState({
|
|
expandedKeys: {}
|
|
});
|
|
|
|
if (keys && this.props.options) {
|
|
this.updateTreeBranchState(null, null, keys);
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateTreeBranchState",
|
|
value: function updateTreeBranchState(node, path, keys) {
|
|
if (node) {
|
|
if (this.isSelected(node, keys)) {
|
|
this.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);
|
|
this.updateTreeBranchState(childNode, path, keys);
|
|
}
|
|
} catch (err) {
|
|
_iterator3.e(err);
|
|
} finally {
|
|
_iterator3.f();
|
|
}
|
|
}
|
|
} else {
|
|
var _iterator4 = _createForOfIteratorHelper$4(this.props.options),
|
|
_step4;
|
|
|
|
try {
|
|
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
var _childNode2 = _step4.value;
|
|
this.updateTreeBranchState(_childNode2, [], keys);
|
|
}
|
|
} catch (err) {
|
|
_iterator4.e(err);
|
|
} finally {
|
|
_iterator4.f();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "expandPath",
|
|
value: function expandPath(path) {
|
|
if (path.length > 0) {
|
|
var expandedKeys = _objectSpread$6({}, this.state.expandedKeys || {});
|
|
|
|
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();
|
|
}
|
|
|
|
this.setState({
|
|
expandedKeys: expandedKeys
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateTreeState();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (this.state.overlayVisible) {
|
|
if (this.props.filter || prevState.expandedKeys !== this.state.expandedKeys) {
|
|
this.alignOverlay();
|
|
}
|
|
|
|
if (prevProps.value !== this.props.value) {
|
|
if (!this.selfChange) {
|
|
this.updateTreeState();
|
|
}
|
|
|
|
this.scrollInView();
|
|
this.selfChange = false;
|
|
}
|
|
}
|
|
|
|
if (prevProps.options !== this.props.options) {
|
|
this.updateTreeState();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderKeyboardHelper",
|
|
value: function renderKeyboardHelper() {
|
|
var _this5 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this5.focusInput = el;
|
|
},
|
|
role: "listbox",
|
|
id: this.props.inputId,
|
|
type: "text",
|
|
readOnly: true,
|
|
"aria-haspopup": "true",
|
|
"aria-expanded": this.state.overlayVisible,
|
|
onFocus: this.onInputFocus,
|
|
onBlur: this.onInputBlur,
|
|
onKeyDown: this.onInputKeyDown,
|
|
disabled: this.props.disabled,
|
|
tabIndex: this.props.tabIndex,
|
|
"aria-label": this.props.ariaLabel,
|
|
"aria-labelledby": this.props.ariaLabelledBy
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(selectedNodes) {
|
|
var isValueEmpty = this.isValueEmpty();
|
|
var labelClassName = classNames('p-treeselect-label', {
|
|
'p-placeholder': this.getLabel() === this.props.placeholder,
|
|
'p-treeselect-label-empty': !this.props.placeholder && isValueEmpty
|
|
});
|
|
var content = null;
|
|
|
|
if (this.props.valueTemplate) {
|
|
content = ObjectUtils.getJSXElement(this.props.valueTemplate, selectedNodes, this.props);
|
|
} else {
|
|
if (this.props.display === 'comma') {
|
|
content = this.getLabel() || 'empty';
|
|
} else if (this.props.display === 'chip') {
|
|
var _selectedNodes = this.getSelectedNodes();
|
|
|
|
content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _selectedNodes && _selectedNodes.map(function (node, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-token",
|
|
key: "".concat(node.key, "_").concat(index)
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-treeselect-token-label"
|
|
}, node.label));
|
|
}), isValueEmpty && (this.props.placeholder || 'empty'));
|
|
}
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-label-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: labelClassName
|
|
}, content));
|
|
}
|
|
}, {
|
|
key: "renderDropdownIcon",
|
|
value: function renderDropdownIcon() {
|
|
var _this6 = this;
|
|
|
|
var iconClassName = classNames('p-treeselect-trigger-icon p-clickable', this.props.dropdownIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this6.trigger = el;
|
|
},
|
|
className: "p-treeselect-trigger",
|
|
role: "button",
|
|
"aria-haspopup": "listbox",
|
|
"aria-expanded": this.state.overlayVisible
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var filterValue = this.getFilterValue();
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Tree, {
|
|
value: this.props.options,
|
|
selectionMode: this.props.selectionMode,
|
|
selectionKeys: this.props.value,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
onSelectionChange: this.onSelectionChange,
|
|
onSelect: this.onNodeSelect,
|
|
onUnselect: this.onNodeUnselect,
|
|
expandedKeys: this.state.expandedKeys,
|
|
onToggle: this.onNodeToggle,
|
|
onExpand: this.props.onNodeExpand,
|
|
onCollapse: this.props.onNodeCollapse,
|
|
filter: this.props.filter,
|
|
filterValue: filterValue,
|
|
filterBy: this.props.filterBy,
|
|
filterMode: this.props.filterMode,
|
|
filterPlaceholder: this.props.filterPlaceholder,
|
|
filterLocale: this.props.filterLocale,
|
|
showHeader: false,
|
|
onFilterValueChange: this.onFilterValueChange
|
|
}), this.hasNoOptions() && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-empty-message"
|
|
}, this.props.emptyMessage || localeOption('emptyMessage')));
|
|
}
|
|
}, {
|
|
key: "renderFilterElement",
|
|
value: function renderFilterElement() {
|
|
var _this7 = this;
|
|
|
|
if (this.props.filter) {
|
|
var filterValue = this.getFilterValue();
|
|
filterValue = ObjectUtils.isNotEmpty(filterValue) ? filterValue : '';
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-filter-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this7.filterInput = el;
|
|
},
|
|
type: "text",
|
|
value: filterValue,
|
|
autoComplete: "off",
|
|
className: "p-treeselect-filter p-inputtext p-component",
|
|
placeholder: this.props.filterPlaceholder,
|
|
onKeyDown: this.onFilterInputKeyDown,
|
|
onChange: this.onFilterInputChange,
|
|
disabled: this.props.disabled
|
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-treeselect-filter-icon pi pi-search"
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
var filterElement = this.renderFilterElement();
|
|
var closeElement = /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-treeselect-close p-link",
|
|
onClick: this.hide
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-treeselect-close-icon pi pi-times"
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
var content = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treeselect-header"
|
|
}, filterElement, closeElement);
|
|
|
|
if (this.props.header) {
|
|
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: this.hide,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.header, defaultOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this8 = this;
|
|
|
|
var className = classNames('p-treeselect p-component p-inputwrapper', {
|
|
'p-treeselect-chip': this.props.display === 'chip',
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-inputwrapper-filled': !this.isValueEmpty(),
|
|
'p-inputwrapper-focus': this.state.focused || this.state.overlayVisible
|
|
}, this.props.className);
|
|
var selectedNodes = this.getSelectedNodes();
|
|
var keyboardHelper = this.renderKeyboardHelper();
|
|
var labelElement = this.renderLabel(selectedNodes);
|
|
var dropdownIcon = this.renderDropdownIcon();
|
|
var content = this.renderContent();
|
|
var header = this.renderHeader();
|
|
var footer = ObjectUtils.getJSXElement(this.props.footer, this.props);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
ref: function ref(el) {
|
|
return _this8.container = el;
|
|
},
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, keyboardHelper, labelElement, dropdownIcon, /*#__PURE__*/React__default["default"].createElement(TreeSelectPanel, {
|
|
ref: this.overlayRef,
|
|
appendTo: this.props.appendTo,
|
|
panelStyle: this.props.panelStyle,
|
|
panelClassName: this.props.panelClassName,
|
|
scrollHeight: this.props.scrollHeight,
|
|
onClick: this.onOverlayClick,
|
|
header: header,
|
|
footer: footer,
|
|
transitionOptions: this.props.transitionOptions,
|
|
"in": this.state.overlayVisible,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
}, content));
|
|
}
|
|
}]);
|
|
|
|
return TreeSelect;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeSelect, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
name: null,
|
|
style: null,
|
|
className: null,
|
|
disabled: false,
|
|
options: null,
|
|
scrollHeight: '400px',
|
|
placeholder: null,
|
|
tabIndex: null,
|
|
inputId: null,
|
|
ariaLabel: null,
|
|
ariaLabelledBy: null,
|
|
selectionMode: 'single',
|
|
panelStyle: null,
|
|
panelClassName: null,
|
|
appendTo: null,
|
|
emptyMessage: null,
|
|
display: 'comma',
|
|
metaKeySelection: true,
|
|
valueTemplate: null,
|
|
panelHeaderTemplate: null,
|
|
panelFooterTemplate: null,
|
|
transitionOptions: null,
|
|
dropdownIcon: 'pi pi-chevron-down',
|
|
filter: false,
|
|
filterValue: null,
|
|
filterBy: 'label',
|
|
filterMode: 'lenient',
|
|
filterPlaceholder: null,
|
|
filterLocale: undefined,
|
|
filterInputAutoFocus: true,
|
|
resetFilterOnHide: false,
|
|
onShow: null,
|
|
onHide: null,
|
|
onChange: null,
|
|
onNodeSelect: null,
|
|
onNodeUnselect: null,
|
|
onNodeExpand: null,
|
|
onNodeCollapse: null,
|
|
onFilterValueChange: null
|
|
});
|
|
|
|
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 _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableHeader = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableHeader, _Component);
|
|
|
|
var _super = _createSuper$d(TreeTableHeader);
|
|
|
|
function TreeTableHeader(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTableHeader);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
badgeVisible: false
|
|
};
|
|
_this.onFilterInput = _this.onFilterInput.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTableHeader, [{
|
|
key: "onHeaderClick",
|
|
value: function onHeaderClick(event, column) {
|
|
if (column.props.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')) {
|
|
this.props.onSort({
|
|
originalEvent: event,
|
|
sortField: column.props.sortField || column.props.field,
|
|
sortFunction: column.props.sortFunction,
|
|
sortable: column.props.sortable
|
|
});
|
|
DomHandler.clearSelection();
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onHeaderMouseDown",
|
|
value: function onHeaderMouseDown(event, column) {
|
|
if (this.props.reorderableColumns && column.props.reorderable) {
|
|
if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onHeaderKeyDown",
|
|
value: function onHeaderKeyDown(event, column) {
|
|
if (event.key === 'Enter') {
|
|
this.onHeaderClick(event, column);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "getMultiSortMetaDataIndex",
|
|
value: function getMultiSortMetaDataIndex(column) {
|
|
if (this.props.multiSortMeta) {
|
|
for (var i = 0; i < this.props.multiSortMeta.length; i++) {
|
|
if (this.props.multiSortMeta[i].field === column.props.field) {
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
}
|
|
}, {
|
|
key: "onResizerMouseDown",
|
|
value: function onResizerMouseDown(event, column) {
|
|
if (this.props.resizableColumns && this.props.onResizeStart) {
|
|
this.props.onResizeStart({
|
|
originalEvent: event,
|
|
columnEl: event.target.parentElement,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragStart",
|
|
value: function onDragStart(event, column) {
|
|
if (this.props.onDragStart) {
|
|
this.props.onDragStart({
|
|
originalEvent: event,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event, column) {
|
|
if (this.props.onDragOver) {
|
|
this.props.onDragOver({
|
|
originalEvent: event,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event, column) {
|
|
if (this.props.onDragLeave) {
|
|
this.props.onDragLeave({
|
|
originalEvent: event,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event, column) {
|
|
if (this.props.onDrop) {
|
|
this.props.onDrop({
|
|
originalEvent: event,
|
|
column: column
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFilterInput",
|
|
value: function onFilterInput(e, column) {
|
|
var _this2 = this;
|
|
|
|
if (column.props.filter && this.props.onFilter) {
|
|
if (this.filterTimeout) {
|
|
clearTimeout(this.filterTimeout);
|
|
}
|
|
|
|
var filterValue = e.target.value;
|
|
this.filterTimeout = setTimeout(function () {
|
|
_this2.props.onFilter({
|
|
value: filterValue,
|
|
field: column.props.field,
|
|
matchMode: column.props.filterMatchMode || 'startsWith'
|
|
});
|
|
|
|
_this2.filterTimeout = null;
|
|
}, this.props.filterDelay);
|
|
}
|
|
}
|
|
}, {
|
|
key: "hasColumnFilter",
|
|
value: function hasColumnFilter(columns) {
|
|
if (columns) {
|
|
var _iterator = _createForOfIteratorHelper$3(columns),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var col = _step.value;
|
|
|
|
if (col.props.filter) {
|
|
return true;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "renderSortIcon",
|
|
value: function renderSortIcon(column, sorted, sortOrder) {
|
|
if (column.props.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__default["default"].createElement("span", {
|
|
className: sortIconClassName
|
|
});
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderResizer",
|
|
value: function renderResizer(column) {
|
|
var _this3 = this;
|
|
|
|
if (this.props.resizableColumns) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-column-resizer p-clickable",
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this3.onResizerMouseDown(e, column);
|
|
}
|
|
});
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "getAriaSort",
|
|
value: function getAriaSort(column, sorted, sortOrder) {
|
|
if (column.props.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;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderSortBadge",
|
|
value: function renderSortBadge(sortMetaDataIndex) {
|
|
if (sortMetaDataIndex !== -1 && this.state.badgeVisible) {
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-sortable-column-badge"
|
|
}, sortMetaDataIndex + 1);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeaderCell",
|
|
value: function renderHeaderCell(column, options) {
|
|
var _this4 = this;
|
|
|
|
var filterElement;
|
|
|
|
if (column.props.filter && options.renderFilter) {
|
|
filterElement = column.props.filterElement || /*#__PURE__*/React__default["default"].createElement(InputText, {
|
|
onInput: function onInput(e) {
|
|
return _this4.onFilterInput(e, column);
|
|
},
|
|
type: this.props.filterType,
|
|
defaultValue: this.props.filters && this.props.filters[column.props.field] ? this.props.filters[column.props.field].value : null,
|
|
className: "p-column-filter",
|
|
placeholder: column.props.filterPlaceholder,
|
|
maxLength: column.props.filterMaxLength
|
|
});
|
|
}
|
|
|
|
if (options.filterOnly) {
|
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
key: column.props.columnKey || column.props.field || options.index,
|
|
className: classNames('p-filter-column', column.props.filterHeaderClassName),
|
|
style: column.props.filterHeaderStyle || column.props.style,
|
|
rowSpan: column.props.rowSpan,
|
|
colSpan: column.props.colSpan
|
|
}, filterElement);
|
|
} else {
|
|
var sortMetaDataIndex = this.getMultiSortMetaDataIndex(column);
|
|
var multiSortMetaData = sortMetaDataIndex !== -1 ? this.props.multiSortMeta[sortMetaDataIndex] : null;
|
|
var singleSorted = column.props.field === this.props.sortField;
|
|
var multipleSorted = multiSortMetaData !== null;
|
|
var sorted = column.props.sortable && (singleSorted || multipleSorted);
|
|
var sortOrder = 0;
|
|
if (singleSorted) sortOrder = this.props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
|
|
var sortIconElement = this.renderSortIcon(column, sorted, sortOrder);
|
|
var ariaSortData = this.getAriaSort(column, sorted, sortOrder);
|
|
var sortBadge = this.renderSortBadge(sortMetaDataIndex);
|
|
var className = classNames(column.props.headerClassName || column.props.className, {
|
|
'p-sortable-column': column.props.sortable,
|
|
'p-highlight': sorted,
|
|
'p-resizable-column': this.props.resizableColumns
|
|
});
|
|
var resizer = this.renderResizer(column);
|
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
key: column.columnKey || column.field || options.index,
|
|
className: className,
|
|
style: column.props.headerStyle || column.props.style,
|
|
tabIndex: column.props.sortable ? this.props.tabIndex : null,
|
|
onClick: function onClick(e) {
|
|
return _this4.onHeaderClick(e, column);
|
|
},
|
|
onMouseDown: function onMouseDown(e) {
|
|
return _this4.onHeaderMouseDown(e, column);
|
|
},
|
|
onKeyDown: function onKeyDown(e) {
|
|
return _this4.onHeaderKeyDown(e, column);
|
|
},
|
|
rowSpan: column.props.rowSpan,
|
|
colSpan: column.props.colSpan,
|
|
"aria-sort": ariaSortData,
|
|
onDragStart: function onDragStart(e) {
|
|
return _this4.onDragStart(e, column);
|
|
},
|
|
onDragOver: function onDragOver(e) {
|
|
return _this4.onDragOver(e, column);
|
|
},
|
|
onDragLeave: function onDragLeave(e) {
|
|
return _this4.onDragLeave(e, column);
|
|
},
|
|
onDrop: function onDrop(e) {
|
|
return _this4.onDrop(e, column);
|
|
}
|
|
}, resizer, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-column-title"
|
|
}, column.props.header), sortIconElement, sortBadge, filterElement);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderHeaderRow",
|
|
value: function renderHeaderRow(row, index) {
|
|
var _this5 = this;
|
|
|
|
var rowColumns = React__default["default"].Children.toArray(row.props.children);
|
|
var rowHeaderCells = rowColumns.map(function (col, i) {
|
|
return _this5.renderHeaderCell(col, {
|
|
index: i,
|
|
filterOnly: false,
|
|
renderFilter: true
|
|
});
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
key: index
|
|
}, rowHeaderCells);
|
|
}
|
|
}, {
|
|
key: "renderColumnGroup",
|
|
value: function renderColumnGroup() {
|
|
var _this6 = this;
|
|
|
|
var rows = React__default["default"].Children.toArray(this.props.columnGroup.props.children);
|
|
return rows.map(function (row, i) {
|
|
return _this6.renderHeaderRow(row, i);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderColumns",
|
|
value: function renderColumns(columns) {
|
|
var _this7 = this;
|
|
|
|
if (columns) {
|
|
if (this.hasColumnFilter(columns)) {
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col, i) {
|
|
return _this7.renderHeaderCell(col, {
|
|
index: i,
|
|
filterOnly: false,
|
|
renderFilter: false
|
|
});
|
|
})), /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col, i) {
|
|
return _this7.renderHeaderCell(col, {
|
|
index: i,
|
|
filterOnly: true,
|
|
renderFilter: true
|
|
});
|
|
})));
|
|
} else {
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col, i) {
|
|
return _this7.renderHeaderCell(col, {
|
|
index: i,
|
|
filterOnly: false,
|
|
renderFilter: false
|
|
});
|
|
}));
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.columnGroup ? this.renderColumnGroup() : this.renderColumns(this.props.columns);
|
|
return /*#__PURE__*/React__default["default"].createElement("thead", {
|
|
className: "p-treetable-thead"
|
|
}, content);
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
return {
|
|
badgeVisible: nextProps.multiSortMeta && nextProps.multiSortMeta.length > 1
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return TreeTableHeader;
|
|
}(React.Component);
|
|
|
|
function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableBodyCell = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableBodyCell, _Component);
|
|
|
|
var _super = _createSuper$c(TreeTableBodyCell);
|
|
|
|
function TreeTableBodyCell(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTableBodyCell);
|
|
|
|
_this = _super.call(this, props);
|
|
|
|
if (_this.props.editor) {
|
|
_this.state = {};
|
|
}
|
|
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onEditorFocus = _this.onEditorFocus.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTableBodyCell, [{
|
|
key: "onClick",
|
|
value: function onClick() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.editor && !this.state.editing && (this.props.selectOnEdit || !this.props.selectOnEdit && this.props.selected)) {
|
|
this.selfClick = true;
|
|
this.setState({
|
|
editing: true
|
|
}, function () {
|
|
_this2.bindDocumentEditListener();
|
|
|
|
_this2.overlayEventListener = function (e) {
|
|
if (!_this2.isOutsideClicked(e.target)) {
|
|
_this2.selfClick = true;
|
|
}
|
|
};
|
|
|
|
OverlayService.on('overlay-click', _this2.overlayEventListener);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.which === 13 || event.which === 9) {
|
|
this.switchCellToViewMode(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentEditListener",
|
|
value: function bindDocumentEditListener() {
|
|
var _this3 = this;
|
|
|
|
if (!this.documentEditListener) {
|
|
this.documentEditListener = function (e) {
|
|
if (!_this3.selfClick && _this3.isOutsideClicked(e.target)) {
|
|
_this3.switchCellToViewMode(e);
|
|
}
|
|
|
|
_this3.selfClick = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentEditListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(target) {
|
|
return this.container && !(this.container.isSameNode(target) || this.container.contains(target));
|
|
}
|
|
}, {
|
|
key: "unbindDocumentEditListener",
|
|
value: function unbindDocumentEditListener() {
|
|
if (this.documentEditListener) {
|
|
document.removeEventListener('click', this.documentEditListener);
|
|
this.documentEditListener = null;
|
|
this.selfClick = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: "closeCell",
|
|
value: function closeCell() {
|
|
var _this4 = this;
|
|
|
|
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
|
|
setTimeout(function () {
|
|
_this4.setState({
|
|
editing: false
|
|
}, function () {
|
|
_this4.unbindDocumentEditListener();
|
|
|
|
OverlayService.off('overlay-click', _this4.overlayEventListener);
|
|
_this4.overlayEventListener = null;
|
|
});
|
|
}, 1);
|
|
}
|
|
}, {
|
|
key: "onEditorFocus",
|
|
value: function onEditorFocus(event) {
|
|
this.onClick(event);
|
|
}
|
|
}, {
|
|
key: "switchCellToViewMode",
|
|
value: function switchCellToViewMode(event) {
|
|
if (this.props.cellEditValidator) {
|
|
var valid = this.props.cellEditValidator({
|
|
originalEvent: event,
|
|
columnProps: this.props
|
|
});
|
|
|
|
if (valid) {
|
|
this.closeCell();
|
|
}
|
|
} else {
|
|
this.closeCell();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
var _this5 = this;
|
|
|
|
if (this.container && this.props.editor) {
|
|
clearTimeout(this.tabindexTimeout);
|
|
|
|
if (this.state && this.state.editing) {
|
|
var focusable = DomHandler.findSingle(this.container, 'input');
|
|
|
|
if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
|
|
focusable.setAttribute('data-isCellEditing', true);
|
|
focusable.focus();
|
|
}
|
|
|
|
this.keyHelper.tabIndex = -1;
|
|
} else {
|
|
this.tabindexTimeout = setTimeout(function () {
|
|
if (_this5.keyHelper) {
|
|
_this5.keyHelper.setAttribute('tabindex', 0);
|
|
}
|
|
}, 50);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentEditListener();
|
|
|
|
if (this.overlayEventListener) {
|
|
OverlayService.off('overlay-click', this.overlayEventListener);
|
|
this.overlayEventListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var className = classNames(this.props.bodyClassName || this.props.className, {
|
|
'p-editable-column': this.props.editor,
|
|
'p-cell-editing': this.props.editor ? this.state.editing : false
|
|
});
|
|
var style = this.props.bodyStyle || this.props.style;
|
|
var content;
|
|
|
|
if (this.state && this.state.editing) {
|
|
if (this.props.editor) content = ObjectUtils.getJSXElement(this.props.editor, {
|
|
node: this.props.node,
|
|
rowData: this.props.node.data,
|
|
value: ObjectUtils.resolveFieldData(this.props.node.data, this.props.field),
|
|
field: this.props.field,
|
|
rowIndex: this.props.rowIndex,
|
|
props: this.props
|
|
});else throw new Error("Editor is not found on column.");
|
|
} else {
|
|
if (this.props.body) content = ObjectUtils.getJSXElement(this.props.body, this.props.node, {
|
|
field: this.props.field,
|
|
rowIndex: this.props.rowIndex,
|
|
props: this.props
|
|
});else content = ObjectUtils.resolveFieldData(this.props.node.data, this.props.field);
|
|
}
|
|
/* eslint-disable */
|
|
|
|
|
|
var editorKeyHelper = this.props.editor && /*#__PURE__*/React__default["default"].createElement("a", {
|
|
tabIndex: 0,
|
|
ref: function ref(el) {
|
|
_this6.keyHelper = el;
|
|
},
|
|
className: "p-cell-editor-key-helper p-hidden-accessible",
|
|
onFocus: this.onEditorFocus
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", null));
|
|
/* eslint-enable */
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
ref: function ref(el) {
|
|
return _this6.container = el;
|
|
},
|
|
className: className,
|
|
style: style,
|
|
onClick: this.onClick,
|
|
onKeyDown: this.onKeyDown
|
|
}, this.props.children, editorKeyHelper, content);
|
|
}
|
|
}]);
|
|
|
|
return TreeTableBodyCell;
|
|
}(React.Component);
|
|
|
|
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; }
|
|
|
|
function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$b(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableRow = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableRow, _Component);
|
|
|
|
var _super = _createSuper$b(TreeTableRow);
|
|
|
|
function TreeTableRow(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTableRow);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onTogglerClick = _this.onTogglerClick.bind(_assertThisInitialized(_this));
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
|
|
_this.propagateUp = _this.propagateUp.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxFocus = _this.onCheckboxFocus.bind(_assertThisInitialized(_this));
|
|
_this.onCheckboxBlur = _this.onCheckboxBlur.bind(_assertThisInitialized(_this));
|
|
_this.onRightClick = _this.onRightClick.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTableRow, [{
|
|
key: "isLeaf",
|
|
value: function isLeaf() {
|
|
return this.props.node.leaf === false ? false : !(this.props.node.children && this.props.node.children.length);
|
|
}
|
|
}, {
|
|
key: "onTogglerClick",
|
|
value: function onTogglerClick(event) {
|
|
if (this.isExpanded()) this.collapse(event);else this.expand(event);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
}, {
|
|
key: "expand",
|
|
value: function expand(event) {
|
|
var expandedKeys = this.props.expandedKeys ? _objectSpread$5({}, this.props.expandedKeys) : {};
|
|
expandedKeys[this.props.node.key] = true;
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: expandedKeys
|
|
});
|
|
this.invokeToggleEvents(event, true);
|
|
}
|
|
}, {
|
|
key: "collapse",
|
|
value: function collapse(event) {
|
|
var expandedKeys = _objectSpread$5({}, this.props.expandedKeys);
|
|
|
|
delete expandedKeys[this.props.node.key];
|
|
this.props.onToggle({
|
|
originalEvent: event,
|
|
value: expandedKeys
|
|
});
|
|
this.invokeToggleEvents(event, false);
|
|
}
|
|
}, {
|
|
key: "invokeToggleEvents",
|
|
value: function invokeToggleEvents(event, expanded) {
|
|
if (expanded) {
|
|
if (this.props.onExpand) {
|
|
this.props.onExpand({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.props.onCollapse) {
|
|
this.props.onCollapse({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (this.props.onRowClick) {
|
|
this.props.onRowClick(event, this.props.node);
|
|
}
|
|
|
|
this.nodeTouched = false;
|
|
}
|
|
}, {
|
|
key: "onTouchEnd",
|
|
value: function onTouchEnd() {
|
|
this.nodeTouched = true;
|
|
}
|
|
}, {
|
|
key: "onCheckboxChange",
|
|
value: function onCheckboxChange(event) {
|
|
var checked = this.isChecked();
|
|
var selectionKeys = this.props.selectionKeys ? _objectSpread$5({}, this.props.selectionKeys) : {};
|
|
|
|
if (checked) {
|
|
if (this.props.propagateSelectionDown) this.propagateDown(this.props.node, false, selectionKeys);else delete selectionKeys[this.props.node.key];
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp({
|
|
originalEvent: event,
|
|
check: false,
|
|
selectionKeys: selectionKeys
|
|
});
|
|
}
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.props.propagateSelectionDown) this.propagateDown(this.props.node, true, selectionKeys);else selectionKeys[this.props.node.key] = {
|
|
checked: true
|
|
};
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp({
|
|
originalEvent: event,
|
|
check: true,
|
|
selectionKeys: selectionKeys
|
|
});
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: event,
|
|
value: selectionKeys
|
|
});
|
|
}
|
|
|
|
DomHandler.clearSelection();
|
|
}
|
|
}, {
|
|
key: "onCheckboxFocus",
|
|
value: function onCheckboxFocus() {
|
|
DomHandler.addClass(this.checkboxBox, 'p-focus');
|
|
DomHandler.addClass(this.checkboxRef, 'p-checkbox-focused');
|
|
}
|
|
}, {
|
|
key: "onCheckboxBlur",
|
|
value: function onCheckboxBlur() {
|
|
DomHandler.removeClass(this.checkboxBox, 'p-focus');
|
|
DomHandler.removeClass(this.checkboxRef, 'p-checkbox-focused');
|
|
}
|
|
}, {
|
|
key: "propagateUp",
|
|
value: function propagateUp(event) {
|
|
var check = event.check;
|
|
var selectionKeys = event.selectionKeys;
|
|
var checkedChildCount = 0;
|
|
var childPartialSelected = false;
|
|
|
|
var _iterator = _createForOfIteratorHelper$2(this.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 === this.props.node.children.length) {
|
|
selectionKeys[this.props.node.key] = {
|
|
checked: true,
|
|
partialChecked: false
|
|
};
|
|
} else {
|
|
if (!check) {
|
|
delete selectionKeys[this.props.node.key];
|
|
}
|
|
|
|
if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== this.props.node.children.length) selectionKeys[this.props.node.key] = {
|
|
checked: false,
|
|
partialChecked: true
|
|
};else selectionKeys[this.props.node.key] = {
|
|
checked: false,
|
|
partialChecked: false
|
|
};
|
|
}
|
|
|
|
if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
|
|
this.props.onPropagateUp(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "propagateDown",
|
|
value: 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++) {
|
|
this.propagateDown(node.children[i], check, selectionKeys);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onRightClick",
|
|
value: function onRightClick(event) {
|
|
DomHandler.clearSelection();
|
|
|
|
if (this.props.onContextMenuSelectionChange) {
|
|
this.props.onContextMenuSelectionChange({
|
|
originalEvent: event,
|
|
value: this.props.node.key
|
|
});
|
|
}
|
|
|
|
if (this.props.onContextMenu) {
|
|
this.props.onContextMenu({
|
|
originalEvent: event,
|
|
node: this.props.node
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.target === this.container) {
|
|
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 (!this.isExpanded()) {
|
|
this.expand(event);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//left arrow
|
|
|
|
case 37:
|
|
if (this.isExpanded()) {
|
|
this.collapse(event);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
this.onClick(event);
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isExpanded",
|
|
value: function isExpanded() {
|
|
return this.props.expandedKeys ? this.props.expandedKeys[this.props.node.key] !== undefined : false;
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected() {
|
|
if ((this.props.selectionMode === 'single' || this.props.selectionMode === 'multiple') && this.props.selectionKeys) return this.props.selectionMode === 'single' ? this.props.selectionKeys === this.props.node.key : this.props.selectionKeys[this.props.node.key] !== undefined;else return false;
|
|
}
|
|
}, {
|
|
key: "isChecked",
|
|
value: function isChecked() {
|
|
return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].checked : false;
|
|
}
|
|
}, {
|
|
key: "isPartialChecked",
|
|
value: function isPartialChecked() {
|
|
return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].partialChecked : false;
|
|
}
|
|
}, {
|
|
key: "renderToggler",
|
|
value: function renderToggler() {
|
|
var expanded = this.isExpanded();
|
|
var iconClassName = classNames('"p-treetable-toggler-icon pi pi-fw', {
|
|
'pi-chevron-right': !expanded,
|
|
'pi-chevron-down': expanded
|
|
});
|
|
var style = {
|
|
marginLeft: this.props.level * 16 + 'px',
|
|
visibility: this.props.node.leaf === false || this.props.node.children && this.props.node.children.length ? 'visible' : 'hidden'
|
|
};
|
|
return /*#__PURE__*/React__default["default"].createElement("button", {
|
|
type: "button",
|
|
className: "p-treetable-toggler p-link p-unselectable-text",
|
|
onClick: this.onTogglerClick,
|
|
tabIndex: -1,
|
|
style: style
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: iconClassName
|
|
}), /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderCheckbox",
|
|
value: function renderCheckbox() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.selectionMode === 'checkbox' && this.props.node.selectable !== false) {
|
|
var checked = this.isChecked();
|
|
var partialChecked = this.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__default["default"].createElement("div", {
|
|
className: "p-checkbox p-treetable-checkbox p-component",
|
|
ref: function ref(el) {
|
|
return _this2.checkboxRef = el;
|
|
},
|
|
onClick: this.onCheckboxChange,
|
|
role: "checkbox",
|
|
"aria-checked": checked
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
type: "checkbox",
|
|
onFocus: this.onCheckboxFocus,
|
|
onBlur: this.onCheckboxBlur
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
ref: function ref(el) {
|
|
return _this2.checkboxBox = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: icon
|
|
})));
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderCell",
|
|
value: function renderCell(column) {
|
|
var toggler, checkbox;
|
|
|
|
if (column.props.expander) {
|
|
toggler = this.renderToggler();
|
|
checkbox = this.renderCheckbox();
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableBodyCell, _extends({
|
|
key: column.props.columnKey || column.props.field
|
|
}, column.props, {
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
selected: this.isSelected(),
|
|
node: this.props.node,
|
|
rowIndex: this.props.rowIndex
|
|
}), toggler, checkbox);
|
|
}
|
|
}, {
|
|
key: "renderChildren",
|
|
value: function renderChildren() {
|
|
var _this3 = this;
|
|
|
|
if (this.isExpanded() && this.props.node.children) {
|
|
return this.props.node.children.map(function (childNode, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableRow, {
|
|
key: childNode.key || JSON.stringify(childNode.data),
|
|
level: _this3.props.level + 1,
|
|
rowIndex: _this3.props.rowIndex + '_' + index,
|
|
node: childNode,
|
|
columns: _this3.props.columns,
|
|
expandedKeys: _this3.props.expandedKeys,
|
|
selectOnEdit: _this3.props.selectOnEdit,
|
|
onToggle: _this3.props.onToggle,
|
|
onExpand: _this3.props.onExpand,
|
|
onCollapse: _this3.props.onCollapse,
|
|
selectionMode: _this3.props.selectionMode,
|
|
selectionKeys: _this3.props.selectionKeys,
|
|
onSelectionChange: _this3.props.onSelectionChange,
|
|
metaKeySelection: _this3.props.metaKeySelection,
|
|
onRowClick: _this3.props.onRowClick,
|
|
onSelect: _this3.props.onSelect,
|
|
onUnselect: _this3.props.onUnselect,
|
|
propagateSelectionUp: _this3.props.propagateSelectionUp,
|
|
propagateSelectionDown: _this3.props.propagateSelectionDown,
|
|
onPropagateUp: _this3.propagateUp,
|
|
rowClassName: _this3.props.rowClassName,
|
|
contextMenuSelectionKey: _this3.props.contextMenuSelectionKey,
|
|
onContextMenuSelectionChange: _this3.props.onContextMenuSelectionChange,
|
|
onContextMenu: _this3.props.onContextMenu
|
|
});
|
|
});
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var cells = this.props.columns.map(function (col) {
|
|
return _this4.renderCell(col);
|
|
});
|
|
var children = this.renderChildren();
|
|
var className = {
|
|
'p-highlight': this.isSelected(),
|
|
'p-highlight-contextmenu': this.props.contextMenuSelectionKey && this.props.contextMenuSelectionKey === this.props.node.key
|
|
};
|
|
|
|
if (this.props.rowClassName) {
|
|
var rowClassName = this.props.rowClassName(this.props.node);
|
|
className = _objectSpread$5(_objectSpread$5({}, className), rowClassName);
|
|
}
|
|
|
|
className = classNames(className, this.props.node.className);
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
tabIndex: 0,
|
|
className: className,
|
|
style: this.props.node.style,
|
|
onClick: this.onClick,
|
|
onTouchEnd: this.onTouchEnd,
|
|
onContextMenu: this.onRightClick,
|
|
onKeyDown: this.onKeyDown
|
|
}, cells), children);
|
|
}
|
|
}]);
|
|
|
|
return TreeTableRow;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeTableRow, "defaultProps", {
|
|
node: null,
|
|
level: null,
|
|
columns: null,
|
|
expandedKeys: null,
|
|
contextMenuSelectionKey: null,
|
|
selectionMode: null,
|
|
selectionKeys: null,
|
|
metaKeySelection: true,
|
|
propagateSelectionUp: true,
|
|
propagateSelectionDown: true,
|
|
rowClassName: null,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onRowClick: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onSelectionChange: null,
|
|
onPropagateUp: null,
|
|
onContextMenuSelectionChange: null,
|
|
onContextMenu: null
|
|
});
|
|
|
|
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$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; }
|
|
|
|
function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableBody = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableBody, _Component);
|
|
|
|
var _super = _createSuper$a(TreeTableBody);
|
|
|
|
function TreeTableBody(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTableBody);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onRowClick = _this.onRowClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTableBody, [{
|
|
key: "createRow",
|
|
value: function createRow(node, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableRow, {
|
|
key: node.key || JSON.stringify(node.data),
|
|
level: 0,
|
|
rowIndex: index,
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
node: node,
|
|
columns: this.props.columns,
|
|
expandedKeys: this.props.expandedKeys,
|
|
onToggle: this.props.onToggle,
|
|
onExpand: this.props.onExpand,
|
|
onCollapse: this.props.onCollapse,
|
|
selectionMode: this.props.selectionMode,
|
|
selectionKeys: this.props.selectionKeys,
|
|
onSelectionChange: this.props.onSelectionChange,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
onRowClick: this.onRowClick,
|
|
onSelect: this.props.onSelect,
|
|
onUnselect: this.props.onUnselect,
|
|
propagateSelectionUp: this.props.propagateSelectionUp,
|
|
propagateSelectionDown: this.props.propagateSelectionDown,
|
|
rowClassName: this.props.rowClassName,
|
|
contextMenuSelectionKey: this.props.contextMenuSelectionKey,
|
|
onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
|
|
onContextMenu: this.props.onContextMenu
|
|
});
|
|
}
|
|
}, {
|
|
key: "flattenizeTree",
|
|
value: function flattenizeTree(nodes) {
|
|
var rows = [];
|
|
nodes = nodes || this.props.value;
|
|
|
|
var _iterator = _createForOfIteratorHelper$1(nodes),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var node = _step.value;
|
|
rows.push(node.key);
|
|
|
|
if (this.isExpandedKey(node.key)) {
|
|
rows = rows.concat(this.flattenizeTree(node.children));
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
return rows;
|
|
}
|
|
}, {
|
|
key: "isExpandedKey",
|
|
value: function isExpandedKey(key) {
|
|
return this.props.expandedKeys && !!this.props.expandedKeys[key];
|
|
}
|
|
}, {
|
|
key: "onRowClick",
|
|
value: function onRowClick(event, node) {
|
|
var _this2 = this;
|
|
|
|
if (this.props.onRowClick) {
|
|
this.props.onRowClick({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
|
|
var targetNode = event.target.nodeName;
|
|
|
|
if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable') || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
|
|
return;
|
|
}
|
|
|
|
if ((this.isSingleSelectionMode() || this.isMultipleSelectionMode()) && node.selectable !== false) {
|
|
var selectionKeys;
|
|
var selected = this.isSelected(node);
|
|
var metaSelection = this.nodeTouched ? false : this.props.metaKeySelection;
|
|
var flatKeys = this.flattenizeTree();
|
|
var rowIndex = flatKeys.findIndex(function (key) {
|
|
return key === node.key;
|
|
});
|
|
|
|
if (this.isMultipleSelectionMode() && event.shiftKey) {
|
|
DomHandler.clearSelection(); // find first selected row
|
|
|
|
var anchorRowIndex = flatKeys.findIndex(function (key) {
|
|
return _this2.props.selectionKeys[key];
|
|
});
|
|
var rangeStart = Math.min(rowIndex, anchorRowIndex);
|
|
var rangeEnd = Math.max(rowIndex, anchorRowIndex);
|
|
selectionKeys = _objectSpread$4({}, this.props.selectionKeys);
|
|
|
|
for (var i = rangeStart; i <= rangeEnd; i++) {
|
|
var rowKey = flatKeys[i];
|
|
selectionKeys[rowKey] = true;
|
|
}
|
|
} else {
|
|
this.anchorRowIndex = rowIndex;
|
|
|
|
if (metaSelection) {
|
|
var metaKey = event.metaKey || event.ctrlKey;
|
|
|
|
if (selected && metaKey) {
|
|
if (this.isSingleSelectionMode()) {
|
|
selectionKeys = null;
|
|
} else {
|
|
selectionKeys = _objectSpread$4({}, this.props.selectionKeys);
|
|
delete selectionKeys[node.key];
|
|
}
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
} else {
|
|
if (this.isSingleSelectionMode()) {
|
|
selectionKeys = node.key;
|
|
} else if (this.isMultipleSelectionMode()) {
|
|
selectionKeys = !metaKey ? {} : this.props.selectionKeys ? _objectSpread$4({}, this.props.selectionKeys) : {};
|
|
selectionKeys[node.key] = true;
|
|
}
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
if (this.isSingleSelectionMode()) {
|
|
if (selected) {
|
|
selectionKeys = null;
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
} else {
|
|
selectionKeys = node.key;
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
if (selected) {
|
|
selectionKeys = _objectSpread$4({}, this.props.selectionKeys);
|
|
delete selectionKeys[node.key];
|
|
|
|
if (this.props.onUnselect) {
|
|
this.props.onUnselect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
} else {
|
|
selectionKeys = this.props.selectionKeys ? _objectSpread$4({}, this.props.selectionKeys) : {};
|
|
selectionKeys[node.key] = true;
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
node: node
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.props.onSelectionChange) {
|
|
this.props.onSelectionChange({
|
|
originalEvent: event,
|
|
value: selectionKeys
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isSingleSelectionMode",
|
|
value: function isSingleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'single';
|
|
}
|
|
}, {
|
|
key: "isMultipleSelectionMode",
|
|
value: function isMultipleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isSelected",
|
|
value: function isSelected(node) {
|
|
if ((this.props.selectionMode === 'single' || this.props.selectionMode === 'multiple') && this.props.selectionKeys) return this.props.selectionMode === 'single' ? this.props.selectionKeys === node.key : this.props.selectionKeys[node.key] !== undefined;else return false;
|
|
}
|
|
}, {
|
|
key: "renderRows",
|
|
value: function renderRows() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.paginator && !this.props.lazy) {
|
|
var rpp = this.props.rows || 0;
|
|
var startIndex = this.props.first || 0;
|
|
var endIndex = startIndex + rpp;
|
|
var rows = [];
|
|
|
|
for (var i = startIndex; i < endIndex; i++) {
|
|
var rowData = this.props.value[i];
|
|
if (rowData) rows.push(this.createRow(this.props.value[i]));else break;
|
|
}
|
|
|
|
return rows;
|
|
} else {
|
|
return this.props.value.map(function (node, index) {
|
|
return _this3.createRow(node, index);
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderEmptyMessage",
|
|
value: function renderEmptyMessage() {
|
|
if (this.props.loading) {
|
|
return null;
|
|
} else {
|
|
var colSpan = this.props.columns ? this.props.columns.length : null;
|
|
var content = this.props.emptyMessage || localeOption('emptyMessage');
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
className: "p-treetable-emptymessage",
|
|
colSpan: colSpan
|
|
}, content));
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.value && this.props.value.length ? this.renderRows() : this.renderEmptyMessage();
|
|
return /*#__PURE__*/React__default["default"].createElement("tbody", {
|
|
className: "p-treetable-tbody"
|
|
}, content);
|
|
}
|
|
}]);
|
|
|
|
return TreeTableBody;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeTableBody, "defaultProps", {
|
|
value: null,
|
|
columns: null,
|
|
expandedKeys: null,
|
|
contextMenuSelectionKey: null,
|
|
paginator: false,
|
|
first: null,
|
|
rows: null,
|
|
selectionMode: null,
|
|
selectionKeys: null,
|
|
metaKeySelection: true,
|
|
propagateSelectionUp: true,
|
|
propagateSelectionDown: true,
|
|
lazy: false,
|
|
rowClassName: null,
|
|
emptyMessage: null,
|
|
loading: false,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onRowClick: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onSelectionChange: null,
|
|
onContextMenuSelectionChange: null,
|
|
onContextMenu: null
|
|
});
|
|
|
|
function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableFooter = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableFooter, _Component);
|
|
|
|
var _super = _createSuper$9(TreeTableFooter);
|
|
|
|
function TreeTableFooter() {
|
|
_classCallCheck(this, TreeTableFooter);
|
|
|
|
return _super.apply(this, arguments);
|
|
}
|
|
|
|
_createClass(TreeTableFooter, [{
|
|
key: "renderFooterCell",
|
|
value: function renderFooterCell(column, index) {
|
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
key: column.field || index,
|
|
className: column.props.footerClassName || column.props.className,
|
|
style: column.props.footerStyle || column.props.style,
|
|
rowSpan: column.props.rowSpan,
|
|
colSpan: column.props.colSpan
|
|
}, column.props.footer);
|
|
}
|
|
}, {
|
|
key: "renderFooterRow",
|
|
value: function renderFooterRow(row, index) {
|
|
var _this = this;
|
|
|
|
var rowColumns = React__default["default"].Children.toArray(row.props.children);
|
|
var rowFooterCells = rowColumns.map(function (col, index) {
|
|
return _this.renderFooterCell(col, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
key: index
|
|
}, rowFooterCells);
|
|
}
|
|
}, {
|
|
key: "renderColumnGroup",
|
|
value: function renderColumnGroup() {
|
|
var _this2 = this;
|
|
|
|
var rows = React__default["default"].Children.toArray(this.props.columnGroup.props.children);
|
|
return rows.map(function (row, i) {
|
|
return _this2.renderFooterRow(row, i);
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderColumns",
|
|
value: function renderColumns(columns) {
|
|
var _this3 = this;
|
|
|
|
if (columns) {
|
|
var headerCells = columns.map(function (col, index) {
|
|
return _this3.renderFooterCell(col, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("tr", null, headerCells);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "hasFooter",
|
|
value: function hasFooter() {
|
|
if (this.props.columnGroup) {
|
|
return true;
|
|
} else {
|
|
for (var i = 0; i < this.props.columns.length; i++) {
|
|
if (this.props.columns[i].props.footer) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var content = this.props.columnGroup ? this.renderColumnGroup() : this.renderColumns(this.props.columns);
|
|
|
|
if (this.hasFooter()) {
|
|
return /*#__PURE__*/React__default["default"].createElement("tfoot", {
|
|
className: "p-treetable-tfoot"
|
|
}, content);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}]);
|
|
|
|
return TreeTableFooter;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeTableFooter, "defaultProps", {
|
|
columns: null,
|
|
columnGroup: null
|
|
});
|
|
|
|
function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTableScrollableView = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTableScrollableView, _Component);
|
|
|
|
var _super = _createSuper$8(TreeTableScrollableView);
|
|
|
|
function TreeTableScrollableView(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTableScrollableView);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.onHeaderScroll = _this.onHeaderScroll.bind(_assertThisInitialized(_this));
|
|
_this.onBodyScroll = _this.onBodyScroll.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTableScrollableView, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.setScrollHeight();
|
|
|
|
if (!this.props.frozen) {
|
|
var scrollBarWidth = DomHandler.calculateScrollbarWidth();
|
|
this.scrollHeaderBox.style.marginRight = scrollBarWidth + 'px';
|
|
|
|
if (this.scrollFooterBox) {
|
|
this.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
|
|
}
|
|
} else {
|
|
this.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
this.setScrollHeight();
|
|
}
|
|
}, {
|
|
key: "setScrollHeight",
|
|
value: function setScrollHeight() {
|
|
if (this.props.scrollHeight) {
|
|
if (this.props.scrollHeight.indexOf('%') !== -1) {
|
|
var datatableContainer = this.findDataTableContainer(this.container);
|
|
this.scrollBody.style.visibility = 'hidden';
|
|
this.scrollBody.style.height = '100px'; //temporary height to calculate static height
|
|
|
|
var containerHeight = DomHandler.getOuterHeight(datatableContainer);
|
|
var relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(this.props.scrollHeight, 10) / 100;
|
|
var staticHeight = containerHeight - 100; //total height of headers, footers, paginators
|
|
|
|
var scrollBodyHeight = relativeHeight - staticHeight;
|
|
this.scrollBody.style.height = 'auto';
|
|
this.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
|
|
this.scrollBody.style.visibility = 'visible';
|
|
} else {
|
|
this.scrollBody.style.maxHeight = this.props.scrollHeight;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "findDataTableContainer",
|
|
value: function findDataTableContainer(element) {
|
|
if (element) {
|
|
var el = element;
|
|
|
|
while (el && !DomHandler.hasClass(el, 'p-treetable')) {
|
|
el = el.parentElement;
|
|
}
|
|
|
|
return el;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "onHeaderScroll",
|
|
value: function onHeaderScroll() {
|
|
this.scrollHeader.scrollLeft = 0;
|
|
}
|
|
}, {
|
|
key: "onBodyScroll",
|
|
value: function onBodyScroll() {
|
|
var frozenView = this.container.previousElementSibling;
|
|
var frozenScrollBody;
|
|
|
|
if (frozenView) {
|
|
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
|
|
}
|
|
|
|
this.scrollHeaderBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
|
|
|
|
if (this.scrollFooterBox) {
|
|
this.scrollFooterBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
|
|
}
|
|
|
|
if (frozenScrollBody) {
|
|
frozenScrollBody.scrollTop = this.scrollBody.scrollTop;
|
|
}
|
|
}
|
|
}, {
|
|
key: "calculateRowHeight",
|
|
value: function calculateRowHeight() {
|
|
var row = DomHandler.findSingle(this.scrollTable, 'tr:not(.p-treetable-emptymessage-row)');
|
|
|
|
if (row) {
|
|
this.rowHeight = DomHandler.getOuterHeight(row);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderColGroup",
|
|
value: function renderColGroup() {
|
|
if (this.props.columns && this.props.columns.length) {
|
|
return /*#__PURE__*/React__default["default"].createElement("colgroup", {
|
|
className: "p-treetable-scrollable-colgroup"
|
|
}, this.props.columns.map(function (col, i) {
|
|
return /*#__PURE__*/React__default["default"].createElement("col", {
|
|
key: col.field + '_' + i
|
|
});
|
|
}));
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var className = classNames('p-treetable-scrollable-view', {
|
|
'p-treetable-frozen-view': this.props.frozen,
|
|
'p-treetable-unfrozen-view': !this.props.frozen && this.props.frozenWidth
|
|
});
|
|
var width = this.props.frozen ? this.props.frozenWidth : 'calc(100% - ' + this.props.frozenWidth + ')';
|
|
var left = this.props.frozen ? null : this.props.frozenWidth;
|
|
var colGroup = this.renderColGroup();
|
|
var scrollableBodyStyle = !this.props.frozen && this.props.scrollHeight ? {
|
|
overflowY: 'scroll'
|
|
} : null;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: {
|
|
width: width,
|
|
left: left
|
|
},
|
|
ref: function ref(el) {
|
|
_this2.container = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-header",
|
|
ref: function ref(el) {
|
|
_this2.scrollHeader = el;
|
|
},
|
|
onScroll: this.onHeaderScroll
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-header-box",
|
|
ref: function ref(el) {
|
|
_this2.scrollHeaderBox = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("table", {
|
|
className: "p-treetable-scrollable-header-table"
|
|
}, colGroup, this.props.header))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-body",
|
|
ref: function ref(el) {
|
|
_this2.scrollBody = el;
|
|
},
|
|
style: scrollableBodyStyle,
|
|
onScroll: this.onBodyScroll
|
|
}, /*#__PURE__*/React__default["default"].createElement("table", {
|
|
ref: function ref(el) {
|
|
_this2.scrollTable = el;
|
|
},
|
|
style: {
|
|
top: '0'
|
|
},
|
|
className: "p-treetable-scrollable-body-table"
|
|
}, colGroup, this.props.body)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-footer",
|
|
ref: function ref(el) {
|
|
_this2.scrollFooter = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-footer-box",
|
|
ref: function ref(el) {
|
|
_this2.scrollFooterBox = el;
|
|
}
|
|
}, /*#__PURE__*/React__default["default"].createElement("table", {
|
|
className: "p-treetable-scrollable-footer-table"
|
|
}, colGroup, this.props.footer))));
|
|
}
|
|
}]);
|
|
|
|
return TreeTableScrollableView;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeTableScrollableView, "defaultProps", {
|
|
header: null,
|
|
body: null,
|
|
footer: null,
|
|
columns: null,
|
|
frozen: null,
|
|
frozenWidth: null,
|
|
frozenBody: null
|
|
});
|
|
|
|
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$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TreeTable = /*#__PURE__*/function (_Component) {
|
|
_inherits(TreeTable, _Component);
|
|
|
|
var _super = _createSuper$7(TreeTable);
|
|
|
|
function TreeTable(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TreeTable);
|
|
|
|
_this = _super.call(this, props);
|
|
var state = {};
|
|
|
|
if (!_this.props.onToggle) {
|
|
_this.state = {
|
|
expandedKeys: _this.props.expandedKeys
|
|
};
|
|
}
|
|
|
|
if (!_this.props.onPage) {
|
|
state.first = props.first;
|
|
state.rows = props.rows;
|
|
}
|
|
|
|
if (!_this.props.onSort) {
|
|
state.sortField = props.sortField;
|
|
state.sortOrder = props.sortOrder;
|
|
state.multiSortMeta = props.multiSortMeta;
|
|
}
|
|
|
|
if (!_this.props.onFilter) {
|
|
state.filters = props.filters;
|
|
}
|
|
|
|
if (Object.keys(state).length) {
|
|
_this.state = state;
|
|
}
|
|
|
|
_this.onToggle = _this.onToggle.bind(_assertThisInitialized(_this));
|
|
_this.onPageChange = _this.onPageChange.bind(_assertThisInitialized(_this));
|
|
_this.onSort = _this.onSort.bind(_assertThisInitialized(_this));
|
|
_this.onFilter = _this.onFilter.bind(_assertThisInitialized(_this));
|
|
_this.onColumnResizeStart = _this.onColumnResizeStart.bind(_assertThisInitialized(_this));
|
|
_this.onColumnDragStart = _this.onColumnDragStart.bind(_assertThisInitialized(_this));
|
|
_this.onColumnDragOver = _this.onColumnDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onColumnDragLeave = _this.onColumnDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onColumnDrop = _this.onColumnDrop.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TreeTable, [{
|
|
key: "onToggle",
|
|
value: function onToggle(event) {
|
|
if (this.props.onToggle) {
|
|
this.props.onToggle(event);
|
|
} else {
|
|
this.setState({
|
|
expandedKeys: event.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPageChange",
|
|
value: function onPageChange(event) {
|
|
if (this.props.onPage) this.props.onPage(event);else this.setState({
|
|
first: event.first,
|
|
rows: event.rows
|
|
});
|
|
}
|
|
}, {
|
|
key: "onSort",
|
|
value: function onSort(event) {
|
|
var sortField = event.sortField;
|
|
var sortOrder = this.props.defaultSortOrder;
|
|
var multiSortMeta;
|
|
var eventMeta;
|
|
this.columnSortable = event.sortable;
|
|
this.columnSortFunction = event.sortFunction;
|
|
this.columnField = event.sortField;
|
|
|
|
if (this.props.sortMode === 'multiple') {
|
|
var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
|
|
multiSortMeta = this.getMultiSortMeta();
|
|
|
|
if (multiSortMeta && multiSortMeta instanceof Array) {
|
|
var sortMeta = multiSortMeta.find(function (sortMeta) {
|
|
return sortMeta.field === sortField;
|
|
});
|
|
sortOrder = sortMeta ? this.getCalculatedSortOrder(sortMeta.order) : sortOrder;
|
|
}
|
|
|
|
var newMetaData = {
|
|
field: sortField,
|
|
order: sortOrder
|
|
};
|
|
|
|
if (sortOrder) {
|
|
if (!multiSortMeta || !metaKey) {
|
|
multiSortMeta = [];
|
|
}
|
|
|
|
this.addSortMeta(newMetaData, multiSortMeta);
|
|
} else if (this.props.removableSort && multiSortMeta) {
|
|
this.removeSortMeta(newMetaData, multiSortMeta);
|
|
}
|
|
|
|
eventMeta = {
|
|
multiSortMeta: multiSortMeta
|
|
};
|
|
} else {
|
|
sortOrder = this.getSortField() === sortField ? this.getCalculatedSortOrder(this.getSortOrder()) : sortOrder;
|
|
|
|
if (this.props.removableSort) {
|
|
sortField = sortOrder ? sortField : null;
|
|
}
|
|
|
|
eventMeta = {
|
|
sortField: sortField,
|
|
sortOrder: sortOrder
|
|
};
|
|
}
|
|
|
|
if (this.props.onSort) {
|
|
this.props.onSort(eventMeta);
|
|
} else {
|
|
eventMeta.first = 0;
|
|
this.setState(eventMeta);
|
|
}
|
|
}
|
|
}, {
|
|
key: "getCalculatedSortOrder",
|
|
value: function getCalculatedSortOrder(currentOrder) {
|
|
return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
|
|
}
|
|
}, {
|
|
key: "addSortMeta",
|
|
value: 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);
|
|
}
|
|
}, {
|
|
key: "removeSortMeta",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "sortSingle",
|
|
value: function sortSingle(data) {
|
|
return this.sortNodes(data);
|
|
}
|
|
}, {
|
|
key: "sortNodes",
|
|
value: function sortNodes(data) {
|
|
var _this2 = this;
|
|
|
|
var value = _toConsumableArray(data);
|
|
|
|
if (this.columnSortable && this.columnSortable === 'custom' && this.columnSortFunction) {
|
|
value = this.columnSortFunction({
|
|
field: this.getSortField(),
|
|
order: this.getSortOrder()
|
|
});
|
|
} else {
|
|
value.sort(function (node1, node2) {
|
|
var sortField = _this2.getSortField();
|
|
|
|
var value1 = ObjectUtils.resolveFieldData(node1.data, sortField);
|
|
var value2 = ObjectUtils.resolveFieldData(node2.data, sortField);
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
|
|
return _this2.getSortOrder() * result;
|
|
});
|
|
|
|
for (var i = 0; i < value.length; i++) {
|
|
if (value[i].children && value[i].children.length) {
|
|
value[i].children = this.sortNodes(value[i].children);
|
|
}
|
|
}
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "sortMultiple",
|
|
value: function sortMultiple(data) {
|
|
var multiSortMeta = this.getMultiSortMeta();
|
|
if (multiSortMeta) return this.sortMultipleNodes(data, multiSortMeta);else return data;
|
|
}
|
|
}, {
|
|
key: "sortMultipleNodes",
|
|
value: function sortMultipleNodes(data, multiSortMeta) {
|
|
var _this3 = this;
|
|
|
|
var value = _toConsumableArray(data);
|
|
|
|
value.sort(function (node1, node2) {
|
|
return _this3.multisortField(node1, node2, multiSortMeta, 0);
|
|
});
|
|
|
|
for (var i = 0; i < value.length; i++) {
|
|
if (value[i].children && value[i].children.length) {
|
|
value[i].children = this.sortMultipleNodes(value[i].children, multiSortMeta);
|
|
}
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}, {
|
|
key: "multisortField",
|
|
value: function multisortField(node1, node2, multiSortMeta, index) {
|
|
var value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
|
|
var value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
|
|
var result = null;
|
|
if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else {
|
|
if (value1 === value2) {
|
|
return multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, multiSortMeta, index + 1) : 0;
|
|
} else {
|
|
if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String)) return multiSortMeta[index].order * value1.localeCompare(value2, undefined, {
|
|
numeric: true
|
|
});else result = value1 < value2 ? -1 : 1;
|
|
}
|
|
}
|
|
return multiSortMeta[index].order * result;
|
|
}
|
|
}, {
|
|
key: "filter",
|
|
value: function filter(value, field, mode) {
|
|
this.onFilter({
|
|
value: value,
|
|
field: field,
|
|
matchMode: mode
|
|
});
|
|
}
|
|
}, {
|
|
key: "onFilter",
|
|
value: function onFilter(event) {
|
|
var currentFilters = this.getFilters();
|
|
var newFilters = currentFilters ? _objectSpread$3({}, currentFilters) : {};
|
|
if (!this.isFilterBlank(event.value)) newFilters[event.field] = {
|
|
value: event.value,
|
|
matchMode: event.matchMode
|
|
};else if (newFilters[event.field]) delete newFilters[event.field];
|
|
|
|
if (this.props.onFilter) {
|
|
this.props.onFilter({
|
|
filters: newFilters
|
|
});
|
|
} else {
|
|
this.setState({
|
|
first: 0,
|
|
filters: newFilters
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "hasFilter",
|
|
value: function hasFilter() {
|
|
var filters = this.getFilters();
|
|
return filters && Object.keys(filters).length > 0;
|
|
}
|
|
}, {
|
|
key: "isFilterBlank",
|
|
value: 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;
|
|
}
|
|
}, {
|
|
key: "onColumnResizeStart",
|
|
value: function onColumnResizeStart(event) {
|
|
var containerLeft = DomHandler.getOffset(this.container).left;
|
|
this.resizeColumn = event.columnEl;
|
|
this.resizeColumnProps = event.column;
|
|
this.columnResizing = true;
|
|
this.lastResizerHelperX = event.originalEvent.pageX - containerLeft + this.container.scrollLeft;
|
|
this.bindColumnResizeEvents();
|
|
}
|
|
}, {
|
|
key: "onColumnResize",
|
|
value: function onColumnResize(event) {
|
|
var containerLeft = DomHandler.getOffset(this.container).left;
|
|
DomHandler.addClass(this.container, 'p-unselectable-text');
|
|
this.resizerHelper.style.height = this.container.offsetHeight + 'px';
|
|
this.resizerHelper.style.top = 0 + 'px';
|
|
this.resizerHelper.style.left = event.pageX - containerLeft + this.container.scrollLeft + 'px';
|
|
this.resizerHelper.style.display = 'block';
|
|
}
|
|
}, {
|
|
key: "onColumnResizeEnd",
|
|
value: function onColumnResizeEnd(event) {
|
|
var delta = this.resizerHelper.offsetLeft - this.lastResizerHelperX;
|
|
var columnWidth = this.resizeColumn.offsetWidth;
|
|
var newColumnWidth = columnWidth + delta;
|
|
var minWidth = this.resizeColumn.style.minWidth || 15;
|
|
|
|
if (columnWidth + delta > parseInt(minWidth, 10)) {
|
|
if (this.props.columnResizeMode === 'fit') {
|
|
var nextColumn = this.resizeColumn.nextElementSibling;
|
|
var nextColumnWidth = nextColumn.offsetWidth - delta;
|
|
|
|
if (newColumnWidth > 15 && nextColumnWidth > 15) {
|
|
if (this.props.scrollable) {
|
|
var scrollableView = this.findParentScrollableView(this.resizeColumn);
|
|
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(this.resizeColumn);
|
|
this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
|
|
this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
|
|
this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
|
|
} else {
|
|
this.resizeColumn.style.width = newColumnWidth + 'px';
|
|
|
|
if (nextColumn) {
|
|
nextColumn.style.width = nextColumnWidth + 'px';
|
|
}
|
|
}
|
|
}
|
|
} else if (this.props.columnResizeMode === 'expand') {
|
|
if (this.props.scrollable) {
|
|
var _scrollableView = this.findParentScrollableView(this.resizeColumn);
|
|
|
|
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(this.resizeColumn);
|
|
|
|
this.resizeColGroup(_scrollableHeaderTable, _resizeColumnIndex, newColumnWidth, null);
|
|
this.resizeColGroup(_scrollableBodyTable, _resizeColumnIndex, newColumnWidth, null);
|
|
this.resizeColGroup(_scrollableFooterTable, _resizeColumnIndex, newColumnWidth, null);
|
|
} else {
|
|
this.table.style.width = this.table.offsetWidth + delta + 'px';
|
|
this.resizeColumn.style.width = newColumnWidth + 'px';
|
|
}
|
|
}
|
|
|
|
if (this.props.onColumnResizeEnd) {
|
|
this.props.onColumnResizeEnd({
|
|
element: this.resizeColumn,
|
|
column: this.resizeColumnProps,
|
|
delta: delta
|
|
});
|
|
}
|
|
}
|
|
|
|
this.resizerHelper.style.display = 'none';
|
|
this.resizeColumn = null;
|
|
this.resizeColumnProps = null;
|
|
DomHandler.removeClass(this.container, 'p-unselectable-text');
|
|
this.unbindColumnResizeEvents();
|
|
}
|
|
}, {
|
|
key: "findParentScrollableView",
|
|
value: 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;
|
|
}
|
|
}
|
|
}, {
|
|
key: "resizeColGroup",
|
|
value: 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");
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindColumnResizeEvents",
|
|
value: function bindColumnResizeEvents() {
|
|
var _this4 = this;
|
|
|
|
this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
|
|
if (_this4.columnResizing) {
|
|
_this4.onColumnResize(event);
|
|
}
|
|
});
|
|
this.documentColumnResizeEndListener = document.addEventListener('mouseup', function (event) {
|
|
if (_this4.columnResizing) {
|
|
_this4.columnResizing = false;
|
|
|
|
_this4.onColumnResizeEnd(event);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "unbindColumnResizeEvents",
|
|
value: function unbindColumnResizeEvents() {
|
|
document.removeEventListener('document', this.documentColumnResizeListener);
|
|
document.removeEventListener('document', this.documentColumnResizeEndListener);
|
|
}
|
|
}, {
|
|
key: "onColumnDragStart",
|
|
value: function onColumnDragStart(e) {
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
|
|
if (this.columnResizing) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
this.iconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
|
|
this.iconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
|
|
this.draggedColumnEl = this.findParentHeader(event.currentTarget);
|
|
this.draggedColumn = column;
|
|
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
|
|
}
|
|
}, {
|
|
key: "onColumnDragOver",
|
|
value: function onColumnDragOver(e) {
|
|
var event = e.originalEvent;
|
|
var dropHeader = this.findParentHeader(event.currentTarget);
|
|
|
|
if (this.props.reorderableColumns && this.draggedColumnEl && dropHeader) {
|
|
event.preventDefault();
|
|
var containerOffset = DomHandler.getOffset(this.container);
|
|
var dropHeaderOffset = DomHandler.getOffset(dropHeader);
|
|
|
|
if (this.draggedColumnEl !== dropHeader) {
|
|
var targetLeft = dropHeaderOffset.left - containerOffset.left; //let targetTop = containerOffset.top - dropHeaderOffset.top;
|
|
|
|
var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
|
|
this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.iconHeight - 1) + 'px';
|
|
this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
|
|
|
|
if (event.pageX > columnCenter) {
|
|
this.reorderIndicatorUp.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2) + 'px';
|
|
this.reorderIndicatorDown.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2) + 'px';
|
|
this.dropPosition = 1;
|
|
} else {
|
|
this.reorderIndicatorUp.style.left = targetLeft - Math.ceil(this.iconWidth / 2) + 'px';
|
|
this.reorderIndicatorDown.style.left = targetLeft - Math.ceil(this.iconWidth / 2) + 'px';
|
|
this.dropPosition = -1;
|
|
}
|
|
|
|
this.reorderIndicatorUp.style.display = 'block';
|
|
this.reorderIndicatorDown.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnDragLeave",
|
|
value: function onColumnDragLeave(e) {
|
|
var event = e.originalEvent;
|
|
|
|
if (this.props.reorderableColumns && this.draggedColumnEl) {
|
|
event.preventDefault();
|
|
this.reorderIndicatorUp.style.display = 'none';
|
|
this.reorderIndicatorDown.style.display = 'none';
|
|
}
|
|
}
|
|
}, {
|
|
key: "onColumnDrop",
|
|
value: function onColumnDrop(e) {
|
|
var _this5 = this;
|
|
|
|
var event = e.originalEvent,
|
|
column = e.column;
|
|
event.preventDefault();
|
|
|
|
if (this.draggedColumnEl) {
|
|
var dragIndex = DomHandler.index(this.draggedColumnEl);
|
|
var dropIndex = DomHandler.index(this.findParentHeader(event.currentTarget));
|
|
var allowDrop = dragIndex !== dropIndex;
|
|
|
|
if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dragIndex - dropIndex === 1 && this.dropPosition === 1)) {
|
|
allowDrop = false;
|
|
}
|
|
|
|
if (allowDrop) {
|
|
var columns = this.state.columnOrder ? this.getColumns() : React__default["default"].Children.toArray(this.props.children);
|
|
|
|
var isSameColumn = function isSameColumn(col1, col2) {
|
|
return col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field');
|
|
};
|
|
|
|
var dragColIndex = columns.findIndex(function (child) {
|
|
return isSameColumn(child, _this5.draggedColumn);
|
|
});
|
|
var dropColIndex = columns.findIndex(function (child) {
|
|
return isSameColumn(child, column);
|
|
});
|
|
|
|
if (dropColIndex < dragColIndex && this.dropPosition === 1) {
|
|
dropColIndex++;
|
|
}
|
|
|
|
if (dropColIndex > dragColIndex && this.dropPosition === -1) {
|
|
dropColIndex--;
|
|
}
|
|
|
|
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(_column.props.columnKey || _column.props.field);
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
this.setState({
|
|
columnOrder: columnOrder
|
|
});
|
|
|
|
if (this.props.onColReorder) {
|
|
this.props.onColReorder({
|
|
dragIndex: dragColIndex,
|
|
dropIndex: dropColIndex,
|
|
columns: columns
|
|
});
|
|
}
|
|
}
|
|
|
|
this.reorderIndicatorUp.style.display = 'none';
|
|
this.reorderIndicatorDown.style.display = 'none';
|
|
this.draggedColumnEl.draggable = false;
|
|
this.draggedColumnEl = null;
|
|
this.dropPosition = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "findParentHeader",
|
|
value: function findParentHeader(element) {
|
|
if (element.nodeName === 'TH') {
|
|
return element;
|
|
} else {
|
|
var parent = element.parentElement;
|
|
|
|
while (parent.nodeName !== 'TH') {
|
|
parent = parent.parentElement;
|
|
if (!parent) break;
|
|
}
|
|
|
|
return parent;
|
|
}
|
|
}
|
|
}, {
|
|
key: "getExpandedKeys",
|
|
value: function getExpandedKeys() {
|
|
return this.props.onToggle ? this.props.expandedKeys : this.state.expandedKeys;
|
|
}
|
|
}, {
|
|
key: "getFirst",
|
|
value: function getFirst() {
|
|
return this.props.onPage ? this.props.first : this.state.first;
|
|
}
|
|
}, {
|
|
key: "getRows",
|
|
value: function getRows() {
|
|
return this.props.onPage ? this.props.rows : this.state.rows;
|
|
}
|
|
}, {
|
|
key: "getSortField",
|
|
value: function getSortField() {
|
|
return this.props.onSort ? this.props.sortField : this.state.sortField;
|
|
}
|
|
}, {
|
|
key: "getSortOrder",
|
|
value: function getSortOrder() {
|
|
return this.props.onSort ? this.props.sortOrder : this.state.sortOrder;
|
|
}
|
|
}, {
|
|
key: "getMultiSortMeta",
|
|
value: function getMultiSortMeta() {
|
|
return this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta;
|
|
}
|
|
}, {
|
|
key: "getFilters",
|
|
value: function getFilters() {
|
|
return this.props.onFilter ? this.props.filters : this.state.filters;
|
|
}
|
|
}, {
|
|
key: "findColumnByKey",
|
|
value: function findColumnByKey(columns, key) {
|
|
if (columns && columns.length) {
|
|
for (var i = 0; i < columns.length; i++) {
|
|
var child = columns[i];
|
|
|
|
if (child.props.columnKey === key || child.props.field === key) {
|
|
return child;
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "getColumns",
|
|
value: function getColumns() {
|
|
var columns = React__default["default"].Children.toArray(this.props.children);
|
|
|
|
if (columns && columns.length) {
|
|
if (this.props.reorderableColumns && this.state.columnOrder) {
|
|
var orderedColumns = [];
|
|
|
|
var _iterator2 = _createForOfIteratorHelper(this.state.columnOrder),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var columnKey = _step2.value;
|
|
var column = this.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;
|
|
}
|
|
}, {
|
|
key: "getTotalRecords",
|
|
value: function getTotalRecords(data) {
|
|
return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
|
|
}
|
|
}, {
|
|
key: "isSingleSelectionMode",
|
|
value: function isSingleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'single';
|
|
}
|
|
}, {
|
|
key: "isMultipleSelectionMode",
|
|
value: function isMultipleSelectionMode() {
|
|
return this.props.selectionMode && this.props.selectionMode === 'multiple';
|
|
}
|
|
}, {
|
|
key: "isRowSelectionMode",
|
|
value: function isRowSelectionMode() {
|
|
return this.isSingleSelectionMode() || this.isMultipleSelectionMode();
|
|
}
|
|
}, {
|
|
key: "getFrozenColumns",
|
|
value: function getFrozenColumns(columns) {
|
|
var frozenColumns = null;
|
|
|
|
var _iterator3 = _createForOfIteratorHelper(columns),
|
|
_step3;
|
|
|
|
try {
|
|
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
var col = _step3.value;
|
|
|
|
if (col.props.frozen) {
|
|
frozenColumns = frozenColumns || [];
|
|
frozenColumns.push(col);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator3.e(err);
|
|
} finally {
|
|
_iterator3.f();
|
|
}
|
|
|
|
return frozenColumns;
|
|
}
|
|
}, {
|
|
key: "getScrollableColumns",
|
|
value: function getScrollableColumns(columns) {
|
|
var scrollableColumns = null;
|
|
|
|
var _iterator4 = _createForOfIteratorHelper(columns),
|
|
_step4;
|
|
|
|
try {
|
|
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
var col = _step4.value;
|
|
|
|
if (!col.props.frozen) {
|
|
scrollableColumns = scrollableColumns || [];
|
|
scrollableColumns.push(col);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator4.e(err);
|
|
} finally {
|
|
_iterator4.f();
|
|
}
|
|
|
|
return scrollableColumns;
|
|
}
|
|
}, {
|
|
key: "filterLocal",
|
|
value: function filterLocal(value) {
|
|
var filteredNodes = [];
|
|
var filters = this.getFilters();
|
|
var columns = React__default["default"].Children.toArray(this.props.children);
|
|
var isStrictMode = this.props.filterMode === 'strict';
|
|
|
|
var _iterator5 = _createForOfIteratorHelper(value),
|
|
_step5;
|
|
|
|
try {
|
|
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
|
|
var node = _step5.value;
|
|
|
|
var copyNode = _objectSpread$3({}, node);
|
|
|
|
var localMatch = true;
|
|
var globalMatch = false;
|
|
|
|
for (var j = 0; j < columns.length; j++) {
|
|
var col = columns[j];
|
|
var filterMeta = filters ? filters[col.props.field] : null;
|
|
var filterField = col.props.field;
|
|
var filterValue = void 0,
|
|
filterConstraint = void 0,
|
|
paramsWithoutNode = void 0,
|
|
options = void 0; //local
|
|
|
|
if (filterMeta) {
|
|
var filterMatchMode = filterMeta.matchMode || col.props.filterMatchMode || 'startsWith';
|
|
filterValue = filterMeta.value;
|
|
filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : FilterService.filters[filterMatchMode];
|
|
options = {
|
|
rowData: node,
|
|
filters: filters,
|
|
props: this.props,
|
|
column: {
|
|
filterMeta: filterMeta,
|
|
filterField: filterField,
|
|
props: col.props
|
|
}
|
|
};
|
|
paramsWithoutNode = {
|
|
filterField: filterField,
|
|
filterValue: filterValue,
|
|
filterConstraint: filterConstraint,
|
|
isStrictMode: isStrictMode,
|
|
options: options
|
|
};
|
|
|
|
if (isStrictMode && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode)) || !isStrictMode && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode))) {
|
|
localMatch = false;
|
|
}
|
|
|
|
if (!localMatch) {
|
|
break;
|
|
}
|
|
} //global
|
|
|
|
|
|
if (this.props.globalFilter && !globalMatch) {
|
|
var copyNodeForGlobal = _objectSpread$3({}, copyNode);
|
|
|
|
filterValue = this.props.globalFilter;
|
|
filterConstraint = FilterService.filters['contains'];
|
|
paramsWithoutNode = {
|
|
filterField: filterField,
|
|
filterValue: filterValue,
|
|
filterConstraint: filterConstraint,
|
|
isStrictMode: isStrictMode
|
|
};
|
|
|
|
if (isStrictMode && (this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode)) || !isStrictMode && (this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode))) {
|
|
globalMatch = true;
|
|
copyNode = copyNodeForGlobal;
|
|
}
|
|
}
|
|
}
|
|
|
|
var matches = localMatch;
|
|
|
|
if (this.props.globalFilter) {
|
|
matches = localMatch && globalMatch;
|
|
}
|
|
|
|
if (matches) {
|
|
filteredNodes.push(copyNode);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator5.e(err);
|
|
} finally {
|
|
_iterator5.f();
|
|
}
|
|
|
|
return filteredNodes;
|
|
}
|
|
}, {
|
|
key: "findFilteredNodes",
|
|
value: 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$3({}, childNode);
|
|
|
|
if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
|
|
matched = true;
|
|
node.children.push(copyChildNode);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator6.e(err);
|
|
} finally {
|
|
_iterator6.f();
|
|
}
|
|
}
|
|
|
|
if (matched) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "isFilterMatched",
|
|
value: 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, this.props.filterLocale, options)) {
|
|
matched = true;
|
|
}
|
|
|
|
if (!matched || isStrictMode && !this.isNodeLeaf(node)) {
|
|
matched = this.findFilteredNodes(node, {
|
|
filterField: filterField,
|
|
filterValue: filterValue,
|
|
filterConstraint: filterConstraint,
|
|
isStrictMode: isStrictMode
|
|
}) || matched;
|
|
}
|
|
|
|
return matched;
|
|
}
|
|
}, {
|
|
key: "isNodeLeaf",
|
|
value: function isNodeLeaf(node) {
|
|
return node.leaf === false ? false : !(node.children && node.children.length);
|
|
}
|
|
}, {
|
|
key: "processValue",
|
|
value: function processValue() {
|
|
var data = this.props.value;
|
|
|
|
if (!this.props.lazy) {
|
|
if (data && data.length) {
|
|
if (this.getSortField() || this.getMultiSortMeta()) {
|
|
if (this.props.sortMode === 'single') data = this.sortSingle(data);else if (this.props.sortMode === 'multiple') data = this.sortMultiple(data);
|
|
}
|
|
|
|
var localFilters = this.getFilters();
|
|
|
|
if (localFilters || this.props.globalFilter) {
|
|
data = this.filterLocal(data, localFilters);
|
|
}
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}, {
|
|
key: "createTableHeader",
|
|
value: function createTableHeader(columns, columnGroup) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableHeader, {
|
|
columns: columns,
|
|
columnGroup: columnGroup,
|
|
tabIndex: this.props.tabIndex,
|
|
onSort: this.onSort,
|
|
sortField: this.getSortField(),
|
|
sortOrder: this.getSortOrder(),
|
|
multiSortMeta: this.getMultiSortMeta(),
|
|
resizableColumns: this.props.resizableColumns,
|
|
onResizeStart: this.onColumnResizeStart,
|
|
reorderableColumns: this.props.reorderableColumns,
|
|
onDragStart: this.onColumnDragStart,
|
|
onDragOver: this.onColumnDragOver,
|
|
onDragLeave: this.onColumnDragLeave,
|
|
onDrop: this.onColumnDrop,
|
|
onFilter: this.onFilter,
|
|
filters: this.getFilters(),
|
|
filterDelay: this.props.filterDelay
|
|
});
|
|
}
|
|
}, {
|
|
key: "createTableFooter",
|
|
value: function createTableFooter(columns, columnGroup) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableFooter, {
|
|
columns: columns,
|
|
columnGroup: columnGroup
|
|
});
|
|
}
|
|
}, {
|
|
key: "createTableBody",
|
|
value: function createTableBody(value, columns) {
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableBody, {
|
|
value: value,
|
|
columns: columns,
|
|
expandedKeys: this.getExpandedKeys(),
|
|
selectOnEdit: this.props.selectOnEdit,
|
|
onToggle: this.onToggle,
|
|
onExpand: this.props.onExpand,
|
|
onCollapse: this.props.onCollapse,
|
|
paginator: this.props.paginator,
|
|
first: this.getFirst(),
|
|
rows: this.getRows(),
|
|
selectionMode: this.props.selectionMode,
|
|
selectionKeys: this.props.selectionKeys,
|
|
onSelectionChange: this.props.onSelectionChange,
|
|
metaKeySelection: this.props.metaKeySelection,
|
|
onRowClick: this.props.onRowClick,
|
|
onSelect: this.props.onSelect,
|
|
onUnselect: this.props.onUnselect,
|
|
propagateSelectionUp: this.props.propagateSelectionUp,
|
|
propagateSelectionDown: this.props.propagateSelectionDown,
|
|
lazy: this.props.lazy,
|
|
rowClassName: this.props.rowClassName,
|
|
emptyMessage: this.props.emptyMessage,
|
|
loading: this.props.loading,
|
|
contextMenuSelectionKey: this.props.contextMenuSelectionKey,
|
|
onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
|
|
onContextMenu: this.props.onContextMenu
|
|
});
|
|
}
|
|
}, {
|
|
key: "createPaginator",
|
|
value: function createPaginator(position, totalRecords) {
|
|
var className = classNames('p-paginator-' + position, this.props.paginatorClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement(Paginator, {
|
|
first: this.getFirst(),
|
|
rows: this.getRows(),
|
|
pageLinkSize: this.props.pageLinkSize,
|
|
className: className,
|
|
onPageChange: this.onPageChange,
|
|
template: this.props.paginatorTemplate,
|
|
totalRecords: totalRecords,
|
|
rowsPerPageOptions: this.props.rowsPerPageOptions,
|
|
currentPageReportTemplate: this.props.currentPageReportTemplate,
|
|
leftContent: this.props.paginatorLeft,
|
|
rightContent: this.props.paginatorRight,
|
|
alwaysShow: this.props.alwaysShowPaginator,
|
|
dropdownAppendTo: this.props.paginatorDropdownAppendTo
|
|
});
|
|
}
|
|
}, {
|
|
key: "createScrollableView",
|
|
value: function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
|
|
var header = this.createTableHeader(columns, headerColumnGroup);
|
|
var footer = this.createTableFooter(columns, footerColumnGroup);
|
|
var body = this.createTableBody(value, columns);
|
|
return /*#__PURE__*/React__default["default"].createElement(TreeTableScrollableView, {
|
|
columns: columns,
|
|
header: header,
|
|
body: body,
|
|
footer: footer,
|
|
scrollHeight: this.props.scrollHeight,
|
|
frozen: frozen,
|
|
frozenWidth: this.props.frozenWidth
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderScrollableTable",
|
|
value: function renderScrollableTable(value) {
|
|
var columns = this.getColumns();
|
|
var frozenColumns = this.getFrozenColumns(columns);
|
|
var scrollableColumns = frozenColumns ? this.getScrollableColumns(columns) : columns;
|
|
var frozenView, scrollableView;
|
|
|
|
if (frozenColumns) {
|
|
frozenView = this.createScrollableView(value, frozenColumns, true, this.props.frozenHeaderColumnGroup, this.props.frozenFooterColumnGroup);
|
|
}
|
|
|
|
scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-scrollable-wrapper"
|
|
}, frozenView, scrollableView);
|
|
}
|
|
}, {
|
|
key: "renderRegularTable",
|
|
value: function renderRegularTable(value) {
|
|
var _this6 = this;
|
|
|
|
var columns = this.getColumns();
|
|
var header = this.createTableHeader(columns, this.props.headerColumnGroup);
|
|
var footer = this.createTableFooter(columns, this.props.footerColumnGroup);
|
|
var body = this.createTableBody(value, columns);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-wrapper"
|
|
}, /*#__PURE__*/React__default["default"].createElement("table", {
|
|
style: this.props.tableStyle,
|
|
className: this.props.tableClassName,
|
|
ref: function ref(el) {
|
|
return _this6.table = el;
|
|
}
|
|
}, header, footer, body));
|
|
}
|
|
}, {
|
|
key: "renderTable",
|
|
value: function renderTable(value) {
|
|
if (this.props.scrollable) return this.renderScrollableTable(value);else return this.renderRegularTable(value);
|
|
}
|
|
}, {
|
|
key: "renderLoader",
|
|
value: function renderLoader() {
|
|
if (this.props.loading) {
|
|
var iconClassName = classNames('p-treetable-loading-icon pi-spin', this.props.loadingIcon);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-loading"
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-loading-overlay p-component-overlay"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: iconClassName
|
|
})));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this7 = this;
|
|
|
|
var value = this.processValue();
|
|
var className = classNames('p-treetable p-component', {
|
|
'p-treetable-hoverable-rows': this.props.rowHover,
|
|
'p-treetable-selectable': this.isRowSelectionMode(),
|
|
'p-treetable-resizable': this.props.resizableColumns,
|
|
'p-treetable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
|
|
'p-treetable-auto-layout': this.props.autoLayout,
|
|
'p-treetable-striped': this.props.stripedRows,
|
|
'p-treetable-gridlines': this.props.showGridlines
|
|
}, this.props.className);
|
|
var table = this.renderTable(value);
|
|
var totalRecords = this.getTotalRecords(value);
|
|
var headerFacet = this.props.header && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-header"
|
|
}, this.props.header);
|
|
var footerFacet = this.props.footer && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-treetable-footer"
|
|
}, this.props.footer);
|
|
var paginatorTop = this.props.paginator && this.props.paginatorPosition !== 'bottom' && this.createPaginator('top', totalRecords);
|
|
var paginatorBottom = this.props.paginator && this.props.paginatorPosition !== 'top' && this.createPaginator('bottom', totalRecords);
|
|
var loader = this.renderLoader();
|
|
var resizeHelper = this.props.resizableColumns && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
_this7.resizerHelper = el;
|
|
},
|
|
className: "p-column-resizer-helper",
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
});
|
|
var reorderIndicatorUp = this.props.reorderableColumns && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this7.reorderIndicatorUp = el;
|
|
},
|
|
className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
|
|
style: {
|
|
position: 'absolute',
|
|
display: 'none'
|
|
}
|
|
});
|
|
var reorderIndicatorDown = this.props.reorderableColumns && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this7.reorderIndicatorDown = el;
|
|
},
|
|
className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
|
|
style: {
|
|
position: 'absolute',
|
|
display: 'none'
|
|
}
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
"data-scrollselectors": ".p-treetable-scrollable-body"
|
|
}, loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
|
|
}
|
|
}]);
|
|
|
|
return TreeTable;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TreeTable, "defaultProps", {
|
|
id: null,
|
|
value: null,
|
|
header: null,
|
|
footer: null,
|
|
style: null,
|
|
className: null,
|
|
tableStyle: null,
|
|
tableClassName: null,
|
|
expandedKeys: null,
|
|
paginator: false,
|
|
paginatorPosition: 'bottom',
|
|
alwaysShowPaginator: true,
|
|
paginatorClassName: null,
|
|
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
|
|
paginatorLeft: null,
|
|
paginatorRight: null,
|
|
paginatorDropdownAppendTo: null,
|
|
pageLinkSize: 5,
|
|
rowsPerPageOptions: null,
|
|
currentPageReportTemplate: '({currentPage} of {totalPages})',
|
|
first: null,
|
|
rows: null,
|
|
totalRecords: null,
|
|
lazy: false,
|
|
sortField: null,
|
|
sortOrder: null,
|
|
multiSortMeta: null,
|
|
sortMode: 'single',
|
|
defaultSortOrder: 1,
|
|
removableSort: false,
|
|
selectionMode: null,
|
|
selectionKeys: null,
|
|
contextMenuSelectionKey: null,
|
|
metaKeySelection: true,
|
|
selectOnEdit: true,
|
|
propagateSelectionUp: true,
|
|
propagateSelectionDown: true,
|
|
autoLayout: false,
|
|
rowClassName: null,
|
|
loading: false,
|
|
loadingIcon: 'pi pi-spinner',
|
|
tabIndex: 0,
|
|
scrollable: false,
|
|
scrollHeight: null,
|
|
reorderableColumns: false,
|
|
headerColumnGroup: null,
|
|
footerColumnGroup: null,
|
|
frozenHeaderColumnGroup: null,
|
|
frozenFooterColumnGroup: null,
|
|
frozenWidth: null,
|
|
resizableColumns: false,
|
|
columnResizeMode: 'fit',
|
|
emptyMessage: null,
|
|
filters: null,
|
|
globalFilter: null,
|
|
filterMode: 'lenient',
|
|
filterDelay: 300,
|
|
filterLocale: undefined,
|
|
rowHover: false,
|
|
showGridlines: false,
|
|
stripedRows: false,
|
|
onFilter: null,
|
|
onExpand: null,
|
|
onCollapse: null,
|
|
onToggle: null,
|
|
onPage: null,
|
|
onSort: null,
|
|
onSelect: null,
|
|
onUnselect: null,
|
|
onRowClick: null,
|
|
onSelectionChange: null,
|
|
onContextMenuSelectionChange: null,
|
|
onColumnResizeEnd: null,
|
|
onColReorder: null,
|
|
onContextMenu: null
|
|
});
|
|
|
|
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var TriStateCheckbox = /*#__PURE__*/function (_Component) {
|
|
_inherits(TriStateCheckbox, _Component);
|
|
|
|
var _super = _createSuper$6(TriStateCheckbox);
|
|
|
|
function TriStateCheckbox(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, TriStateCheckbox);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
focused: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(TriStateCheckbox, [{
|
|
key: "onClick",
|
|
value: function onClick(event) {
|
|
if (!this.props.disabled) {
|
|
this.toggle(event);
|
|
this.inputRef.current.focus();
|
|
}
|
|
}
|
|
}, {
|
|
key: "toggle",
|
|
value: function toggle(event) {
|
|
var newValue;
|
|
if (this.props.value === null || this.props.value === undefined) newValue = true;else if (this.props.value === true) newValue = false;else if (this.props.value === false) newValue = null;
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
originalEvent: event,
|
|
value: newValue,
|
|
stopPropagation: function stopPropagation() {},
|
|
preventDefault: function preventDefault() {},
|
|
target: {
|
|
name: this.props.name,
|
|
id: this.props.id,
|
|
value: newValue
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
|
|
if (this.props.tooltip && !this.props.disabled) {
|
|
this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
|
|
if (this.tooltip) this.tooltip.update(_objectSpread$2({
|
|
content: this.props.tooltip
|
|
}, this.props.tooltipOptions || {}));else this.renderTooltip();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.tooltip) {
|
|
this.tooltip.destroy();
|
|
this.tooltip = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderTooltip",
|
|
value: function renderTooltip() {
|
|
this.tooltip = tip({
|
|
target: this.element,
|
|
content: this.props.tooltip,
|
|
options: this.props.tooltipOptions
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var containerClass = classNames('p-tristatecheckbox p-checkbox p-component', this.props.className);
|
|
var boxClass = classNames('p-checkbox-box', {
|
|
'p-highlight': (this.props.value || !this.props.value) && this.props.value !== null,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
});
|
|
var iconClass = classNames('p-checkbox-icon p-c', {
|
|
'pi pi-check': this.props.value === true,
|
|
'pi pi-times': this.props.value === false
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this2.element = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClass,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-hidden-accessible"
|
|
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: this.inputRef,
|
|
type: "checkbox",
|
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
id: this.props.inputId,
|
|
name: this.props.name,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
disabled: this.props.disabled,
|
|
defaultChecked: this.props.value
|
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: boxClass,
|
|
ref: function ref(el) {
|
|
return _this2.box = el;
|
|
},
|
|
role: "checkbox",
|
|
"aria-checked": this.props.value === true
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClass
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return TriStateCheckbox;
|
|
}(React.Component);
|
|
|
|
_defineProperty(TriStateCheckbox, "defaultProps", {
|
|
id: null,
|
|
inputRef: null,
|
|
inputId: null,
|
|
value: null,
|
|
name: null,
|
|
style: null,
|
|
className: null,
|
|
disabled: false,
|
|
tooltip: null,
|
|
tooltipOptions: null,
|
|
ariaLabelledBy: null,
|
|
onChange: null
|
|
});
|
|
|
|
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var SpeedDial = /*#__PURE__*/function (_Component) {
|
|
_inherits(SpeedDial, _Component);
|
|
|
|
var _super = _createSuper$5(SpeedDial);
|
|
|
|
function SpeedDial(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SpeedDial);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: false
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onItemClick = _this.onItemClick.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SpeedDial, [{
|
|
key: "isVisible",
|
|
value: function isVisible() {
|
|
return this.props.onVisibleChange ? this.props.visible : this.state.visible;
|
|
}
|
|
}, {
|
|
key: "show",
|
|
value: function show() {
|
|
if (this.props.onVisibleChange) {
|
|
this.props.onVisibleChange(true);
|
|
} else {
|
|
this.setState({
|
|
visible: true
|
|
});
|
|
}
|
|
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "hide",
|
|
value: function hide() {
|
|
if (this.props.onVisibleChange) {
|
|
this.props.onVisibleChange(false);
|
|
} else {
|
|
this.setState({
|
|
visible: false
|
|
});
|
|
}
|
|
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "onClick",
|
|
value: function onClick(e) {
|
|
this.isVisible() ? this.hide() : this.show();
|
|
this.props.onClick && this.props.onClick(e);
|
|
this.isItemClicked = true;
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: function onItemClick(e, item) {
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: e,
|
|
item: item
|
|
});
|
|
}
|
|
|
|
this.hide();
|
|
this.isItemClicked = true;
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this2 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (_this2.isVisible() && _this2.isOutsideClicked(event)) {
|
|
_this2.hide();
|
|
}
|
|
|
|
_this2.isItemClicked = false;
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked);
|
|
}
|
|
}, {
|
|
key: "calculateTransitionDelay",
|
|
value: function calculateTransitionDelay(index) {
|
|
var length = this.props.model.length;
|
|
var visible = this.isVisible();
|
|
return (visible ? index : length - index - 1) * this.props.transitionDelay;
|
|
}
|
|
}, {
|
|
key: "calculatePointStyle",
|
|
value: function calculatePointStyle(index) {
|
|
var type = this.props.type;
|
|
|
|
if (type !== 'linear') {
|
|
var length = this.props.model.length;
|
|
var radius = this.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 = this.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 = this.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 {};
|
|
}
|
|
}, {
|
|
key: "getItemStyle",
|
|
value: function getItemStyle(index) {
|
|
var transitionDelay = this.calculateTransitionDelay(index);
|
|
var pointStyle = this.calculatePointStyle(index);
|
|
return _objectSpread$1({
|
|
transitionDelay: "".concat(transitionDelay, "ms")
|
|
}, pointStyle);
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.props.type !== 'linear') {
|
|
var button = DomHandler.findSingle(this.container, '.p-speeddial-button');
|
|
var firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
|
|
|
|
if (button && firstItem) {
|
|
var wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
|
|
var hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
|
|
this.list.style.setProperty('--item-diff-x', "".concat(wDiff / 2, "px"));
|
|
this.list.style.setProperty('--item-diff-y', "".concat(hDiff / 2, "px"));
|
|
}
|
|
}
|
|
|
|
if (this.props.hideOnClickOutside) {
|
|
this.bindDocumentClickListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.hideOnClickOutside) {
|
|
this.unbindDocumentClickListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
var _this3 = this;
|
|
|
|
var style = this.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 = _icon && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
});
|
|
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: url || '#',
|
|
role: "menuitem",
|
|
className: contentClassName,
|
|
target: target,
|
|
"data-pr-tooltip": label,
|
|
onClick: function onClick(e) {
|
|
return _this3.onItemClick(e, item);
|
|
}
|
|
}, icon, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(e) {
|
|
return _this3.onItemClick(e, item);
|
|
},
|
|
className: contentClassName,
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
visible: this.isVisible()
|
|
};
|
|
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index,
|
|
className: "p-speeddial-item",
|
|
style: style,
|
|
role: "none"
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this4 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this4.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderList",
|
|
value: function renderList() {
|
|
var _this5 = this;
|
|
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this5.list = el;
|
|
},
|
|
className: "p-speeddial-list",
|
|
role: "menu"
|
|
}, items);
|
|
}
|
|
}, {
|
|
key: "renderButton",
|
|
value: function renderButton() {
|
|
var _classNames,
|
|
_this6 = this;
|
|
|
|
var visible = this.isVisible();
|
|
var className = classNames('p-speeddial-button p-button-rounded', {
|
|
'p-speeddial-rotate': this.props.rotateAnimation && !this.props.hideIcon
|
|
}, this.props.buttonClassName);
|
|
var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(this.props.showIcon), !visible && !!this.props.showIcon || !this.props.hideIcon), _defineProperty(_classNames, "".concat(this.props.hideIcon), visible && !!this.props.hideIcon), _classNames));
|
|
var content = /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
type: "button",
|
|
style: this.props.buttonStyle,
|
|
className: className,
|
|
icon: iconClassName,
|
|
onClick: this.onClick,
|
|
disabled: this.props.disabled
|
|
});
|
|
|
|
if (this.props.buttonTemplate) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(event) {
|
|
return _this6.onClick(event);
|
|
},
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
visible: visible
|
|
};
|
|
return ObjectUtils.getJSXElement(this.props.buttonTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return content;
|
|
}
|
|
}, {
|
|
key: "renderMask",
|
|
value: function renderMask() {
|
|
if (this.props.mask) {
|
|
var visible = this.isVisible();
|
|
var className = classNames('p-speeddial-mask', {
|
|
'p-speeddial-mask-visible': visible
|
|
}, this.props.maskClassName);
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: className,
|
|
style: this.props.maskStyle
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _classNames2,
|
|
_this7 = this;
|
|
|
|
var className = classNames("p-speeddial p-component p-speeddial-".concat(this.props.type), (_classNames2 = {}, _defineProperty(_classNames2, "p-speeddial-direction-".concat(this.props.direction), this.props.type !== 'circle'), _defineProperty(_classNames2, 'p-speeddial-opened', this.isVisible()), _defineProperty(_classNames2, 'p-disabled', this.props.disabled), _classNames2), this.props.className);
|
|
var button = this.renderButton();
|
|
var list = this.renderList();
|
|
var mask = this.renderMask();
|
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this7.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, button, list), mask);
|
|
}
|
|
}]);
|
|
|
|
return SpeedDial;
|
|
}(React.Component);
|
|
|
|
_defineProperty(SpeedDial, "defaultProps", {
|
|
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,
|
|
maskStyle: null,
|
|
maskClassName: null,
|
|
showIcon: 'pi pi-plus',
|
|
hideIcon: null,
|
|
rotateAnimation: true,
|
|
onVisibleChange: null,
|
|
onClick: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var BlockUI = /*#__PURE__*/function (_Component) {
|
|
_inherits(BlockUI, _Component);
|
|
|
|
var _super = _createSuper$4(BlockUI);
|
|
|
|
function BlockUI(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, BlockUI);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
visible: props.blocked
|
|
};
|
|
_this.block = _this.block.bind(_assertThisInitialized(_this));
|
|
_this.unblock = _this.unblock.bind(_assertThisInitialized(_this));
|
|
_this.onPortalMounted = _this.onPortalMounted.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(BlockUI, [{
|
|
key: "block",
|
|
value: function block() {
|
|
this.setState({
|
|
visible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "unblock",
|
|
value: function unblock() {
|
|
var _this2 = this;
|
|
|
|
var callback = function callback() {
|
|
_this2.setState({
|
|
visible: false
|
|
}, function () {
|
|
_this2.props.fullScreen && DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
_this2.props.onUnblocked && _this2.props.onUnblocked();
|
|
});
|
|
};
|
|
|
|
if (this.mask) {
|
|
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
|
this.mask.addEventListener('animationend', function () {
|
|
ZIndexUtils.clear(_this2.mask);
|
|
callback();
|
|
});
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPortalMounted",
|
|
value: function onPortalMounted() {
|
|
if (this.props.fullScreen) {
|
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
|
document.activeElement.blur();
|
|
}
|
|
|
|
if (this.props.autoZIndex) {
|
|
var key = this.props.fullScreen ? 'modal' : 'overlay';
|
|
ZIndexUtils.set(key, this.mask, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex[key]);
|
|
}
|
|
|
|
this.props.onBlocked && this.props.onBlocked();
|
|
}
|
|
}, {
|
|
key: "renderMask",
|
|
value: function renderMask() {
|
|
var _this3 = this;
|
|
|
|
if (this.state.visible) {
|
|
var className = classNames('p-blockui p-component-overlay p-component-overlay-enter', {
|
|
'p-blockui-document': this.props.fullScreen
|
|
}, this.props.className);
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : null;
|
|
var mask = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.mask = el;
|
|
},
|
|
className: className,
|
|
style: this.props.style
|
|
}, content);
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: mask,
|
|
appendTo: this.props.fullScreen ? document.body : 'self',
|
|
onMounted: this.onPortalMounted
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
if (this.state.visible) {
|
|
this.block();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
if (prevProps.blocked !== this.props.blocked) {
|
|
this.props.blocked ? this.block() : this.unblock();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.props.fullScreen) {
|
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
|
}
|
|
|
|
ZIndexUtils.clear(this.mask);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var mask = this.renderMask();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: "p-blockui-container"
|
|
}, this.props.children, mask);
|
|
}
|
|
}]);
|
|
|
|
return BlockUI;
|
|
}(React.Component);
|
|
|
|
_defineProperty(BlockUI, "defaultProps", {
|
|
id: null,
|
|
blocked: false,
|
|
fullScreen: false,
|
|
baseZIndex: 0,
|
|
autoZIndex: true,
|
|
style: null,
|
|
className: null,
|
|
template: null,
|
|
onBlocked: null,
|
|
onUnblocked: null
|
|
});
|
|
|
|
var TerminalService = EventBus();
|
|
|
|
function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Terminal = /*#__PURE__*/function (_Component) {
|
|
_inherits(Terminal, _Component);
|
|
|
|
var _super = _createSuper$3(Terminal);
|
|
|
|
function Terminal(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Terminal);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
commandText: '',
|
|
commands: [],
|
|
index: 0
|
|
};
|
|
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
|
|
_this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
|
|
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.response = _this.response.bind(_assertThisInitialized(_this));
|
|
_this.clear = _this.clear.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Terminal, [{
|
|
key: "onClick",
|
|
value: function onClick() {
|
|
this.input.focus();
|
|
}
|
|
}, {
|
|
key: "onInputChange",
|
|
value: function onInputChange(e) {
|
|
this.setState({
|
|
commandText: e.target.value
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInputKeyDown",
|
|
value: function onInputKeyDown(e) {
|
|
var code = e.which || e.keyCode;
|
|
var commands = this.state.commands;
|
|
|
|
switch (code) {
|
|
//up
|
|
case 38:
|
|
if (commands && commands.length) {
|
|
var prevIndex = this.state.index - 1 < 0 ? commands.length - 1 : this.state.index - 1;
|
|
var command = commands[prevIndex];
|
|
this.setState({
|
|
index: prevIndex,
|
|
commandText: command.text
|
|
});
|
|
}
|
|
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
if (!!this.state.commandText) {
|
|
var newCommands = _toConsumableArray(commands);
|
|
|
|
var text = this.state.commandText;
|
|
newCommands.push({
|
|
text: text
|
|
});
|
|
this.setState(function (prevState) {
|
|
return {
|
|
index: prevState.index + 1,
|
|
commandText: '',
|
|
commands: newCommands
|
|
};
|
|
}, function () {
|
|
TerminalService.emit('command', text);
|
|
});
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "response",
|
|
value: function response(res) {
|
|
var commands = this.state.commands;
|
|
|
|
if (commands && commands.length > 0) {
|
|
var _commands = _toConsumableArray(commands);
|
|
|
|
_commands[_commands.length - 1].response = res;
|
|
this.setState({
|
|
commands: _commands
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
this.setState({
|
|
commands: [],
|
|
index: 0
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
TerminalService.on('response', this.response);
|
|
TerminalService.on('clear', this.clear);
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
this.container.scrollTop = this.container.scrollHeight;
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
TerminalService.off('response', this.response);
|
|
TerminalService.off('clear', this.clear);
|
|
}
|
|
}, {
|
|
key: "renderWelcomeMessage",
|
|
value: function renderWelcomeMessage() {
|
|
if (this.props.welcomeMessage) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", null, this.props.welcomeMessage);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderCommand",
|
|
value: function renderCommand(command, index) {
|
|
var text = command.text,
|
|
response = command.response;
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
key: "".concat(text).concat(index)
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-terminal-prompt"
|
|
}, this.props.prompt, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-terminal-command"
|
|
}, text), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-terminal-response"
|
|
}, response));
|
|
}
|
|
}, {
|
|
key: "renderContent",
|
|
value: function renderContent() {
|
|
var _this2 = this;
|
|
|
|
var commands = this.state.commands.map(function (c, i) {
|
|
return _this2.renderCommand(c, i);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-terminal-content"
|
|
}, commands);
|
|
}
|
|
}, {
|
|
key: "renderPromptContainer",
|
|
value: function renderPromptContainer() {
|
|
var _this3 = this;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-terminal-prompt-container"
|
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: "p-terminal-prompt"
|
|
}, this.props.prompt, "\xA0"), /*#__PURE__*/React__default["default"].createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this3.input = el;
|
|
},
|
|
type: "text",
|
|
value: this.state.commandText,
|
|
className: "p-terminal-input",
|
|
autoComplete: "off",
|
|
onChange: this.onInputChange,
|
|
onKeyDown: this.onInputKeyDown
|
|
}));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var className = classNames('p-terminal p-component', this.props.className);
|
|
var welcomeMessage = this.renderWelcomeMessage();
|
|
var content = this.renderContent();
|
|
var prompt = this.renderPromptContainer();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style,
|
|
onClick: this.onClick
|
|
}, welcomeMessage, content, prompt);
|
|
}
|
|
}]);
|
|
|
|
return Terminal;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Terminal, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
welcomeMessage: null,
|
|
prompt: null
|
|
});
|
|
|
|
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Dock = /*#__PURE__*/function (_Component) {
|
|
_inherits(Dock, _Component);
|
|
|
|
var _super = _createSuper$2(Dock);
|
|
|
|
function Dock(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Dock);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
currentIndex: -3
|
|
};
|
|
_this.onListMouseLeave = _this.onListMouseLeave.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Dock, [{
|
|
key: "onListMouseLeave",
|
|
value: function onListMouseLeave() {
|
|
this.setState({
|
|
currentIndex: -3
|
|
});
|
|
}
|
|
}, {
|
|
key: "onItemMouseEnter",
|
|
value: function onItemMouseEnter(index) {
|
|
this.setState({
|
|
currentIndex: index
|
|
});
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: function onItemClick(e, item) {
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: e,
|
|
item: item
|
|
});
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(item, index) {
|
|
var _this2 = this;
|
|
|
|
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': this.state.currentIndex - 2 === index,
|
|
'p-dock-item-prev': this.state.currentIndex - 1 === index,
|
|
'p-dock-item-current': this.state.currentIndex === index,
|
|
'p-dock-item-next': this.state.currentIndex + 1 === index,
|
|
'p-dock-item-second-next': this.state.currentIndex + 2 === index
|
|
});
|
|
var contentClassName = classNames('p-dock-action', {
|
|
'p-disabled': disabled
|
|
});
|
|
var iconClassName = classNames('p-dock-action-icon', _icon);
|
|
var icon = typeof _icon === 'string' ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
className: iconClassName
|
|
}) : ObjectUtils.getJSXElement(_icon, this.props);
|
|
var content = /*#__PURE__*/React__default["default"].createElement("a", {
|
|
href: url || '#',
|
|
role: "menuitem",
|
|
className: contentClassName,
|
|
target: target,
|
|
"data-pr-tooltip": label,
|
|
onClick: function onClick(e) {
|
|
return _this2.onItemClick(e, item);
|
|
}
|
|
}, icon, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
|
|
if (template) {
|
|
var defaultContentOptions = {
|
|
onClick: function onClick(e) {
|
|
return _this2.onItemClick(e, item);
|
|
},
|
|
className: contentClassName,
|
|
iconClassName: iconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
index: index
|
|
};
|
|
content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index,
|
|
className: className,
|
|
role: "none",
|
|
onMouseEnter: function onMouseEnter() {
|
|
return _this2.onItemMouseEnter(index);
|
|
}
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderItems",
|
|
value: function renderItems() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.model) {
|
|
return this.props.model.map(function (item, index) {
|
|
return _this3.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderHeader",
|
|
value: function renderHeader() {
|
|
if (this.props.header) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dock-header"
|
|
}, ObjectUtils.getJSXElement(this.props.header, {
|
|
props: this.props
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderList",
|
|
value: function renderList() {
|
|
var _this4 = this;
|
|
|
|
var items = this.renderItems();
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this4.list = el;
|
|
},
|
|
className: "p-dock-list",
|
|
role: "menu",
|
|
onMouseLeave: this.onListMouseLeave
|
|
}, items);
|
|
}
|
|
}, {
|
|
key: "renderFooter",
|
|
value: function renderFooter() {
|
|
if (this.props.footer) {
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dock-footer"
|
|
}, ObjectUtils.getJSXElement(this.props.footer, {
|
|
props: this.props
|
|
}));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var className = classNames("p-dock p-component p-dock-".concat(this.props.position), {
|
|
'p-dock-magnification': this.props.magnification
|
|
}, this.props.className);
|
|
var header = this.renderHeader();
|
|
var list = this.renderList();
|
|
var footer = this.renderFooter();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-dock-container"
|
|
}, header, list, footer));
|
|
}
|
|
}]);
|
|
|
|
return Dock;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Dock, "defaultProps", {
|
|
id: null,
|
|
style: null,
|
|
className: null,
|
|
model: null,
|
|
position: 'bottom',
|
|
magnification: true,
|
|
header: null,
|
|
footer: null
|
|
});
|
|
|
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
|
|
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Mention = /*#__PURE__*/function (_Component) {
|
|
_inherits(Mention, _Component);
|
|
|
|
var _super = _createSuper$1(Mention);
|
|
|
|
function Mention(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Mention);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
overlayVisible: false,
|
|
focused: false,
|
|
searching: false,
|
|
trigger: null
|
|
};
|
|
_this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntering = _this.onOverlayEntering.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayEntered = _this.onOverlayEntered.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
|
|
_this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
|
_this.onInput = _this.onInput.bind(_assertThisInitialized(_this));
|
|
_this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_this));
|
|
_this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
|
|
_this.overlayRef = /*#__PURE__*/React.createRef();
|
|
_this.inputRef = /*#__PURE__*/React.createRef(_this.props.inputRef);
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Mention, [{
|
|
key: "showOverlay",
|
|
value: function showOverlay() {
|
|
this.setState({
|
|
overlayVisible: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "hideOverlay",
|
|
value: function hideOverlay() {
|
|
this.setState({
|
|
overlayVisible: false,
|
|
searching: false,
|
|
trigger: null
|
|
});
|
|
}
|
|
}, {
|
|
key: "onOverlayEnter",
|
|
value: function onOverlayEnter() {
|
|
ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
|
|
this.alignOverlay();
|
|
}
|
|
}, {
|
|
key: "onOverlayEntering",
|
|
value: function onOverlayEntering() {
|
|
if (this.props.autoHighlight && this.props.suggestions && this.props.suggestions.length) {
|
|
DomHandler.addClass(this.list.firstChild, 'p-highlight');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onOverlayEntered",
|
|
value: function onOverlayEntered() {
|
|
this.bindDocumentClickListener();
|
|
this.bindScrollListener();
|
|
this.bindResizeListener();
|
|
this.props.onShow && this.props.onShow();
|
|
}
|
|
}, {
|
|
key: "onOverlayExit",
|
|
value: function onOverlayExit() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindScrollListener();
|
|
this.unbindResizeListener();
|
|
}
|
|
}, {
|
|
key: "onOverlayExited",
|
|
value: function onOverlayExited() {
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
this.props.onHide && this.props.onHide();
|
|
}
|
|
}, {
|
|
key: "alignOverlay",
|
|
value: function alignOverlay() {
|
|
var _this$state$trigger = this.state.trigger,
|
|
key = _this$state$trigger.key,
|
|
index = _this$state$trigger.index;
|
|
var value = this.inputRef.current.value;
|
|
var position = DomHandler.getCursorOffset(this.inputRef.current, value.substring(0, index - 1), value.substring(index), key);
|
|
this.overlayRef.current.style.transformOrigin = 'top';
|
|
this.overlayRef.current.style.left = "calc(".concat(position.left, "px + 1rem)");
|
|
this.overlayRef.current.style.top = "calc(".concat(position.top, "px + 1.2rem)");
|
|
}
|
|
}, {
|
|
key: "onPanelClick",
|
|
value: function onPanelClick(event) {
|
|
OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: this.container
|
|
});
|
|
}
|
|
}, {
|
|
key: "getTrigger",
|
|
value: function getTrigger(value, key, start) {
|
|
if (!this.state.trigger) {
|
|
var triggerKey = Array.isArray(this.props.trigger) ? this.props.trigger.find(function (t) {
|
|
return t === key;
|
|
}) : this.props.trigger === key ? this.props.trigger : null;
|
|
|
|
if (triggerKey) {
|
|
return {
|
|
key: triggerKey,
|
|
index: start
|
|
};
|
|
}
|
|
|
|
var latestSpaceIndex = value.substring(0, start).lastIndexOf(' ');
|
|
var latestTrigger = this.getLatestTrigger(value, start);
|
|
|
|
if (latestTrigger.index > latestSpaceIndex) {
|
|
return latestTrigger;
|
|
}
|
|
}
|
|
|
|
return this.state.trigger;
|
|
}
|
|
}, {
|
|
key: "getLatestTrigger",
|
|
value: function getLatestTrigger(value, start) {
|
|
if (Array.isArray(this.props.trigger)) {
|
|
var latestTrigger = {};
|
|
this.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(this.props.trigger);
|
|
return {
|
|
key: this.props.trigger,
|
|
index: index !== -1 ? index + 1 : -1
|
|
};
|
|
}
|
|
}, {
|
|
key: "onSearch",
|
|
value: function onSearch(event) {
|
|
var _this2 = this;
|
|
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
var _event$target = event.target,
|
|
value = _event$target.value,
|
|
selectionStart = _event$target.selectionStart;
|
|
var key = value.substring(selectionStart - 1, selectionStart);
|
|
|
|
if (key === ' ') {
|
|
this.hideOverlay();
|
|
return;
|
|
}
|
|
|
|
var currentTrigger = this.getTrigger(value, key, selectionStart);
|
|
|
|
if (currentTrigger && currentTrigger.index > -1) {
|
|
var query = value.substring(currentTrigger.index, selectionStart);
|
|
this.timeout = setTimeout(function () {
|
|
_this2.search(event, query, currentTrigger);
|
|
}, this.props.delay);
|
|
}
|
|
}
|
|
}, {
|
|
key: "search",
|
|
value: function search(event, query, trigger) {
|
|
if (this.props.onSearch) {
|
|
this.setState({
|
|
searching: true,
|
|
trigger: trigger
|
|
});
|
|
this.props.onSearch({
|
|
originalEvent: event,
|
|
trigger: trigger.key,
|
|
query: query
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "selectItem",
|
|
value: function selectItem(event, suggestion) {
|
|
var value = this.inputRef.current.value;
|
|
var selectionStart = event.target.selectionStart;
|
|
var trigger = this.state.trigger;
|
|
var spaceIndex = value.indexOf(' ', trigger.index);
|
|
var currentText = value.substring(trigger.index, spaceIndex > -1 ? spaceIndex : selectionStart);
|
|
var selectedText = this.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, trigger.index);
|
|
var nextText = value.substring(trigger.index + diff);
|
|
this.inputRef.current.value = "".concat(prevText).concat(selectedText, " ").concat(nextText);
|
|
this.props.onChange && this.props.onChange(event);
|
|
}
|
|
|
|
var cursorStart = trigger.index + selectedText.length + 1;
|
|
this.inputRef.current.setSelectionRange(cursorStart, cursorStart);
|
|
this.hideOverlay();
|
|
this.props.onSelect && this.props.onSelect({
|
|
originalEvent: event,
|
|
suggestion: suggestion
|
|
});
|
|
}
|
|
}, {
|
|
key: "formatValue",
|
|
value: function formatValue(value) {
|
|
var _this3 = this;
|
|
|
|
if (value) {
|
|
var field = Array.isArray(this.props.field) ? this.props.field[this.props.trigger.findIndex(function (f) {
|
|
return f === _this3.state.trigger.key;
|
|
})] : this.props.field;
|
|
return field ? ObjectUtils.resolveFieldData(value, field) : value;
|
|
}
|
|
|
|
return '';
|
|
}
|
|
}, {
|
|
key: "onItemClick",
|
|
value: function onItemClick(event, suggestion) {
|
|
this.inputRef.current.focus();
|
|
this.selectItem(event, suggestion);
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus(event) {
|
|
var _this4 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: true
|
|
}, function () {
|
|
_this4.props.onFocus && _this4.props.onFocus(event);
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur(event) {
|
|
var _this5 = this;
|
|
|
|
event.persist();
|
|
this.setState({
|
|
focused: false
|
|
}, function () {
|
|
_this5.props.onBlur && _this5.props.onBlur(event);
|
|
});
|
|
}
|
|
}, {
|
|
key: "onInput",
|
|
value: function onInput(event) {
|
|
this.props.onInput && this.props.onInput(event);
|
|
if (event.target.value.length > 0) DomHandler.addClass(this.container, 'p-inputwrapper-filled');else DomHandler.removeClass(this.container, 'p-inputwrapper-filled');
|
|
}
|
|
}, {
|
|
key: "onKeyUp",
|
|
value: function onKeyUp(event) {
|
|
if (event.which === 37 || event.which === 39) {
|
|
this.onSearch(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onChange",
|
|
value: function onChange(event) {
|
|
this.props.onChange && this.props.onChange(event);
|
|
this.onSearch(event);
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (this.state.overlayVisible) {
|
|
var highlightItem = DomHandler.findSingle(this.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(this.overlayRef.current, nextElement);
|
|
}
|
|
} else {
|
|
highlightItem = DomHandler.findSingle(this.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(this.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 === this.state.trigger.key) {
|
|
this.hideOverlay();
|
|
}
|
|
|
|
break;
|
|
//enter
|
|
|
|
case 13:
|
|
if (highlightItem) {
|
|
this.selectItem(event, this.props.suggestions[DomHandler.index(highlightItem)]);
|
|
}
|
|
|
|
event.preventDefault();
|
|
break;
|
|
//escape
|
|
|
|
case 27:
|
|
this.hideOverlay();
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDocumentClickListener",
|
|
value: function bindDocumentClickListener() {
|
|
var _this6 = this;
|
|
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = function (event) {
|
|
if (event.which === 3) {
|
|
// right click
|
|
return;
|
|
}
|
|
|
|
if (_this6.state.overlayVisible && _this6.isOutsideClicked(event)) {
|
|
_this6.hideOverlay();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', this.documentClickListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindDocumentClickListener",
|
|
value: function unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener('click', this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindScrollListener",
|
|
value: function bindScrollListener() {
|
|
var _this7 = this;
|
|
|
|
if (!this.scrollHandler) {
|
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.container, function () {
|
|
if (_this7.state.overlayVisible) {
|
|
_this7.hideOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
this.scrollHandler.bindScrollListener();
|
|
}
|
|
}, {
|
|
key: "unbindScrollListener",
|
|
value: function unbindScrollListener() {
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.unbindScrollListener();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindResizeListener",
|
|
value: function bindResizeListener() {
|
|
var _this8 = this;
|
|
|
|
if (!this.resizeListener) {
|
|
this.resizeListener = function () {
|
|
if (_this8.state.overlayVisible && !DomHandler.isTouchDevice()) {
|
|
_this8.hideOverlay();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', this.resizeListener);
|
|
}
|
|
}
|
|
}, {
|
|
key: "unbindResizeListener",
|
|
value: function unbindResizeListener() {
|
|
if (this.resizeListener) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.resizeListener = null;
|
|
}
|
|
}
|
|
}, {
|
|
key: "isOutsideClicked",
|
|
value: function isOutsideClicked(event) {
|
|
return this.container && this.overlayRef && this.overlayRef.current && !this.overlayRef.current.contains(event.target);
|
|
}
|
|
}, {
|
|
key: "isFilled",
|
|
value: function isFilled() {
|
|
return this.props.value != null && this.props.value.toString().length > 0 || this.props.defaultValue != null && this.props.defaultValue.toString().length > 0 || this.inputRef && this.inputRef.current && this.inputRef.current.value.toString().length > 0;
|
|
}
|
|
}, {
|
|
key: "updateInputRef",
|
|
value: function updateInputRef() {
|
|
var ref = this.props.inputRef;
|
|
|
|
if (ref) {
|
|
if (typeof ref === 'function') {
|
|
ref(this.inputRef.current);
|
|
} else {
|
|
ref.current = this.inputRef.current;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.updateInputRef();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (prevProps.suggestions !== this.props.suggestions && this.state.searching) {
|
|
this.props.suggestions && this.props.suggestions.length ? this.showOverlay() : this.hideOverlay();
|
|
|
|
if (this.state.overlayVisible) {
|
|
this.alignOverlay();
|
|
}
|
|
|
|
this.setState({
|
|
searching: false
|
|
});
|
|
}
|
|
|
|
if (!this.isFilled() && DomHandler.hasClass(this.container, 'p-inputwrapper-filled')) {
|
|
DomHandler.removeClass(this.container, 'p-inputwrapper-filled');
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.unbindDocumentClickListener();
|
|
this.unbindResizeListener();
|
|
|
|
if (this.scrollHandler) {
|
|
this.scrollHandler.destroy();
|
|
this.scrollHandler = null;
|
|
}
|
|
|
|
ZIndexUtils.clear(this.overlayRef.current);
|
|
}
|
|
}, {
|
|
key: "renderItem",
|
|
value: function renderItem(suggestion, index) {
|
|
var _this9 = this;
|
|
|
|
var content = this.props.itemTemplate ? ObjectUtils.getJSXElement(this.props.itemTemplate, suggestion, {
|
|
trigger: this.state.trigger ? this.state.trigger.key : '',
|
|
index: index
|
|
}) : this.formatValue(suggestion);
|
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
key: index + '_item',
|
|
className: "p-mention-item",
|
|
onClick: function onClick(e) {
|
|
return _this9.onItemClick(e, suggestion);
|
|
}
|
|
}, content, /*#__PURE__*/React__default["default"].createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderList",
|
|
value: function renderList() {
|
|
var _this10 = this;
|
|
|
|
if (this.props.suggestions) {
|
|
var items = this.props.suggestions.map(function (suggestion, index) {
|
|
return _this10.renderItem(suggestion, index);
|
|
});
|
|
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
ref: function ref(el) {
|
|
return _this10.list = el;
|
|
},
|
|
className: "p-mention-items"
|
|
}, items);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderPanel",
|
|
value: function renderPanel() {
|
|
var panelClassName = classNames('p-mention-panel p-component', this.props.panelClassName);
|
|
|
|
var panelStyle = _objectSpread({
|
|
maxHeight: this.props.scrollHeight
|
|
}, this.props.panelStyle);
|
|
|
|
var header = ObjectUtils.getJSXElement(this.props.headerTemplate, this.props);
|
|
var footer = ObjectUtils.getJSXElement(this.props.footerTemplate, this.props);
|
|
var list = this.renderList();
|
|
var panel = /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.overlayRef,
|
|
classNames: "p-connected-overlay",
|
|
"in": this.state.overlayVisible,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: this.props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: this.onOverlayEnter,
|
|
onEntering: this.onOverlayEntering,
|
|
onEntered: this.onOverlayEntered,
|
|
onExit: this.onOverlayExit,
|
|
onExited: this.onOverlayExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.overlayRef,
|
|
className: panelClassName,
|
|
style: panelStyle,
|
|
onClick: this.onPanelClick
|
|
}, header, list, footer));
|
|
return /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: panel,
|
|
appendTo: "self"
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this11 = this;
|
|
|
|
var containerClassName = classNames('p-mention p-component p-inputwrapper', {
|
|
'p-inputwrapper-filled': this.isFilled(),
|
|
'p-inputwrapper-focus': this.state.focused
|
|
}, this.props.className);
|
|
var inputClassName = classNames('p-mention-input', this.props.inputClassName);
|
|
var inputProps = ObjectUtils.findDiffKeys(this.props, Mention.defaultProps);
|
|
var panel = this.renderPanel();
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this11.container = el;
|
|
},
|
|
id: this.props.id,
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement(InputTextarea, _extends({
|
|
ref: this.inputRef,
|
|
id: this.props.inputId
|
|
}, inputProps, {
|
|
className: inputClassName,
|
|
style: this.props.inputStyle,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
onInput: this.onInput,
|
|
onKeyUp: this.onKeyUp,
|
|
onChange: this.onChange
|
|
})), panel);
|
|
}
|
|
}]);
|
|
|
|
return Mention;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Mention, "defaultProps", {
|
|
id: null,
|
|
inputId: null,
|
|
inputRef: null,
|
|
style: null,
|
|
className: null,
|
|
trigger: '@',
|
|
suggestions: null,
|
|
field: null,
|
|
inputStyle: null,
|
|
inputClassName: null,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
scrollHeight: '200px',
|
|
autoHighlight: true,
|
|
delay: 0,
|
|
headerTemplate: null,
|
|
footerTemplate: null,
|
|
itemTemplate: null,
|
|
transitionOptions: null,
|
|
onChange: null,
|
|
onInput: null,
|
|
onSearch: null,
|
|
onSelect: null,
|
|
onFocus: null,
|
|
onBlur: null,
|
|
onShow: null,
|
|
onHide: null
|
|
});
|
|
|
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var Image = /*#__PURE__*/function (_Component) {
|
|
_inherits(Image, _Component);
|
|
|
|
var _super = _createSuper(Image);
|
|
|
|
function Image(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Image);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
maskVisible: false,
|
|
previewVisible: false,
|
|
rotate: 0,
|
|
scale: 1
|
|
};
|
|
_this.onImageClick = _this.onImageClick.bind(_assertThisInitialized(_this));
|
|
_this.onMaskClick = _this.onMaskClick.bind(_assertThisInitialized(_this));
|
|
_this.onDownload = _this.onDownload.bind(_assertThisInitialized(_this));
|
|
_this.rotateRight = _this.rotateRight.bind(_assertThisInitialized(_this));
|
|
_this.rotateLeft = _this.rotateLeft.bind(_assertThisInitialized(_this));
|
|
_this.zoomIn = _this.zoomIn.bind(_assertThisInitialized(_this));
|
|
_this.zoomOut = _this.zoomOut.bind(_assertThisInitialized(_this));
|
|
_this.onEntering = _this.onEntering.bind(_assertThisInitialized(_this));
|
|
_this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
|
|
_this.onPreviewImageClick = _this.onPreviewImageClick.bind(_assertThisInitialized(_this));
|
|
_this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
|
|
_this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
|
|
_this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
|
|
_this.previewRef = /*#__PURE__*/React__default["default"].createRef();
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Image, [{
|
|
key: "onImageClick",
|
|
value: function onImageClick() {
|
|
var _this2 = this;
|
|
|
|
if (this.props.preview) {
|
|
this.setState({
|
|
maskVisible: true
|
|
});
|
|
setTimeout(function () {
|
|
_this2.setState({
|
|
previewVisible: true
|
|
});
|
|
}, 25);
|
|
}
|
|
}
|
|
}, {
|
|
key: "onPreviewImageClick",
|
|
value: function onPreviewImageClick() {
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "onMaskClick",
|
|
value: function onMaskClick() {
|
|
if (!this.previewClick) {
|
|
this.setState({
|
|
previewVisible: false
|
|
});
|
|
this.setState({
|
|
rotate: 0
|
|
});
|
|
this.setState({
|
|
scale: 1
|
|
});
|
|
}
|
|
|
|
this.previewClick = false;
|
|
}
|
|
}, {
|
|
key: "onDownload",
|
|
value: function onDownload() {
|
|
var _this$props = this.props,
|
|
name = _this$props.alt,
|
|
src = _this$props.src;
|
|
DomHandler.saveAs({
|
|
name: name,
|
|
src: src
|
|
});
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "rotateRight",
|
|
value: function rotateRight() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
rotate: prevState.rotate + 90
|
|
};
|
|
});
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "rotateLeft",
|
|
value: function rotateLeft() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
rotate: prevState.rotate - 90
|
|
};
|
|
});
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "zoomIn",
|
|
value: function zoomIn() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
scale: prevState.scale + 0.1
|
|
};
|
|
});
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "zoomOut",
|
|
value: function zoomOut() {
|
|
this.setState(function (prevState) {
|
|
return {
|
|
scale: prevState.scale - 0.1
|
|
};
|
|
});
|
|
this.previewClick = true;
|
|
}
|
|
}, {
|
|
key: "onEntering",
|
|
value: function onEntering() {
|
|
ZIndexUtils.set('modal', this.mask, PrimeReact.autoZIndex, PrimeReact.zIndex['modal']);
|
|
}
|
|
}, {
|
|
key: "onEntered",
|
|
value: function onEntered() {
|
|
if (this.props.onShow) {
|
|
this.props.onShow();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onExit",
|
|
value: function onExit() {
|
|
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
|
|
}
|
|
}, {
|
|
key: "onExiting",
|
|
value: function onExiting() {
|
|
if (this.props.onHide) {
|
|
this.props.onHide();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onExited",
|
|
value: function onExited(el) {
|
|
ZIndexUtils.clear(el);
|
|
this.setState({
|
|
maskVisible: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.mask) {
|
|
ZIndexUtils.clear(this.container);
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderElement",
|
|
value: function renderElement() {
|
|
var _this3 = this;
|
|
|
|
var downloadable = this.props.downloadable;
|
|
var imagePreviewStyle = {
|
|
transform: 'rotate(' + this.state.rotate + 'deg) scale(' + this.state.scale + ')'
|
|
};
|
|
var zoomDisabled = this.state.scale <= 0.5 || this.state.scale >= 1.5; // const rotateClassName = 'p-image-preview-rotate-' + this.state.rotate;
|
|
|
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: function ref(el) {
|
|
return _this3.mask = el;
|
|
},
|
|
className: "p-image-mask p-component-overlay p-component-overlay-enter",
|
|
onClick: this.onMaskClick
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-image-toolbar"
|
|
}, downloadable && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
onClick: this.onDownload,
|
|
type: "button"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-download"
|
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
onClick: this.rotateRight,
|
|
type: "button"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-refresh"
|
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
onClick: this.rotateLeft,
|
|
type: "button"
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-undo"
|
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
onClick: this.zoomOut,
|
|
type: "button",
|
|
disabled: zoomDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-search-minus"
|
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
onClick: this.zoomIn,
|
|
type: "button",
|
|
disabled: zoomDisabled
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-search-plus"
|
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
className: "p-image-action p-link",
|
|
type: "button",
|
|
onClick: this.hidePreview
|
|
}, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "pi pi-times"
|
|
}))), /*#__PURE__*/React__default["default"].createElement(CSSTransition, {
|
|
nodeRef: this.previewRef,
|
|
classNames: "p-image-preview",
|
|
"in": this.state.previewVisible,
|
|
timeout: {
|
|
enter: 150,
|
|
exit: 150
|
|
},
|
|
unmountOnExit: true,
|
|
onEntering: this.onEntering,
|
|
onEntered: this.onEntered,
|
|
onExit: this.onExit,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
ref: this.previewRef
|
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
src: this.props.src,
|
|
className: "p-image-preview",
|
|
style: imagePreviewStyle,
|
|
onClick: this.onPreviewImageClick,
|
|
alt: this.props.alt
|
|
}))));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var containerClassName = classNames('p-image p-component', this.props.className, {
|
|
'p-image-preview-container': this.props.preview
|
|
});
|
|
var element = this.renderElement();
|
|
var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : /*#__PURE__*/React__default["default"].createElement("i", {
|
|
className: "p-image-preview-icon pi pi-eye"
|
|
});
|
|
var _this$props2 = this.props,
|
|
src = _this$props2.src,
|
|
alt = _this$props2.alt,
|
|
width = _this$props2.width,
|
|
height = _this$props2.height;
|
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
ref: function ref(el) {
|
|
return _this4.container = el;
|
|
},
|
|
className: containerClassName,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
src: src,
|
|
className: this.props.imageClassName,
|
|
width: width,
|
|
height: height,
|
|
style: this.props.imageStyle,
|
|
alt: alt
|
|
}), this.props.preview && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
className: "p-image-preview-indicator",
|
|
onClick: this.onImageClick
|
|
}, content), this.state.maskVisible && /*#__PURE__*/React__default["default"].createElement(Portal, {
|
|
element: element,
|
|
appendTo: document.body
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Image;
|
|
}(React.Component);
|
|
|
|
_defineProperty(Image, "defaultProps", {
|
|
preview: false,
|
|
className: null,
|
|
downloadable: false,
|
|
style: null,
|
|
imageStyle: null,
|
|
imageClassName: null,
|
|
template: null,
|
|
src: null,
|
|
alt: null,
|
|
width: null,
|
|
height: null
|
|
});
|
|
|
|
exports.Accordion = Accordion;
|
|
exports.AccordionTab = AccordionTab;
|
|
exports.AutoComplete = AutoComplete;
|
|
exports.Avatar = Avatar;
|
|
exports.AvatarGroup = AvatarGroup;
|
|
exports.Badge = Badge;
|
|
exports.BlockUI = BlockUI;
|
|
exports.BreadCrumb = BreadCrumb;
|
|
exports.Button = Button;
|
|
exports.ButtonComponent = ButtonComponent;
|
|
exports.CSSTransition = CSSTransition;
|
|
exports.Calendar = Calendar;
|
|
exports.Captcha = Captcha;
|
|
exports.Card = Card;
|
|
exports.Carousel = Carousel;
|
|
exports.CascadeSelect = CascadeSelect;
|
|
exports.Chart = Chart;
|
|
exports.Checkbox = Checkbox;
|
|
exports.Chip = Chip;
|
|
exports.Chips = Chips;
|
|
exports.ColorPicker = ColorPicker;
|
|
exports.Column = Column;
|
|
exports.ColumnGroup = ColumnGroup;
|
|
exports.ConfirmDialog = ConfirmDialog;
|
|
exports.ConfirmPopup = ConfirmPopup;
|
|
exports.ConnectedOverlayScrollHandler = ConnectedOverlayScrollHandler;
|
|
exports.ContextMenu = ContextMenu;
|
|
exports.DataScroller = DataScroller;
|
|
exports.DataTable = DataTable;
|
|
exports.DataView = DataView;
|
|
exports.DataViewLayoutOptions = DataViewLayoutOptions;
|
|
exports.DeferredContent = DeferredContent;
|
|
exports.Dialog = Dialog;
|
|
exports.Divider = Divider;
|
|
exports.Dock = Dock;
|
|
exports.DomHandler = DomHandler;
|
|
exports.Dropdown = Dropdown;
|
|
exports.Editor = Editor;
|
|
exports.EventBus = EventBus;
|
|
exports.Fieldset = Fieldset;
|
|
exports.FileUpload = FileUpload;
|
|
exports.FilterMatchMode = FilterMatchMode;
|
|
exports.FilterOperator = FilterOperator;
|
|
exports.FilterService = FilterService;
|
|
exports.FullCalendar = FullCalendar;
|
|
exports.GMap = GMap;
|
|
exports.Galleria = Galleria;
|
|
exports.IconUtils = IconUtils;
|
|
exports.Image = Image;
|
|
exports.Inplace = Inplace;
|
|
exports.InplaceContent = InplaceContent;
|
|
exports.InplaceDisplay = InplaceDisplay;
|
|
exports.InputMask = InputMask;
|
|
exports.InputNumber = InputNumber;
|
|
exports.InputSwitch = InputSwitch;
|
|
exports.InputText = InputText;
|
|
exports.InputTextarea = InputTextarea;
|
|
exports.KeyFilter = KeyFilter;
|
|
exports.Knob = Knob;
|
|
exports.ListBox = ListBox;
|
|
exports.MegaMenu = MegaMenu;
|
|
exports.Mention = Mention;
|
|
exports.Menu = Menu;
|
|
exports.Menubar = Menubar;
|
|
exports.Message = Message;
|
|
exports.MessageSeverity = MessageSeverity;
|
|
exports.Messages = Messages;
|
|
exports.MultiSelect = MultiSelect;
|
|
exports.MultiStateCheckbox = MultiStateCheckbox;
|
|
exports.ObjectUtils = ObjectUtils;
|
|
exports.OrderList = OrderList;
|
|
exports.OrganizationChart = OrganizationChart;
|
|
exports.OrganizationChartNode = OrganizationChartNode;
|
|
exports.OverlayPanel = OverlayPanel;
|
|
exports.OverlayService = OverlayService;
|
|
exports.Paginator = Paginator;
|
|
exports.Panel = Panel;
|
|
exports.PanelMenu = PanelMenu;
|
|
exports.Password = Password;
|
|
exports.PickList = PickList;
|
|
exports.Portal = Portal;
|
|
exports.PrimeIcons = PrimeIcons;
|
|
exports.ProgressBar = ProgressBar;
|
|
exports.ProgressSpinner = ProgressSpinner;
|
|
exports.RadioButton = RadioButton;
|
|
exports.Rating = Rating;
|
|
exports.Ripple = Ripple;
|
|
exports.Row = Row;
|
|
exports.ScrollPanel = ScrollPanel;
|
|
exports.ScrollTop = ScrollTop;
|
|
exports.SelectButton = SelectButton;
|
|
exports.Sidebar = Sidebar;
|
|
exports.Skeleton = Skeleton;
|
|
exports.SlideMenu = SlideMenu;
|
|
exports.SlideMenuSub = SlideMenuSub;
|
|
exports.Slider = Slider;
|
|
exports.SpeedDial = SpeedDial;
|
|
exports.SplitButton = SplitButton;
|
|
exports.Splitter = Splitter;
|
|
exports.SplitterPanel = SplitterPanel;
|
|
exports.Steps = Steps;
|
|
exports.TabMenu = TabMenu;
|
|
exports.TabPanel = TabPanel;
|
|
exports.TabView = TabView;
|
|
exports.Tag = Tag;
|
|
exports.Terminal = Terminal;
|
|
exports.TerminalService = TerminalService;
|
|
exports.TieredMenu = TieredMenu;
|
|
exports.Timeline = Timeline;
|
|
exports.Toast = Toast;
|
|
exports.ToggleButton = ToggleButton;
|
|
exports.Toolbar = Toolbar;
|
|
exports.Tooltip = Tooltip;
|
|
exports.Tree = Tree;
|
|
exports.TreeSelect = TreeSelect;
|
|
exports.TreeTable = TreeTable;
|
|
exports.TriStateCheckbox = TriStateCheckbox;
|
|
exports.UniqueComponentId = UniqueComponentId;
|
|
exports.VirtualScroller = VirtualScroller;
|
|
exports.ZIndexUtils = ZIndexUtils;
|
|
exports.addLocale = addLocale;
|
|
exports.classNames = classNames;
|
|
exports.confirmDialog = confirmDialog;
|
|
exports.confirmPopup = confirmPopup;
|
|
exports["default"] = PrimeReact;
|
|
exports.locale = locale;
|
|
exports.localeOption = localeOption;
|
|
exports.localeOptions = localeOptions;
|
|
exports.mask = mask;
|
|
exports.tip = tip;
|
|
exports.updateLocaleOption = updateLocaleOption;
|
|
exports.updateLocaleOptions = updateLocaleOptions;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
return exports;
|
|
|
|
})({}, React, ReactTransitionGroup, ReactDOM);
|