@elastic/eui
Version:
Elastic UI Component Library
242 lines (240 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.EuiFlyoutMenu = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _services = require("../../services");
var _button = require("../button");
var _flex = require("../flex");
var _list_group = require("../list_group");
var _popover = require("../popover");
var _accessibility = require("../accessibility");
var _text = require("../text");
var _title = require("../title");
var _tool_tip = require("../tool_tip");
var _flyout_close_button = require("./_flyout_close_button");
var _flyout_menu = require("./flyout_menu.styles");
var _flyout_menu_context = require("./flyout_menu_context");
var _i18n = require("../i18n");
var _react2 = require("@emotion/react");
var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType", "pagination"];
/*
* 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.
*/
/**
* History item for the flyout menu history popover
*/
/**
* Pagination configuration for the flyout menu
*/
/**
* Custom action item for the flyout menu component
*/
/**
* Props for EuiFlyoutMenu
*/
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var BackButton = function BackButton(props) {
return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
size: "xs",
color: "text",
iconType: "undo",
"data-test-subj": "euiFlyoutMenuBackButton"
}, props), (0, _react2.jsx)(_i18n.EuiI18n, {
token: "euiFlyoutMenu.back",
default: "Back"
}));
};
var HistoryPopover = function HistoryPopover(_ref) {
var items = _ref.items;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isPopoverOpen = _useState2[0],
setIsPopoverOpen = _useState2[1];
var handlePopoverButtonClick = function handlePopoverButtonClick() {
setIsPopoverOpen(!isPopoverOpen);
};
return (0, _react2.jsx)(_popover.EuiPopover, {
button: (0, _react2.jsx)(_button.EuiButtonIcon, {
iconType: "chevronSingleDown",
color: "text",
"aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
"data-test-subj": "euiFlyoutMenuHistoryButton"
}),
isOpen: isPopoverOpen,
onClick: handlePopoverButtonClick,
closePopover: function closePopover() {
return setIsPopoverOpen(false);
},
panelPaddingSize: "xs",
anchorPosition: "downLeft"
}, (0, _react2.jsx)(_list_group.EuiListGroup, null, items.map(function (item, index) {
return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
key: "history-item-".concat(index),
label: item.title,
iconType: item.iconType,
onClick: function onClick() {
item.onClick();
setIsPopoverOpen(false);
},
"data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
}, item.title);
})));
};
var PaginationControls = function PaginationControls(_ref2) {
var pagination = _ref2.pagination,
styles = _ref2.styles;
var currentIndex = pagination.currentIndex,
total = pagination.total,
onPrevious = pagination.onPrevious,
onNext = pagination.onNext;
var prevLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.previous', 'Previous');
var nextLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.next', 'Next');
var counterLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.counter', '{position} of {total}', {
position: currentIndex + 1,
total: total
});
var isPrevDisabled = currentIndex === 0;
var isNextDisabled = currentIndex === total - 1;
var prevButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
iconType: "chevronSingleUp",
color: "text",
size: "xs",
"aria-label": prevLabel,
onClick: onPrevious,
isDisabled: isPrevDisabled,
"data-test-subj": "euiFlyoutMenuPaginationPrev"
});
var nextButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
iconType: "chevronSingleDown",
color: "text",
size: "xs",
"aria-label": nextLabel,
onClick: onNext,
isDisabled: isNextDisabled,
"data-test-subj": "euiFlyoutMenuPaginationNext"
});
return (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, (0, _react2.jsx)(_flex.EuiFlexGroup, {
gutterSize: "xs",
alignItems: "center",
responsive: false
}, (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, isPrevDisabled ? prevButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
content: prevLabel,
disableScreenReaderOutput: true
}, prevButton)), (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, (0, _react2.jsx)(_text.EuiText, {
size: "s",
css: styles.euiFlyoutMenu__paginationCounter,
"aria-hidden": "true"
}, counterLabel), (0, _react2.jsx)(_accessibility.EuiScreenReaderLive, null, counterLabel)), (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, isNextDisabled ? nextButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
content: nextLabel,
disableScreenReaderOutput: true
}, nextButton))));
};
/**
* The component for the top menu bar inside a flyout. Since this is a private
* component, rendering is controlled using the `flyoutMenuProps` prop on
* `EuiFlyout`. In managed session flyouts, the Flyout Manager controls a back
* button and history popover for navigating to different flyout sessions
* within the managed context.
*
* @private
*/
var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref3) {
var className = _ref3.className,
title = _ref3.title,
titleId = _ref3.titleId,
_ref3$hideTitle = _ref3.hideTitle,
hideTitle = _ref3$hideTitle === void 0 ? true : _ref3$hideTitle,
hideCloseButton = _ref3.hideCloseButton,
_ref3$historyItems = _ref3.historyItems,
historyItems = _ref3$historyItems === void 0 ? [] : _ref3$historyItems,
showBackButton = _ref3.showBackButton,
backButtonProps = _ref3.backButtonProps,
customActions = _ref3.customActions,
_iconType = _ref3.iconType,
pagination = _ref3.pagination,
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
onClose = _useContext.onClose;
var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
var classes = (0, _classnames.default)('euiFlyoutMenu', className);
var showPaginationControls = pagination != null && pagination.total > 1;
var titleNode;
if (title) {
titleNode = (0, _react2.jsx)(_title.EuiTitle, {
size: "xxs",
id: titleId
}, (0, _react2.jsx)("h3", {
css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
}, title));
}
var handleClose = function handleClose(event) {
onClose === null || onClose === void 0 || onClose(event, {
reason: 'close-button'
});
};
var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
onClose: handleClose,
side: "right",
closeButtonPosition: "inside"
});
return (0, _react2.jsx)("div", (0, _extends2.default)({
className: classes,
css: styles.euiFlyoutMenu__container,
"data-test-subj": "euiFlyoutMenu"
}, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
alignItems: "center",
justifyContent: "spaceBetween",
gutterSize: "none",
responsive: false
}, showPaginationControls ? (0, _react2.jsx)(PaginationControls, {
pagination: pagination,
styles: styles
}) : (0, _react2.jsx)(_react.default.Fragment, null, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, (0, _react2.jsx)(HistoryPopover, {
items: historyItems
}))), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false
}, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: true
}), customActions && customActions.map(function (action, actionIndex) {
return (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false,
key: "action-index-flex-item-".concat(actionIndex),
css: styles.euiFlyoutMenu__actions
}, (0, _react2.jsx)(_button.EuiButtonIcon, {
key: "action-index-icon-".concat(actionIndex),
"aria-label": action['aria-label'],
iconType: action.iconType,
onClick: action.onClick,
color: "text",
size: "s"
}));
}), !hideCloseButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
grow: false,
css: styles.euiFlyoutMenu__spacer
})), !hideCloseButton && closeButton);
};