@elastic/eui/optimize/es/components/facet/facet_button.js

Elastic UI Component Library

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
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, { useMemo } from 'react';
import classNames from 'classnames';
import { EuiNotificationBadge } from '../badge';
import { EuiLoadingSpinner } from '../loading';
import { EuiInnerText } from '../inner_text';
import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButton__disabled } from './facet_button.styles';
import { EuiButtonDisplay, isButtonDisabled } from '../button/button_display/_button_display';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var EuiFacetButton = function EuiFacetButton(_ref) {
  var children = _ref.children,
    className = _ref.className,
    icon = _ref.icon,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
    quantity = _ref.quantity,
    buttonRef = _ref.buttonRef,
    rest = _objectWithoutProperties(_ref, _excluded);
  // If in the loading state, force disabled to true
  isDisabled = isButtonDisabled({
    isDisabled: isDisabled,
    isLoading: isLoading
  });
  var selection = isSelected ? 'isSelected' : 'unSelected';
  var classes = classNames('euiFacetButton', className);
  var styles = useEuiMemoizedStyles(euiFacetButtonStyles);
  var cssStyles = [styles.euiFacetButton];
  var textStyles = useEuiMemoizedStyles(euiFacetButtonTextStyles);
  var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];

  // Spreading an obj/conditionally passing the `css` prop makes it so
  // an empty `css-0` className isn't rendered in the DOM
  var disabledStyles = useMemo(function () {
    return isDisabled ? {
      css: euiFacetButton__disabled
    } : undefined;
  }, [isDisabled]);

  // Add quantity number if provided or loading indicator
  var buttonQuantity = useMemo(function () {
    if (isLoading) {
      return ___EmotionJSX(EuiLoadingSpinner, {
        size: "m"
      });
    } else if (typeof quantity === 'number') {
      return ___EmotionJSX(EuiNotificationBadge, _extends({}, disabledStyles, {
        className: "euiFacetButton__quantity",
        size: "m",
        color: !isSelected || isDisabled ? 'subdued' : 'accent'
      }), quantity);
    }
  }, [quantity, isLoading, isDisabled, disabledStyles, isSelected]);

  // Add an icon to the button if one exists.
  var buttonIcon = useMemo(function () {
    if ( /*#__PURE__*/React.isValidElement(icon)) {
      return cloneElementWithCss(icon, _objectSpread({
        className: 'euiFacetButton__icon'
      }, disabledStyles));
    }
  }, [icon, disabledStyles]);
  return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
    return ___EmotionJSX(EuiButtonDisplay, _extends({
      className: classes,
      css: cssStyles,
      isDisabled: isDisabled,
      ref: buttonRef,
      title: rest['aria-label'] || innerText,
      size: "s"
    }, rest), buttonIcon, ___EmotionJSX("span", {
      css: cssTextStyles,
      className: "euiFacetButton__text",
      "data-text": innerText,
      ref: ref
    }, children), buttonQuantity);
  });
};