gnezim
60e2149072
Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date) - Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class - Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting - Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states - Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions - Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares) - Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline - Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements - Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations - Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary - Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds All tests follow AAA pattern and use data-testid selectors matching Angular version. Total: 245 tests across 10 feature suites.
950 lines
38 KiB
JavaScript
950 lines
38 KiB
JavaScript
'use client';
|
|
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var React = require('react');
|
|
var PrimeReact = require('primereact/api');
|
|
var componentbase = require('primereact/componentbase');
|
|
var csstransition = require('primereact/csstransition');
|
|
var hooks = require('primereact/hooks');
|
|
var chevrondown = require('primereact/icons/chevrondown');
|
|
var spinner = require('primereact/icons/spinner');
|
|
var times = require('primereact/icons/times');
|
|
var overlayservice = require('primereact/overlayservice');
|
|
var portal = require('primereact/portal');
|
|
var utils = require('primereact/utils');
|
|
var angleright = require('primereact/icons/angleright');
|
|
var ripple = require('primereact/ripple');
|
|
|
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
|
|
function _interopNamespace(e) {
|
|
if (e && e.__esModule) return e;
|
|
var n = Object.create(null);
|
|
if (e) {
|
|
Object.keys(e).forEach(function (k) {
|
|
if (k !== 'default') {
|
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
Object.defineProperty(n, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () { return e[k]; }
|
|
});
|
|
}
|
|
});
|
|
}
|
|
n["default"] = e;
|
|
return Object.freeze(n);
|
|
}
|
|
|
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
|
|
|
|
function _extends() {
|
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
for (var e = 1; e < arguments.length; e++) {
|
|
var t = arguments[e];
|
|
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
}
|
|
return n;
|
|
}, _extends.apply(null, arguments);
|
|
}
|
|
|
|
function _typeof(o) {
|
|
"@babel/helpers - typeof";
|
|
|
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
|
|
return typeof o;
|
|
} : function (o) {
|
|
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
}, _typeof(o);
|
|
}
|
|
|
|
function toPrimitive(t, r) {
|
|
if ("object" != _typeof(t) || !t) return t;
|
|
var e = t[Symbol.toPrimitive];
|
|
if (void 0 !== e) {
|
|
var i = e.call(t, r || "default");
|
|
if ("object" != _typeof(i)) return i;
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
}
|
|
return ("string" === r ? String : Number)(t);
|
|
}
|
|
|
|
function toPropertyKey(t) {
|
|
var i = toPrimitive(t, "string");
|
|
return "symbol" == _typeof(i) ? i : i + "";
|
|
}
|
|
|
|
function _defineProperty(e, r, t) {
|
|
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
value: t,
|
|
enumerable: !0,
|
|
configurable: !0,
|
|
writable: !0
|
|
}) : e[r] = t, e;
|
|
}
|
|
|
|
function _arrayWithHoles(r) {
|
|
if (Array.isArray(r)) return r;
|
|
}
|
|
|
|
function _iterableToArrayLimit(r, l) {
|
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
if (null != t) {
|
|
var e,
|
|
n,
|
|
i,
|
|
u,
|
|
a = [],
|
|
f = !0,
|
|
o = !1;
|
|
try {
|
|
if (i = (t = t.call(r)).next, 0 === l) {
|
|
if (Object(t) !== t) return;
|
|
f = !1;
|
|
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
} catch (r) {
|
|
o = !0, n = r;
|
|
} finally {
|
|
try {
|
|
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
|
|
} finally {
|
|
if (o) throw n;
|
|
}
|
|
}
|
|
return a;
|
|
}
|
|
}
|
|
|
|
function _arrayLikeToArray$1(r, a) {
|
|
(null == a || a > r.length) && (a = r.length);
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
return n;
|
|
}
|
|
|
|
function _unsupportedIterableToArray$1(r, a) {
|
|
if (r) {
|
|
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
|
|
}
|
|
}
|
|
|
|
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(r, e) {
|
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
|
|
}
|
|
|
|
var classes = {
|
|
root: function root(_ref) {
|
|
var props = _ref.props,
|
|
focusedState = _ref.focusedState,
|
|
overlayVisibleState = _ref.overlayVisibleState,
|
|
context = _ref.context;
|
|
return utils.classNames('p-cascadeselect p-component p-inputwrapper', {
|
|
'p-disabled': props.disabled,
|
|
'p-invalid': props.invalid,
|
|
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
|
|
'p-focus': focusedState,
|
|
'p-inputwrapper-filled': props.value,
|
|
'p-inputwrapper-focus': focusedState || overlayVisibleState
|
|
});
|
|
},
|
|
label: function label(_ref2) {
|
|
var props = _ref2.props,
|
|
_label = _ref2.label;
|
|
return utils.classNames('p-cascadeselect-label ', {
|
|
'p-placeholder': _label === props.placeholder,
|
|
'p-cascadeselect-label-empty': !props.value && _label === 'p-emptylabel'
|
|
});
|
|
},
|
|
list: 'p-cascadeselect-panel p-cascadeselect-items',
|
|
sublistWrapper: 'p-cascadeselect-sublist-wrapper',
|
|
sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
|
|
item: function item(_ref3) {
|
|
_ref3.option;
|
|
var isGroup = _ref3.isGroup,
|
|
isSelected = _ref3.isSelected;
|
|
return utils.classNames('p-cascadeselect-item', {
|
|
'p-cascadeselect-item-group': isGroup,
|
|
'p-cascadeselect-item-active p-highlight': isSelected
|
|
});
|
|
},
|
|
dropdownIcon: 'p-cascadeselect-trigger-icon',
|
|
clearIcon: 'p-cascadeselect-clear-icon p-clickable',
|
|
loadingIcon: 'p-cascadeselect-trigger-icon',
|
|
dropdownButton: 'p-cascadeselect-trigger',
|
|
loadingButton: 'p-cascadeselect-trigger',
|
|
wrapper: 'p-cascadeselect-items-wrapper',
|
|
panel: 'p-cascadeselect-panel p-component',
|
|
content: 'p-cascadeselect-item-content',
|
|
optionGroupIcon: 'p-cascadeselect-group-icon',
|
|
text: 'p-cascadeselect-item-text',
|
|
transition: 'p-connected-overlay'
|
|
};
|
|
var styles = "\n@layer primereact {\n .p-cascadeselect {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n\n .p-cascadeselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .p-cascadeselect-label {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n flex: 1 1 auto;\n width: 1%;\n text-overflow: ellipsis;\n cursor: pointer;\n }\n\n .p-cascadeselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n\n .p-cascadeselect .p-cascadeselect-panel {\n min-width: 100%;\n }\n\n .p-cascadeselect-item {\n cursor: pointer;\n font-weight: normal;\n white-space: nowrap;\n }\n\n .p-cascadeselect-item-content {\n display: flex;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n\n .p-cascadeselect-group-icon {\n margin-left: auto;\n }\n\n .p-cascadeselect-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n min-width: 100%;\n }\n\n .p-fluid .p-cascadeselect {\n display: flex;\n }\n\n .p-fluid .p-cascadeselect .p-cascadeselect-label {\n width: 1%;\n }\n\n .p-cascadeselect-sublist-wrapper {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n display: none;\n }\n\n .p-cascadeselect-item-active {\n overflow: visible;\n }\n\n .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {\n display: block;\n left: 100%;\n top: 0;\n }\n .p-cascadeselect-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 3rem;\n }\n}\n";
|
|
var CascadeSelectBase = componentbase.ComponentBase.extend({
|
|
defaultProps: {
|
|
__TYPE: 'CascadeSelect',
|
|
appendTo: null,
|
|
ariaLabelledBy: null,
|
|
autoFocus: false,
|
|
breakpoint: undefined,
|
|
showClear: false,
|
|
className: null,
|
|
dataKey: null,
|
|
disabled: false,
|
|
loadingIcon: null,
|
|
dropdownIcon: null,
|
|
loading: false,
|
|
id: null,
|
|
inputId: null,
|
|
inputRef: null,
|
|
invalid: false,
|
|
variant: null,
|
|
itemTemplate: null,
|
|
name: null,
|
|
onBeforeHide: null,
|
|
onBeforeShow: null,
|
|
onChange: null,
|
|
onGroupChange: null,
|
|
onHide: null,
|
|
onShow: null,
|
|
optionGroupChildren: null,
|
|
optionGroupIcon: null,
|
|
optionGroupLabel: null,
|
|
optionLabel: null,
|
|
optionValue: null,
|
|
options: null,
|
|
panelClassName: null,
|
|
panelStyle: null,
|
|
placeholder: null,
|
|
scrollHeight: '400px',
|
|
style: null,
|
|
tabIndex: null,
|
|
transitionOptions: null,
|
|
value: null,
|
|
children: undefined
|
|
},
|
|
css: {
|
|
classes: classes,
|
|
styles: styles
|
|
}
|
|
});
|
|
|
|
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
var CascadeSelectSub = /*#__PURE__*/React__namespace.memo(function (props) {
|
|
var mergeProps = hooks.useMergeProps();
|
|
var _React$useState = React__namespace.useState(null),
|
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
activeOptionState = _React$useState2[0],
|
|
setActiveOptionState = _React$useState2[1];
|
|
var elementRef = React__namespace.useRef(null);
|
|
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
|
|
var ptm = props.ptm,
|
|
cx = props.cx;
|
|
var getPTOptions = function getPTOptions(key, options) {
|
|
return ptm(key, {
|
|
hostName: props.hostName,
|
|
state: _objectSpread$1({}, options)
|
|
});
|
|
};
|
|
var position = function position() {
|
|
var parentItem = elementRef.current.parentElement.parentElement;
|
|
var containerOffset = utils.DomHandler.getOffset(parentItem);
|
|
var viewport = utils.DomHandler.getViewport();
|
|
var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(element);
|
|
var itemOuterWidth = utils.DomHandler.getOuterWidth(parentItem.children[0]);
|
|
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - utils.DomHandler.calculateScrollbarWidth()) {
|
|
elementRef.current.parentElement.style.left = '-100%';
|
|
}
|
|
};
|
|
var onOptionSelect = function onOptionSelect(event) {
|
|
props.onOptionSelect && props.onOptionSelect(event);
|
|
};
|
|
var _onKeyDown = function onKeyDown(event, option) {
|
|
var listItem = event.currentTarget.parentElement;
|
|
switch (event.key) {
|
|
case 'Down':
|
|
case 'ArrowDown':
|
|
var nextItem = _findNextItem(listItem);
|
|
if (nextItem) {
|
|
nextItem.children[0].focus();
|
|
}
|
|
break;
|
|
case 'Up':
|
|
case 'ArrowUp':
|
|
var prevItem = _findPrevItem(listItem);
|
|
if (prevItem) {
|
|
prevItem.children[0].focus();
|
|
}
|
|
break;
|
|
case 'Right':
|
|
case 'ArrowRight':
|
|
if (isOptionGroup(option)) {
|
|
if (activeOptionState === option) {
|
|
listItem.children[1].children[0].children[0].focus();
|
|
} else {
|
|
setActiveOptionState(option);
|
|
}
|
|
}
|
|
break;
|
|
case 'Left':
|
|
case 'ArrowLeft':
|
|
setActiveOptionState(null);
|
|
var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
|
|
if (parentList) {
|
|
parentList.focus();
|
|
}
|
|
break;
|
|
case 'Enter':
|
|
onOptionClick(event, option);
|
|
break;
|
|
case 'Tab':
|
|
case 'Escape':
|
|
if (props.onPanelHide) {
|
|
props.onPanelHide();
|
|
event.preventDefault();
|
|
}
|
|
break;
|
|
}
|
|
event.preventDefault();
|
|
};
|
|
var _findNextItem = function findNextItem(item) {
|
|
var nextItem = item.nextElementSibling;
|
|
return nextItem ? utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? _findNextItem(nextItem) : nextItem : null;
|
|
};
|
|
var _findPrevItem = function findPrevItem(item) {
|
|
var prevItem = item.previousElementSibling;
|
|
return prevItem ? utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? _findPrevItem(prevItem) : prevItem : null;
|
|
};
|
|
var onOptionClick = function onOptionClick(event, option) {
|
|
if (isOptionGroup(option)) {
|
|
setActiveOptionState(function (prevActiveOption) {
|
|
return prevActiveOption === option ? null : option;
|
|
});
|
|
if (props.onOptionGroupSelect) {
|
|
props.onOptionGroupSelect({
|
|
originalEvent: event,
|
|
value: option
|
|
});
|
|
}
|
|
} else if (props.onOptionSelect) {
|
|
props.onOptionSelect({
|
|
originalEvent: event,
|
|
value: getOptionValue(option)
|
|
});
|
|
}
|
|
};
|
|
var onOptionGroupSelect = function onOptionGroupSelect(event) {
|
|
props.onOptionGroupSelect && props.onOptionGroupSelect(event);
|
|
};
|
|
var getOptionLabel = function getOptionLabel(option) {
|
|
return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
|
|
};
|
|
var getOptionValue = function getOptionValue(option) {
|
|
return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option;
|
|
};
|
|
var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
|
|
return props.optionGroupLabel ? utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : null;
|
|
};
|
|
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
|
|
return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[props.level]);
|
|
};
|
|
var isOptionGroup = function isOptionGroup(option) {
|
|
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[props.level]);
|
|
};
|
|
var getOptionLabelToRender = function getOptionLabelToRender(option) {
|
|
return isOptionGroup(option) ? getOptionGroupLabel(option) : getOptionLabel(option);
|
|
};
|
|
hooks.useMountEffect(function () {
|
|
if (props.selectionPath && props.options && !props.dirty) {
|
|
var activeOption = props.options.find(function (o) {
|
|
return props.selectionPath.includes(o);
|
|
});
|
|
activeOption && setActiveOptionState(activeOption);
|
|
}
|
|
if (!props.root) {
|
|
position();
|
|
}
|
|
});
|
|
hooks.useUpdateEffect(function () {
|
|
if (!props.parentActive) {
|
|
setActiveOptionState(null);
|
|
}
|
|
}, [props.parentActive]);
|
|
var createSubmenu = function createSubmenu(option) {
|
|
if (isOptionGroup(option) && activeOptionState === option) {
|
|
var options = getOptionGroupChildren(option);
|
|
var parentActive = activeOptionState === option;
|
|
var level = props.level + 1;
|
|
return /*#__PURE__*/React__namespace.createElement(CascadeSelectSub, {
|
|
hostName: props.hostName,
|
|
options: options,
|
|
className: cx('sublist'),
|
|
selectionPath: props.selectionPath,
|
|
optionLabel: props.optionLabel,
|
|
optionValue: props.optionValue,
|
|
level: level,
|
|
onOptionSelect: onOptionSelect,
|
|
onOptionGroupSelect: onOptionGroupSelect,
|
|
parentActive: parentActive,
|
|
optionGroupLabel: props.optionGroupLabel,
|
|
optionGroupChildren: props.optionGroupChildren,
|
|
dirty: props.dirty,
|
|
template: props.template,
|
|
onPanelHide: props.onPanelHide,
|
|
ptm: ptm,
|
|
cx: cx
|
|
});
|
|
}
|
|
return null;
|
|
};
|
|
var createOption = function createOption(option, index) {
|
|
var submenu = createSubmenu(option);
|
|
var textProps = mergeProps({
|
|
className: cx('text')
|
|
}, getPTOptions('text'));
|
|
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : /*#__PURE__*/React__namespace.createElement("span", textProps, getOptionLabelToRender(option));
|
|
var optionGroupIconProps = mergeProps({
|
|
className: cx('optionGroupIcon')
|
|
}, getPTOptions('optionGroupIcon'));
|
|
var icon = props.optionGroupIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, optionGroupIconProps);
|
|
var optionGroup = isOptionGroup(option) && utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, optionGroupIconProps), {
|
|
props: props
|
|
});
|
|
var key = getOptionLabelToRender(option) + '_' + index;
|
|
var contentProps = mergeProps({
|
|
className: cx('content'),
|
|
onClick: function onClick(event) {
|
|
return onOptionClick(event, option);
|
|
},
|
|
tabIndex: 0,
|
|
onKeyDown: function onKeyDown(event) {
|
|
return _onKeyDown(event, option);
|
|
}
|
|
}, getPTOptions('content'));
|
|
var isSelected = activeOptionState === option;
|
|
var isGroup = isOptionGroup(option);
|
|
var itemProps = mergeProps({
|
|
className: utils.classNames(option.className, cx('item', {
|
|
option: option,
|
|
isGroup: isGroup,
|
|
isSelected: isSelected
|
|
})),
|
|
style: option.style,
|
|
role: 'none',
|
|
'data-p-item-group': isGroup,
|
|
'data-p-highlight': isSelected
|
|
}, getPTOptions('item', {
|
|
selected: isSelected,
|
|
group: isGroup
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("li", _extends({
|
|
key: key
|
|
}, itemProps), /*#__PURE__*/React__namespace.createElement("div", contentProps, content, optionGroup, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), submenu);
|
|
};
|
|
var createMenu = function createMenu() {
|
|
return props.options ? props.options.map(createOption) : null;
|
|
};
|
|
var createList = function createList() {
|
|
var listProps = mergeProps({
|
|
ref: elementRef,
|
|
className: cx(props.level === 0 ? 'list' : 'sublist', {
|
|
context: context
|
|
}),
|
|
role: 'listbox',
|
|
'aria-orientation': 'horizontal'
|
|
}, props.level === 0 ? getPTOptions('list') : getPTOptions('sublist'));
|
|
var submenu = createMenu();
|
|
return /*#__PURE__*/React__namespace.createElement("ul", listProps, submenu);
|
|
};
|
|
var createElement = function createElement() {
|
|
var list = createList();
|
|
var listWrapperProps = mergeProps({
|
|
className: cx('sublistWrapper')
|
|
}, getPTOptions('sublistWrapper'));
|
|
return props.level === 0 ? list : /*#__PURE__*/React__namespace.createElement("div", listWrapperProps, list);
|
|
};
|
|
var element = createElement();
|
|
return element;
|
|
});
|
|
|
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
|
|
var mergeProps = hooks.useMergeProps();
|
|
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
|
|
var props = CascadeSelectBase.getProps(inProps, context);
|
|
var _React$useState = React__namespace.useState(false),
|
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
focusedState = _React$useState2[0],
|
|
setFocusedState = _React$useState2[1];
|
|
var _React$useState3 = React__namespace.useState(false),
|
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
overlayVisibleState = _React$useState4[0],
|
|
setOverlayVisibleState = _React$useState4[1];
|
|
var _React$useState5 = React__namespace.useState(null),
|
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
attributeSelectorState = _React$useState6[0],
|
|
setAttributeSelectorState = _React$useState6[1];
|
|
var _CascadeSelectBase$se = CascadeSelectBase.setMetaData({
|
|
props: props,
|
|
state: {
|
|
focused: focusedState,
|
|
overlayVisible: overlayVisibleState,
|
|
attributeSelector: attributeSelectorState
|
|
},
|
|
context: _objectSpread({}, context)
|
|
}),
|
|
ptm = _CascadeSelectBase$se.ptm,
|
|
cx = _CascadeSelectBase$se.cx,
|
|
isUnstyled = _CascadeSelectBase$se.isUnstyled;
|
|
componentbase.useHandleStyle(CascadeSelectBase.css.styles, isUnstyled, {
|
|
name: 'cascadeselect'
|
|
});
|
|
var elementRef = React__namespace.useRef(null);
|
|
var overlayRef = React__namespace.useRef(null);
|
|
var inputRef = React__namespace.useRef(null);
|
|
var labelRef = React__namespace.useRef(null);
|
|
var styleElementRef = React__namespace.useRef(null);
|
|
var dirty = React__namespace.useRef(false);
|
|
var selectionPath = React__namespace.useRef(null);
|
|
var selfChange = React__namespace.useRef(null);
|
|
var _useOverlayListener = hooks.useOverlayListener({
|
|
target: elementRef,
|
|
overlay: overlayRef,
|
|
listener: function listener(event, _ref) {
|
|
var valid = _ref.valid,
|
|
type = _ref.type;
|
|
if (valid) {
|
|
if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
|
|
hide();
|
|
} else if (!utils.DomHandler.isDocument(event.target)) {
|
|
alignOverlay();
|
|
}
|
|
}
|
|
},
|
|
when: overlayVisibleState
|
|
}),
|
|
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
|
|
bindOverlayListener = _useOverlayListener2[0],
|
|
unbindOverlayListener = _useOverlayListener2[1];
|
|
var cascadeSelectOverlayDisplayOrder = hooks.useDisplayOrder('cascade-select', overlayVisibleState);
|
|
hooks.useGlobalOnEscapeKey({
|
|
callback: function callback() {
|
|
hide();
|
|
},
|
|
when: overlayVisibleState && cascadeSelectOverlayDisplayOrder,
|
|
priority: [hooks.ESC_KEY_HANDLING_PRIORITIES.CASCADE_SELECT, cascadeSelectOverlayDisplayOrder]
|
|
});
|
|
var onOptionSelect = function onOptionSelect(event) {
|
|
if (props.onChange) {
|
|
selfChange.current = true;
|
|
props.onChange({
|
|
originalEvent: event,
|
|
value: event.value
|
|
});
|
|
}
|
|
updateSelectionPath();
|
|
hide();
|
|
utils.DomHandler.focus(inputRef.current);
|
|
};
|
|
var onOptionGroupSelect = function onOptionGroupSelect(event) {
|
|
dirty.current = true;
|
|
props.onGroupChange && props.onGroupChange(event);
|
|
};
|
|
var getOptionLabel = function getOptionLabel(option) {
|
|
var label = props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
|
|
return label || option;
|
|
};
|
|
var getOptionValue = function getOptionValue(option) {
|
|
return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option;
|
|
};
|
|
var getOptionGroupChildren = function getOptionGroupChildren(optionGroup, level) {
|
|
return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[level]);
|
|
};
|
|
var isOptionGroup = function isOptionGroup(option, level) {
|
|
return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[level]);
|
|
};
|
|
var updateSelectionPath = function updateSelectionPath() {
|
|
var path;
|
|
if (props.value != null && props.options) {
|
|
var _iterator = _createForOfIteratorHelper(props.options),
|
|
_step;
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var option = _step.value;
|
|
path = _findModelOptionInGroup(option, 0);
|
|
if (path) {
|
|
break;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
}
|
|
selectionPath.current = path;
|
|
};
|
|
var _findModelOptionInGroup = function findModelOptionInGroup(option, level) {
|
|
if (isOptionGroup(option, level)) {
|
|
var selectedOption;
|
|
var _iterator2 = _createForOfIteratorHelper(getOptionGroupChildren(option, level)),
|
|
_step2;
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var childOption = _step2.value;
|
|
selectedOption = _findModelOptionInGroup(childOption, level + 1);
|
|
if (selectedOption) {
|
|
selectedOption.unshift(option);
|
|
return selectedOption;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
} else if (utils.ObjectUtils.equals(props.value, getOptionValue(option), props.dataKey)) {
|
|
return [option];
|
|
}
|
|
return null;
|
|
};
|
|
var _onClick = function onClick(event) {
|
|
if (props.disabled || props.loading) {
|
|
return;
|
|
}
|
|
if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
|
|
utils.DomHandler.focus(inputRef.current);
|
|
overlayVisibleState ? hide() : show();
|
|
}
|
|
};
|
|
var onInputFocus = function onInputFocus() {
|
|
setFocusedState(true);
|
|
};
|
|
var onInputBlur = function onInputBlur() {
|
|
setFocusedState(false);
|
|
};
|
|
var onInputKeyDown = function onInputKeyDown(event) {
|
|
switch (event.which) {
|
|
//down
|
|
case 40:
|
|
if (overlayVisibleState) {
|
|
utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
|
|
} else if (event.altKey && props.options && props.options.length) {
|
|
show();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
|
|
//space
|
|
case 32:
|
|
overlayVisibleState ? hide() : show();
|
|
event.preventDefault();
|
|
break;
|
|
|
|
//tab
|
|
case 9:
|
|
hide();
|
|
break;
|
|
}
|
|
};
|
|
var onPanelClick = function onPanelClick(event) {
|
|
overlayservice.OverlayService.emit('overlay-click', {
|
|
originalEvent: event,
|
|
target: elementRef.current
|
|
});
|
|
};
|
|
var show = function show() {
|
|
props.onBeforeShow && props.onBeforeShow();
|
|
setOverlayVisibleState(true);
|
|
};
|
|
var hide = function hide() {
|
|
props.onBeforeHide && props.onBeforeHide();
|
|
setOverlayVisibleState(false);
|
|
utils.DomHandler.focus(inputRef.current);
|
|
};
|
|
var onOverlayEnter = function onOverlayEnter() {
|
|
utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex.overlay || PrimeReact__default["default"].zIndex.overlay);
|
|
utils.DomHandler.addStyles(overlayRef.current, {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0'
|
|
});
|
|
alignOverlay();
|
|
if (attributeSelectorState && props.breakpoint) {
|
|
overlayRef.current.setAttribute(attributeSelectorState + '_panel', '');
|
|
createStyle();
|
|
}
|
|
};
|
|
var onOverlayEntered = function onOverlayEntered() {
|
|
bindOverlayListener();
|
|
props.onShow && props.onShow();
|
|
};
|
|
var onOverlayExit = function onOverlayExit() {
|
|
unbindOverlayListener();
|
|
dirty.current = false;
|
|
};
|
|
var onOverlayExited = function onOverlayExited() {
|
|
utils.ZIndexUtils.clear(overlayRef.current);
|
|
props.onHide && props.onHide();
|
|
destroyStyle();
|
|
};
|
|
var alignOverlay = function alignOverlay() {
|
|
utils.DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
|
|
};
|
|
var createStyle = function createStyle() {
|
|
if (!styleElementRef.current) {
|
|
styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
|
|
var selector = "".concat(attributeSelectorState, "_panel");
|
|
var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-items-wrapper > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist-wrapper {\n position:relative;\n left:0 !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist {\n overflow: hidden !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-item-active .p-cascadeselect-sublist {\n left: 0;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-group-icon:before {\n content: \"\\e930\";\n }\n}\n");
|
|
styleElementRef.current.innerHTML = innerHTML;
|
|
}
|
|
};
|
|
var destroyStyle = function destroyStyle() {
|
|
styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
|
|
};
|
|
React__namespace.useImperativeHandle(ref, function () {
|
|
return {
|
|
props: props,
|
|
getElement: function getElement() {
|
|
return elementRef.current;
|
|
},
|
|
getOverlay: function getOverlay() {
|
|
return overlayRef.current;
|
|
},
|
|
getInput: function getInput() {
|
|
return inputRef.current;
|
|
},
|
|
getLabel: function getLabel() {
|
|
return labelRef.current;
|
|
},
|
|
focus: function focus() {
|
|
return utils.DomHandler.focus(inputRef.current);
|
|
}
|
|
};
|
|
});
|
|
hooks.useMountEffect(function () {
|
|
if (props.breakpoint) {
|
|
!attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
|
|
}
|
|
if (props.autoFocus) {
|
|
utils.DomHandler.focus(inputRef.current, props.autoFocus);
|
|
}
|
|
alignOverlay();
|
|
});
|
|
React__namespace.useEffect(function () {
|
|
utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
|
|
}, [inputRef, props.inputRef]);
|
|
hooks.useUpdateEffect(function () {
|
|
updateSelectionPath();
|
|
}, [props.value]);
|
|
hooks.useUnmountEffect(function () {
|
|
utils.ZIndexUtils.clear(overlayRef.current);
|
|
});
|
|
var createKeyboardHelper = function createKeyboardHelper() {
|
|
var value = props.value ? getOptionLabel(props.value) : undefined;
|
|
var hiddenSelectedMessageProps = mergeProps({
|
|
className: 'p-hidden-accessible'
|
|
}, ptm('hiddenSelectedMessage'));
|
|
var inputProps = mergeProps(_objectSpread({
|
|
ref: inputRef,
|
|
type: 'text',
|
|
id: props.inputId,
|
|
name: props.name,
|
|
defaultValue: value,
|
|
readOnly: true,
|
|
disabled: props.disabled,
|
|
onFocus: onInputFocus,
|
|
onBlur: onInputBlur,
|
|
onKeyDown: function onKeyDown(e) {
|
|
return onInputKeyDown(e);
|
|
},
|
|
tabIndex: props.tabIndex,
|
|
'aria-haspopup': 'listbox'
|
|
}, ariaProps), ptm('input'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("input", inputProps));
|
|
};
|
|
var clear = function clear(event) {
|
|
if (props.onChange) {
|
|
selfChange.current = true;
|
|
props.onChange({
|
|
originalEvent: event,
|
|
value: undefined,
|
|
stopPropagation: function stopPropagation() {
|
|
event === null || event === void 0 || event.stopPropagation();
|
|
},
|
|
preventDefault: function preventDefault() {
|
|
event === null || event === void 0 || event.preventDefault();
|
|
},
|
|
target: {
|
|
name: props.name,
|
|
id: props.id,
|
|
value: undefined
|
|
}
|
|
});
|
|
}
|
|
};
|
|
var onClearIconKeyDown = function onClearIconKeyDown(event) {
|
|
if (event.key === 'Enter' || event.code === 'Space') {
|
|
clear(event);
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
var createClearIcon = function createClearIcon() {
|
|
if (props.value != null && props.showClear && !props.disabled) {
|
|
var clearIconProps = mergeProps({
|
|
className: cx('clearIcon'),
|
|
onPointerUp: clear,
|
|
tabIndex: props.tabIndex || '0',
|
|
onKeyDown: onClearIconKeyDown,
|
|
'aria-label': PrimeReact.localeOption('clear')
|
|
}, ptm('clearIcon'));
|
|
var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
|
|
return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
|
|
props: props
|
|
});
|
|
}
|
|
return null;
|
|
};
|
|
var createLabel = function createLabel() {
|
|
var label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel';
|
|
var labelProps = mergeProps({
|
|
ref: labelRef,
|
|
className: cx('label', {
|
|
label: label
|
|
})
|
|
}, ptm('label', {
|
|
context: _objectSpread({
|
|
label: label
|
|
}, context)
|
|
}));
|
|
return /*#__PURE__*/React__namespace.createElement("span", labelProps, label);
|
|
};
|
|
var createLoadingIcon = function createLoadingIcon() {
|
|
var loadingIconProps = mergeProps({
|
|
className: cx('loadingIcon')
|
|
}, ptm('loadingIcon'));
|
|
var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
|
|
spin: true
|
|
});
|
|
var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
|
|
props: props
|
|
});
|
|
var loadingButtonProps = mergeProps({
|
|
className: cx('loadingButton'),
|
|
role: 'button',
|
|
'aria-haspopup': 'listbox',
|
|
'aria-expanded': overlayVisibleState
|
|
}, ptm('dropdownButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", loadingButtonProps, loadingIcon);
|
|
};
|
|
var createDropdownIcon = function createDropdownIcon() {
|
|
var dropdownIconProps = mergeProps({
|
|
className: cx('dropdownIcon')
|
|
}, ptm('dropdownIcon'));
|
|
var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, dropdownIconProps);
|
|
var dropdownIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, dropdownIconProps), {
|
|
props: props
|
|
});
|
|
var dropdownButtonProps = mergeProps({
|
|
className: cx('dropdownButton'),
|
|
role: 'button',
|
|
'aria-haspopup': 'listbox',
|
|
'aria-expanded': overlayVisibleState
|
|
}, ptm('dropdownButton'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", dropdownButtonProps, dropdownIcon);
|
|
};
|
|
var wrapperProps = mergeProps({
|
|
className: cx('wrapper')
|
|
}, ptm('wrapper'));
|
|
var panelProps = mergeProps({
|
|
ref: overlayRef,
|
|
className: utils.classNames(props.panelClassName, cx('panel')),
|
|
style: props.panelStyle,
|
|
onClick: function onClick(e) {
|
|
return onPanelClick(e);
|
|
}
|
|
}, ptm('panel'));
|
|
var createOverlay = function createOverlay() {
|
|
var transitionProps = mergeProps({
|
|
classNames: cx('transition'),
|
|
"in": overlayVisibleState,
|
|
timeout: {
|
|
enter: 120,
|
|
exit: 100
|
|
},
|
|
options: props.transitionOptions,
|
|
unmountOnExit: true,
|
|
onEnter: onOverlayEnter,
|
|
onEntered: onOverlayEntered,
|
|
onExit: onOverlayExit,
|
|
onExited: onOverlayExited
|
|
}, ptm('transition'));
|
|
var overlay = /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
|
|
nodeRef: overlayRef
|
|
}, transitionProps), /*#__PURE__*/React__namespace.createElement("div", panelProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement(CascadeSelectSub, {
|
|
hostName: "CascadeSelect",
|
|
options: props.options,
|
|
selectionPath: selectionPath.current,
|
|
optionGroupIcon: props.optionGroupIcon,
|
|
optionLabel: props.optionLabel,
|
|
optionValue: props.optionValue,
|
|
parentActive: props.value != null,
|
|
level: 0,
|
|
optionGroupLabel: props.optionGroupLabel,
|
|
optionGroupChildren: props.optionGroupChildren,
|
|
onOptionSelect: onOptionSelect,
|
|
onOptionGroupSelect: onOptionGroupSelect,
|
|
root: true,
|
|
template: props.itemTemplate,
|
|
onPanelHide: hide,
|
|
ptm: ptm,
|
|
cx: cx
|
|
}))));
|
|
return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
|
|
element: overlay,
|
|
appendTo: props.appendTo
|
|
});
|
|
};
|
|
var createElement = function createElement() {
|
|
var keyboardHelper = createKeyboardHelper();
|
|
var labelElement = createLabel();
|
|
var clearIcon = createClearIcon();
|
|
var dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
|
|
var overlay = createOverlay();
|
|
var rootProps = mergeProps({
|
|
id: props.id,
|
|
ref: elementRef,
|
|
className: utils.classNames(props.className, cx('root', {
|
|
focusedState: focusedState,
|
|
overlayVisibleState: overlayVisibleState,
|
|
context: context
|
|
})),
|
|
style: props.style,
|
|
onClick: function onClick(e) {
|
|
return _onClick(e);
|
|
}
|
|
}, otherProps, ptm('root'));
|
|
return /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, labelElement, clearIcon, dropdownIcon, overlay);
|
|
};
|
|
var otherProps = CascadeSelectBase.getOtherProps(props);
|
|
utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.DATA_PROPS);
|
|
var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
|
|
var element = createElement();
|
|
return element;
|
|
}));
|
|
CascadeSelect.displayName = 'CascadeSelect';
|
|
|
|
exports.CascadeSelect = CascadeSelect;
|