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