@elastic/eui
Version:
Elastic UI Component Library
136 lines (132 loc) • 7.58 kB
JavaScript
"use strict";
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 _propTypes = _interopRequireDefault(require("prop-types"));
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)));
};
_EuiSplitButton.propTypes = {
className: _propTypes.default.string,
"aria-label": _propTypes.default.string,
"data-test-subj": _propTypes.default.string,
css: _propTypes.default.any,
/**
* Controls the disabled behavior via the native `disabled` attribute.
*/
isDisabled: _propTypes.default.bool,
/**
* NOTE: Beta feature, may be changed or removed in the future
*
* Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
* This results in a semantically disabled button without the default browser handling of the disabled state.
*
* Use e.g. when a disabled button should have a tooltip.
*/
hasAriaDisabled: _propTypes.default.bool,
size: _propTypes.default.any,
color: _propTypes.default.any,
fill: _propTypes.default.bool,
isLoading: _propTypes.default.any,
/* NOTE: This definition is not actually enforced by Typescript.
The tuple type ensures 2 children are expected, but the function component type won't be evaluated properly.
We use this definition anyway as documentation for users.
To advocate correct usage this requires runtime checks for development mode. */
children: _propTypes.default.any.isRequired
};
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';
};