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 _reactEventListener = require('react-event-listener');
|
48 |
|
49 | var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
|
50 |
|
51 | var _keycode = require('keycode');
|
52 |
|
53 | var _keycode2 = _interopRequireDefault(_keycode);
|
54 |
|
55 | var _transitions = require('../styles/transitions');
|
56 |
|
57 | var _transitions2 = _interopRequireDefault(_transitions);
|
58 |
|
59 | var _FocusRipple = require('./FocusRipple');
|
60 |
|
61 | var _FocusRipple2 = _interopRequireDefault(_FocusRipple);
|
62 |
|
63 | var _TouchRipple = require('./TouchRipple');
|
64 |
|
65 | var _TouchRipple2 = _interopRequireDefault(_TouchRipple);
|
66 |
|
67 | var _Paper = require('./../Paper');
|
68 |
|
69 | var _Paper2 = _interopRequireDefault(_Paper);
|
70 |
|
71 | var _warning = require('warning');
|
72 |
|
73 | var _warning2 = _interopRequireDefault(_warning);
|
74 |
|
75 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
76 |
|
77 | function getStyles(props, context) {
|
78 | var baseTheme = context.muiTheme.baseTheme;
|
79 |
|
80 |
|
81 | return {
|
82 | root: {
|
83 | cursor: props.disabled ? 'not-allowed' : 'pointer',
|
84 | position: 'relative',
|
85 | overflow: 'visible',
|
86 | display: 'table',
|
87 | height: 'auto',
|
88 | width: '100%'
|
89 | },
|
90 | input: {
|
91 | position: 'absolute',
|
92 | cursor: 'inherit',
|
93 | pointerEvents: 'all',
|
94 | opacity: 0,
|
95 | width: '100%',
|
96 | height: '100%',
|
97 | zIndex: 2,
|
98 | left: 0,
|
99 | boxSizing: 'border-box',
|
100 | padding: 0,
|
101 | margin: 0
|
102 | },
|
103 | controls: {
|
104 | display: 'flex',
|
105 | width: '100%',
|
106 | height: '100%'
|
107 | },
|
108 | label: {
|
109 | float: 'left',
|
110 | position: 'relative',
|
111 | display: 'block',
|
112 | width: 'calc(100% - 60px)',
|
113 | lineHeight: '24px',
|
114 | color: baseTheme.palette.textColor,
|
115 | fontFamily: baseTheme.fontFamily
|
116 | },
|
117 | wrap: {
|
118 | transition: _transitions2.default.easeOut(),
|
119 | float: 'left',
|
120 | position: 'relative',
|
121 | display: 'block',
|
122 | flexShrink: 0,
|
123 | width: 60 - baseTheme.spacing.desktopGutterLess,
|
124 | marginRight: props.labelPosition === 'right' ? baseTheme.spacing.desktopGutterLess : 0,
|
125 | marginLeft: props.labelPosition === 'left' ? baseTheme.spacing.desktopGutterLess : 0
|
126 | },
|
127 | ripple: {
|
128 | color: props.rippleColor || baseTheme.palette.primary1Color,
|
129 | height: '200%',
|
130 | width: '200%',
|
131 | top: -12,
|
132 | left: -12
|
133 | }
|
134 | };
|
135 | }
|
136 |
|
137 | var EnhancedSwitch = function (_Component) {
|
138 | (0, _inherits3.default)(EnhancedSwitch, _Component);
|
139 |
|
140 | function EnhancedSwitch() {
|
141 | var _ref;
|
142 |
|
143 | var _temp, _this, _ret;
|
144 |
|
145 | (0, _classCallCheck3.default)(this, EnhancedSwitch);
|
146 |
|
147 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
148 | args[_key] = arguments[_key];
|
149 | }
|
150 |
|
151 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedSwitch.__proto__ || (0, _getPrototypeOf2.default)(EnhancedSwitch)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
152 | isKeyboardFocused: false
|
153 | }, _this.handleChange = function (event) {
|
154 | _this.tabPressed = false;
|
155 | _this.setState({
|
156 | isKeyboardFocused: false
|
157 | });
|
158 |
|
159 | var isInputChecked = _this.refs.checkbox.checked;
|
160 |
|
161 | if (!_this.props.hasOwnProperty('checked') && _this.props.onParentShouldUpdate) {
|
162 | _this.props.onParentShouldUpdate(isInputChecked);
|
163 | }
|
164 |
|
165 | if (_this.props.onSwitch) {
|
166 | _this.props.onSwitch(event, isInputChecked);
|
167 | }
|
168 | }, _this.handleKeyDown = function (event) {
|
169 | var code = (0, _keycode2.default)(event);
|
170 |
|
171 | if (code === 'tab') {
|
172 | _this.tabPressed = true;
|
173 | }
|
174 | if (_this.state.isKeyboardFocused && code === 'space') {
|
175 | _this.handleChange(event);
|
176 | }
|
177 | }, _this.handleKeyUp = function (event) {
|
178 | if (_this.state.isKeyboardFocused && (0, _keycode2.default)(event) === 'space') {
|
179 | _this.handleChange(event);
|
180 | }
|
181 | }, _this.handleMouseDown = function (event) {
|
182 |
|
183 | if (event.button === 0) {
|
184 | _this.refs.touchRipple.start(event);
|
185 | }
|
186 | }, _this.handleMouseUp = function () {
|
187 | _this.refs.touchRipple.end();
|
188 | }, _this.handleMouseLeave = function () {
|
189 | _this.refs.touchRipple.end();
|
190 | }, _this.handleTouchStart = function (event) {
|
191 | _this.refs.touchRipple.start(event);
|
192 | }, _this.handleTouchEnd = function () {
|
193 | _this.refs.touchRipple.end();
|
194 | }, _this.handleBlur = function (event) {
|
195 | _this.setState({
|
196 | isKeyboardFocused: false
|
197 | });
|
198 |
|
199 | if (_this.props.onBlur) {
|
200 | _this.props.onBlur(event);
|
201 | }
|
202 | }, _this.handleFocus = function (event) {
|
203 |
|
204 |
|
205 |
|
206 | setTimeout(function () {
|
207 | if (_this.tabPressed) {
|
208 | _this.setState({
|
209 | isKeyboardFocused: true
|
210 | });
|
211 | }
|
212 | }, 150);
|
213 |
|
214 | if (_this.props.onFocus) {
|
215 | _this.props.onFocus(event);
|
216 | }
|
217 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
218 | }
|
219 |
|
220 | (0, _createClass3.default)(EnhancedSwitch, [{
|
221 | key: 'componentWillMount',
|
222 | value: function componentWillMount() {
|
223 | this.componentWillReceiveProps(this.props);
|
224 | }
|
225 | }, {
|
226 | key: 'componentDidMount',
|
227 | value: function componentDidMount() {
|
228 | var inputNode = this.refs.checkbox;
|
229 | if ((!this.props.switched || inputNode.checked !== this.props.switched) && this.props.onParentShouldUpdate) {
|
230 | this.props.onParentShouldUpdate(inputNode.checked);
|
231 | }
|
232 | }
|
233 | }, {
|
234 | key: 'componentWillReceiveProps',
|
235 | value: function componentWillReceiveProps(nextProps) {
|
236 | var hasCheckedProp = nextProps.hasOwnProperty('checked');
|
237 | var hasNewDefaultProp = nextProps.hasOwnProperty('defaultChecked') && nextProps.defaultChecked !== this.props.defaultChecked;
|
238 |
|
239 | if (hasCheckedProp || hasNewDefaultProp) {
|
240 | var switched = nextProps.checked || nextProps.defaultChecked || false;
|
241 |
|
242 | this.setState({
|
243 | switched: switched
|
244 | });
|
245 |
|
246 | if (this.props.onParentShouldUpdate && switched !== this.props.switched) {
|
247 | this.props.onParentShouldUpdate(switched);
|
248 | }
|
249 | }
|
250 | }
|
251 | }, {
|
252 | key: 'isSwitched',
|
253 | value: function isSwitched() {
|
254 | return this.refs.checkbox.checked;
|
255 | }
|
256 |
|
257 |
|
258 |
|
259 | }, {
|
260 | key: 'setSwitched',
|
261 | value: function setSwitched(newSwitchedValue) {
|
262 | if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
|
263 | if (this.props.onParentShouldUpdate) {
|
264 | this.props.onParentShouldUpdate(newSwitchedValue);
|
265 | }
|
266 | this.refs.checkbox.checked = newSwitchedValue;
|
267 | } else {
|
268 | process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Cannot call set method while checked is defined as a property.') : void 0;
|
269 | }
|
270 | }
|
271 | }, {
|
272 | key: 'getValue',
|
273 | value: function getValue() {
|
274 | return this.refs.checkbox.value;
|
275 | }
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 | |
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 | }, {
|
288 | key: 'render',
|
289 | value: function render() {
|
290 | var _props = this.props,
|
291 | name = _props.name,
|
292 | value = _props.value,
|
293 | checked = _props.checked,
|
294 | iconStyle = _props.iconStyle,
|
295 | inputStyle = _props.inputStyle,
|
296 | inputType = _props.inputType,
|
297 | label = _props.label,
|
298 | labelStyle = _props.labelStyle,
|
299 | labelPosition = _props.labelPosition,
|
300 | onSwitch = _props.onSwitch,
|
301 | onBlur = _props.onBlur,
|
302 | onFocus = _props.onFocus,
|
303 | onMouseUp = _props.onMouseUp,
|
304 | onMouseDown = _props.onMouseDown,
|
305 | onMouseLeave = _props.onMouseLeave,
|
306 | onTouchStart = _props.onTouchStart,
|
307 | onTouchEnd = _props.onTouchEnd,
|
308 | onParentShouldUpdate = _props.onParentShouldUpdate,
|
309 | disabled = _props.disabled,
|
310 | disableTouchRipple = _props.disableTouchRipple,
|
311 | disableFocusRipple = _props.disableFocusRipple,
|
312 | className = _props.className,
|
313 | rippleColor = _props.rippleColor,
|
314 | rippleStyle = _props.rippleStyle,
|
315 | style = _props.style,
|
316 | switched = _props.switched,
|
317 | switchElement = _props.switchElement,
|
318 | thumbStyle = _props.thumbStyle,
|
319 | trackStyle = _props.trackStyle,
|
320 | other = (0, _objectWithoutProperties3.default)(_props, ['name', 'value', 'checked', 'iconStyle', 'inputStyle', 'inputType', 'label', 'labelStyle', 'labelPosition', 'onSwitch', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'onParentShouldUpdate', 'disabled', 'disableTouchRipple', 'disableFocusRipple', 'className', 'rippleColor', 'rippleStyle', 'style', 'switched', 'switchElement', 'thumbStyle', 'trackStyle']);
|
321 | var prepareStyles = this.context.muiTheme.prepareStyles;
|
322 |
|
323 | var styles = getStyles(this.props, this.context);
|
324 | var wrapStyles = (0, _simpleAssign2.default)(styles.wrap, iconStyle);
|
325 | var mergedRippleStyle = (0, _simpleAssign2.default)(styles.ripple, rippleStyle);
|
326 |
|
327 | if (thumbStyle) {
|
328 | wrapStyles.marginLeft /= 2;
|
329 | wrapStyles.marginRight /= 2;
|
330 | }
|
331 |
|
332 | var labelElement = label && _react2.default.createElement(
|
333 | 'label',
|
334 | { style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) },
|
335 | label
|
336 | );
|
337 |
|
338 | var showTouchRipple = !disabled && !disableTouchRipple;
|
339 | var showFocusRipple = !disabled && !disableFocusRipple;
|
340 |
|
341 | var touchRipple = _react2.default.createElement(_TouchRipple2.default, {
|
342 | ref: 'touchRipple',
|
343 | key: 'touchRipple',
|
344 | style: mergedRippleStyle,
|
345 | color: mergedRippleStyle.color,
|
346 | muiTheme: this.context.muiTheme,
|
347 | centerRipple: true
|
348 | });
|
349 |
|
350 | var focusRipple = _react2.default.createElement(_FocusRipple2.default, {
|
351 | key: 'focusRipple',
|
352 | innerStyle: mergedRippleStyle,
|
353 | color: mergedRippleStyle.color,
|
354 | muiTheme: this.context.muiTheme,
|
355 | show: this.state.isKeyboardFocused
|
356 | });
|
357 |
|
358 | var ripples = [showTouchRipple ? touchRipple : null, showFocusRipple ? focusRipple : null];
|
359 |
|
360 | var touchHandlers = showTouchRipple ? {
|
361 | onMouseUp: this.handleMouseUp,
|
362 | onMouseDown: this.handleMouseDown,
|
363 | onMouseLeave: this.handleMouseLeave,
|
364 | onTouchStart: this.handleTouchStart,
|
365 | onTouchEnd: this.handleTouchEnd
|
366 | } : {};
|
367 |
|
368 | var inputElement = _react2.default.createElement('input', (0, _extends3.default)({}, other, {
|
369 | ref: 'checkbox',
|
370 | type: inputType,
|
371 | style: prepareStyles((0, _simpleAssign2.default)(styles.input, inputStyle)),
|
372 | name: name,
|
373 | value: value,
|
374 | checked: this.state.switched,
|
375 | disabled: disabled,
|
376 | onBlur: this.handleBlur,
|
377 | onFocus: this.handleFocus,
|
378 | onChange: this.handleChange
|
379 | }, touchHandlers));
|
380 |
|
381 |
|
382 |
|
383 | var switchOrThumbElement = !thumbStyle ? _react2.default.createElement(
|
384 | 'div',
|
385 | { style: prepareStyles(wrapStyles) },
|
386 | switchElement,
|
387 | ripples
|
388 | ) : _react2.default.createElement(
|
389 | 'div',
|
390 | { style: prepareStyles(wrapStyles) },
|
391 | _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, trackStyle)) }),
|
392 | _react2.default.createElement(
|
393 | _Paper2.default,
|
394 | { style: thumbStyle, zDepth: 1, circle: true },
|
395 | ' ',
|
396 | ripples,
|
397 | ' '
|
398 | )
|
399 | );
|
400 |
|
401 | var elementsInOrder = labelPosition === 'right' ? _react2.default.createElement(
|
402 | 'div',
|
403 | { style: styles.controls },
|
404 | switchOrThumbElement,
|
405 | labelElement
|
406 | ) : _react2.default.createElement(
|
407 | 'div',
|
408 | { style: styles.controls },
|
409 | labelElement,
|
410 | switchOrThumbElement
|
411 | );
|
412 |
|
413 | return _react2.default.createElement(
|
414 | 'div',
|
415 | { ref: 'root', className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) },
|
416 | _react2.default.createElement(_reactEventListener2.default, {
|
417 | target: 'window',
|
418 | onKeyDown: this.handleKeyDown,
|
419 | onKeyUp: this.handleKeyUp
|
420 | }),
|
421 | inputElement,
|
422 | elementsInOrder
|
423 | );
|
424 | }
|
425 | }]);
|
426 | return EnhancedSwitch;
|
427 | }(_react.Component);
|
428 |
|
429 | EnhancedSwitch.contextTypes = {
|
430 | muiTheme: _propTypes2.default.object.isRequired
|
431 | };
|
432 | EnhancedSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
|
433 | checked: _propTypes2.default.bool,
|
434 | className: _propTypes2.default.string,
|
435 | defaultChecked: _propTypes2.default.bool,
|
436 | disableFocusRipple: _propTypes2.default.bool,
|
437 | disableTouchRipple: _propTypes2.default.bool,
|
438 | disabled: _propTypes2.default.bool,
|
439 | iconStyle: _propTypes2.default.object,
|
440 | inputStyle: _propTypes2.default.object,
|
441 | inputType: _propTypes2.default.string.isRequired,
|
442 | label: _propTypes2.default.node,
|
443 | labelPosition: _propTypes2.default.oneOf(['left', 'right']),
|
444 | labelStyle: _propTypes2.default.object,
|
445 | name: _propTypes2.default.string,
|
446 | onBlur: _propTypes2.default.func,
|
447 | onFocus: _propTypes2.default.func,
|
448 | onMouseDown: _propTypes2.default.func,
|
449 | onMouseLeave: _propTypes2.default.func,
|
450 | onMouseUp: _propTypes2.default.func,
|
451 | onParentShouldUpdate: _propTypes2.default.func,
|
452 | onSwitch: _propTypes2.default.func,
|
453 | onTouchEnd: _propTypes2.default.func,
|
454 | onTouchStart: _propTypes2.default.func,
|
455 | rippleColor: _propTypes2.default.string,
|
456 | rippleStyle: _propTypes2.default.object,
|
457 | style: _propTypes2.default.object,
|
458 | switchElement: _propTypes2.default.element.isRequired,
|
459 | switched: _propTypes2.default.bool.isRequired,
|
460 | thumbStyle: _propTypes2.default.object,
|
461 | trackStyle: _propTypes2.default.object,
|
462 | value: _propTypes2.default.any
|
463 | } : {};
|
464 | exports.default = EnhancedSwitch; |
\ | No newline at end of file |