1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["className", "delay", "FabProps", "icon", "id", "open", "TooltipClasses", "tooltipOpen", "tooltipPlacement", "tooltipTitle"];
|
4 |
|
5 | import * as React from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import clsx from 'clsx';
|
8 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
9 | import { emphasize } from '@mui/system';
|
10 | import styled from '../styles/styled';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import Fab from '../Fab';
|
13 | import Tooltip from '../Tooltip';
|
14 | import capitalize from '../utils/capitalize';
|
15 | import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
|
16 | import { jsx as _jsx } from "react/jsx-runtime";
|
17 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
18 |
|
19 | const useUtilityClasses = ownerState => {
|
20 | const {
|
21 | open,
|
22 | tooltipPlacement,
|
23 | classes
|
24 | } = ownerState;
|
25 | const slots = {
|
26 | fab: ['fab', !open && 'fabClosed'],
|
27 | staticTooltip: ['staticTooltip', `tooltipPlacement${capitalize(tooltipPlacement)}`, !open && 'staticTooltipClosed'],
|
28 | staticTooltipLabel: ['staticTooltipLabel']
|
29 | };
|
30 | return composeClasses(slots, getSpeedDialActionUtilityClass, classes);
|
31 | };
|
32 |
|
33 | const SpeedDialActionFab = styled(Fab, {
|
34 | name: 'MuiSpeedDialAction',
|
35 | slot: 'Fab',
|
36 | skipVariantsResolver: false,
|
37 | overridesResolver: (props, styles) => {
|
38 | const {
|
39 | ownerState
|
40 | } = props;
|
41 | return [styles.fab, !ownerState.open && styles.fabClosed];
|
42 | }
|
43 | })(({
|
44 | theme,
|
45 | ownerState
|
46 | }) => _extends({
|
47 | margin: 8,
|
48 | color: (theme.vars || theme).palette.text.secondary,
|
49 | backgroundColor: (theme.vars || theme).palette.background.paper,
|
50 | '&:hover': {
|
51 | backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
|
52 | },
|
53 | transition: `${theme.transitions.create('transform', {
|
54 | duration: theme.transitions.duration.shorter
|
55 | })}, opacity 0.8s`,
|
56 | opacity: 1
|
57 | }, !ownerState.open && {
|
58 | opacity: 0,
|
59 | transform: 'scale(0)'
|
60 | }));
|
61 | const SpeedDialActionStaticTooltip = styled('span', {
|
62 | name: 'MuiSpeedDialAction',
|
63 | slot: 'StaticTooltip',
|
64 | overridesResolver: (props, styles) => {
|
65 | const {
|
66 | ownerState
|
67 | } = props;
|
68 | return [styles.staticTooltip, !ownerState.open && styles.staticTooltipClosed, styles[`tooltipPlacement${capitalize(ownerState.tooltipPlacement)}`]];
|
69 | }
|
70 | })(({
|
71 | theme,
|
72 | ownerState
|
73 | }) => ({
|
74 | position: 'relative',
|
75 | display: 'flex',
|
76 | alignItems: 'center',
|
77 | [`& .${speedDialActionClasses.staticTooltipLabel}`]: _extends({
|
78 | transition: theme.transitions.create(['transform', 'opacity'], {
|
79 | duration: theme.transitions.duration.shorter
|
80 | }),
|
81 | opacity: 1
|
82 | }, !ownerState.open && {
|
83 | opacity: 0,
|
84 | transform: 'scale(0.5)'
|
85 | }, ownerState.tooltipPlacement === 'left' && {
|
86 | transformOrigin: '100% 50%',
|
87 | right: '100%',
|
88 | marginRight: 8
|
89 | }, ownerState.tooltipPlacement === 'right' && {
|
90 | transformOrigin: '0% 50%',
|
91 | left: '100%',
|
92 | marginLeft: 8
|
93 | })
|
94 | }));
|
95 | const SpeedDialActionStaticTooltipLabel = styled('span', {
|
96 | name: 'MuiSpeedDialAction',
|
97 | slot: 'StaticTooltipLabel',
|
98 | overridesResolver: (props, styles) => styles.staticTooltipLabel
|
99 | })(({
|
100 | theme
|
101 | }) => _extends({
|
102 | position: 'absolute'
|
103 | }, theme.typography.body1, {
|
104 | backgroundColor: (theme.vars || theme).palette.background.paper,
|
105 | borderRadius: (theme.vars || theme).shape.borderRadius,
|
106 | boxShadow: (theme.vars || theme).shadows[1],
|
107 | color: (theme.vars || theme).palette.text.secondary,
|
108 | padding: '4px 16px',
|
109 | wordBreak: 'keep-all'
|
110 | }));
|
111 | const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) {
|
112 | const props = useThemeProps({
|
113 | props: inProps,
|
114 | name: 'MuiSpeedDialAction'
|
115 | });
|
116 |
|
117 | const {
|
118 | className,
|
119 | delay = 0,
|
120 | FabProps = {},
|
121 | icon,
|
122 | id,
|
123 | open,
|
124 | TooltipClasses,
|
125 | tooltipOpen: tooltipOpenProp = false,
|
126 | tooltipPlacement = 'left',
|
127 | tooltipTitle
|
128 | } = props,
|
129 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
130 |
|
131 | const ownerState = _extends({}, props, {
|
132 | tooltipPlacement
|
133 | });
|
134 |
|
135 | const classes = useUtilityClasses(ownerState);
|
136 | const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
|
137 |
|
138 | const handleTooltipClose = () => {
|
139 | setTooltipOpen(false);
|
140 | };
|
141 |
|
142 | const handleTooltipOpen = () => {
|
143 | setTooltipOpen(true);
|
144 | };
|
145 |
|
146 | const transitionStyle = {
|
147 | transitionDelay: `${delay}ms`
|
148 | };
|
149 |
|
150 | const fab = _jsx(SpeedDialActionFab, _extends({
|
151 | size: "small",
|
152 | className: clsx(classes.fab, className),
|
153 | tabIndex: -1,
|
154 | role: "menuitem",
|
155 | ownerState: ownerState
|
156 | }, FabProps, {
|
157 | style: _extends({}, transitionStyle, FabProps.style),
|
158 | children: icon
|
159 | }));
|
160 |
|
161 | if (tooltipOpenProp) {
|
162 | return _jsxs(SpeedDialActionStaticTooltip, _extends({
|
163 | id: id,
|
164 | ref: ref,
|
165 | className: classes.staticTooltip,
|
166 | ownerState: ownerState
|
167 | }, other, {
|
168 | children: [_jsx(SpeedDialActionStaticTooltipLabel, {
|
169 | style: transitionStyle,
|
170 | id: `${id}-label`,
|
171 | className: classes.staticTooltipLabel,
|
172 | ownerState: ownerState,
|
173 | children: tooltipTitle
|
174 | }), React.cloneElement(fab, {
|
175 | 'aria-labelledby': `${id}-label`
|
176 | })]
|
177 | }));
|
178 | }
|
179 |
|
180 | if (!open && tooltipOpen) {
|
181 | setTooltipOpen(false);
|
182 | }
|
183 |
|
184 | return _jsx(Tooltip, _extends({
|
185 | id: id,
|
186 | ref: ref,
|
187 | title: tooltipTitle,
|
188 | placement: tooltipPlacement,
|
189 | onClose: handleTooltipClose,
|
190 | onOpen: handleTooltipOpen,
|
191 | open: open && tooltipOpen,
|
192 | classes: TooltipClasses
|
193 | }, other, {
|
194 | children: fab
|
195 | }));
|
196 | });
|
197 | process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes
|
198 |
|
199 | = {
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | |
206 |
|
207 |
|
208 | classes: PropTypes.object,
|
209 |
|
210 | |
211 |
|
212 |
|
213 | className: PropTypes.string,
|
214 |
|
215 | |
216 |
|
217 |
|
218 |
|
219 | delay: PropTypes.number,
|
220 |
|
221 | |
222 |
|
223 |
|
224 |
|
225 | FabProps: PropTypes.object,
|
226 |
|
227 | |
228 |
|
229 |
|
230 | icon: PropTypes.node,
|
231 |
|
232 | |
233 |
|
234 |
|
235 |
|
236 | id: PropTypes.string,
|
237 |
|
238 | |
239 |
|
240 |
|
241 | open: PropTypes.bool,
|
242 |
|
243 | |
244 |
|
245 |
|
246 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
247 |
|
248 | |
249 |
|
250 |
|
251 | TooltipClasses: PropTypes.object,
|
252 |
|
253 | |
254 |
|
255 |
|
256 |
|
257 | tooltipOpen: PropTypes.bool,
|
258 |
|
259 | |
260 |
|
261 |
|
262 |
|
263 | tooltipPlacement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
264 |
|
265 | |
266 |
|
267 |
|
268 | tooltipTitle: PropTypes.node
|
269 | } : void 0;
|
270 | export default SpeedDialAction; |
\ | No newline at end of file |