1 | import * as React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import Button from './Button';
|
4 | import ButtonGroup from './ButtonGroup';
|
5 | import Dropdown from './Dropdown';
|
6 | import { alignPropType } from './types';
|
7 | import { jsx as _jsx } from "react/jsx-runtime";
|
8 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
9 | const propTypes = {
|
10 | /**
|
11 | * An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.
|
12 | * @type {string}
|
13 | * @required
|
14 | */
|
15 | id: PropTypes.string,
|
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.
|
42 | *
|
43 | * _see [DropdownMenu](#dropdown-menu-props) for more details_
|
44 | *
|
45 | * @type {"start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"} }
|
46 | */
|
47 | align: 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 | /**
|
63 | * Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to
|
64 | * Popper.js's flip [docs](https://popper.js.org/docs/v2/modifiers/flip/).
|
65 | *
|
66 | */
|
67 | flip: PropTypes.bool,
|
68 |
|
69 | /** @ignore */
|
70 | bsPrefix: PropTypes.string,
|
71 |
|
72 | /** @ignore */
|
73 | variant: PropTypes.string,
|
74 |
|
75 | /** @ignore */
|
76 | size: PropTypes.string
|
77 | };
|
78 | const defaultProps = {
|
79 | toggleLabel: 'Toggle dropdown',
|
80 | type: 'button'
|
81 | };
|
82 | /**
|
83 | * A convenience component for simple or general use split button dropdowns. Renders a
|
84 | * `ButtonGroup` containing a `Button` and a `Button` toggle for the `Dropdown`. All `children`
|
85 | * are passed directly to the default `Dropdown.Menu`. This component accepts all of [`Dropdown`'s
|
86 | * props](#dropdown-props).
|
87 | *
|
88 | * _All unknown props are passed through to the `Dropdown` component._
|
89 | * The Button `variant`, `size` and `bsPrefix` props are passed to the button and toggle,
|
90 | * and menu-related props are passed to the `Dropdown.Menu`
|
91 | */
|
92 |
|
93 | const SplitButton = /*#__PURE__*/React.forwardRef(({
|
94 | id,
|
95 | bsPrefix,
|
96 | size,
|
97 | variant,
|
98 | title,
|
99 | type,
|
100 | toggleLabel,
|
101 | children,
|
102 | onClick,
|
103 | href,
|
104 | target,
|
105 | menuRole,
|
106 | renderMenuOnMount,
|
107 | rootCloseEvent,
|
108 | flip,
|
109 | ...props
|
110 | }, ref) => /*#__PURE__*/_jsxs(Dropdown, {
|
111 | ref: ref,
|
112 | ...props,
|
113 | as: ButtonGroup,
|
114 | children: [/*#__PURE__*/_jsx(Button, {
|
115 | size: size,
|
116 | variant: variant,
|
117 | disabled: props.disabled,
|
118 | bsPrefix: bsPrefix,
|
119 | href: href,
|
120 | target: target,
|
121 | onClick: onClick,
|
122 | type: type,
|
123 | children: title
|
124 | }), /*#__PURE__*/_jsx(Dropdown.Toggle, {
|
125 | split: true,
|
126 | id: id,
|
127 | size: size,
|
128 | variant: variant,
|
129 | disabled: props.disabled,
|
130 | childBsPrefix: bsPrefix,
|
131 | children: /*#__PURE__*/_jsx("span", {
|
132 | className: "visually-hidden",
|
133 | children: toggleLabel
|
134 | })
|
135 | }), /*#__PURE__*/_jsx(Dropdown.Menu, {
|
136 | role: menuRole,
|
137 | renderOnMount: renderMenuOnMount,
|
138 | rootCloseEvent: rootCloseEvent,
|
139 | flip: flip,
|
140 | children: children
|
141 | })]
|
142 | }));
|
143 | SplitButton.propTypes = propTypes;
|
144 | SplitButton.defaultProps = defaultProps;
|
145 | SplitButton.displayName = 'SplitButton';
|
146 | export default SplitButton; |
\ | No newline at end of file |