@elastic/eui
Version:
Elastic UI Component Library
237 lines (231 loc) • 8.58 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
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.
*/
import classNames from 'classnames';
import React, { useContext, useState } from 'react';
import { useEuiMemoizedStyles } from '../../services';
import { EuiButtonEmpty, EuiButtonIcon } from '../button';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
import { EuiListGroup, EuiListGroupItem } from '../list_group';
import { EuiPopover } from '../popover';
import { EuiScreenReaderLive } from '../accessibility';
import { EuiText } from '../text';
import { EuiTitle } from '../title';
import { EuiToolTip } from '../tool_tip';
import { EuiFlyoutCloseButton } from './_flyout_close_button';
import { euiFlyoutMenuStyles } from './flyout_menu.styles';
import { EuiFlyoutMenuContext } from './flyout_menu_context';
import { EuiI18n, useEuiI18n } from '../i18n';
/**
* 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
*/
import { jsx as ___EmotionJSX } from "@emotion/react";
var BackButton = function BackButton(props) {
return ___EmotionJSX(EuiButtonEmpty, _extends({
size: "xs",
color: "text",
iconType: "undo",
"data-test-subj": "euiFlyoutMenuBackButton"
}, props), ___EmotionJSX(EuiI18n, {
token: "euiFlyoutMenu.back",
default: "Back"
}));
};
var HistoryPopover = function HistoryPopover(_ref) {
var items = _ref.items;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isPopoverOpen = _useState2[0],
setIsPopoverOpen = _useState2[1];
var handlePopoverButtonClick = function handlePopoverButtonClick() {
setIsPopoverOpen(!isPopoverOpen);
};
return ___EmotionJSX(EuiPopover, {
button: ___EmotionJSX(EuiButtonIcon, {
iconType: "chevronSingleDown",
color: "text",
"aria-label": useEuiI18n('euiFlyoutMenu.history', 'History'),
"data-test-subj": "euiFlyoutMenuHistoryButton"
}),
isOpen: isPopoverOpen,
onClick: handlePopoverButtonClick,
closePopover: function closePopover() {
return setIsPopoverOpen(false);
},
panelPaddingSize: "xs",
anchorPosition: "downLeft"
}, ___EmotionJSX(EuiListGroup, null, items.map(function (item, index) {
return ___EmotionJSX(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 = useEuiI18n('euiFlyoutMenu.pagination.previous', 'Previous');
var nextLabel = useEuiI18n('euiFlyoutMenu.pagination.next', 'Next');
var counterLabel = useEuiI18n('euiFlyoutMenu.pagination.counter', '{position} of {total}', {
position: currentIndex + 1,
total: total
});
var isPrevDisabled = currentIndex === 0;
var isNextDisabled = currentIndex === total - 1;
var prevButton = ___EmotionJSX(EuiButtonIcon, {
iconType: "chevronSingleUp",
color: "text",
size: "xs",
"aria-label": prevLabel,
onClick: onPrevious,
isDisabled: isPrevDisabled,
"data-test-subj": "euiFlyoutMenuPaginationPrev"
});
var nextButton = ___EmotionJSX(EuiButtonIcon, {
iconType: "chevronSingleDown",
color: "text",
size: "xs",
"aria-label": nextLabel,
onClick: onNext,
isDisabled: isNextDisabled,
"data-test-subj": "euiFlyoutMenuPaginationNext"
});
return ___EmotionJSX(EuiFlexItem, {
grow: false
}, ___EmotionJSX(EuiFlexGroup, {
gutterSize: "xs",
alignItems: "center",
responsive: false
}, ___EmotionJSX(EuiFlexItem, {
grow: false
}, isPrevDisabled ? prevButton : ___EmotionJSX(EuiToolTip, {
content: prevLabel,
disableScreenReaderOutput: true
}, prevButton)), ___EmotionJSX(EuiFlexItem, {
grow: false
}, ___EmotionJSX(EuiText, {
size: "s",
css: styles.euiFlyoutMenu__paginationCounter,
"aria-hidden": "true"
}, counterLabel), ___EmotionJSX(EuiScreenReaderLive, null, counterLabel)), ___EmotionJSX(EuiFlexItem, {
grow: false
}, isNextDisabled ? nextButton : ___EmotionJSX(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
*/
export var 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 = _objectWithoutProperties(_ref3, _excluded);
var _useContext = useContext(EuiFlyoutMenuContext),
onClose = _useContext.onClose;
var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
var classes = classNames('euiFlyoutMenu', className);
var showPaginationControls = pagination != null && pagination.total > 1;
var titleNode;
if (title) {
titleNode = ___EmotionJSX(EuiTitle, {
size: "xxs",
id: titleId
}, ___EmotionJSX("h3", {
css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
}, title));
}
var handleClose = function handleClose(event) {
onClose === null || onClose === void 0 || onClose(event, {
reason: 'close-button'
});
};
var closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
onClose: handleClose,
side: "right",
closeButtonPosition: "inside"
});
return ___EmotionJSX("div", _extends({
className: classes,
css: styles.euiFlyoutMenu__container,
"data-test-subj": "euiFlyoutMenu"
}, rest), ___EmotionJSX(EuiFlexGroup, {
alignItems: "center",
justifyContent: "spaceBetween",
gutterSize: "none",
responsive: false
}, showPaginationControls ? ___EmotionJSX(PaginationControls, {
pagination: pagination,
styles: styles
}) : ___EmotionJSX(React.Fragment, null, showBackButton && ___EmotionJSX(EuiFlexItem, {
grow: false
}, ___EmotionJSX(BackButton, backButtonProps)), historyItems.length > 0 && ___EmotionJSX(EuiFlexItem, {
grow: false
}, ___EmotionJSX(HistoryPopover, {
items: historyItems
}))), titleNode && ___EmotionJSX(EuiFlexItem, {
grow: false
}, titleNode), ___EmotionJSX(EuiFlexItem, {
grow: true
}), customActions && customActions.map(function (action, actionIndex) {
return ___EmotionJSX(EuiFlexItem, {
grow: false,
key: "action-index-flex-item-".concat(actionIndex),
css: styles.euiFlyoutMenu__actions
}, ___EmotionJSX(EuiButtonIcon, {
key: "action-index-icon-".concat(actionIndex),
"aria-label": action['aria-label'],
iconType: action.iconType,
onClick: action.onClick,
color: "text",
size: "s"
}));
}), !hideCloseButton && ___EmotionJSX(EuiFlexItem, {
grow: false,
css: styles.euiFlyoutMenu__spacer
})), !hideCloseButton && closeButton);
};