1 | import * as React from 'react';
|
2 | import { StandardProps } from '@material-ui/core';
|
3 | import { FabProps } from '@material-ui/core/Fab';
|
4 | import { TransitionHandlerProps, TransitionProps } from '@material-ui/core/transitions';
|
5 |
|
6 | export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
|
7 | export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
|
8 |
|
9 | export interface SpeedDialProps
|
10 | extends StandardProps<
|
11 | React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
|
12 | SpeedDialClassKey,
|
13 | 'children'
|
14 | > {
|
15 | /**
|
16 | * SpeedDialActions to display when the SpeedDial is `open`.
|
17 | */
|
18 | children?: React.ReactNode;
|
19 | /**
|
20 | * The aria-label of the button element.
|
21 | * Also used to provide the `id` for the `SpeedDial` element and its children.
|
22 | */
|
23 | ariaLabel: string;
|
24 | /**
|
25 | * The direction the actions open relative to the floating action button.
|
26 | */
|
27 | direction?: 'up' | 'down' | 'left' | 'right';
|
28 | /**
|
29 | * If `true`, the SpeedDial will be hidden.
|
30 | */
|
31 | hidden?: boolean;
|
32 | /**
|
33 | * Props applied to the [`Fab`](/api/fab/) element.
|
34 | */
|
35 | FabProps?: Partial<FabProps>;
|
36 | /**
|
37 | * The icon to display in the SpeedDial Fab. The `SpeedDialIcon` component
|
38 | * provides a default Icon with animation.
|
39 | */
|
40 | icon?: React.ReactNode;
|
41 | /**
|
42 | * Callback fired when the component requests to be closed.
|
43 | *
|
44 | * @param {object} event The event source of the callback.
|
45 | * @param {string} reason Can be: `"toggle"`, `"blur"`, `"mouseLeave"`, `"escapeKeyDown"`.
|
46 | */
|
47 | onClose?: (event: React.SyntheticEvent<{}>, reason: CloseReason) => void;
|
48 | /**
|
49 | * Callback fired when the component requests to be open.
|
50 | *
|
51 | * @param {object} event The event source of the callback.
|
52 | * @param {string} reason Can be: `"toggle"`, `"focus"`, `"mouseEnter"`.
|
53 | */
|
54 | onOpen?: (event: React.SyntheticEvent<{}>, reason: OpenReason) => void;
|
55 | /**
|
56 | * If `true`, the SpeedDial is open.
|
57 | */
|
58 | open: boolean;
|
59 | /**
|
60 | * The icon to display in the SpeedDial Fab when the SpeedDial is open.
|
61 | */
|
62 | openIcon?: React.ReactNode;
|
63 | /**
|
64 | * The component used for the transition.
|
65 | * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
66 | */
|
67 | TransitionComponent?: React.ComponentType<TransitionProps>;
|
68 | /**
|
69 | * The duration for the transition, in milliseconds.
|
70 | * You may specify a single timeout for all transitions, or individually with an object.
|
71 | */
|
72 | transitionDuration?: TransitionProps['timeout'];
|
73 | /**
|
74 | * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
|
75 | */
|
76 | TransitionProps?: TransitionProps;
|
77 | }
|
78 |
|
79 | export type SpeedDialClassKey =
|
80 | | 'root'
|
81 | | 'fab'
|
82 | | 'directionUp'
|
83 | | 'directionDown'
|
84 | | 'directionLeft'
|
85 | | 'directionRight'
|
86 | | 'actions'
|
87 | | 'actionsClosed';
|
88 |
|
89 | /**
|
90 | *
|
91 | * Demos:
|
92 | *
|
93 | * - [Speed Dial](https://mui.com/components/speed-dial/)
|
94 | *
|
95 | * API:
|
96 | *
|
97 | * - [SpeedDial API](https://mui.com/api/speed-dial/)
|
98 | */
|
99 | export default function SpeedDial(props: SpeedDialProps): JSX.Element;
|