katoikia-app/web-ui/web-react/node_modules/primereact/cascadeselect/cascadeselect.esm.js

989 lines
33 KiB
JavaScript
Raw Normal View History

2022-07-06 04:15:11 +00:00
import React, { Component, createRef } from 'react';
import { DomHandler, ObjectUtils, classNames, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primereact/utils';
import { CSSTransition } from 'primereact/csstransition';
import { Ripple } from 'primereact/ripple';
import { OverlayService } from 'primereact/overlayservice';
import { Portal } from 'primereact/portal';
import PrimeReact from 'primereact/api';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
Object.defineProperty(subClass, "prototype", {
writable: false
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
} else if (call !== void 0) {
throw new TypeError("Derived constructors may only return object or undefined");
}
return _assertThisInitialized(self);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _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$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 CascadeSelectSub = /*#__PURE__*/function (_Component) {
_inherits(CascadeSelectSub, _Component);
var _super = _createSuper$1(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$1(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.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.createElement("span", {
className: "p-cascadeselect-item-text"
}, this.getOptionLabelToRender(option));
var optionGroup = this.isOptionGroup(option) && /*#__PURE__*/React.createElement("span", {
className: "p-cascadeselect-group-icon pi pi-angle-right"
});
return /*#__PURE__*/React.createElement("li", {
key: this.getOptionLabelToRender(option) + '_' + index,
className: className,
style: option.style,
role: "none"
}, /*#__PURE__*/React.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.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.createElement("ul", {
ref: function ref(el) {
return _this4.element = el;
},
className: className,
role: "listbox",
"aria-orientation": "horizontal"
}, submenu);
}
}]);
return CascadeSelectSub;
}(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(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 _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 CascadeSelect = /*#__PURE__*/function (_Component) {
_inherits(CascadeSelect, _Component);
var _super = _createSuper(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__*/createRef();
_this.inputRef = /*#__PURE__*/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(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(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.createElement("div", {
className: "p-hidden-accessible"
}, /*#__PURE__*/React.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.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.createElement("div", {
className: "p-cascadeselect-trigger",
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": this.state.overlayVisible
}, /*#__PURE__*/React.createElement("span", {
className: iconClassName
}));
}
}, {
key: "renderOverlay",
value: function renderOverlay() {
var overlay = /*#__PURE__*/React.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.createElement("div", {
ref: this.overlayRef,
className: "p-cascadeselect-panel p-component",
onClick: this.onPanelClick
}, /*#__PURE__*/React.createElement("div", {
className: "p-cascadeselect-items-wrapper"
}, /*#__PURE__*/React.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.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.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;
}(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
});
export { CascadeSelect };