1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import { chainPropTypes } from '@material-ui/utils';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import { alpha } from '../styles/colorManipulator';
|
9 | import ButtonBase from '../ButtonBase';
|
10 | import capitalize from '../utils/capitalize';
|
11 | export const styles = theme => ({
|
12 |
|
13 | root: {
|
14 | textAlign: 'center',
|
15 | flex: '0 0 auto',
|
16 | fontSize: theme.typography.pxToRem(24),
|
17 | padding: 12,
|
18 | borderRadius: '50%',
|
19 | overflow: 'visible',
|
20 |
|
21 | color: theme.palette.action.active,
|
22 | transition: theme.transitions.create('background-color', {
|
23 | duration: theme.transitions.duration.shortest
|
24 | }),
|
25 | '&:hover': {
|
26 | backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
|
27 |
|
28 | '@media (hover: none)': {
|
29 | backgroundColor: 'transparent'
|
30 | }
|
31 | },
|
32 | '&$disabled': {
|
33 | backgroundColor: 'transparent',
|
34 | color: theme.palette.action.disabled
|
35 | }
|
36 | },
|
37 |
|
38 |
|
39 | edgeStart: {
|
40 | marginLeft: -12,
|
41 | '$sizeSmall&': {
|
42 | marginLeft: -3
|
43 | }
|
44 | },
|
45 |
|
46 |
|
47 | edgeEnd: {
|
48 | marginRight: -12,
|
49 | '$sizeSmall&': {
|
50 | marginRight: -3
|
51 | }
|
52 | },
|
53 |
|
54 |
|
55 | colorInherit: {
|
56 | color: 'inherit'
|
57 | },
|
58 |
|
59 |
|
60 | colorPrimary: {
|
61 | color: theme.palette.primary.main,
|
62 | '&:hover': {
|
63 | backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
|
64 |
|
65 | '@media (hover: none)': {
|
66 | backgroundColor: 'transparent'
|
67 | }
|
68 | }
|
69 | },
|
70 |
|
71 |
|
72 | colorSecondary: {
|
73 | color: theme.palette.secondary.main,
|
74 | '&:hover': {
|
75 | backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
|
76 |
|
77 | '@media (hover: none)': {
|
78 | backgroundColor: 'transparent'
|
79 | }
|
80 | }
|
81 | },
|
82 |
|
83 |
|
84 | disabled: {},
|
85 |
|
86 |
|
87 | sizeSmall: {
|
88 | padding: 3,
|
89 | fontSize: theme.typography.pxToRem(18)
|
90 | },
|
91 |
|
92 |
|
93 | label: {
|
94 | width: '100%',
|
95 | display: 'flex',
|
96 | alignItems: 'inherit',
|
97 | justifyContent: 'inherit'
|
98 | }
|
99 | });
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | const IconButton = React.forwardRef(function IconButton(props, ref) {
|
106 | const {
|
107 | edge = false,
|
108 | children,
|
109 | classes,
|
110 | className,
|
111 | color = 'default',
|
112 | disabled = false,
|
113 | disableFocusRipple = false,
|
114 | size = 'medium'
|
115 | } = props,
|
116 | other = _objectWithoutPropertiesLoose(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
|
117 |
|
118 | return React.createElement(ButtonBase, _extends({
|
119 | className: clsx(classes.root, className, color !== 'default' && classes[`color${capitalize(color)}`], disabled && classes.disabled, size === "small" && classes[`size${capitalize(size)}`], {
|
120 | 'start': classes.edgeStart,
|
121 | 'end': classes.edgeEnd
|
122 | }[edge]),
|
123 | centerRipple: true,
|
124 | focusRipple: !disableFocusRipple,
|
125 | disabled: disabled,
|
126 | ref: ref
|
127 | }, other), React.createElement("span", {
|
128 | className: classes.label
|
129 | }, children));
|
130 | });
|
131 | process.env.NODE_ENV !== "production" ? IconButton.propTypes = {
|
132 | |
133 |
|
134 |
|
135 | children: chainPropTypes(PropTypes.node, props => {
|
136 | const found = React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.onClick);
|
137 |
|
138 | if (found) {
|
139 | return new Error(['Material-UI: You are providing an onClick event listener ' + 'to a child of a button element.', 'Firefox will never trigger the event.', 'You should move the onClick listener to the parent button element.', 'https://github.com/mui-org/material-ui/issues/13957'].join('\n'));
|
140 | }
|
141 |
|
142 | return null;
|
143 | }),
|
144 |
|
145 | |
146 |
|
147 |
|
148 |
|
149 | classes: PropTypes.object.isRequired,
|
150 |
|
151 | |
152 |
|
153 |
|
154 | className: PropTypes.string,
|
155 |
|
156 | |
157 |
|
158 |
|
159 | color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
|
160 |
|
161 | |
162 |
|
163 |
|
164 | disabled: PropTypes.bool,
|
165 |
|
166 | |
167 |
|
168 |
|
169 | disableFocusRipple: PropTypes.bool,
|
170 |
|
171 | |
172 |
|
173 |
|
174 | disableRipple: PropTypes.bool,
|
175 |
|
176 | |
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 | edge: PropTypes.oneOf(['start', 'end', false]),
|
183 |
|
184 | |
185 |
|
186 |
|
187 |
|
188 | size: PropTypes.oneOf(['small', 'medium'])
|
189 | } : void 0;
|
190 | export default withStyles(styles, {
|
191 | name: 'MuiIconButton'
|
192 | })(IconButton); |
\ | No newline at end of file |