@elastic/eui
Version:
Elastic UI Component Library
78 lines (77 loc) • 2.93 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "anchorPosition", "items"];
/*
* 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 React, { useState } from 'react';
import classNames from 'classnames';
import { EuiButtonEmpty } from '../../button/button_empty';
import { EuiPopover } from '../../popover';
import { EuiContextMenuPanel } from '../../context_menu';
import { EuiI18n } from '../../i18n';
import { EuiTableSortMobileItem } from './table_sort_mobile_item';
import { jsx as ___EmotionJSX } from "@emotion/react";
// Aligns the button to the right even when it's the only element present
var euiTableSortMobileStyles = {
marginInlineStart: 'auto',
label: 'euiTableSortMobile'
};
export var EuiTableSortMobile = function EuiTableSortMobile(_ref) {
var className = _ref.className,
anchorPosition = _ref.anchorPosition,
items = _ref.items,
rest = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isPopoverOpen = _useState2[0],
setIsPopoverOpen = _useState2[1];
var classes = classNames('euiTableSortMobile', className);
var onButtonClick = function onButtonClick() {
setIsPopoverOpen(function (isOpen) {
return !isOpen;
});
};
var closePopover = function closePopover() {
setIsPopoverOpen(false);
};
var mobileSortButton = ___EmotionJSX(EuiButtonEmpty, {
iconType: "chevronSingleDown",
iconSide: "right",
onClick: onButtonClick,
flush: "right",
size: "xs"
}, ___EmotionJSX(EuiI18n, {
token: "euiTableSortMobile.sorting",
default: "Sorting"
}));
var mobileSortPopover = ___EmotionJSX(EuiPopover, _extends({
button: mobileSortButton,
isOpen: isPopoverOpen,
closePopover: closePopover,
anchorPosition: anchorPosition || 'downRight',
panelPaddingSize: "none"
}, rest), ___EmotionJSX(EuiContextMenuPanel, {
style: {
minWidth: 200
},
items: items !== null && items !== void 0 && items.length ? items.map(function (item) {
return ___EmotionJSX(EuiTableSortMobileItem, {
key: item.key,
onSort: item.onSort,
isSorted: item.isSorted,
isSortAscending: item.isSortAscending
}, item.name);
}) : undefined
}));
return ___EmotionJSX("div", {
className: classes,
css: euiTableSortMobileStyles
}, mobileSortPopover);
};
EuiTableSortMobile.displayName = 'EuiTableSortMobile';