@elastic/eui/optimize/es/components/button/split_button/split_button.js

Elastic UI Component Library

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "children", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "isLoading"];
/*
 * 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, { Children, Fragment, isValidElement, useMemo } from 'react';
import { useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId } from '../../../services';
import { getEuiButtonColorValues, getEuiFilledButtonColorValues } from '../../../global_styling';
import { EuiSplitButtonContext } from './split_button_context';
import { EuiSplitButtonActionPrimary, EuiSplitButtonActionSecondary } from './split_button_actions';
import { euiSplitButtonDividerStyles, euiSplitButtonStyles } from './split_button.styles';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var _EuiSplitButton = function _EuiSplitButton(_ref) {
  var className = _ref.className,
    children = _ref.children,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'm' : _ref$size,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? 'primary' : _ref$color,
    _ref$fill = _ref.fill,
    fill = _ref$fill === void 0 ? false : _ref$fill,
    isDisabled = _ref.isDisabled,
    hasAriaDisabled = _ref.hasAriaDisabled,
    isLoading = _ref.isLoading,
    rest = _objectWithoutProperties(_ref, _excluded);
  var euiThemeContext = useEuiTheme();
  var highContrastMode = euiThemeContext.highContrastMode;
  var _children = _slicedToArray(children, 2),
    primaryAction = _children[0],
    secondaryAction = _children[1];
  var key = useGeneratedHtmlId({
    suffix: 'EuiSplitButton'
  });
  var commonProps = {
    size: size,
    color: color,
    fill: fill,
    isDisabled: isDisabled,
    hasAriaDisabled: hasAriaDisabled,
    isLoading: isLoading
  };
  var buttonFilledColors = getEuiFilledButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
  var buttonColors = getEuiButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
  var classes = classNames('euiSplitButton', className);
  var styles = useEuiMemoizedStyles(euiSplitButtonStyles);
  var cssStyles = [styles.euiSplitButton, fill && styles.fill];
  var dividerStyles = useMemo(function () {
    return euiSplitButtonDividerStyles(euiThemeContext, !fill ? buttonColors.borderColor : highContrastMode && fill ? buttonFilledColors.backgroundColor : 'transparent');
  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.backgroundColor, buttonColors.borderColor]);

  // NOTE: dev-mode-only runtime check to evaluate if correct child components are passed
  if (process.env.NODE_ENV !== 'production') {
    var childArray = Children.toArray(children);
    var expectedTypes = [['EuiSplitButton.ActionPrimary', 'EuiSplitButtonActionPrimary'], ['EuiSplitButton.ActionSecondary', 'EuiSplitButtonActionSecondary']];
    childArray.forEach(function (child, index) {
      if (! /*#__PURE__*/isValidElement(child)) return;
      var componentName = getComponentName(child.type);
      var expectedComponents = expectedTypes[index];
      if (!expectedComponents.includes(componentName)) {
        console.warn("\u26A0\uFE0F EuiSplitButton: Expected <".concat(expectedComponents[0], "> at position ").concat(index + 1, ", got <").concat(componentName, ">. You might be using a wrapper. Using e.g. React.memo() or React.lazy() is valid, other component wrappers are not and will break styling.\n          To verify expected usage, please check the documentation: https://eui.elastic.co/docs/components/navigation/buttons/split-button/"));
      }
    });
  }
  return ___EmotionJSX("div", _extends({
    role: "group",
    className: classes,
    css: cssStyles
  }, rest), ___EmotionJSX(EuiSplitButtonContext.Provider, {
    value: commonProps
  }, ___EmotionJSX(Fragment, {
    key: "".concat(key, "-primaryAction")
  }, primaryAction), ___EmotionJSX("div", {
    className: "euiSplitButton__divider",
    css: dividerStyles.divider,
    "aria-hidden": "true"
  }), ___EmotionJSX(Fragment, {
    key: "".concat(key, "-secondaryAction")
  }, secondaryAction)));
};
export var EuiSplitButton = Object.assign(_EuiSplitButton, {
  ActionPrimary: EuiSplitButtonActionPrimary,
  ActionSecondary: EuiSplitButtonActionSecondary
});

/* internal utils */

var getComponentName = function getComponentName(type) {
  if (typeof type === 'string') return type;
  return type.displayName || type.name || 'Unknown';
};