451 lines
15 KiB
JavaScript
451 lines
15 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
|
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
|
|
var _simpleAssign = require('simple-assign');
|
|
|
|
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _reactEventListener = require('react-event-listener');
|
|
|
|
var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
|
|
|
|
var _keycode = require('keycode');
|
|
|
|
var _keycode2 = _interopRequireDefault(_keycode);
|
|
|
|
var _transitions = require('../styles/transitions');
|
|
|
|
var _transitions2 = _interopRequireDefault(_transitions);
|
|
|
|
var _FocusRipple = require('./FocusRipple');
|
|
|
|
var _FocusRipple2 = _interopRequireDefault(_FocusRipple);
|
|
|
|
var _TouchRipple = require('./TouchRipple');
|
|
|
|
var _TouchRipple2 = _interopRequireDefault(_TouchRipple);
|
|
|
|
var _Paper = require('./../Paper');
|
|
|
|
var _Paper2 = _interopRequireDefault(_Paper);
|
|
|
|
var _warning = require('warning');
|
|
|
|
var _warning2 = _interopRequireDefault(_warning);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function getStyles(props, context) {
|
|
var baseTheme = context.muiTheme.baseTheme;
|
|
|
|
|
|
return {
|
|
root: {
|
|
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
position: 'relative',
|
|
overflow: 'visible',
|
|
display: 'table',
|
|
height: 'auto',
|
|
width: '100%'
|
|
},
|
|
input: {
|
|
position: 'absolute',
|
|
cursor: 'inherit',
|
|
pointerEvents: 'all',
|
|
opacity: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 2,
|
|
left: 0,
|
|
boxSizing: 'border-box',
|
|
padding: 0,
|
|
margin: 0
|
|
},
|
|
controls: {
|
|
display: 'flex',
|
|
width: '100%',
|
|
height: '100%'
|
|
},
|
|
label: {
|
|
float: 'left',
|
|
position: 'relative',
|
|
display: 'block',
|
|
width: 'calc(100% - 60px)',
|
|
lineHeight: '24px',
|
|
color: baseTheme.palette.textColor,
|
|
fontFamily: baseTheme.fontFamily
|
|
},
|
|
wrap: {
|
|
transition: _transitions2.default.easeOut(),
|
|
float: 'left',
|
|
position: 'relative',
|
|
display: 'block',
|
|
flexShrink: 0,
|
|
width: 60 - baseTheme.spacing.desktopGutterLess,
|
|
marginRight: props.labelPosition === 'right' ? baseTheme.spacing.desktopGutterLess : 0,
|
|
marginLeft: props.labelPosition === 'left' ? baseTheme.spacing.desktopGutterLess : 0
|
|
},
|
|
ripple: {
|
|
color: props.rippleColor || baseTheme.palette.primary1Color,
|
|
height: '200%',
|
|
width: '200%',
|
|
top: -12,
|
|
left: -12
|
|
}
|
|
};
|
|
}
|
|
|
|
var EnhancedSwitch = function (_Component) {
|
|
(0, _inherits3.default)(EnhancedSwitch, _Component);
|
|
|
|
function EnhancedSwitch() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
(0, _classCallCheck3.default)(this, EnhancedSwitch);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedSwitch.__proto__ || (0, _getPrototypeOf2.default)(EnhancedSwitch)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
|
isKeyboardFocused: false
|
|
}, _this.handleChange = function (event) {
|
|
_this.tabPressed = false;
|
|
_this.setState({
|
|
isKeyboardFocused: false
|
|
});
|
|
|
|
var isInputChecked = _this.refs.checkbox.checked;
|
|
|
|
if (!_this.props.hasOwnProperty('checked') && _this.props.onParentShouldUpdate) {
|
|
_this.props.onParentShouldUpdate(isInputChecked);
|
|
}
|
|
|
|
if (_this.props.onSwitch) {
|
|
_this.props.onSwitch(event, isInputChecked);
|
|
}
|
|
}, _this.handleKeyDown = function (event) {
|
|
var code = (0, _keycode2.default)(event);
|
|
|
|
if (code === 'tab') {
|
|
_this.tabPressed = true;
|
|
}
|
|
if (_this.state.isKeyboardFocused && code === 'space') {
|
|
_this.handleChange(event);
|
|
}
|
|
}, _this.handleKeyUp = function (event) {
|
|
if (_this.state.isKeyboardFocused && (0, _keycode2.default)(event) === 'space') {
|
|
_this.handleChange(event);
|
|
}
|
|
}, _this.handleMouseDown = function (event) {
|
|
// only listen to left clicks
|
|
if (event.button === 0) {
|
|
_this.refs.touchRipple.start(event);
|
|
}
|
|
}, _this.handleMouseUp = function () {
|
|
_this.refs.touchRipple.end();
|
|
}, _this.handleMouseLeave = function () {
|
|
_this.refs.touchRipple.end();
|
|
}, _this.handleTouchStart = function (event) {
|
|
_this.refs.touchRipple.start(event);
|
|
}, _this.handleTouchEnd = function () {
|
|
_this.refs.touchRipple.end();
|
|
}, _this.handleBlur = function (event) {
|
|
_this.setState({
|
|
isKeyboardFocused: false
|
|
});
|
|
|
|
if (_this.props.onBlur) {
|
|
_this.props.onBlur(event);
|
|
}
|
|
}, _this.handleFocus = function (event) {
|
|
// setTimeout is needed becuase the focus event fires first
|
|
// Wait so that we can capture if this was a keyboard focus
|
|
// or touch focus
|
|
setTimeout(function () {
|
|
if (_this.tabPressed) {
|
|
_this.setState({
|
|
isKeyboardFocused: true
|
|
});
|
|
}
|
|
}, 150);
|
|
|
|
if (_this.props.onFocus) {
|
|
_this.props.onFocus(event);
|
|
}
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
|
}
|
|
|
|
(0, _createClass3.default)(EnhancedSwitch, [{
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
var inputNode = this.refs.checkbox;
|
|
if ((!this.props.switched || inputNode.checked !== this.props.switched) && this.props.onParentShouldUpdate) {
|
|
this.props.onParentShouldUpdate(inputNode.checked);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
var hasCheckedProp = nextProps.hasOwnProperty('checked');
|
|
var hasToggledProp = nextProps.hasOwnProperty('toggled');
|
|
var hasNewDefaultProp = nextProps.hasOwnProperty('defaultChecked') && nextProps.defaultChecked !== this.props.defaultChecked;
|
|
|
|
if (hasCheckedProp || hasToggledProp || hasNewDefaultProp) {
|
|
var switched = nextProps.checked || nextProps.toggled || nextProps.defaultChecked || false;
|
|
|
|
this.setState({
|
|
switched: switched
|
|
});
|
|
|
|
if (this.props.onParentShouldUpdate && switched !== this.props.switched) {
|
|
this.props.onParentShouldUpdate(switched);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'isSwitched',
|
|
value: function isSwitched() {
|
|
return this.refs.checkbox.checked;
|
|
}
|
|
|
|
// no callback here because there is no event
|
|
|
|
}, {
|
|
key: 'setSwitched',
|
|
value: function setSwitched(newSwitchedValue) {
|
|
if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
|
|
if (this.props.onParentShouldUpdate) {
|
|
this.props.onParentShouldUpdate(newSwitchedValue);
|
|
}
|
|
this.refs.checkbox.checked = newSwitchedValue;
|
|
} else {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Cannot call set method while checked is defined as a property.') : void 0;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getValue',
|
|
value: function getValue() {
|
|
return this.refs.checkbox.value;
|
|
}
|
|
|
|
// Checkbox inputs only use SPACE to change their state. Using ENTER will
|
|
// update the ui but not the input.
|
|
|
|
|
|
/**
|
|
* Because both the ripples and the checkbox input cannot share pointer
|
|
* events, the checkbox input takes control of pointer events and calls
|
|
* ripple animations manually.
|
|
*/
|
|
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _props = this.props,
|
|
name = _props.name,
|
|
value = _props.value,
|
|
iconStyle = _props.iconStyle,
|
|
inputStyle = _props.inputStyle,
|
|
inputType = _props.inputType,
|
|
label = _props.label,
|
|
labelStyle = _props.labelStyle,
|
|
labelPosition = _props.labelPosition,
|
|
onSwitch = _props.onSwitch,
|
|
onBlur = _props.onBlur,
|
|
onFocus = _props.onFocus,
|
|
onMouseUp = _props.onMouseUp,
|
|
onMouseDown = _props.onMouseDown,
|
|
onMouseLeave = _props.onMouseLeave,
|
|
onTouchStart = _props.onTouchStart,
|
|
onTouchEnd = _props.onTouchEnd,
|
|
onParentShouldUpdate = _props.onParentShouldUpdate,
|
|
disabled = _props.disabled,
|
|
disableTouchRipple = _props.disableTouchRipple,
|
|
disableFocusRipple = _props.disableFocusRipple,
|
|
className = _props.className,
|
|
rippleColor = _props.rippleColor,
|
|
rippleStyle = _props.rippleStyle,
|
|
style = _props.style,
|
|
switched = _props.switched,
|
|
switchElement = _props.switchElement,
|
|
thumbStyle = _props.thumbStyle,
|
|
trackStyle = _props.trackStyle,
|
|
other = (0, _objectWithoutProperties3.default)(_props, ['name', 'value', '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']);
|
|
var prepareStyles = this.context.muiTheme.prepareStyles;
|
|
|
|
var styles = getStyles(this.props, this.context);
|
|
var wrapStyles = (0, _simpleAssign2.default)(styles.wrap, iconStyle);
|
|
var mergedRippleStyle = (0, _simpleAssign2.default)(styles.ripple, rippleStyle);
|
|
|
|
if (thumbStyle) {
|
|
wrapStyles.marginLeft /= 2;
|
|
wrapStyles.marginRight /= 2;
|
|
}
|
|
|
|
var labelElement = label && _react2.default.createElement(
|
|
'label',
|
|
{ style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) },
|
|
label
|
|
);
|
|
|
|
var showTouchRipple = !disabled && !disableTouchRipple;
|
|
var showFocusRipple = !disabled && !disableFocusRipple;
|
|
|
|
var touchRipple = _react2.default.createElement(_TouchRipple2.default, {
|
|
ref: 'touchRipple',
|
|
key: 'touchRipple',
|
|
style: mergedRippleStyle,
|
|
color: mergedRippleStyle.color,
|
|
muiTheme: this.context.muiTheme,
|
|
centerRipple: true
|
|
});
|
|
|
|
var focusRipple = _react2.default.createElement(_FocusRipple2.default, {
|
|
key: 'focusRipple',
|
|
innerStyle: mergedRippleStyle,
|
|
color: mergedRippleStyle.color,
|
|
muiTheme: this.context.muiTheme,
|
|
show: this.state.isKeyboardFocused
|
|
});
|
|
|
|
var ripples = [showTouchRipple ? touchRipple : null, showFocusRipple ? focusRipple : null];
|
|
|
|
var inputElement = _react2.default.createElement('input', (0, _extends3.default)({}, other, {
|
|
ref: 'checkbox',
|
|
type: inputType,
|
|
style: prepareStyles((0, _simpleAssign2.default)(styles.input, inputStyle)),
|
|
name: name,
|
|
value: value,
|
|
disabled: disabled,
|
|
onBlur: this.handleBlur,
|
|
onFocus: this.handleFocus,
|
|
onChange: this.handleChange,
|
|
onMouseUp: showTouchRipple && this.handleMouseUp,
|
|
onMouseDown: showTouchRipple && this.handleMouseDown,
|
|
onMouseLeave: showTouchRipple && this.handleMouseLeave,
|
|
onTouchStart: showTouchRipple && this.handleTouchStart,
|
|
onTouchEnd: showTouchRipple && this.handleTouchEnd
|
|
}));
|
|
|
|
// If toggle component (indicated by whether the style includes thumb) manually lay out
|
|
// elements in order to nest ripple elements
|
|
var switchOrThumbElement = !thumbStyle ? _react2.default.createElement(
|
|
'div',
|
|
{ style: prepareStyles(wrapStyles) },
|
|
switchElement,
|
|
ripples
|
|
) : _react2.default.createElement(
|
|
'div',
|
|
{ style: prepareStyles(wrapStyles) },
|
|
_react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, trackStyle)) }),
|
|
_react2.default.createElement(
|
|
_Paper2.default,
|
|
{ style: thumbStyle, zDepth: 1, circle: true },
|
|
' ',
|
|
ripples,
|
|
' '
|
|
)
|
|
);
|
|
|
|
var elementsInOrder = labelPosition === 'right' ? _react2.default.createElement(
|
|
'div',
|
|
{ style: styles.controls },
|
|
switchOrThumbElement,
|
|
labelElement
|
|
) : _react2.default.createElement(
|
|
'div',
|
|
{ style: styles.controls },
|
|
labelElement,
|
|
switchOrThumbElement
|
|
);
|
|
|
|
return _react2.default.createElement(
|
|
'div',
|
|
{ ref: 'root', className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) },
|
|
_react2.default.createElement(_reactEventListener2.default, {
|
|
target: 'window',
|
|
onKeyDown: this.handleKeyDown,
|
|
onKeyUp: this.handleKeyUp
|
|
}),
|
|
inputElement,
|
|
elementsInOrder
|
|
);
|
|
}
|
|
}]);
|
|
return EnhancedSwitch;
|
|
}(_react.Component);
|
|
|
|
EnhancedSwitch.contextTypes = {
|
|
muiTheme: _react.PropTypes.object.isRequired
|
|
};
|
|
process.env.NODE_ENV !== "production" ? EnhancedSwitch.propTypes = {
|
|
checked: _react.PropTypes.bool,
|
|
className: _react.PropTypes.string,
|
|
defaultChecked: _react.PropTypes.bool,
|
|
disableFocusRipple: _react.PropTypes.bool,
|
|
disableTouchRipple: _react.PropTypes.bool,
|
|
disabled: _react.PropTypes.bool,
|
|
iconStyle: _react.PropTypes.object,
|
|
inputStyle: _react.PropTypes.object,
|
|
inputType: _react.PropTypes.string.isRequired,
|
|
label: _react.PropTypes.node,
|
|
labelPosition: _react.PropTypes.oneOf(['left', 'right']),
|
|
labelStyle: _react.PropTypes.object,
|
|
name: _react.PropTypes.string,
|
|
onBlur: _react.PropTypes.func,
|
|
onFocus: _react.PropTypes.func,
|
|
onMouseDown: _react.PropTypes.func,
|
|
onMouseLeave: _react.PropTypes.func,
|
|
onMouseUp: _react.PropTypes.func,
|
|
onParentShouldUpdate: _react.PropTypes.func,
|
|
onSwitch: _react.PropTypes.func,
|
|
onTouchEnd: _react.PropTypes.func,
|
|
onTouchStart: _react.PropTypes.func,
|
|
rippleColor: _react.PropTypes.string,
|
|
rippleStyle: _react.PropTypes.object,
|
|
style: _react.PropTypes.object,
|
|
switchElement: _react.PropTypes.element.isRequired,
|
|
switched: _react.PropTypes.bool.isRequired,
|
|
thumbStyle: _react.PropTypes.object,
|
|
trackStyle: _react.PropTypes.object,
|
|
value: _react.PropTypes.any
|
|
} : void 0;
|
|
exports.default = EnhancedSwitch; |