@elastic/eui
Version:
Elastic UI Component Library
241 lines (232 loc) • 11.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "options", "popoverProps", "popoverTitle", "popoverFooter", "searchProps", "listProps", "isLoading", "popoverButton", "popoverButtonBreakpoints", "colorModes"],
_excluded2 = ["closePopover", "panelRef", "width"];
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; }
/*
* 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, useMemo, useCallback, useContext } from 'react';
import classNames from 'classnames';
import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme } from '../../../services';
import { ENTER } from '../../../services/keys';
import { useEuiI18n, EuiI18n } from '../../i18n';
import { EuiLoadingSpinner } from '../../loading';
import { EuiSelectable } from '../selectable';
import { EuiSelectableMessage } from '../selectable_message';
import { euiSelectableTemplateSitewideFormatOptions, euiSelectableTemplateSitewideRenderOptions } from './selectable_template_sitewide_option';
import { euiSelectableTemplateSitewideStyles } from './selectable_template_sitewide.styles';
import { EuiSelectableTemplateSitewidePopover } from './selectable_template_sitewide_popover';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref) {
var _colorModes$search, _colorModes$popover;
var children = _ref.children,
className = _ref.className,
options = _ref.options,
popoverProps = _ref.popoverProps,
popoverTitle = _ref.popoverTitle,
popoverFooter = _ref.popoverFooter,
searchProps = _ref.searchProps,
listProps = _ref.listProps,
isLoading = _ref.isLoading,
popoverButton = _ref.popoverButton,
popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
_ref$colorModes = _ref.colorModes,
colorModes = _ref$colorModes === void 0 ? {
search: 'default',
popover: 'default'
} : _ref$colorModes,
rest = _objectWithoutProperties(_ref, _excluded);
var _useEuiTheme = useEuiTheme(),
colorMode = _useEuiTheme.colorMode;
var _useContext = useContext(EuiNestedThemeContext),
hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme;
var _searchColorMode = colorModes === null || colorModes === void 0 || (_colorModes$search = colorModes.search) === null || _colorModes$search === void 0 ? void 0 : _colorModes$search.toLowerCase();
var _popoverColorMode = colorModes === null || colorModes === void 0 || (_colorModes$popover = colorModes.popover) === null || _colorModes$popover === void 0 ? void 0 : _colorModes$popover.toLowerCase();
var searchColorMode = useMemo(function () {
var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_searchColorMode);
return isStaticTheme ? _searchColorMode : _searchColorMode === 'inverse' ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
}, [colorMode, _searchColorMode]);
var popoverColorMode = useMemo(function () {
var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_popoverColorMode);
var inverseColorMode = colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark;
var globalColorMode = hasDifferentColorFromGlobalTheme ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
return isStaticTheme ? _popoverColorMode : _popoverColorMode === 'inverse' ? inverseColorMode : _popoverColorMode === 'global' ? globalColorMode : colorMode;
}, [hasDifferentColorFromGlobalTheme, colorMode, _popoverColorMode]);
/**
* i18n text
*/
var _useEuiI18n = useEuiI18n(['euiSelectableTemplateSitewide.searchPlaceholder'], ['Search for anything...']),
_useEuiI18n2 = _slicedToArray(_useEuiI18n, 1),
searchPlaceholder = _useEuiI18n2[0];
/**
* Popover helpers
*/
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
popoverRef = _useState2[0],
setPopoverRef = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
popoverIsOpen = _useState4[0],
setPopoverIsOpen = _useState4[1];
var _popoverProps = _objectSpread({}, popoverProps),
_closePopover = _popoverProps.closePopover,
panelRef = _popoverProps.panelRef,
width = _popoverProps.width,
popoverRest = _objectWithoutProperties(_popoverProps, _excluded2);
var closePopover = function closePopover() {
setPopoverIsOpen(false);
_closePopover && _closePopover();
};
var togglePopover = useCallback(function () {
setPopoverIsOpen(function (isOpen) {
return !isOpen;
});
}, []);
// Width applied to the internal div
var popoverWidth = width || 600;
var setPanelRef = useCombinedRefs([setPopoverRef, panelRef]);
/**
* Search helpers
*/
var searchOnFocus = function searchOnFocus(e) {
var _searchProps$onFocus;
searchProps === null || searchProps === void 0 || (_searchProps$onFocus = searchProps.onFocus) === null || _searchProps$onFocus === void 0 || _searchProps$onFocus.call(searchProps, e);
setPopoverIsOpen(true);
};
var onSearchInput = function onSearchInput(e) {
var _searchProps$onInput;
searchProps === null || searchProps === void 0 || (_searchProps$onInput = searchProps.onInput) === null || _searchProps$onInput === void 0 || _searchProps$onInput.call(searchProps, e);
setPopoverIsOpen(true);
};
var onSearchKeydown = function onSearchKeydown(e) {
var _searchProps$onKeyDow;
searchProps === null || searchProps === void 0 || (_searchProps$onKeyDow = searchProps.onKeyDown) === null || _searchProps$onKeyDow === void 0 || _searchProps$onKeyDow.call(searchProps, e);
if (e.key === ENTER) {
setPopoverIsOpen(true);
}
};
var searchOnBlur = function searchOnBlur(e) {
var _searchProps$onBlur;
searchProps === null || searchProps === void 0 || (_searchProps$onBlur = searchProps.onBlur) === null || _searchProps$onBlur === void 0 || _searchProps$onBlur.call(searchProps, e);
if (!(popoverRef !== null && popoverRef !== void 0 && popoverRef.contains(e.relatedTarget))) {
setPopoverIsOpen(false);
}
};
/**
* Classes & styles
*/
var styles = useEuiMemoizedStyles(euiSelectableTemplateSitewideStyles);
var classes = classNames('euiSelectableTemplateSitewide', className);
var searchClasses = classNames('euiSelectableTemplateSitewide__search', searchProps && searchProps.className);
var listClasses = classNames('euiSelectableTemplateSitewide__list', listProps && listProps.className);
/**
* List options
*/
var formattedOptions = euiSelectableTemplateSitewideFormatOptions(options, styles);
var loadingMessage = ___EmotionJSX(EuiSelectableMessage, {
style: {
minHeight: 300
}
}, ___EmotionJSX(EuiLoadingSpinner, {
size: "l"
}), ___EmotionJSX("br", null), ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
token: "euiSelectableTemplateSitewide.loadingResults",
default: "Loading results"
})));
var emptyMessage = ___EmotionJSX(EuiSelectableMessage, {
style: {
minHeight: 300
}
}, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
token: "euiSelectableTemplateSitewide.noResults",
default: "No results available"
})));
/**
* Changes based on showing the `popoverButton` if provided.
* This will move the search input into the popover
* and use the passed `popoverButton` as the popover trigger.
*/
var currentBreakpoint = useCurrentEuiBreakpoint();
var canShowPopoverButton = useMemo(function () {
if (!popoverButtonBreakpoints) return true;
if (!currentBreakpoint) return false;
return popoverButtonBreakpoints.includes(currentBreakpoint);
}, [currentBreakpoint, popoverButtonBreakpoints]);
var popoverTrigger = useMemo(function () {
if (!popoverButton || !canShowPopoverButton) return;
return ___EmotionJSX("span", {
className: "euiSelectableTemplateSitewide__popoverTrigger",
onClick: togglePopover,
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
}
}, popoverButton);
}, [popoverButton, canShowPopoverButton, togglePopover]);
return ___EmotionJSX(EuiSelectable, _extends({
css: styles.euiSelectableTemplateSitewide,
className: classes,
isLoading: isLoading,
options: formattedOptions,
renderOption: euiSelectableTemplateSitewideRenderOptions,
singleSelection: true,
searchProps: _objectSpread(_objectSpread({
placeholder: searchPlaceholder,
isClearable: true
}, searchProps), {}, {
onFocus: searchOnFocus,
onBlur: searchOnBlur,
onInput: onSearchInput,
onKeyDown: onSearchKeydown,
className: searchClasses
}),
listProps: _objectSpread(_objectSpread({
rowHeight: 52,
showIcons: false,
onFocusBadge: {
iconSide: 'right',
children: ___EmotionJSX(EuiI18n, {
token: "euiSelectableTemplateSitewide.onFocusBadgeGoTo",
default: "Go to"
})
}
}, listProps), {}, {
className: listClasses
}),
loadingMessage: loadingMessage,
emptyMessage: emptyMessage,
noMatchesMessage: emptyMessage
}, rest, {
searchable: true
}), function (list, search) {
var _search = !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
colorMode: searchColorMode
}, search) : search;
// uses standalone subcomponent to ensure scoped style/theme context
var popover = ___EmotionJSX(EuiSelectableTemplateSitewidePopover, _extends({
isOpen: popoverIsOpen,
trigger: popoverTrigger,
search: _search,
list: list,
title: popoverTitle,
footer: popoverFooter,
width: popoverWidth,
panelRef: setPanelRef,
closePopover: closePopover
}, popoverRest));
return ___EmotionJSX(EuiThemeProvider, {
wrapperProps: {
cloneElement: true
},
colorMode: popoverColorMode
}, popover);
});
};