1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["ref"],
|
4 | _excluded2 = ["ariaLabel", "FabProps", "children", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"],
|
5 | _excluded3 = ["ref"];
|
6 | import * as React from 'react';
|
7 | import { isFragment } from 'react-is';
|
8 | import PropTypes from 'prop-types';
|
9 | import clsx from 'clsx';
|
10 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
11 | import styled from '../styles/styled';
|
12 | import useThemeProps from '../styles/useThemeProps';
|
13 | import useTheme from '../styles/useTheme';
|
14 | import Zoom from '../Zoom';
|
15 | import Fab from '../Fab';
|
16 | import capitalize from '../utils/capitalize';
|
17 | import isMuiElement from '../utils/isMuiElement';
|
18 | import useForkRef from '../utils/useForkRef';
|
19 | import useControlled from '../utils/useControlled';
|
20 | import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses';
|
21 | import { jsx as _jsx } from "react/jsx-runtime";
|
22 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
23 |
|
24 | const useUtilityClasses = ownerState => {
|
25 | const {
|
26 | classes,
|
27 | open,
|
28 | direction
|
29 | } = ownerState;
|
30 | const slots = {
|
31 | root: ['root', `direction${capitalize(direction)}`],
|
32 | fab: ['fab'],
|
33 | actions: ['actions', !open && 'actionsClosed']
|
34 | };
|
35 | return composeClasses(slots, getSpeedDialUtilityClass, classes);
|
36 | };
|
37 |
|
38 | function getOrientation(direction) {
|
39 | if (direction === 'up' || direction === 'down') {
|
40 | return 'vertical';
|
41 | }
|
42 |
|
43 | if (direction === 'right' || direction === 'left') {
|
44 | return 'horizontal';
|
45 | }
|
46 |
|
47 | return undefined;
|
48 | }
|
49 |
|
50 | function clamp(value, min, max) {
|
51 | if (value < min) {
|
52 | return min;
|
53 | }
|
54 |
|
55 | if (value > max) {
|
56 | return max;
|
57 | }
|
58 |
|
59 | return value;
|
60 | }
|
61 |
|
62 | const dialRadius = 32;
|
63 | const spacingActions = 16;
|
64 | const SpeedDialRoot = styled('div', {
|
65 | name: 'MuiSpeedDial',
|
66 | slot: 'Root',
|
67 | overridesResolver: (props, styles) => {
|
68 | const {
|
69 | ownerState
|
70 | } = props;
|
71 | return [styles.root, styles[`direction${capitalize(ownerState.direction)}`]];
|
72 | }
|
73 | })(({
|
74 | theme,
|
75 | ownerState
|
76 | }) => _extends({
|
77 | zIndex: (theme.vars || theme).zIndex.speedDial,
|
78 | display: 'flex',
|
79 | alignItems: 'center',
|
80 | pointerEvents: 'none'
|
81 | }, ownerState.direction === 'up' && {
|
82 | flexDirection: 'column-reverse',
|
83 | [`& .${speedDialClasses.actions}`]: {
|
84 | flexDirection: 'column-reverse',
|
85 | marginBottom: -dialRadius,
|
86 | paddingBottom: spacingActions + dialRadius
|
87 | }
|
88 | }, ownerState.direction === 'down' && {
|
89 | flexDirection: 'column',
|
90 | [`& .${speedDialClasses.actions}`]: {
|
91 | flexDirection: 'column',
|
92 | marginTop: -dialRadius,
|
93 | paddingTop: spacingActions + dialRadius
|
94 | }
|
95 | }, ownerState.direction === 'left' && {
|
96 | flexDirection: 'row-reverse',
|
97 | [`& .${speedDialClasses.actions}`]: {
|
98 | flexDirection: 'row-reverse',
|
99 | marginRight: -dialRadius,
|
100 | paddingRight: spacingActions + dialRadius
|
101 | }
|
102 | }, ownerState.direction === 'right' && {
|
103 | flexDirection: 'row',
|
104 | [`& .${speedDialClasses.actions}`]: {
|
105 | flexDirection: 'row',
|
106 | marginLeft: -dialRadius,
|
107 | paddingLeft: spacingActions + dialRadius
|
108 | }
|
109 | }));
|
110 | const SpeedDialFab = styled(Fab, {
|
111 | name: 'MuiSpeedDial',
|
112 | slot: 'Fab',
|
113 | overridesResolver: (props, styles) => styles.fab
|
114 | })(() => ({
|
115 | pointerEvents: 'auto'
|
116 | }));
|
117 | const SpeedDialActions = styled('div', {
|
118 | name: 'MuiSpeedDial',
|
119 | slot: 'Actions',
|
120 | overridesResolver: (props, styles) => {
|
121 | const {
|
122 | ownerState
|
123 | } = props;
|
124 | return [styles.actions, !ownerState.open && styles.actionsClosed];
|
125 | }
|
126 | })(({
|
127 | ownerState
|
128 | }) => _extends({
|
129 | display: 'flex',
|
130 | pointerEvents: 'auto'
|
131 | }, !ownerState.open && {
|
132 | transition: 'top 0s linear 0.2s',
|
133 | pointerEvents: 'none'
|
134 | }));
|
135 | const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) {
|
136 | const props = useThemeProps({
|
137 | props: inProps,
|
138 | name: 'MuiSpeedDial'
|
139 | });
|
140 | const theme = useTheme();
|
141 | const defaultTransitionDuration = {
|
142 | enter: theme.transitions.duration.enteringScreen,
|
143 | exit: theme.transitions.duration.leavingScreen
|
144 | };
|
145 |
|
146 | const {
|
147 | ariaLabel,
|
148 | FabProps: {
|
149 | ref: origDialButtonRef
|
150 | } = {},
|
151 | children: childrenProp,
|
152 | className,
|
153 | direction = 'up',
|
154 | hidden = false,
|
155 | icon,
|
156 | onBlur,
|
157 | onClose,
|
158 | onFocus,
|
159 | onKeyDown,
|
160 | onMouseEnter,
|
161 | onMouseLeave,
|
162 | onOpen,
|
163 | open: openProp,
|
164 | TransitionComponent = Zoom,
|
165 | transitionDuration = defaultTransitionDuration,
|
166 | TransitionProps
|
167 | } = props,
|
168 | FabProps = _objectWithoutPropertiesLoose(props.FabProps, _excluded),
|
169 | other = _objectWithoutPropertiesLoose(props, _excluded2);
|
170 |
|
171 | const [open, setOpenState] = useControlled({
|
172 | controlled: openProp,
|
173 | default: false,
|
174 | name: 'SpeedDial',
|
175 | state: 'open'
|
176 | });
|
177 |
|
178 | const ownerState = _extends({}, props, {
|
179 | open,
|
180 | direction
|
181 | });
|
182 |
|
183 | const classes = useUtilityClasses(ownerState);
|
184 | const eventTimer = React.useRef();
|
185 | React.useEffect(() => {
|
186 | return () => {
|
187 | clearTimeout(eventTimer.current);
|
188 | };
|
189 | }, []);
|
190 | |
191 |
|
192 |
|
193 |
|
194 | const focusedAction = React.useRef(0);
|
195 | |
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 | const nextItemArrowKey = React.useRef();
|
204 | |
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 | const actions = React.useRef([]);
|
211 | actions.current = [actions.current[0]];
|
212 | const handleOwnFabRef = React.useCallback(fabFef => {
|
213 | actions.current[0] = fabFef;
|
214 | }, []);
|
215 | const handleFabRef = useForkRef(origDialButtonRef, handleOwnFabRef);
|
216 | |
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 | const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef) => {
|
225 | return buttonRef => {
|
226 | actions.current[dialActionIndex + 1] = buttonRef;
|
227 |
|
228 | if (origButtonRef) {
|
229 | origButtonRef(buttonRef);
|
230 | }
|
231 | };
|
232 | };
|
233 |
|
234 | const handleKeyDown = event => {
|
235 | if (onKeyDown) {
|
236 | onKeyDown(event);
|
237 | }
|
238 |
|
239 | const key = event.key.replace('Arrow', '').toLowerCase();
|
240 | const {
|
241 | current: nextItemArrowKeyCurrent = key
|
242 | } = nextItemArrowKey;
|
243 |
|
244 | if (event.key === 'Escape') {
|
245 | setOpenState(false);
|
246 | actions.current[0].focus();
|
247 |
|
248 | if (onClose) {
|
249 | onClose(event, 'escapeKeyDown');
|
250 | }
|
251 |
|
252 | return;
|
253 | }
|
254 |
|
255 | if (getOrientation(key) === getOrientation(nextItemArrowKeyCurrent) && getOrientation(key) !== undefined) {
|
256 | event.preventDefault();
|
257 | const actionStep = key === nextItemArrowKeyCurrent ? 1 : -1;
|
258 |
|
259 | const nextAction = clamp(focusedAction.current + actionStep, 0, actions.current.length - 1);
|
260 | actions.current[nextAction].focus();
|
261 | focusedAction.current = nextAction;
|
262 | nextItemArrowKey.current = nextItemArrowKeyCurrent;
|
263 | }
|
264 | };
|
265 |
|
266 | React.useEffect(() => {
|
267 |
|
268 | if (!open) {
|
269 | focusedAction.current = 0;
|
270 | nextItemArrowKey.current = undefined;
|
271 | }
|
272 | }, [open]);
|
273 |
|
274 | const handleClose = event => {
|
275 | if (event.type === 'mouseleave' && onMouseLeave) {
|
276 | onMouseLeave(event);
|
277 | }
|
278 |
|
279 | if (event.type === 'blur' && onBlur) {
|
280 | onBlur(event);
|
281 | }
|
282 |
|
283 | clearTimeout(eventTimer.current);
|
284 |
|
285 | if (event.type === 'blur') {
|
286 | eventTimer.current = setTimeout(() => {
|
287 | setOpenState(false);
|
288 |
|
289 | if (onClose) {
|
290 | onClose(event, 'blur');
|
291 | }
|
292 | });
|
293 | } else {
|
294 | setOpenState(false);
|
295 |
|
296 | if (onClose) {
|
297 | onClose(event, 'mouseLeave');
|
298 | }
|
299 | }
|
300 | };
|
301 |
|
302 | const handleClick = event => {
|
303 | if (FabProps.onClick) {
|
304 | FabProps.onClick(event);
|
305 | }
|
306 |
|
307 | clearTimeout(eventTimer.current);
|
308 |
|
309 | if (open) {
|
310 | setOpenState(false);
|
311 |
|
312 | if (onClose) {
|
313 | onClose(event, 'toggle');
|
314 | }
|
315 | } else {
|
316 | setOpenState(true);
|
317 |
|
318 | if (onOpen) {
|
319 | onOpen(event, 'toggle');
|
320 | }
|
321 | }
|
322 | };
|
323 |
|
324 | const handleOpen = event => {
|
325 | if (event.type === 'mouseenter' && onMouseEnter) {
|
326 | onMouseEnter(event);
|
327 | }
|
328 |
|
329 | if (event.type === 'focus' && onFocus) {
|
330 | onFocus(event);
|
331 | }
|
332 |
|
333 |
|
334 |
|
335 |
|
336 | clearTimeout(eventTimer.current);
|
337 |
|
338 | if (!open) {
|
339 |
|
340 | eventTimer.current = setTimeout(() => {
|
341 | setOpenState(true);
|
342 |
|
343 | if (onOpen) {
|
344 | const eventMap = {
|
345 | focus: 'focus',
|
346 | mouseenter: 'mouseEnter'
|
347 | };
|
348 | onOpen(event, eventMap[event.type]);
|
349 | }
|
350 | });
|
351 | }
|
352 | };
|
353 |
|
354 |
|
355 | const id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
|
356 | const allItems = React.Children.toArray(childrenProp).filter(child => {
|
357 | if (process.env.NODE_ENV !== 'production') {
|
358 | if (isFragment(child)) {
|
359 | console.error(["MUI: The SpeedDial component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
360 | }
|
361 | }
|
362 |
|
363 | return React.isValidElement(child);
|
364 | });
|
365 | const children = allItems.map((child, index) => {
|
366 | const _child$props = child.props,
|
367 | {
|
368 | FabProps: {
|
369 | ref: origButtonRef
|
370 | } = {},
|
371 | tooltipPlacement: tooltipPlacementProp
|
372 | } = _child$props,
|
373 | ChildFabProps = _objectWithoutPropertiesLoose(_child$props.FabProps, _excluded3);
|
374 |
|
375 | const tooltipPlacement = tooltipPlacementProp || (getOrientation(direction) === 'vertical' ? 'left' : 'top');
|
376 | return React.cloneElement(child, {
|
377 | FabProps: _extends({}, ChildFabProps, {
|
378 | ref: createHandleSpeedDialActionButtonRef(index, origButtonRef)
|
379 | }),
|
380 | delay: 30 * (open ? index : allItems.length - index),
|
381 | open,
|
382 | tooltipPlacement,
|
383 | id: `${id}-action-${index}`
|
384 | });
|
385 | });
|
386 | return _jsxs(SpeedDialRoot, _extends({
|
387 | className: clsx(classes.root, className),
|
388 | ref: ref,
|
389 | role: "presentation",
|
390 | onKeyDown: handleKeyDown,
|
391 | onBlur: handleClose,
|
392 | onFocus: handleOpen,
|
393 | onMouseEnter: handleOpen,
|
394 | onMouseLeave: handleClose,
|
395 | ownerState: ownerState
|
396 | }, other, {
|
397 | children: [_jsx(TransitionComponent, _extends({
|
398 | in: !hidden,
|
399 | timeout: transitionDuration,
|
400 | unmountOnExit: true
|
401 | }, TransitionProps, {
|
402 | children: _jsx(SpeedDialFab, _extends({
|
403 | color: "primary",
|
404 | "aria-label": ariaLabel,
|
405 | "aria-haspopup": "true",
|
406 | "aria-expanded": open,
|
407 | "aria-controls": `${id}-actions`
|
408 | }, FabProps, {
|
409 | onClick: handleClick,
|
410 | className: clsx(classes.fab, FabProps.className),
|
411 | ref: handleFabRef,
|
412 | ownerState: ownerState,
|
413 | children: React.isValidElement(icon) && isMuiElement(icon, ['SpeedDialIcon']) ? React.cloneElement(icon, {
|
414 | open
|
415 | }) : icon
|
416 | }))
|
417 | })), _jsx(SpeedDialActions, {
|
418 | id: `${id}-actions`,
|
419 | role: "menu",
|
420 | "aria-orientation": getOrientation(direction),
|
421 | className: clsx(classes.actions, !open && classes.actionsClosed),
|
422 | ownerState: ownerState,
|
423 | children: children
|
424 | })]
|
425 | }));
|
426 | });
|
427 | process.env.NODE_ENV !== "production" ? SpeedDial.propTypes
|
428 |
|
429 | = {
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 | |
436 |
|
437 |
|
438 |
|
439 | ariaLabel: PropTypes.string.isRequired,
|
440 |
|
441 | |
442 |
|
443 |
|
444 | children: PropTypes.node,
|
445 |
|
446 | |
447 |
|
448 |
|
449 | classes: PropTypes.object,
|
450 |
|
451 | |
452 |
|
453 |
|
454 | className: PropTypes.string,
|
455 |
|
456 | |
457 |
|
458 |
|
459 |
|
460 | direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
|
461 |
|
462 | |
463 |
|
464 |
|
465 |
|
466 | FabProps: PropTypes.object,
|
467 |
|
468 | |
469 |
|
470 |
|
471 |
|
472 | hidden: PropTypes.bool,
|
473 |
|
474 | |
475 |
|
476 |
|
477 |
|
478 | icon: PropTypes.node,
|
479 |
|
480 | |
481 |
|
482 |
|
483 | onBlur: PropTypes.func,
|
484 |
|
485 | |
486 |
|
487 |
|
488 |
|
489 |
|
490 |
|
491 | onClose: PropTypes.func,
|
492 |
|
493 | |
494 |
|
495 |
|
496 | onFocus: PropTypes.func,
|
497 |
|
498 | |
499 |
|
500 |
|
501 | onKeyDown: PropTypes.func,
|
502 |
|
503 | |
504 |
|
505 |
|
506 | onMouseEnter: PropTypes.func,
|
507 |
|
508 | |
509 |
|
510 |
|
511 | onMouseLeave: PropTypes.func,
|
512 |
|
513 | |
514 |
|
515 |
|
516 |
|
517 |
|
518 |
|
519 | onOpen: PropTypes.func,
|
520 |
|
521 | |
522 |
|
523 |
|
524 | open: PropTypes.bool,
|
525 |
|
526 | |
527 |
|
528 |
|
529 | openIcon: PropTypes.node,
|
530 |
|
531 | |
532 |
|
533 |
|
534 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
535 |
|
536 | |
537 |
|
538 |
|
539 |
|
540 |
|
541 | TransitionComponent: PropTypes.elementType,
|
542 |
|
543 | |
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 |
|
551 | transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
552 | appear: PropTypes.number,
|
553 | enter: PropTypes.number,
|
554 | exit: PropTypes.number
|
555 | })]),
|
556 |
|
557 | |
558 |
|
559 |
|
560 |
|
561 | TransitionProps: PropTypes.object
|
562 | } : void 0;
|
563 | export default SpeedDial; |
\ | No newline at end of file |