1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 |
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { emphasize, withStyles } from '@material-ui/core/styles';
|
8 | import Fab from '@material-ui/core/Fab';
|
9 | import Tooltip from '@material-ui/core/Tooltip';
|
10 | import { capitalize } from '@material-ui/core/utils';
|
11 | export const styles = theme => ({
|
12 |
|
13 | fab: {
|
14 | margin: 8,
|
15 | color: theme.palette.text.secondary,
|
16 | backgroundColor: theme.palette.background.paper,
|
17 | '&:hover': {
|
18 | backgroundColor: emphasize(theme.palette.background.paper, 0.15)
|
19 | },
|
20 | transition: `${theme.transitions.create('transform', {
|
21 | duration: theme.transitions.duration.shorter
|
22 | })}, opacity 0.8s`,
|
23 | opacity: 1
|
24 | },
|
25 |
|
26 |
|
27 | fabClosed: {
|
28 | opacity: 0,
|
29 | transform: 'scale(0)'
|
30 | },
|
31 |
|
32 |
|
33 | staticTooltip: {
|
34 | position: 'relative',
|
35 | display: 'flex',
|
36 | '& $staticTooltipLabel': {
|
37 | transition: theme.transitions.create(['transform', 'opacity'], {
|
38 | duration: theme.transitions.duration.shorter
|
39 | }),
|
40 | opacity: 1
|
41 | }
|
42 | },
|
43 |
|
44 |
|
45 | staticTooltipClosed: {
|
46 | '& $staticTooltipLabel': {
|
47 | opacity: 0,
|
48 | transform: 'scale(0.5)'
|
49 | }
|
50 | },
|
51 |
|
52 |
|
53 | staticTooltipLabel: _extends({
|
54 | position: 'absolute'
|
55 | }, theme.typography.body1, {
|
56 | backgroundColor: theme.palette.background.paper,
|
57 | borderRadius: theme.shape.borderRadius,
|
58 | boxShadow: theme.shadows[1],
|
59 | color: theme.palette.text.secondary,
|
60 | padding: '4px 16px',
|
61 | wordBreak: 'keep-all'
|
62 | }),
|
63 |
|
64 |
|
65 | tooltipPlacementLeft: {
|
66 | alignItems: 'center',
|
67 | '& $staticTooltipLabel': {
|
68 | transformOrigin: '100% 50%',
|
69 | right: '100%',
|
70 | marginRight: 8
|
71 | }
|
72 | },
|
73 |
|
74 |
|
75 | tooltipPlacementRight: {
|
76 | alignItems: 'center',
|
77 | '& $staticTooltipLabel': {
|
78 | transformOrigin: '0% 50%',
|
79 | left: '100%',
|
80 | marginLeft: 8
|
81 | }
|
82 | }
|
83 | });
|
84 | const SpeedDialAction = React.forwardRef(function SpeedDialAction(props, ref) {
|
85 | const {
|
86 | classes,
|
87 | className,
|
88 | delay = 0,
|
89 | FabProps = {},
|
90 | icon,
|
91 | id,
|
92 | open,
|
93 | TooltipClasses,
|
94 | tooltipOpen: tooltipOpenProp = false,
|
95 | tooltipPlacement = 'left',
|
96 | tooltipTitle
|
97 | } = props,
|
98 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "delay", "FabProps", "icon", "id", "open", "TooltipClasses", "tooltipOpen", "tooltipPlacement", "tooltipTitle"]);
|
99 |
|
100 | const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
|
101 |
|
102 | const handleTooltipClose = () => {
|
103 | setTooltipOpen(false);
|
104 | };
|
105 |
|
106 | const handleTooltipOpen = () => {
|
107 | setTooltipOpen(true);
|
108 | };
|
109 |
|
110 | const transitionStyle = {
|
111 | transitionDelay: `${delay}ms`
|
112 | };
|
113 | const fab = React.createElement(Fab, _extends({
|
114 | size: "small",
|
115 | className: clsx(classes.fab, className, !open && classes.fabClosed),
|
116 | tabIndex: -1,
|
117 | role: "menuitem",
|
118 | "aria-describedby": `${id}-label`
|
119 | }, FabProps, {
|
120 | style: _extends({}, transitionStyle, FabProps.style)
|
121 | }), icon);
|
122 |
|
123 | if (tooltipOpenProp) {
|
124 | return React.createElement("span", _extends({
|
125 | id: id,
|
126 | ref: ref,
|
127 | className: clsx(classes.staticTooltip, classes[`tooltipPlacement${capitalize(tooltipPlacement)}`], !open && classes.staticTooltipClosed)
|
128 | }, other), React.createElement("span", {
|
129 | style: transitionStyle,
|
130 | id: `${id}-label`,
|
131 | className: classes.staticTooltipLabel
|
132 | }, tooltipTitle), fab);
|
133 | }
|
134 |
|
135 | return React.createElement(Tooltip, _extends({
|
136 | id: id,
|
137 | ref: ref,
|
138 | title: tooltipTitle,
|
139 | placement: tooltipPlacement,
|
140 | onClose: handleTooltipClose,
|
141 | onOpen: handleTooltipOpen,
|
142 | open: open && tooltipOpen,
|
143 | classes: TooltipClasses
|
144 | }, other), fab);
|
145 | });
|
146 | process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes = {
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | |
153 |
|
154 |
|
155 |
|
156 | classes: PropTypes.object,
|
157 |
|
158 | |
159 |
|
160 |
|
161 | className: PropTypes.string,
|
162 |
|
163 | |
164 |
|
165 |
|
166 | delay: PropTypes.number,
|
167 |
|
168 | |
169 |
|
170 |
|
171 | FabProps: PropTypes.object,
|
172 |
|
173 | |
174 |
|
175 |
|
176 | icon: PropTypes.node,
|
177 |
|
178 | |
179 |
|
180 |
|
181 |
|
182 | id: PropTypes.string,
|
183 |
|
184 | |
185 |
|
186 |
|
187 | open: PropTypes.bool,
|
188 |
|
189 | |
190 |
|
191 |
|
192 | TooltipClasses: PropTypes.object,
|
193 |
|
194 | |
195 |
|
196 |
|
197 | tooltipOpen: PropTypes.bool,
|
198 |
|
199 | |
200 |
|
201 |
|
202 | tooltipPlacement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
203 |
|
204 | |
205 |
|
206 |
|
207 | tooltipTitle: PropTypes.node
|
208 | } : void 0;
|
209 | export default withStyles(styles, {
|
210 | name: 'MuiSpeedDialAction'
|
211 | })(SpeedDialAction); |
\ | No newline at end of file |