UNPKG

4.41 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3import React from 'react';
4import PropTypes from 'prop-types';
5import Button from './Button';
6import ButtonGroup from './ButtonGroup';
7import Dropdown from './Dropdown';
8import { alignPropType } from './DropdownMenu';
9var propTypes = {
10 /**
11 * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
12 * @type {string|number}
13 * @required
14 */
15 id: PropTypes.any,
16
17 /**
18 * Accessible label for the toggle; the value of `title` if not specified.
19 */
20 toggleLabel: PropTypes.string,
21
22 /** An `href` passed to the non-toggle Button */
23 href: PropTypes.string,
24
25 /** An anchor `target` passed to the non-toggle Button */
26 target: PropTypes.string,
27
28 /** An `onClick` handler passed to the non-toggle Button */
29 onClick: PropTypes.func,
30
31 /** The content of the non-toggle Button. */
32 title: PropTypes.node.isRequired,
33
34 /** A `type` passed to the non-toggle Button */
35 type: PropTypes.string,
36
37 /** Disables both Buttons */
38 disabled: PropTypes.bool,
39
40 /**
41 * Aligns the dropdown menu responsively.
42 *
43 * _see [DropdownMenu](#dropdown-menu-props) for more details_
44 *
45 * @type {"left"|"right"|{ sm: "left"|"right" }|{ md: "left"|"right" }|{ lg: "left"|"right" }|{ xl: "left"|"right"} }
46 */
47 menuAlign: alignPropType,
48
49 /** An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown */
50 menuRole: PropTypes.string,
51
52 /** Whether to render the dropdown menu in the DOM before the first time it is shown */
53 renderMenuOnMount: PropTypes.bool,
54
55 /**
56 * Which event when fired outside the component will cause it to be closed.
57 *
58 * _see [DropdownMenu](#dropdown-menu-props) for more details_
59 */
60 rootCloseEvent: PropTypes.string,
61
62 /** @ignore */
63 bsPrefix: PropTypes.string,
64
65 /** @ignore */
66 variant: PropTypes.string,
67
68 /** @ignore */
69 size: PropTypes.string
70};
71var defaultProps = {
72 toggleLabel: 'Toggle dropdown',
73 type: 'button'
74};
75/**
76 * A convenience component for simple or general use split button dropdowns. Renders a
77 * `ButtonGroup` containing a `Button` and a `Button` toggle for the `Dropdown`. All `children`
78 * are passed directly to the default `Dropdown.Menu`. This component accepts all of [`Dropdown`'s
79 * props](#dropdown-props).
80 *
81 * _All unknown props are passed through to the `Dropdown` component._
82 * The Button `variant`, `size` and `bsPrefix` props are passed to the button and toggle,
83 * and menu-related props are passed to the `Dropdown.Menu`
84 */
85
86var SplitButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
87 var id = _ref.id,
88 bsPrefix = _ref.bsPrefix,
89 size = _ref.size,
90 variant = _ref.variant,
91 title = _ref.title,
92 type = _ref.type,
93 toggleLabel = _ref.toggleLabel,
94 children = _ref.children,
95 onClick = _ref.onClick,
96 href = _ref.href,
97 target = _ref.target,
98 menuAlign = _ref.menuAlign,
99 menuRole = _ref.menuRole,
100 renderMenuOnMount = _ref.renderMenuOnMount,
101 rootCloseEvent = _ref.rootCloseEvent,
102 props = _objectWithoutPropertiesLoose(_ref, ["id", "bsPrefix", "size", "variant", "title", "type", "toggleLabel", "children", "onClick", "href", "target", "menuAlign", "menuRole", "renderMenuOnMount", "rootCloseEvent"]);
103
104 return /*#__PURE__*/React.createElement(Dropdown, _extends({
105 ref: ref
106 }, props, {
107 as: ButtonGroup
108 }), /*#__PURE__*/React.createElement(Button, {
109 size: size,
110 variant: variant,
111 disabled: props.disabled,
112 bsPrefix: bsPrefix,
113 href: href,
114 target: target,
115 onClick: onClick,
116 type: type
117 }, title), /*#__PURE__*/React.createElement(Dropdown.Toggle, {
118 split: true,
119 id: id ? id.toString() : undefined,
120 size: size,
121 variant: variant,
122 disabled: props.disabled,
123 childBsPrefix: bsPrefix
124 }, /*#__PURE__*/React.createElement("span", {
125 className: "sr-only"
126 }, toggleLabel)), /*#__PURE__*/React.createElement(Dropdown.Menu, {
127 align: menuAlign,
128 role: menuRole,
129 renderOnMount: renderMenuOnMount,
130 rootCloseEvent: rootCloseEvent
131 }, children));
132});
133SplitButton.propTypes = propTypes;
134SplitButton.defaultProps = defaultProps;
135SplitButton.displayName = 'SplitButton';
136export default SplitButton;
\No newline at end of file