Completely updated React, fixed #11, (hopefully)
This commit is contained in:
386
goTorrentWebUI/node_modules/material-ui/ButtonBase/ButtonBase.js
generated
vendored
386
goTorrentWebUI/node_modules/material-ui/ButtonBase/ButtonBase.js
generated
vendored
@@ -41,6 +41,10 @@ var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _classnames = require('classnames');
|
||||
@@ -51,6 +55,10 @@ var _keycode = require('keycode');
|
||||
|
||||
var _keycode2 = _interopRequireDefault(_keycode);
|
||||
|
||||
var _ownerWindow = require('dom-helpers/ownerWindow');
|
||||
|
||||
var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
|
||||
|
||||
var _withStyles = require('../styles/withStyles');
|
||||
|
||||
var _withStyles2 = _interopRequireDefault(_withStyles);
|
||||
@@ -67,171 +75,43 @@ var _createRippleHandler2 = _interopRequireDefault(_createRippleHandler);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any; // weak
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
|
||||
|
||||
var styles = exports.styles = function styles(theme) {
|
||||
return {
|
||||
root: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
// Remove grey highlight
|
||||
WebkitTapHighlightColor: theme.palette.common.transparent,
|
||||
backgroundColor: 'transparent', // Reset default value
|
||||
outline: 'none',
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
appearance: 'none',
|
||||
textDecoration: 'none',
|
||||
// So we take precedent over the style of a native <a /> element.
|
||||
color: 'inherit',
|
||||
'&::-moz-focus-inner': {
|
||||
borderStyle: 'none' // Remove Firefox dotted outline.
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
pointerEvents: 'none', // Disable link interactions
|
||||
cursor: 'default'
|
||||
var styles = exports.styles = {
|
||||
root: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
// Remove grey highlight
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
backgroundColor: 'transparent', // Reset default value
|
||||
outline: 'none',
|
||||
border: 0,
|
||||
margin: 0, // Remove the margin in Safari
|
||||
borderRadius: 0,
|
||||
padding: 0, // Remove the padding in Firefox
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
verticalAlign: 'middle',
|
||||
'-moz-appearance': 'none', // Reset
|
||||
'-webkit-appearance': 'none', // Reset
|
||||
textDecoration: 'none',
|
||||
// So we take precedent over the style of a native <a /> element.
|
||||
color: 'inherit',
|
||||
'&::-moz-focus-inner': {
|
||||
borderStyle: 'none' // Remove Firefox dotted outline.
|
||||
}
|
||||
};
|
||||
},
|
||||
disabled: {
|
||||
pointerEvents: 'none', // Disable link interactions
|
||||
cursor: 'default'
|
||||
}
|
||||
};
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Props = {
|
||||
/**
|
||||
* If `true`, the ripples will be centered.
|
||||
* They won't start at the cursor interaction position.
|
||||
*/
|
||||
centerRipple: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
|
||||
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a DOM element or a component.
|
||||
* The default value is a `button`.
|
||||
*/
|
||||
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
|
||||
|
||||
/**
|
||||
* If `true`, the base button will be disabled.
|
||||
*/
|
||||
disabled: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* If `true`, the ripple effect will be disabled.
|
||||
*/
|
||||
disableRipple: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* If `true`, the base button will have a keyboard focus ripple.
|
||||
* `disableRipple` must also be `false`.
|
||||
*/
|
||||
focusRipple: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* The CSS class applied while the component is keyboard focused.
|
||||
*/
|
||||
keyboardFocusedClassName: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onBlur: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onClick: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* Callback fired when the component is focused with a keyboard.
|
||||
* We trigger a `onFocus` callback too.
|
||||
*/
|
||||
onKeyboardFocus: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseDown: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseLeave: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseUp: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchEnd: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchMove: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchStart: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
role: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* Use that property to pass a ref callback to the root component.
|
||||
*/
|
||||
rootRef: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
tabIndex: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').string]),
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
type: require('prop-types').string.isRequired
|
||||
};
|
||||
/**
|
||||
* `ButtonBase` contains as few styles as possible.
|
||||
* It aims to be a simple building block for creating a button.
|
||||
* It contains a load of style reset and some focus/ripple logic.
|
||||
*/
|
||||
|
||||
var ButtonBase = function (_React$Component) {
|
||||
(0, _inherits3.default)(ButtonBase, _React$Component);
|
||||
@@ -256,7 +136,9 @@ var ButtonBase = function (_React$Component) {
|
||||
if (_this.props.onKeyboardFocus) {
|
||||
_this.props.onKeyboardFocus(event);
|
||||
}
|
||||
}, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.keyboardFocusTimeout = null, _this.keyboardFocusCheckTime = 30, _this.keyboardFocusMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
|
||||
}, _this.onRippleRef = function (node) {
|
||||
_this.ripple = node;
|
||||
}, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.keyboardFocusTimeout = null, _this.keyboardFocusCheckTime = 50, _this.keyboardFocusMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
|
||||
var _this$props = _this.props,
|
||||
component = _this$props.component,
|
||||
focusRipple = _this$props.focusRipple,
|
||||
@@ -266,7 +148,7 @@ var ButtonBase = function (_React$Component) {
|
||||
var key = (0, _keycode2.default)(event);
|
||||
|
||||
// Check if key is already down to avoid repeats being counted as multiple activations
|
||||
if (focusRipple && !_this.keyDown && _this.state.keyboardFocused && key === 'space') {
|
||||
if (focusRipple && !_this.keyDown && _this.state.keyboardFocused && _this.ripple && key === 'space') {
|
||||
_this.keyDown = true;
|
||||
event.persist();
|
||||
_this.ripple.stop(event, function () {
|
||||
@@ -279,12 +161,14 @@ var ButtonBase = function (_React$Component) {
|
||||
}
|
||||
|
||||
// Keyboard accessibility for non interactive elements
|
||||
if (event.target === _this.button && onClick && component && component !== 'a' && component !== 'button' && (key === 'space' || key === 'enter')) {
|
||||
if (event.target === event.currentTarget && component && component !== 'button' && (key === 'space' || key === 'enter')) {
|
||||
event.preventDefault();
|
||||
onClick(event);
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
}
|
||||
}, _this.handleKeyUp = function (event) {
|
||||
if (_this.props.focusRipple && (0, _keycode2.default)(event) === 'space' && _this.state.keyboardFocused) {
|
||||
if (_this.props.focusRipple && (0, _keycode2.default)(event) === 'space' && _this.ripple && _this.state.keyboardFocused) {
|
||||
_this.keyDown = false;
|
||||
event.persist();
|
||||
_this.ripple.stop(event, function () {
|
||||
@@ -319,8 +203,9 @@ var ButtonBase = function (_React$Component) {
|
||||
}
|
||||
|
||||
event.persist();
|
||||
var keyboardFocusCallback = _this.onKeyboardFocusHandler.bind(_this, event);
|
||||
(0, _keyboardFocus.detectKeyboardFocus)(_this, _this.button, keyboardFocusCallback);
|
||||
(0, _keyboardFocus.detectKeyboardFocus)(_this, _this.button, function () {
|
||||
_this.onKeyboardFocusHandler(event);
|
||||
});
|
||||
|
||||
if (_this.props.onFocus) {
|
||||
_this.props.onFocus(event);
|
||||
@@ -332,7 +217,18 @@ var ButtonBase = function (_React$Component) {
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
this.button = (0, _reactDom.findDOMNode)(this);
|
||||
(0, _keyboardFocus.listenForFocusKeys)();
|
||||
(0, _keyboardFocus.listenForFocusKeys)((0, _ownerWindow2.default)(this.button));
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
// The blur won't fire when the disabled state is set on a focused input.
|
||||
// We need to book keep the focused state manually.
|
||||
if (!this.props.disabled && nextProps.disabled && this.state.keyboardFocused) {
|
||||
this.setState({
|
||||
keyboardFocused: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUpdate',
|
||||
@@ -348,28 +244,13 @@ var ButtonBase = function (_React$Component) {
|
||||
clearTimeout(this.keyboardFocusTimeout);
|
||||
} // Used to help track keyboard activation keyDown
|
||||
|
||||
}, {
|
||||
key: 'renderRipple',
|
||||
value: function renderRipple() {
|
||||
var _this2 = this;
|
||||
|
||||
if (!this.props.disableRipple && !this.props.disabled) {
|
||||
return _react2.default.createElement(_TouchRipple2.default, {
|
||||
innerRef: function innerRef(node) {
|
||||
_this2.ripple = node;
|
||||
},
|
||||
center: this.props.centerRipple
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classNames;
|
||||
|
||||
var _props = this.props,
|
||||
buttonRef = _props.buttonRef,
|
||||
centerRipple = _props.centerRipple,
|
||||
children = _props.children,
|
||||
classes = _props.classes,
|
||||
@@ -390,10 +271,9 @@ var ButtonBase = function (_React$Component) {
|
||||
onTouchEnd = _props.onTouchEnd,
|
||||
onTouchMove = _props.onTouchMove,
|
||||
onTouchStart = _props.onTouchStart,
|
||||
rootRef = _props.rootRef,
|
||||
tabIndex = _props.tabIndex,
|
||||
type = _props.type,
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'rootRef', 'tabIndex', 'type']);
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'type']);
|
||||
|
||||
|
||||
var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, keyboardFocusedClassName || '', this.state.keyboardFocused), _classNames), classNameProp);
|
||||
@@ -412,11 +292,9 @@ var ButtonBase = function (_React$Component) {
|
||||
|
||||
if (ComponentProp === 'button') {
|
||||
buttonProps.type = type || 'button';
|
||||
}
|
||||
|
||||
if (ComponentProp !== 'a') {
|
||||
buttonProps.role = buttonProps.role || 'button';
|
||||
buttonProps.disabled = disabled;
|
||||
} else {
|
||||
buttonProps.role = 'button';
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
@@ -432,24 +310,132 @@ var ButtonBase = function (_React$Component) {
|
||||
onTouchEnd: this.handleTouchEnd,
|
||||
onTouchMove: this.handleTouchMove,
|
||||
onTouchStart: this.handleTouchStart,
|
||||
tabIndex: disabled ? -1 : tabIndex,
|
||||
className: className
|
||||
}, buttonProps, other, {
|
||||
ref: rootRef
|
||||
}),
|
||||
tabIndex: disabled ? '-1' : tabIndex,
|
||||
className: className,
|
||||
ref: buttonRef
|
||||
}, buttonProps, other),
|
||||
children,
|
||||
this.renderRipple()
|
||||
!disableRipple && !disabled ? _react2.default.createElement(_TouchRipple2.default, { innerRef: this.onRippleRef, center: centerRipple }) : null
|
||||
);
|
||||
}
|
||||
}]);
|
||||
return ButtonBase;
|
||||
}(_react2.default.Component);
|
||||
|
||||
ButtonBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
||||
/**
|
||||
* Use that property to pass a ref callback to the native button component.
|
||||
*/
|
||||
buttonRef: _propTypes2.default.func,
|
||||
/**
|
||||
* If `true`, the ripples will be centered.
|
||||
* They won't start at the cursor interaction position.
|
||||
*/
|
||||
centerRipple: _propTypes2.default.bool,
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children: _propTypes2.default.node,
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: _propTypes2.default.object.isRequired,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: _propTypes2.default.string,
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a DOM element or a component.
|
||||
* The default value is a `button`.
|
||||
*/
|
||||
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
|
||||
/**
|
||||
* If `true`, the base button will be disabled.
|
||||
*/
|
||||
disabled: _propTypes2.default.bool,
|
||||
/**
|
||||
* If `true`, the ripple effect will be disabled.
|
||||
*/
|
||||
disableRipple: _propTypes2.default.bool,
|
||||
/**
|
||||
* If `true`, the base button will have a keyboard focus ripple.
|
||||
* `disableRipple` must also be `false`.
|
||||
*/
|
||||
focusRipple: _propTypes2.default.bool,
|
||||
/**
|
||||
* The CSS class applied while the component is keyboard focused.
|
||||
*/
|
||||
keyboardFocusedClassName: _propTypes2.default.string,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onBlur: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onClick: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onFocus: _propTypes2.default.func,
|
||||
/**
|
||||
* Callback fired when the component is focused with a keyboard.
|
||||
* We trigger a `onFocus` callback too.
|
||||
*/
|
||||
onKeyboardFocus: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyDown: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onKeyUp: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseDown: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseLeave: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onMouseUp: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchEnd: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchMove: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
onTouchStart: _propTypes2.default.func,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
role: _propTypes2.default.string,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
type: _propTypes2.default.string
|
||||
} : {};
|
||||
|
||||
ButtonBase.defaultProps = {
|
||||
centerRipple: false,
|
||||
focusRipple: false,
|
||||
disableRipple: false,
|
||||
tabIndex: 0,
|
||||
focusRipple: false,
|
||||
tabIndex: '0',
|
||||
type: 'button'
|
||||
};
|
||||
|
||||
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiButtonBase' })(ButtonBase);
|
||||
Reference in New Issue
Block a user