@elastic/eui
Version:
Elastic UI Component Library
107 lines (103 loc) • 6.27 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports._EuiSplitButton = exports.EuiSplitButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _services = require("../../../services");
var _global_styling = require("../../../global_styling");
var _split_button_context = require("./split_button_context");
var _split_button_actions = require("./split_button_actions");
var _split_button = require("./split_button.styles");
var _react2 = require("@emotion/react");
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.
*/
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _EuiSplitButton = exports._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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var euiThemeContext = (0, _services.useEuiTheme)();
var highContrastMode = euiThemeContext.highContrastMode;
var _children = (0, _slicedToArray2.default)(children, 2),
primaryAction = _children[0],
secondaryAction = _children[1];
var key = (0, _services.useGeneratedHtmlId)({
suffix: 'EuiSplitButton'
});
var commonProps = {
size: size,
color: color,
fill: fill,
isDisabled: isDisabled,
hasAriaDisabled: hasAriaDisabled,
isLoading: isLoading
};
var buttonFilledColors = (0, _global_styling.getEuiFilledButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
var buttonColors = (0, _global_styling.getEuiButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
var classes = (0, _classnames.default)('euiSplitButton', className);
var styles = (0, _services.useEuiMemoizedStyles)(_split_button.euiSplitButtonStyles);
var cssStyles = [styles.euiSplitButton, fill && styles.fill];
var dividerStyles = (0, _react.useMemo)(function () {
return (0, _split_button.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 = _react.Children.toArray(children);
var expectedTypes = [['EuiSplitButton.ActionPrimary', 'EuiSplitButtonActionPrimary'], ['EuiSplitButton.ActionSecondary', 'EuiSplitButtonActionSecondary']];
childArray.forEach(function (child, index) {
if (! /*#__PURE__*/(0, _react.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 (0, _react2.jsx)("div", (0, _extends2.default)({
role: "group",
className: classes,
css: cssStyles
}, rest), (0, _react2.jsx)(_split_button_context.EuiSplitButtonContext.Provider, {
value: commonProps
}, (0, _react2.jsx)(_react.Fragment, {
key: "".concat(key, "-primaryAction")
}, primaryAction), (0, _react2.jsx)("div", {
className: "euiSplitButton__divider",
css: dividerStyles.divider,
"aria-hidden": "true"
}), (0, _react2.jsx)(_react.Fragment, {
key: "".concat(key, "-secondaryAction")
}, secondaryAction)));
};
var EuiSplitButton = exports.EuiSplitButton = Object.assign(_EuiSplitButton, {
ActionPrimary: _split_button_actions.EuiSplitButtonActionPrimary,
ActionSecondary: _split_button_actions.EuiSplitButtonActionSecondary
});
/* internal utils */
var getComponentName = function getComponentName(type) {
if (typeof type === 'string') return type;
return type.displayName || type.name || 'Unknown';
};