1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
16 |
|
17 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
18 |
|
19 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
20 |
|
21 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
22 |
|
23 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
24 |
|
25 | var _createClass3 = _interopRequireDefault(_createClass2);
|
26 |
|
27 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
28 |
|
29 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
30 |
|
31 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
32 |
|
33 | var _inherits3 = _interopRequireDefault(_inherits2);
|
34 |
|
35 | var _simpleAssign = require('simple-assign');
|
36 |
|
37 | var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
38 |
|
39 | var _react = require('react');
|
40 |
|
41 | var _react2 = _interopRequireDefault(_react);
|
42 |
|
43 | var _propTypes = require('prop-types');
|
44 |
|
45 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
46 |
|
47 | var _transitions = require('../styles/transitions');
|
48 |
|
49 | var _transitions2 = _interopRequireDefault(_transitions);
|
50 |
|
51 | var _propTypes3 = require('../utils/propTypes');
|
52 |
|
53 | var _propTypes4 = _interopRequireDefault(_propTypes3);
|
54 |
|
55 | var _EnhancedButton = require('../internal/EnhancedButton');
|
56 |
|
57 | var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton);
|
58 |
|
59 | var _FontIcon = require('../FontIcon');
|
60 |
|
61 | var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
62 |
|
63 | var _Tooltip = require('../internal/Tooltip');
|
64 |
|
65 | var _Tooltip2 = _interopRequireDefault(_Tooltip);
|
66 |
|
67 | var _childUtils = require('../utils/childUtils');
|
68 |
|
69 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
70 |
|
71 | function getStyles(props, context) {
|
72 | var baseTheme = context.muiTheme.baseTheme;
|
73 |
|
74 |
|
75 | return {
|
76 | root: {
|
77 | boxSizing: 'border-box',
|
78 | overflow: 'visible',
|
79 | transition: _transitions2.default.easeOut(),
|
80 | padding: baseTheme.spacing.iconSize / 2,
|
81 | width: baseTheme.spacing.iconSize * 2,
|
82 | height: baseTheme.spacing.iconSize * 2,
|
83 | fontSize: 0
|
84 | },
|
85 | tooltip: {
|
86 | boxSizing: 'border-box'
|
87 | },
|
88 | disabled: {
|
89 | color: baseTheme.palette.disabledColor,
|
90 | fill: baseTheme.palette.disabledColor,
|
91 | cursor: 'default'
|
92 | }
|
93 | };
|
94 | }
|
95 |
|
96 | var IconButton = function (_Component) {
|
97 | (0, _inherits3.default)(IconButton, _Component);
|
98 |
|
99 | function IconButton() {
|
100 | var _ref;
|
101 |
|
102 | var _temp, _this, _ret;
|
103 |
|
104 | (0, _classCallCheck3.default)(this, IconButton);
|
105 |
|
106 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
107 | args[_key] = arguments[_key];
|
108 | }
|
109 |
|
110 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = IconButton.__proto__ || (0, _getPrototypeOf2.default)(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
111 | hovered: false,
|
112 | isKeyboardFocused: false,
|
113 |
|
114 |
|
115 | touch: false,
|
116 | tooltipShown: false
|
117 | }, _this.handleBlur = function (event) {
|
118 | _this.hideTooltip();
|
119 | if (_this.props.onBlur) {
|
120 | _this.props.onBlur(event);
|
121 | }
|
122 | }, _this.handleFocus = function (event) {
|
123 | _this.showTooltip();
|
124 | if (_this.props.onFocus) {
|
125 | _this.props.onFocus(event);
|
126 | }
|
127 | }, _this.handleMouseLeave = function (event) {
|
128 | if (!_this.button.isKeyboardFocused()) {
|
129 | _this.hideTooltip();
|
130 | }
|
131 | _this.setState({ hovered: false });
|
132 | if (_this.props.onMouseLeave) {
|
133 | _this.props.onMouseLeave(event);
|
134 | }
|
135 | }, _this.handleMouseOut = function (event) {
|
136 | if (_this.props.disabled) _this.hideTooltip();
|
137 | if (_this.props.onMouseOut) _this.props.onMouseOut(event);
|
138 | }, _this.handleMouseEnter = function (event) {
|
139 | _this.showTooltip();
|
140 |
|
141 |
|
142 | if (!_this.state.touch) {
|
143 | _this.setState({ hovered: true });
|
144 | }
|
145 | if (_this.props.onMouseEnter) {
|
146 | _this.props.onMouseEnter(event);
|
147 | }
|
148 | }, _this.handleTouchStart = function (event) {
|
149 | _this.setState({ touch: true });
|
150 |
|
151 | if (_this.props.onTouchStart) {
|
152 | _this.props.onTouchStart(event);
|
153 | }
|
154 | }, _this.handleKeyboardFocus = function (event, isKeyboardFocused) {
|
155 | var _this$props = _this.props,
|
156 | disabled = _this$props.disabled,
|
157 | onFocus = _this$props.onFocus,
|
158 | onBlur = _this$props.onBlur,
|
159 | onKeyboardFocus = _this$props.onKeyboardFocus;
|
160 |
|
161 | if (isKeyboardFocused && !disabled) {
|
162 | _this.showTooltip();
|
163 | if (onFocus) {
|
164 | onFocus(event);
|
165 | }
|
166 | } else {
|
167 | _this.hideTooltip();
|
168 | if (onBlur) {
|
169 | onBlur(event);
|
170 | }
|
171 | }
|
172 |
|
173 | _this.setState({ isKeyboardFocused: isKeyboardFocused });
|
174 | if (onKeyboardFocus) {
|
175 | onKeyboardFocus(event, isKeyboardFocused);
|
176 | }
|
177 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
178 | }
|
179 |
|
180 | (0, _createClass3.default)(IconButton, [{
|
181 | key: 'componentWillReceiveProps',
|
182 | value: function componentWillReceiveProps(nextProps) {
|
183 | if (nextProps.disabled) {
|
184 | this.setState({ hovered: false });
|
185 | }
|
186 | }
|
187 | }, {
|
188 | key: 'setKeyboardFocus',
|
189 | value: function setKeyboardFocus() {
|
190 | this.button.setKeyboardFocus();
|
191 | }
|
192 | }, {
|
193 | key: 'showTooltip',
|
194 | value: function showTooltip() {
|
195 | if (this.props.tooltip) {
|
196 | this.setState({ tooltipShown: true });
|
197 | }
|
198 | }
|
199 | }, {
|
200 | key: 'hideTooltip',
|
201 | value: function hideTooltip() {
|
202 | if (this.props.tooltip) this.setState({ tooltipShown: false });
|
203 | }
|
204 | }, {
|
205 | key: 'render',
|
206 | value: function render() {
|
207 | var _this2 = this;
|
208 |
|
209 | var _props = this.props,
|
210 | disabled = _props.disabled,
|
211 | hoveredStyle = _props.hoveredStyle,
|
212 | disableTouchRipple = _props.disableTouchRipple,
|
213 | children = _props.children,
|
214 | iconClassName = _props.iconClassName,
|
215 | style = _props.style,
|
216 | tooltip = _props.tooltip,
|
217 | tooltipPositionProp = _props.tooltipPosition,
|
218 | tooltipStyles = _props.tooltipStyles,
|
219 | touch = _props.touch,
|
220 | iconStyle = _props.iconStyle,
|
221 | other = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'hoveredStyle', 'disableTouchRipple', 'children', 'iconClassName', 'style', 'tooltip', 'tooltipPosition', 'tooltipStyles', 'touch', 'iconStyle']);
|
222 |
|
223 | var fonticon = void 0;
|
224 |
|
225 | var styles = getStyles(this.props, this.context);
|
226 | var tooltipPosition = tooltipPositionProp.split('-');
|
227 |
|
228 | var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
|
229 |
|
230 | var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style, hovered ? hoveredStyle : {});
|
231 |
|
232 | var tooltipElement = tooltip ? _react2.default.createElement(_Tooltip2.default, {
|
233 | label: tooltip,
|
234 | show: this.state.tooltipShown,
|
235 | touch: touch,
|
236 | style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyles),
|
237 | verticalPosition: tooltipPosition[0],
|
238 | horizontalPosition: tooltipPosition[1]
|
239 | }) : null;
|
240 |
|
241 | if (iconClassName) {
|
242 | var iconHoverColor = iconStyle.iconHoverColor,
|
243 | iconStyleFontIcon = (0, _objectWithoutProperties3.default)(iconStyle, ['iconHoverColor']);
|
244 |
|
245 |
|
246 | fonticon = _react2.default.createElement(
|
247 | _FontIcon2.default,
|
248 | {
|
249 | className: iconClassName,
|
250 | hoverColor: disabled ? null : iconHoverColor,
|
251 | style: (0, _simpleAssign2.default)({}, disabled && styles.disabled, iconStyleFontIcon),
|
252 | color: this.context.muiTheme.baseTheme.palette.textColor
|
253 | },
|
254 | children
|
255 | );
|
256 | }
|
257 |
|
258 | var childrenStyle = disabled ? (0, _simpleAssign2.default)({}, iconStyle, styles.disabled) : iconStyle;
|
259 |
|
260 | return _react2.default.createElement(
|
261 | _EnhancedButton2.default,
|
262 | (0, _extends3.default)({
|
263 | ref: function ref(_ref2) {
|
264 | return _this2.button = _ref2;
|
265 | }
|
266 | }, other, {
|
267 | centerRipple: true,
|
268 | disabled: disabled,
|
269 | onTouchStart: this.handleTouchStart,
|
270 | style: mergedRootStyles,
|
271 | disableTouchRipple: disableTouchRipple,
|
272 | onBlur: this.handleBlur,
|
273 | onFocus: this.handleFocus,
|
274 | onMouseLeave: this.handleMouseLeave,
|
275 | onMouseEnter: this.handleMouseEnter,
|
276 | onMouseOut: this.handleMouseOut,
|
277 | onKeyboardFocus: this.handleKeyboardFocus
|
278 | }),
|
279 | tooltipElement,
|
280 | fonticon,
|
281 | (0, _childUtils.extendChildren)(children, {
|
282 | style: childrenStyle
|
283 | })
|
284 | );
|
285 | }
|
286 | }]);
|
287 | return IconButton;
|
288 | }(_react.Component);
|
289 |
|
290 | IconButton.muiName = 'IconButton';
|
291 | IconButton.defaultProps = {
|
292 | disabled: false,
|
293 | disableTouchRipple: false,
|
294 | iconStyle: {},
|
295 | tooltipPosition: 'bottom-center',
|
296 | touch: false
|
297 | };
|
298 | IconButton.contextTypes = {
|
299 | muiTheme: _propTypes2.default.object.isRequired
|
300 | };
|
301 | IconButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
302 | |
303 |
|
304 |
|
305 | children: _propTypes2.default.node,
|
306 | |
307 |
|
308 |
|
309 | className: _propTypes2.default.string,
|
310 | |
311 |
|
312 |
|
313 | disableTouchRipple: _propTypes2.default.bool,
|
314 | |
315 |
|
316 |
|
317 | disabled: _propTypes2.default.bool,
|
318 | |
319 |
|
320 |
|
321 | hoveredStyle: _propTypes2.default.object,
|
322 | |
323 |
|
324 |
|
325 | href: _propTypes2.default.string,
|
326 | |
327 |
|
328 |
|
329 | iconClassName: _propTypes2.default.string,
|
330 | |
331 |
|
332 |
|
333 |
|
334 | iconStyle: _propTypes2.default.object,
|
335 |
|
336 | onBlur: _propTypes2.default.func,
|
337 | |
338 |
|
339 |
|
340 |
|
341 |
|
342 | onClick: _propTypes2.default.func,
|
343 |
|
344 | onFocus: _propTypes2.default.func,
|
345 | |
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 | onKeyboardFocus: _propTypes2.default.func,
|
352 |
|
353 | onMouseEnter: _propTypes2.default.func,
|
354 |
|
355 | onMouseLeave: _propTypes2.default.func,
|
356 |
|
357 | onMouseOut: _propTypes2.default.func,
|
358 |
|
359 | onTouchStart: _propTypes2.default.func,
|
360 | |
361 |
|
362 |
|
363 | style: _propTypes2.default.object,
|
364 | |
365 |
|
366 |
|
367 | tooltip: _propTypes2.default.node,
|
368 | |
369 |
|
370 |
|
371 |
|
372 |
|
373 | tooltipPosition: _propTypes4.default.cornersAndCenter,
|
374 | |
375 |
|
376 |
|
377 | tooltipStyles: _propTypes2.default.object,
|
378 | |
379 |
|
380 |
|
381 |
|
382 | touch: _propTypes2.default.bool
|
383 | } : {};
|
384 | exports.default = IconButton; |
\ | No newline at end of file |