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 _events = require('../utils/events');
|
48 |
|
49 | var _events2 = _interopRequireDefault(_events);
|
50 |
|
51 | var _keycode = require('keycode');
|
52 |
|
53 | var _keycode2 = _interopRequireDefault(_keycode);
|
54 |
|
55 | var _FocusRipple = require('./FocusRipple');
|
56 |
|
57 | var _FocusRipple2 = _interopRequireDefault(_FocusRipple);
|
58 |
|
59 | var _TouchRipple = require('./TouchRipple');
|
60 |
|
61 | var _TouchRipple2 = _interopRequireDefault(_TouchRipple);
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
64 |
|
65 | var styleInjected = false;
|
66 | var listening = false;
|
67 | var tabPressed = false;
|
68 |
|
69 | function injectStyle() {
|
70 | if (!styleInjected) {
|
71 |
|
72 | var style = document.createElement('style');
|
73 | style.innerHTML = '\n button::-moz-focus-inner,\n input::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n ';
|
74 |
|
75 | document.body.appendChild(style);
|
76 | styleInjected = true;
|
77 | }
|
78 | }
|
79 |
|
80 | function listenForTabPresses() {
|
81 | if (!listening) {
|
82 | _events2.default.on(window, 'keydown', function (event) {
|
83 | tabPressed = (0, _keycode2.default)(event) === 'tab';
|
84 | });
|
85 | listening = true;
|
86 | }
|
87 | }
|
88 |
|
89 | var EnhancedButton = function (_Component) {
|
90 | (0, _inherits3.default)(EnhancedButton, _Component);
|
91 |
|
92 | function EnhancedButton() {
|
93 | var _ref;
|
94 |
|
95 | var _temp, _this, _ret;
|
96 |
|
97 | (0, _classCallCheck3.default)(this, EnhancedButton);
|
98 |
|
99 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
100 | args[_key] = arguments[_key];
|
101 | }
|
102 |
|
103 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedButton.__proto__ || (0, _getPrototypeOf2.default)(EnhancedButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
104 | isKeyboardFocused: false
|
105 | }, _this.handleKeyDown = function (event) {
|
106 | if (!_this.props.disabled && !_this.props.disableKeyboardFocus) {
|
107 | if ((0, _keycode2.default)(event) === 'esc' && _this.state.isKeyboardFocused) {
|
108 | _this.removeKeyboardFocus(event);
|
109 | }
|
110 | }
|
111 | _this.props.onKeyDown(event);
|
112 | }, _this.handleKeyUp = function (event) {
|
113 | _this.props.onKeyUp(event);
|
114 | }, _this.handleBlur = function (event) {
|
115 | _this.cancelFocusTimeout();
|
116 | _this.removeKeyboardFocus(event);
|
117 | _this.props.onBlur(event);
|
118 | }, _this.handleFocus = function (event) {
|
119 | if (event) event.persist();
|
120 | if (!_this.props.disabled && !_this.props.disableKeyboardFocus) {
|
121 |
|
122 |
|
123 |
|
124 | _this.focusTimeout = setTimeout(function () {
|
125 | if (tabPressed) {
|
126 | _this.setKeyboardFocus(event);
|
127 | tabPressed = false;
|
128 | }
|
129 | }, 150);
|
130 |
|
131 | _this.props.onFocus(event);
|
132 | }
|
133 | }, _this.handleClick = function (event) {
|
134 | _this.cancelFocusTimeout();
|
135 | if (!_this.props.disabled) {
|
136 | tabPressed = false;
|
137 | _this.removeKeyboardFocus(event);
|
138 | _this.props.onClick(event);
|
139 | }
|
140 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
141 | }
|
142 |
|
143 | (0, _createClass3.default)(EnhancedButton, [{
|
144 | key: 'componentWillMount',
|
145 | value: function componentWillMount() {
|
146 | var _props = this.props,
|
147 | disabled = _props.disabled,
|
148 | disableKeyboardFocus = _props.disableKeyboardFocus,
|
149 | keyboardFocused = _props.keyboardFocused;
|
150 |
|
151 | if (!disabled && keyboardFocused && !disableKeyboardFocus) {
|
152 | this.setState({ isKeyboardFocused: true });
|
153 | }
|
154 | }
|
155 | }, {
|
156 | key: 'componentDidMount',
|
157 | value: function componentDidMount() {
|
158 | injectStyle();
|
159 | listenForTabPresses();
|
160 | if (this.state.isKeyboardFocused) {
|
161 | this.button.focus();
|
162 | this.props.onKeyboardFocus(null, true);
|
163 | }
|
164 | }
|
165 | }, {
|
166 | key: 'componentWillReceiveProps',
|
167 | value: function componentWillReceiveProps(nextProps) {
|
168 | if ((nextProps.disabled || nextProps.disableKeyboardFocus) && this.state.isKeyboardFocused) {
|
169 | this.setState({ isKeyboardFocused: false });
|
170 | if (nextProps.onKeyboardFocus) {
|
171 | nextProps.onKeyboardFocus(null, false);
|
172 | }
|
173 | }
|
174 | }
|
175 | }, {
|
176 | key: 'componentWillUnmount',
|
177 | value: function componentWillUnmount() {
|
178 | if (this.focusTimeout) {
|
179 | clearTimeout(this.focusTimeout);
|
180 | }
|
181 | }
|
182 | }, {
|
183 | key: 'isKeyboardFocused',
|
184 | value: function isKeyboardFocused() {
|
185 | return this.state.isKeyboardFocused;
|
186 | }
|
187 | }, {
|
188 | key: 'removeKeyboardFocus',
|
189 | value: function removeKeyboardFocus(event) {
|
190 | if (this.state.isKeyboardFocused) {
|
191 | this.setState({ isKeyboardFocused: false });
|
192 | this.props.onKeyboardFocus(event, false);
|
193 | }
|
194 | }
|
195 | }, {
|
196 | key: 'setKeyboardFocus',
|
197 | value: function setKeyboardFocus(event) {
|
198 | if (!this.state.isKeyboardFocused) {
|
199 | this.setState({ isKeyboardFocused: true });
|
200 | this.props.onKeyboardFocus(event, true);
|
201 | }
|
202 | }
|
203 | }, {
|
204 | key: 'cancelFocusTimeout',
|
205 | value: function cancelFocusTimeout() {
|
206 | if (this.focusTimeout) {
|
207 | clearTimeout(this.focusTimeout);
|
208 | this.focusTimeout = null;
|
209 | }
|
210 | }
|
211 | }, {
|
212 | key: 'createButtonChildren',
|
213 | value: function createButtonChildren() {
|
214 | var _props2 = this.props,
|
215 | centerRipple = _props2.centerRipple,
|
216 | children = _props2.children,
|
217 | disabled = _props2.disabled,
|
218 | disableFocusRipple = _props2.disableFocusRipple,
|
219 | disableKeyboardFocus = _props2.disableKeyboardFocus,
|
220 | disableTouchRipple = _props2.disableTouchRipple,
|
221 | focusRippleColor = _props2.focusRippleColor,
|
222 | focusRippleOpacity = _props2.focusRippleOpacity,
|
223 | touchRippleColor = _props2.touchRippleColor,
|
224 | touchRippleOpacity = _props2.touchRippleOpacity;
|
225 | var isKeyboardFocused = this.state.isKeyboardFocused;
|
226 |
|
227 |
|
228 |
|
229 | var focusRipple = isKeyboardFocused && !disabled && !disableFocusRipple && !disableKeyboardFocus ? _react2.default.createElement(_FocusRipple2.default, {
|
230 | color: focusRippleColor,
|
231 | opacity: focusRippleOpacity,
|
232 | show: isKeyboardFocused,
|
233 | style: {
|
234 | overflow: 'hidden'
|
235 | },
|
236 | key: 'focusRipple'
|
237 | }) : undefined;
|
238 |
|
239 |
|
240 | var touchRipple = !disabled && !disableTouchRipple ? _react2.default.createElement(
|
241 | _TouchRipple2.default,
|
242 | {
|
243 | centerRipple: centerRipple,
|
244 | color: touchRippleColor,
|
245 | opacity: touchRippleOpacity,
|
246 | key: 'touchRipple'
|
247 | },
|
248 | children
|
249 | ) : undefined;
|
250 |
|
251 | return [focusRipple, touchRipple, touchRipple ? undefined : children];
|
252 | }
|
253 | }, {
|
254 | key: 'render',
|
255 | value: function render() {
|
256 | var _this2 = this;
|
257 |
|
258 | var _props3 = this.props,
|
259 | centerRipple = _props3.centerRipple,
|
260 | children = _props3.children,
|
261 | containerElement = _props3.containerElement,
|
262 | disabled = _props3.disabled,
|
263 | disableFocusRipple = _props3.disableFocusRipple,
|
264 | disableKeyboardFocus = _props3.disableKeyboardFocus,
|
265 | disableTouchRipple = _props3.disableTouchRipple,
|
266 | focusRippleColor = _props3.focusRippleColor,
|
267 | focusRippleOpacity = _props3.focusRippleOpacity,
|
268 | href = _props3.href,
|
269 | keyboardFocused = _props3.keyboardFocused,
|
270 | touchRippleColor = _props3.touchRippleColor,
|
271 | touchRippleOpacity = _props3.touchRippleOpacity,
|
272 | onBlur = _props3.onBlur,
|
273 | onClick = _props3.onClick,
|
274 | onFocus = _props3.onFocus,
|
275 | onKeyUp = _props3.onKeyUp,
|
276 | onKeyDown = _props3.onKeyDown,
|
277 | onKeyboardFocus = _props3.onKeyboardFocus,
|
278 | style = _props3.style,
|
279 | tabIndex = _props3.tabIndex,
|
280 | type = _props3.type,
|
281 | other = (0, _objectWithoutProperties3.default)(_props3, ['centerRipple', 'children', 'containerElement', 'disabled', 'disableFocusRipple', 'disableKeyboardFocus', 'disableTouchRipple', 'focusRippleColor', 'focusRippleOpacity', 'href', 'keyboardFocused', 'touchRippleColor', 'touchRippleOpacity', 'onBlur', 'onClick', 'onFocus', 'onKeyUp', 'onKeyDown', 'onKeyboardFocus', 'style', 'tabIndex', 'type']);
|
282 | var _context$muiTheme = this.context.muiTheme,
|
283 | prepareStyles = _context$muiTheme.prepareStyles,
|
284 | enhancedButton = _context$muiTheme.enhancedButton;
|
285 |
|
286 |
|
287 | var mergedStyles = (0, _simpleAssign2.default)({
|
288 | border: 10,
|
289 | boxSizing: 'border-box',
|
290 | display: 'inline-block',
|
291 | fontFamily: this.context.muiTheme.baseTheme.fontFamily,
|
292 | WebkitTapHighlightColor: enhancedButton.tapHighlightColor,
|
293 | cursor: disabled ? 'default' : 'pointer',
|
294 | textDecoration: 'none',
|
295 | margin: 0,
|
296 | padding: 0,
|
297 | outline: 'none',
|
298 | fontSize: 'inherit',
|
299 | fontWeight: 'inherit',
|
300 | position: 'relative',
|
301 | verticalAlign: href ? 'middle' : null
|
302 | }, style);
|
303 |
|
304 |
|
305 | if (!mergedStyles.backgroundColor && !mergedStyles.background) {
|
306 | mergedStyles.background = 'none';
|
307 | }
|
308 |
|
309 | if (disabled && href) {
|
310 | return _react2.default.createElement(
|
311 | 'span',
|
312 | (0, _extends3.default)({}, other, {
|
313 | style: mergedStyles
|
314 | }),
|
315 | children
|
316 | );
|
317 | }
|
318 |
|
319 | var buttonProps = (0, _extends3.default)({}, other, {
|
320 | style: prepareStyles(mergedStyles),
|
321 | ref: function ref(node) {
|
322 | return _this2.button = node;
|
323 | },
|
324 | disabled: disabled,
|
325 | onBlur: this.handleBlur,
|
326 | onFocus: this.handleFocus,
|
327 | onKeyUp: this.handleKeyUp,
|
328 | onKeyDown: this.handleKeyDown,
|
329 | onClick: this.handleClick,
|
330 | tabIndex: disabled || disableKeyboardFocus ? -1 : tabIndex
|
331 | });
|
332 |
|
333 | if (href) buttonProps.href = href;
|
334 |
|
335 | var buttonChildren = this.createButtonChildren();
|
336 |
|
337 | if (_react2.default.isValidElement(containerElement)) {
|
338 | return _react2.default.cloneElement(containerElement, buttonProps, buttonChildren);
|
339 | }
|
340 |
|
341 | if (!href && containerElement === 'button') {
|
342 | buttonProps.type = type;
|
343 | }
|
344 |
|
345 | return _react2.default.createElement(href ? 'a' : containerElement, buttonProps, buttonChildren);
|
346 | }
|
347 | }]);
|
348 | return EnhancedButton;
|
349 | }(_react.Component);
|
350 |
|
351 | EnhancedButton.defaultProps = {
|
352 | containerElement: 'button',
|
353 | onBlur: function onBlur() {},
|
354 | onClick: function onClick() {},
|
355 | onFocus: function onFocus() {},
|
356 | onKeyDown: function onKeyDown() {},
|
357 | onKeyUp: function onKeyUp() {},
|
358 | onKeyboardFocus: function onKeyboardFocus() {},
|
359 | tabIndex: 0,
|
360 | type: 'button'
|
361 | };
|
362 | EnhancedButton.contextTypes = {
|
363 | muiTheme: _propTypes2.default.object.isRequired
|
364 | };
|
365 | EnhancedButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
366 | centerRipple: _propTypes2.default.bool,
|
367 | children: _propTypes2.default.node,
|
368 | containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
|
369 | disableFocusRipple: _propTypes2.default.bool,
|
370 | disableKeyboardFocus: _propTypes2.default.bool,
|
371 | disableTouchRipple: _propTypes2.default.bool,
|
372 | disabled: _propTypes2.default.bool,
|
373 | focusRippleColor: _propTypes2.default.string,
|
374 | focusRippleOpacity: _propTypes2.default.number,
|
375 | href: _propTypes2.default.string,
|
376 | keyboardFocused: _propTypes2.default.bool,
|
377 | onBlur: _propTypes2.default.func,
|
378 | onClick: _propTypes2.default.func,
|
379 | onFocus: _propTypes2.default.func,
|
380 | onKeyDown: _propTypes2.default.func,
|
381 | onKeyUp: _propTypes2.default.func,
|
382 | onKeyboardFocus: _propTypes2.default.func,
|
383 | style: _propTypes2.default.object,
|
384 | tabIndex: _propTypes2.default.number,
|
385 | touchRippleColor: _propTypes2.default.string,
|
386 | touchRippleOpacity: _propTypes2.default.number,
|
387 | type: _propTypes2.default.string
|
388 | } : {};
|
389 | exports.default = EnhancedButton; |
\ | No newline at end of file |