@elastic/eui
Version:
Elastic UI Component Library
586 lines (563 loc) • 27.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.flyoutManagerReducer = flyoutManagerReducer;
exports.initialState = void 0;
var _actions = require("./actions");
var _const = require("./const");
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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
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 _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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
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; }
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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
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); } /*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
/**
* Default flyout manager state used to initialize the reducer.
*/
var initialState = exports.initialState = {
sessions: [],
flyouts: [],
layoutMode: _const.LAYOUT_MODE_SIDE_BY_SIDE,
pushPadding: {
left: 0,
right: 0
},
currentZIndex: 0,
unmanagedFlyouts: []
};
var addSessionFlyoutsToRemove = function addSessionFlyoutsToRemove(session, flyoutsToRemove) {
var _session$childHistory;
flyoutsToRemove.add(session.mainFlyoutId);
if (session.childFlyoutId) {
flyoutsToRemove.add(session.childFlyoutId);
}
((_session$childHistory = session.childHistory) !== null && _session$childHistory !== void 0 ? _session$childHistory : []).forEach(function (e) {
return flyoutsToRemove.add(e.flyoutId);
});
};
var moveHistoryGroupToTop = function moveHistoryGroupToTop(sessions, historyKey) {
var groupSessions = [];
var otherSessions = [];
sessions.forEach(function (session) {
if (session.historyKey === historyKey) {
groupSessions.push(session);
} else {
otherSessions.push(session);
}
});
return [].concat(otherSessions, groupSessions);
};
/**
* Reducer handling all flyout manager actions and state transitions.
*/
function flyoutManagerReducer() {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
var action = arguments.length > 1 ? arguments[1] : undefined;
switch (action.type) {
case _actions.ACTION_ADD_UNMANAGED_FLYOUT:
{
if (state.unmanagedFlyouts.includes(action.flyoutId)) {
return state;
}
return _objectSpread(_objectSpread({}, state), {}, {
// Increment by 2 for each new unmanaged flyout.
// Unmanaged flyouts render on z-index of `n`, and their overlay mask
// on `n - 1`.
currentZIndex: state.currentZIndex + 2,
unmanagedFlyouts: [].concat(_toConsumableArray(state.unmanagedFlyouts), [action.flyoutId])
});
}
case _actions.ACTION_CLOSE_UNMANAGED_FLYOUT:
{
var newUnmanagedFlyouts = state.unmanagedFlyouts.filter(function (flyoutId) {
return flyoutId !== action.flyoutId;
});
var newCurrentZIndex = state.currentZIndex;
if (state.sessions.length === 0 && newUnmanagedFlyouts.length === 0) {
newCurrentZIndex = 0;
}
return _objectSpread(_objectSpread({}, state), {}, {
unmanagedFlyouts: newUnmanagedFlyouts,
currentZIndex: newCurrentZIndex
});
}
// Register a flyout.
// - Ignore duplicates by `flyoutId`.
// - For a `main` flyout, start a new session { main, child: null }.
// - For a `child` flyout, attach it to the most recent session; if no
// session exists, do nothing (invalid child without a parent).
case _actions.ACTION_ADD:
{
var _currentSession$child;
var flyoutId = action.flyoutId,
title = action.title,
level = action.level,
size = action.size,
historyKey = action.historyKey,
iconType = action.iconType,
minWidth = action.minWidth;
var isDuplicate = state.flyouts.some(function (f) {
return f.flyoutId === flyoutId;
});
var isIdempotentChild = level === _const.LEVEL_CHILD && state.sessions.length > 0 && state.sessions[state.sessions.length - 1].childFlyoutId === flyoutId;
// Ignore duplicate registrations (except idempotent child re-registration after goBack)
if (isDuplicate && !isIdempotentChild) {
return state;
}
var newFlyoutState = {
level: level,
flyoutId: flyoutId,
size: size,
minWidth: minWidth,
activityStage: _const.STAGE_OPENING
};
var newFlyouts = isIdempotentChild ? state.flyouts : [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
if (level === _const.LEVEL_MAIN) {
var newSession = {
mainFlyoutId: flyoutId,
title: title,
iconType: iconType,
childFlyoutId: null,
childHistory: [],
zIndex: state.currentZIndex,
historyKey: historyKey !== null && historyKey !== void 0 ? historyKey : Symbol()
};
return _objectSpread(_objectSpread({}, state), {}, {
sessions: [].concat(_toConsumableArray(state.sessions), [newSession]),
flyouts: newFlyouts,
// Increment by 3 for each new flyout session.
// Managed flyouts render main flyouts on z-index of `n`,
// child flyouts on `n - 1` and the overlay mask on `n - 2`.
currentZIndex: state.currentZIndex + 3
});
}
if (state.sessions.length === 0) {
return state;
}
var updatedSessions = _toConsumableArray(state.sessions);
var currentSessionIndex = updatedSessions.length - 1;
var currentSession = updatedSessions[currentSessionIndex];
var childHistory = (_currentSession$child = currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
// Idempotent re-registration (e.g. after goBack): flyout already in flyouts and session already points to it
if (state.flyouts.some(function (f) {
return f.flyoutId === flyoutId;
})) {
if (currentSession.childFlyoutId === flyoutId) {
updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
childTitle: title,
childIconType: iconType,
childHistory: childHistory
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: updatedSessions
});
}
return state; // duplicate registration for a different child, ignore
}
// Session already has a child: push current child to history, then set new child (do not remove previous from flyouts)
if (currentSession.childFlyoutId) {
var _currentSession$child2;
var historyEntry = {
flyoutId: currentSession.childFlyoutId,
title: (_currentSession$child2 = currentSession.childTitle) !== null && _currentSession$child2 !== void 0 ? _currentSession$child2 : '',
iconType: currentSession.childIconType
};
updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
childHistory: [].concat(_toConsumableArray(childHistory), [historyEntry]),
childFlyoutId: flyoutId,
childTitle: title,
childIconType: iconType
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: updatedSessions,
flyouts: newFlyouts
});
}
// First child in session
updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
childFlyoutId: flyoutId,
childTitle: title,
childIconType: iconType,
childHistory: childHistory
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: updatedSessions,
flyouts: newFlyouts
});
}
// Unregister a flyout and update sessions accordingly.
// - When closing a `main` flyout, drop its entire session and all associated flyouts.
// - When closing a `child` flyout, find the session that owns it (childFlyoutId or
// childHistory) and clear that session's child state so navigation back stays consistent.
case _actions.ACTION_CLOSE:
{
var _owningSession$childH;
var removedFlyout = state.flyouts.find(function (f) {
return f.flyoutId === action.flyoutId;
});
if (!removedFlyout) {
return state;
}
if (removedFlyout.level === _const.LEVEL_MAIN) {
// Find the session that contains this main flyout
var sessionToRemove = state.sessions.find(function (session) {
return session.mainFlyoutId === action.flyoutId;
});
if (sessionToRemove) {
var _sessionToRemove$chil;
// Remove all flyouts associated with this session (main + current child + child history)
var flyoutsToRemove = new Set([action.flyoutId]);
if (sessionToRemove.childFlyoutId) {
flyoutsToRemove.add(sessionToRemove.childFlyoutId);
}
((_sessionToRemove$chil = sessionToRemove.childHistory) !== null && _sessionToRemove$chil !== void 0 ? _sessionToRemove$chil : []).forEach(function (entry) {
return flyoutsToRemove.add(entry.flyoutId);
});
var _newFlyouts = state.flyouts.filter(function (f) {
return !flyoutsToRemove.has(f.flyoutId);
});
var newSessions = state.sessions.filter(function (session) {
return session.mainFlyoutId !== action.flyoutId;
});
var _newCurrentZIndex = state.currentZIndex;
if (newSessions.length === 0 && state.unmanagedFlyouts.length === 0) {
// Reset to initial value if no flyouts remain open to avoid
// the value going too high during the lifecycle of the app
_newCurrentZIndex = 0;
}
return _objectSpread(_objectSpread({}, state), {}, {
sessions: newSessions,
flyouts: _newFlyouts,
currentZIndex: _newCurrentZIndex
});
}
}
// Handle child flyout closing: find the session that owns this child and
// clear that session's child state (so we stay consistent when navigating back).
if (state.sessions.length === 0) {
return _objectSpread(_objectSpread({}, state), {}, {
flyouts: state.flyouts.filter(function (f) {
return f.flyoutId !== action.flyoutId;
})
});
}
var owningSessionIndex = state.sessions.findIndex(function (session) {
var _session$childHistory2;
return session.childFlyoutId === action.flyoutId || ((_session$childHistory2 = session.childHistory) !== null && _session$childHistory2 !== void 0 ? _session$childHistory2 : []).some(function (entry) {
return entry.flyoutId === action.flyoutId;
});
});
if (owningSessionIndex === -1) {
// Closed flyout not in any session's child state; just remove the one flyout
return _objectSpread(_objectSpread({}, state), {}, {
flyouts: state.flyouts.filter(function (f) {
return f.flyoutId !== action.flyoutId;
})
});
}
var owningSession = state.sessions[owningSessionIndex];
var childIds = new Set([owningSession.childFlyoutId].concat(_toConsumableArray(((_owningSession$childH = owningSession.childHistory) !== null && _owningSession$childH !== void 0 ? _owningSession$childH : []).map(function (e) {
return e.flyoutId;
}))).filter(Boolean));
var _newFlyouts2 = state.flyouts.filter(function (f) {
return !childIds.has(f.flyoutId);
});
var _updatedSessions = _toConsumableArray(state.sessions);
_updatedSessions[owningSessionIndex] = _objectSpread(_objectSpread({}, owningSession), {}, {
childFlyoutId: null,
childTitle: undefined,
childIconType: undefined,
childHistory: []
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _updatedSessions,
flyouts: _newFlyouts2
});
}
// Unregister all flyouts (within the current history group only).
case _actions.ACTION_CLOSE_ALL:
{
if (state.sessions.length === 0) {
return state;
}
var _currentSessionIndex = state.sessions.length - 1;
var _currentSession = state.sessions[_currentSessionIndex];
var currentKey = _currentSession.historyKey;
// Remove all sessions that have the current historyKey (entire group)
var _newSessions = state.sessions.filter(function (s) {
return s.historyKey !== currentKey;
});
var _flyoutsToRemove = new Set();
state.sessions.forEach(function (session) {
if (session.historyKey === currentKey) {
addSessionFlyoutsToRemove(session, _flyoutsToRemove);
}
});
var _newFlyouts3 = state.flyouts.filter(function (f) {
return !_flyoutsToRemove.has(f.flyoutId);
});
var _newCurrentZIndex2 = state.currentZIndex;
if (_newSessions.length === 0 && state.unmanagedFlyouts.length === 0) {
_newCurrentZIndex2 = 0;
}
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _newSessions,
flyouts: _newFlyouts3,
currentZIndex: _newCurrentZIndex2
});
}
// Mark the provided flyout ID as the active child for the latest session.
case _actions.ACTION_SET_ACTIVE:
{
// No-op when no session exists.
if (state.sessions.length === 0) {
return state;
}
var _updatedSessions2 = _toConsumableArray(state.sessions);
var _currentSessionIndex2 = _updatedSessions2.length - 1;
_updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
childFlyoutId: action.flyoutId
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _updatedSessions2
});
}
// Persist a flyout's measured width (px). Used for responsive layout
// calculations, e.g., deciding stacked vs side-by-side.
case _actions.ACTION_SET_WIDTH:
{
var _flyoutId = action.flyoutId,
width = action.width;
var updatedFlyouts = state.flyouts.map(function (flyout) {
return flyout.flyoutId === _flyoutId ? _objectSpread(_objectSpread({}, flyout), {}, {
width: width
}) : flyout;
});
return _objectSpread(_objectSpread({}, state), {}, {
flyouts: updatedFlyouts
});
}
// Update a flyout's menu pagination. No-op if unchanged or missing.
case _actions.ACTION_SET_PAGINATION:
{
var _flyoutId2 = action.flyoutId,
pagination = action.pagination;
var target = state.flyouts.find(function (f) {
return f.flyoutId === _flyoutId2;
});
if (!target) {
return state;
}
if (target.pagination === pagination) {
return state;
}
var _updatedFlyouts = state.flyouts.map(function (flyout) {
return flyout.flyoutId === _flyoutId2 ? _objectSpread(_objectSpread({}, flyout), {}, {
pagination: pagination
}) : flyout;
});
return _objectSpread(_objectSpread({}, state), {}, {
flyouts: _updatedFlyouts
});
}
// Switch global layout mode for managed flyouts.
case _actions.ACTION_SET_LAYOUT_MODE:
{
return _objectSpread(_objectSpread({}, state), {}, {
layoutMode: action.layoutMode
});
}
// Update a flyout's activity stage in state
case _actions.ACTION_SET_ACTIVITY_STAGE:
{
var _flyoutId3 = action.flyoutId;
var _updatedFlyouts2 = state.flyouts.map(function (flyout) {
return flyout.flyoutId === _flyoutId3 ? _objectSpread(_objectSpread({}, flyout), {}, {
activityStage: action.activityStage
}) : flyout;
});
return _objectSpread(_objectSpread({}, state), {}, {
flyouts: _updatedFlyouts2
});
}
// Go back: pop child history when any, else pop current session (only within same historyKey).
case _actions.ACTION_GO_BACK:
{
var _currentSession2$chil;
if (state.sessions.length === 0) {
return state;
}
var _currentSessionIndex3 = state.sessions.length - 1;
var _currentSession2 = state.sessions[_currentSessionIndex3];
var _childHistory = (_currentSession2$chil = _currentSession2.childHistory) !== null && _currentSession2$chil !== void 0 ? _currentSession2$chil : [];
if (_childHistory.length > 0) {
// Pop one child: set current child to the last entry in history, remove the current child flyout
var popped = _childHistory[_childHistory.length - 1];
var newChildHistory = _childHistory.slice(0, -1);
var _updatedSessions3 = _toConsumableArray(state.sessions);
_updatedSessions3[_currentSessionIndex3] = _objectSpread(_objectSpread({}, _currentSession2), {}, {
childHistory: newChildHistory,
childFlyoutId: popped.flyoutId,
childTitle: popped.title,
childIconType: popped.iconType
});
var _newFlyouts4 = state.flyouts.filter(function (f) {
return f.flyoutId !== _currentSession2.childFlyoutId;
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _updatedSessions3,
flyouts: _newFlyouts4
});
}
// No child history: pop current session (main + all its children)
var _flyoutsToRemove2 = new Set();
addSessionFlyoutsToRemove(_currentSession2, _flyoutsToRemove2);
var sessionsWithoutCurrent = state.sessions.slice(0, _currentSessionIndex3);
var hasRemainingInCurrentGroup = sessionsWithoutCurrent.some(function (s) {
return s.historyKey === _currentSession2.historyKey;
});
var _newSessions2 = hasRemainingInCurrentGroup ? moveHistoryGroupToTop(sessionsWithoutCurrent, _currentSession2.historyKey) : sessionsWithoutCurrent;
var _newFlyouts5 = state.flyouts.filter(function (f) {
return !_flyoutsToRemove2.has(f.flyoutId);
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _newSessions2,
flyouts: _newFlyouts5
});
}
// Navigate to a specific flyout (by main session or by child in current session's history)
case _actions.ACTION_GO_TO_FLYOUT:
{
var _flyoutId4 = action.flyoutId,
_level = action.level;
var _currentSessionIndex4 = state.sessions.length - 1;
if (_level === _const.LEVEL_CHILD && state.sessions.length > 0) {
var _currentSession3$chil;
var _currentSession3 = state.sessions[_currentSessionIndex4];
var _childHistory2 = (_currentSession3$chil = _currentSession3.childHistory) !== null && _currentSession3$chil !== void 0 ? _currentSession3$chil : [];
var targetIndex = _childHistory2.findIndex(function (entry) {
return entry.flyoutId === _flyoutId4;
});
if (targetIndex === -1) {
return state; // Target child not in history
}
var targetEntry = _childHistory2[targetIndex];
var _newChildHistory = _childHistory2.slice(0, targetIndex);
var _flyoutsToRemove3 = new Set();
if (_currentSession3.childFlyoutId) {
_flyoutsToRemove3.add(_currentSession3.childFlyoutId);
}
_childHistory2.slice(targetIndex + 1).forEach(function (e) {
_flyoutsToRemove3.add(e.flyoutId);
});
var _newFlyouts6 = state.flyouts.filter(function (f) {
return !_flyoutsToRemove3.has(f.flyoutId);
});
var _updatedSessions4 = _toConsumableArray(state.sessions);
_updatedSessions4[_currentSessionIndex4] = _objectSpread(_objectSpread({}, _currentSession3), {}, {
childHistory: _newChildHistory,
childFlyoutId: targetEntry.flyoutId,
childTitle: targetEntry.title,
childIconType: targetEntry.iconType
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _updatedSessions4,
flyouts: _newFlyouts6
});
}
// Navigate by main flyout: remove all sessions after the target
var targetSessionIndex = state.sessions.findIndex(function (session) {
return session.mainFlyoutId === _flyoutId4;
});
if (targetSessionIndex === -1) {
return state; // Target flyout not found
}
var _currentSession4 = state.sessions[_currentSessionIndex4];
var targetSession = state.sessions[targetSessionIndex];
// Group-local navigation: keep other history groups, remove only newer sessions in target's group,
// then bring that group to the top.
if (targetSession.historyKey === _currentSession4.historyKey) {
var _flyoutsToRemove4 = new Set();
var sessionsAfterTargetInGroup = state.sessions.filter(function (session, index) {
return index > targetSessionIndex && session.historyKey === targetSession.historyKey;
});
sessionsAfterTargetInGroup.forEach(function (session) {
addSessionFlyoutsToRemove(session, _flyoutsToRemove4);
});
var sessionsWithoutRemoved = state.sessions.filter(function (session) {
return !sessionsAfterTargetInGroup.some(function (removed) {
return removed.mainFlyoutId === session.mainFlyoutId;
});
});
var reorderedSessions = moveHistoryGroupToTop(sessionsWithoutRemoved, targetSession.historyKey);
var _newFlyouts7 = state.flyouts.filter(function (f) {
return !_flyoutsToRemove4.has(f.flyoutId);
});
return _objectSpread(_objectSpread({}, state), {}, {
sessions: reorderedSessions,
flyouts: _newFlyouts7
});
}
var sessionsToClose = state.sessions.slice(targetSessionIndex + 1);
var _flyoutsToRemove5 = new Set();
sessionsToClose.forEach(function (session) {
addSessionFlyoutsToRemove(session, _flyoutsToRemove5);
});
var _newFlyouts8 = state.flyouts.filter(function (f) {
return !_flyoutsToRemove5.has(f.flyoutId);
});
var _newSessions3 = state.sessions.slice(0, targetSessionIndex + 1);
return _objectSpread(_objectSpread({}, state), {}, {
sessions: _newSessions3,
flyouts: _newFlyouts8
});
}
// Set push padding offset for a specific side
case _actions.ACTION_SET_PUSH_PADDING:
{
var _state$pushPadding;
var side = action.side,
_width = action.width;
return _objectSpread(_objectSpread({}, state), {}, {
pushPadding: _objectSpread(_objectSpread({}, (_state$pushPadding = state.pushPadding) !== null && _state$pushPadding !== void 0 ? _state$pushPadding : {
left: 0,
right: 0
}), {}, _defineProperty({}, side, _width))
});
}
// Store the container element for container-relative layout calculations.
case _actions.ACTION_SET_CONTAINER_ELEMENT:
{
if (state.containerElement === action.element) {
return state; // No-op if same element
}
return _objectSpread(_objectSpread({}, state), {}, {
containerElement: action.element
});
}
case _actions.ACTION_SET_REFERENCE_WIDTH:
{
if (state.referenceWidth === action.width) {
return state;
}
return _objectSpread(_objectSpread({}, state), {}, {
referenceWidth: action.width
});
}
default:
return state;
}
}