1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import { isFragment } from 'react-is';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import capitalize from '../utils/capitalize';
|
8 | import { fade } from '../styles/colorManipulator';
|
9 | import withStyles from '../styles/withStyles';
|
10 | import Button from '../Button';
|
11 |
|
12 |
|
13 | Button.styles;
|
14 | export const styles = theme => ({
|
15 |
|
16 | root: {
|
17 | display: 'inline-flex',
|
18 | borderRadius: theme.shape.borderRadius
|
19 | },
|
20 |
|
21 |
|
22 | contained: {
|
23 | boxShadow: theme.shadows[2]
|
24 | },
|
25 |
|
26 |
|
27 | disableElevation: {
|
28 | boxShadow: 'none'
|
29 | },
|
30 |
|
31 |
|
32 | disabled: {},
|
33 |
|
34 |
|
35 | fullWidth: {
|
36 | width: '100%'
|
37 | },
|
38 |
|
39 |
|
40 | vertical: {
|
41 | flexDirection: 'column'
|
42 | },
|
43 |
|
44 |
|
45 | grouped: {
|
46 | minWidth: 40
|
47 | },
|
48 |
|
49 |
|
50 | groupedHorizontal: {
|
51 | '&:not(:first-child)': {
|
52 | borderTopLeftRadius: 0,
|
53 | borderBottomLeftRadius: 0
|
54 | },
|
55 | '&:not(:last-child)': {
|
56 | borderTopRightRadius: 0,
|
57 | borderBottomRightRadius: 0
|
58 | }
|
59 | },
|
60 |
|
61 |
|
62 | groupedVertical: {
|
63 | '&:not(:first-child)': {
|
64 | borderTopRightRadius: 0,
|
65 | borderTopLeftRadius: 0
|
66 | },
|
67 | '&:not(:last-child)': {
|
68 | borderBottomRightRadius: 0,
|
69 | borderBottomLeftRadius: 0
|
70 | }
|
71 | },
|
72 |
|
73 |
|
74 | groupedText: {},
|
75 |
|
76 |
|
77 | groupedTextHorizontal: {
|
78 | '&:not(:last-child)': {
|
79 | borderRight: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
|
80 | }
|
81 | },
|
82 |
|
83 |
|
84 | groupedTextVertical: {
|
85 | '&:not(:last-child)': {
|
86 | borderBottom: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
|
87 | }
|
88 | },
|
89 |
|
90 |
|
91 | groupedTextPrimary: {
|
92 | '&:not(:last-child)': {
|
93 | borderColor: fade(theme.palette.primary.main, 0.5)
|
94 | }
|
95 | },
|
96 |
|
97 |
|
98 | groupedTextSecondary: {
|
99 | '&:not(:last-child)': {
|
100 | borderColor: fade(theme.palette.secondary.main, 0.5)
|
101 | }
|
102 | },
|
103 |
|
104 |
|
105 | groupedOutlined: {},
|
106 |
|
107 |
|
108 | groupedOutlinedHorizontal: {
|
109 | '&:not(:first-child)': {
|
110 | marginLeft: -1
|
111 | },
|
112 | '&:not(:last-child)': {
|
113 | borderRightColor: 'transparent'
|
114 | }
|
115 | },
|
116 |
|
117 |
|
118 | groupedOutlinedVertical: {
|
119 | '&:not(:first-child)': {
|
120 | marginTop: -1
|
121 | },
|
122 | '&:not(:last-child)': {
|
123 | borderBottomColor: 'transparent'
|
124 | }
|
125 | },
|
126 |
|
127 |
|
128 | groupedOutlinedPrimary: {
|
129 | '&:hover': {
|
130 | borderColor: theme.palette.primary.main
|
131 | }
|
132 | },
|
133 |
|
134 |
|
135 | groupedOutlinedSecondary: {
|
136 | '&:hover': {
|
137 | borderColor: theme.palette.secondary.main
|
138 | }
|
139 | },
|
140 |
|
141 |
|
142 | groupedContained: {
|
143 | boxShadow: 'none'
|
144 | },
|
145 |
|
146 |
|
147 | groupedContainedHorizontal: {
|
148 | '&:not(:last-child)': {
|
149 | borderRight: `1px solid ${theme.palette.grey[400]}`,
|
150 | '&$disabled': {
|
151 | borderRight: `1px solid ${theme.palette.action.disabled}`
|
152 | }
|
153 | }
|
154 | },
|
155 |
|
156 |
|
157 | groupedContainedVertical: {
|
158 | '&:not(:last-child)': {
|
159 | borderBottom: `1px solid ${theme.palette.grey[400]}`,
|
160 | '&$disabled': {
|
161 | borderBottom: `1px solid ${theme.palette.action.disabled}`
|
162 | }
|
163 | }
|
164 | },
|
165 |
|
166 |
|
167 | groupedContainedPrimary: {
|
168 | '&:not(:last-child)': {
|
169 | borderColor: theme.palette.primary.dark
|
170 | }
|
171 | },
|
172 |
|
173 |
|
174 | groupedContainedSecondary: {
|
175 | '&:not(:last-child)': {
|
176 | borderColor: theme.palette.secondary.dark
|
177 | }
|
178 | }
|
179 | });
|
180 | const ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
|
181 | const {
|
182 | children,
|
183 | classes,
|
184 | className,
|
185 | color = 'default',
|
186 | component: Component = 'div',
|
187 | disabled = false,
|
188 | disableElevation = false,
|
189 | disableFocusRipple = false,
|
190 | disableRipple = false,
|
191 | fullWidth = false,
|
192 | orientation = 'horizontal',
|
193 | size = 'medium',
|
194 | variant = 'outlined'
|
195 | } = props,
|
196 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);
|
197 |
|
198 | const buttonClassName = clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}`], classes[`grouped${capitalize(variant)}${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}${color !== 'default' ? capitalize(color) : ''}`], disabled && classes.disabled);
|
199 | return React.createElement(Component, _extends({
|
200 | role: "group",
|
201 | className: clsx(classes.root, className, fullWidth && classes.fullWidth, disableElevation && classes.disableElevation, variant === 'contained' && classes.contained, orientation === 'vertical' && classes.vertical),
|
202 | ref: ref
|
203 | }, other), React.Children.map(children, child => {
|
204 | if (! React.isValidElement(child)) {
|
205 | return null;
|
206 | }
|
207 |
|
208 | if (process.env.NODE_ENV !== 'production') {
|
209 | if (isFragment(child)) {
|
210 | console.error(["Material-UI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
211 | }
|
212 | }
|
213 |
|
214 | return React.cloneElement(child, {
|
215 | className: clsx(buttonClassName, child.props.className),
|
216 | color: child.props.color || color,
|
217 | disabled: child.props.disabled || disabled,
|
218 | disableElevation: child.props.disableElevation || disableElevation,
|
219 | disableFocusRipple,
|
220 | disableRipple,
|
221 | fullWidth,
|
222 | size: child.props.size || size,
|
223 | variant: child.props.variant || variant
|
224 | });
|
225 | }));
|
226 | });
|
227 | process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes = {
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 | |
234 |
|
235 |
|
236 | children: PropTypes.node,
|
237 |
|
238 | |
239 |
|
240 |
|
241 |
|
242 | classes: PropTypes.object,
|
243 |
|
244 | |
245 |
|
246 |
|
247 | className: PropTypes.string,
|
248 |
|
249 | |
250 |
|
251 |
|
252 | color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
253 |
|
254 | |
255 |
|
256 |
|
257 |
|
258 | component: PropTypes
|
259 |
|
260 | .elementType,
|
261 |
|
262 | |
263 |
|
264 |
|
265 | disabled: PropTypes.bool,
|
266 |
|
267 | |
268 |
|
269 |
|
270 | disableElevation: PropTypes.bool,
|
271 |
|
272 | |
273 |
|
274 |
|
275 | disableFocusRipple: PropTypes.bool,
|
276 |
|
277 | |
278 |
|
279 |
|
280 | disableRipple: PropTypes.bool,
|
281 |
|
282 | |
283 |
|
284 |
|
285 | fullWidth: PropTypes.bool,
|
286 |
|
287 | |
288 |
|
289 |
|
290 | orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
291 |
|
292 | |
293 |
|
294 |
|
295 |
|
296 | size: PropTypes.oneOf(['large', 'medium', 'small']),
|
297 |
|
298 | |
299 |
|
300 |
|
301 | variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
|
302 | } : void 0;
|
303 | export default withStyles(styles, {
|
304 | name: 'MuiButtonGroup'
|
305 | })(ButtonGroup); |
\ | No newline at end of file |