Completely updated React, fixed #11, (hopefully)
This commit is contained in:
454
goTorrentWebUI/node_modules/material-ui/Tooltip/Tooltip.js
generated
vendored
454
goTorrentWebUI/node_modules/material-ui/Tooltip/Tooltip.js
generated
vendored
@@ -13,10 +13,6 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
|
||||
|
||||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||||
|
||||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||||
|
||||
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||||
|
||||
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
||||
|
||||
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
||||
@@ -37,10 +33,18 @@ var _inherits2 = require('babel-runtime/helpers/inherits');
|
||||
|
||||
var _inherits3 = _interopRequireDefault(_inherits2);
|
||||
|
||||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
||||
|
||||
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactEventListener = require('react-event-listener');
|
||||
@@ -63,42 +67,21 @@ var _reactPopper = require('react-popper');
|
||||
|
||||
var _helpers = require('../utils/helpers');
|
||||
|
||||
var _RefHolder = require('../internal/RefHolder');
|
||||
|
||||
var _RefHolder2 = _interopRequireDefault(_RefHolder);
|
||||
|
||||
var _common = require('../colors/common');
|
||||
|
||||
var _common2 = _interopRequireDefault(_common);
|
||||
|
||||
var _grey = require('../colors/grey');
|
||||
|
||||
var _grey2 = _interopRequireDefault(_grey);
|
||||
|
||||
var _withStyles = require('../styles/withStyles');
|
||||
|
||||
var _withStyles2 = _interopRequireDefault(_withStyles);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any; /* eslint-disable react/no-multi-comp, no-underscore-dangle */
|
||||
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Element = require('react').babelPluginFlowReactPropTypes_proptype_Element || require('prop-types').any;
|
||||
|
||||
// Use a class component so we can get a reference.
|
||||
var TargetChildren = function (_React$Component) {
|
||||
(0, _inherits3.default)(TargetChildren, _React$Component);
|
||||
|
||||
function TargetChildren() {
|
||||
(0, _classCallCheck3.default)(this, TargetChildren);
|
||||
return (0, _possibleConstructorReturn3.default)(this, (TargetChildren.__proto__ || (0, _getPrototypeOf2.default)(TargetChildren)).apply(this, arguments));
|
||||
}
|
||||
|
||||
(0, _createClass3.default)(TargetChildren, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return this.props.element;
|
||||
}
|
||||
}]);
|
||||
return TargetChildren;
|
||||
}(_react2.default.Component);
|
||||
/* eslint-disable react/no-multi-comp, no-underscore-dangle */
|
||||
|
||||
var styles = exports.styles = function styles(theme) {
|
||||
return {
|
||||
@@ -113,24 +96,23 @@ var styles = exports.styles = function styles(theme) {
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
tooltip: (0, _defineProperty3.default)({
|
||||
background: _grey2.default[700],
|
||||
backgroundColor: theme.palette.grey[700],
|
||||
borderRadius: 2,
|
||||
color: _common2.default.fullWhite,
|
||||
color: _common2.default.white,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
fontSize: theme.typography.pxToRem(14),
|
||||
minHeight: theme.spacing.unit * 4,
|
||||
lineHeight: '32px',
|
||||
opacity: 0,
|
||||
padding: '0 ' + theme.spacing.unit + 'px',
|
||||
transform: 'scale(0)',
|
||||
transition: theme.transitions.create(['opacity', 'transform'], {
|
||||
duration: theme.transitions.duration.shortest
|
||||
})
|
||||
}),
|
||||
minHeight: 0,
|
||||
padding: theme.spacing.unit,
|
||||
fontSize: theme.typography.pxToRem(14),
|
||||
lineHeight: theme.typography.round(16 / 14) + 'em'
|
||||
}, theme.breakpoints.up('sm'), {
|
||||
minHeight: 22,
|
||||
lineHeight: '22px',
|
||||
padding: '0 ' + theme.spacing.unit + 'px',
|
||||
fontSize: theme.typography.pxToRem(10)
|
||||
padding: theme.spacing.unit / 2 + 'px ' + theme.spacing.unit + 'px',
|
||||
fontSize: theme.typography.pxToRem(10),
|
||||
lineHeight: theme.typography.round(14 / 10) + 'em'
|
||||
}),
|
||||
tooltipLeft: (0, _defineProperty3.default)({
|
||||
transformOrigin: 'right center',
|
||||
@@ -163,8 +145,6 @@ var styles = exports.styles = function styles(theme) {
|
||||
};
|
||||
};
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Placement = require('prop-types').oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']);
|
||||
|
||||
function flipPlacement(placement) {
|
||||
switch (placement) {
|
||||
case 'bottom-end':
|
||||
@@ -180,100 +160,13 @@ function flipPlacement(placement) {
|
||||
}
|
||||
}
|
||||
|
||||
var babelPluginFlowReactPropTypes_proptype_Props = {
|
||||
/**
|
||||
* Tooltip reference component.
|
||||
*/
|
||||
children: typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element.isRequired ? babelPluginFlowReactPropTypes_proptype_Element.isRequired : babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element).isRequired,
|
||||
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* Do not respond to focus events.
|
||||
*/
|
||||
disableTriggerFocus: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* Do not respond to hover events.
|
||||
*/
|
||||
disableTriggerHover: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* Do not respond to long press touch events.
|
||||
*/
|
||||
disableTriggerTouch: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* The relationship between the tooltip and the wrapper componnet is not clear from the DOM.
|
||||
* By providind this property, we can use aria-describedby to solve the accessibility issue.
|
||||
*/
|
||||
id: require('prop-types').string,
|
||||
|
||||
/**
|
||||
* Callback fired when the tooltip requests to be closed.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onRequestClose: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* Callback fired when the tooltip requests to be open.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onRequestOpen: require('prop-types').func,
|
||||
|
||||
/**
|
||||
* If `true`, the tooltip is shown.
|
||||
*/
|
||||
open: require('prop-types').bool,
|
||||
|
||||
/**
|
||||
* Tooltip title.
|
||||
*/
|
||||
title: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired,
|
||||
|
||||
/**
|
||||
* The number of milliseconds to wait before showing the tooltip.
|
||||
*/
|
||||
enterDelay: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* The number of milliseconds to wait before hidding the tooltip.
|
||||
*/
|
||||
leaveDelay: require('prop-types').number,
|
||||
|
||||
/**
|
||||
* Tooltip placement
|
||||
*/
|
||||
placement: require('prop-types').oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
||||
|
||||
/**
|
||||
* Properties applied to the `Popper` element.
|
||||
*/
|
||||
PopperProps: require('prop-types').object,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
theme: require('prop-types').object
|
||||
};
|
||||
|
||||
var Tooltip = function (_React$Component2) {
|
||||
(0, _inherits3.default)(Tooltip, _React$Component2);
|
||||
var Tooltip = function (_React$Component) {
|
||||
(0, _inherits3.default)(Tooltip, _React$Component);
|
||||
|
||||
function Tooltip() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this2, _ret;
|
||||
var _temp, _this, _ret;
|
||||
|
||||
(0, _classCallCheck3.default)(this, Tooltip);
|
||||
|
||||
@@ -281,113 +174,105 @@ var Tooltip = function (_React$Component2) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref = Tooltip.__proto__ || (0, _getPrototypeOf2.default)(Tooltip)).call.apply(_ref, [this].concat(args))), _this2), _this2.state = {}, _this2.enterTimer = null, _this2.leaveTimer = null, _this2.touchTimer = null, _this2.isControlled = null, _this2.popper = null, _this2.children = null, _this2.ignoreNonTouchEvents = false, _this2.handleResize = (0, _debounce2.default)(function () {
|
||||
if (_this2.popper) {
|
||||
_this2.popper._popper.scheduleUpdate();
|
||||
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Tooltip.__proto__ || (0, _getPrototypeOf2.default)(Tooltip)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.enterTimer = null, _this.leaveTimer = null, _this.touchTimer = null, _this.isControlled = null, _this.popper = null, _this.children = null, _this.ignoreNonTouchEvents = false, _this.handleResize = (0, _debounce2.default)(function () {
|
||||
if (_this.popper) {
|
||||
_this.popper._popper.scheduleUpdate();
|
||||
}
|
||||
}, 166), _this2.handleRequestOpen = function (event) {
|
||||
var children = _this2.props.children;
|
||||
}, 166), _this.handleRequestOpen = function (event) {
|
||||
var children = _this.props.children;
|
||||
|
||||
if (typeof children !== 'string') {
|
||||
var childrenProps = _react.Children.only(children).props;
|
||||
var childrenProps = children.props;
|
||||
|
||||
if (event.type === 'focus' && childrenProps.onFocus) {
|
||||
childrenProps.onFocus(event);
|
||||
}
|
||||
|
||||
if (event.type === 'mouseover' && childrenProps.onMouseOver) {
|
||||
childrenProps.onMouseOver(event);
|
||||
}
|
||||
if (event.type === 'focus' && childrenProps.onFocus) {
|
||||
childrenProps.onFocus(event);
|
||||
}
|
||||
|
||||
if (_this2.ignoreNonTouchEvents && event.type !== 'touchstart') {
|
||||
if (event.type === 'mouseover' && childrenProps.onMouseOver) {
|
||||
childrenProps.onMouseOver(event);
|
||||
}
|
||||
|
||||
if (_this.ignoreNonTouchEvents && event.type !== 'touchstart') {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(_this2.leaveTimer);
|
||||
if (_this2.props.enterDelay > 0) {
|
||||
_this2.leaveTimer = setTimeout(function () {
|
||||
_this2.requestOpen(event);
|
||||
}, _this2.props.enterDelay);
|
||||
clearTimeout(_this.leaveTimer);
|
||||
if (_this.props.enterDelay > 0) {
|
||||
_this.leaveTimer = setTimeout(function () {
|
||||
_this.requestOpen(event);
|
||||
}, _this.props.enterDelay);
|
||||
} else {
|
||||
_this2.requestOpen(event);
|
||||
_this.requestOpen(event);
|
||||
}
|
||||
}, _this2.requestOpen = function (event) {
|
||||
if (!_this2.isControlled) {
|
||||
_this2.setState({ open: true });
|
||||
}, _this.requestOpen = function (event) {
|
||||
if (!_this.isControlled) {
|
||||
_this.setState({ open: true });
|
||||
}
|
||||
|
||||
if (_this2.props.onRequestOpen) {
|
||||
_this2.props.onRequestOpen(event, true);
|
||||
if (_this.props.onOpen) {
|
||||
_this.props.onOpen(event, true);
|
||||
}
|
||||
}, _this2.handleRequestClose = function (event) {
|
||||
var children = _this2.props.children;
|
||||
}, _this.handleClose = function (event) {
|
||||
var children = _this.props.children;
|
||||
|
||||
if (typeof children !== 'string') {
|
||||
var childrenProps = _react.Children.only(children).props;
|
||||
var childrenProps = children.props;
|
||||
|
||||
if (event.type === 'blur' && childrenProps.onBlur) {
|
||||
childrenProps.onBlur(event);
|
||||
}
|
||||
|
||||
if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
|
||||
childrenProps.onMouseLeave(event);
|
||||
}
|
||||
if (event.type === 'blur' && childrenProps.onBlur) {
|
||||
childrenProps.onBlur(event);
|
||||
}
|
||||
|
||||
clearTimeout(_this2.leaveTimer);
|
||||
if (_this2.props.leaveDelay) {
|
||||
_this2.leaveTimer = setTimeout(function () {
|
||||
_this2.requestClose(event);
|
||||
}, _this2.props.leaveDelay);
|
||||
if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
|
||||
childrenProps.onMouseLeave(event);
|
||||
}
|
||||
|
||||
clearTimeout(_this.leaveTimer);
|
||||
if (_this.props.leaveDelay) {
|
||||
_this.leaveTimer = setTimeout(function () {
|
||||
_this.requestClose(event);
|
||||
}, _this.props.leaveDelay);
|
||||
} else {
|
||||
_this2.requestClose(event);
|
||||
_this.requestClose(event);
|
||||
}
|
||||
}, _this2.requestClose = function (event) {
|
||||
_this2.ignoreNonTouchEvents = false;
|
||||
}, _this.requestClose = function (event) {
|
||||
_this.ignoreNonTouchEvents = false;
|
||||
|
||||
if (!_this2.isControlled) {
|
||||
_this2.setState({ open: false });
|
||||
if (!_this.isControlled) {
|
||||
_this.setState({ open: false });
|
||||
}
|
||||
|
||||
if (_this2.props.onRequestClose) {
|
||||
_this2.props.onRequestClose(event, false);
|
||||
if (_this.props.onClose) {
|
||||
_this.props.onClose(event, false);
|
||||
}
|
||||
}, _this2.handleTouchStart = function (event) {
|
||||
_this2.ignoreNonTouchEvents = true;
|
||||
var children = _this2.props.children;
|
||||
}, _this.handleTouchStart = function (event) {
|
||||
_this.ignoreNonTouchEvents = true;
|
||||
var children = _this.props.children;
|
||||
|
||||
if (typeof children !== 'string') {
|
||||
var childrenProps = _react.Children.only(children).props;
|
||||
var childrenProps = children.props;
|
||||
|
||||
if (childrenProps.onTouchStart) {
|
||||
childrenProps.onTouchStart(event);
|
||||
}
|
||||
if (childrenProps.onTouchStart) {
|
||||
childrenProps.onTouchStart(event);
|
||||
}
|
||||
|
||||
clearTimeout(_this2.touchTimer);
|
||||
clearTimeout(_this.touchTimer);
|
||||
event.persist();
|
||||
_this2.touchTimer = setTimeout(function () {
|
||||
_this2.handleRequestOpen(event);
|
||||
_this.touchTimer = setTimeout(function () {
|
||||
_this.handleRequestOpen(event);
|
||||
}, 1e3);
|
||||
}, _this2.handleTouchEnd = function (event) {
|
||||
var children = _this2.props.children;
|
||||
}, _this.handleTouchEnd = function (event) {
|
||||
var children = _this.props.children;
|
||||
|
||||
if (typeof children !== 'string') {
|
||||
var childrenProps = _react.Children.only(children).props;
|
||||
var childrenProps = children.props;
|
||||
|
||||
if (childrenProps.onTouchEnd) {
|
||||
childrenProps.onTouchEnd(event);
|
||||
}
|
||||
if (childrenProps.onTouchEnd) {
|
||||
childrenProps.onTouchEnd(event);
|
||||
}
|
||||
|
||||
clearTimeout(_this2.touchTimer);
|
||||
clearTimeout(_this2.leaveTimer);
|
||||
clearTimeout(_this.touchTimer);
|
||||
clearTimeout(_this.leaveTimer);
|
||||
event.persist();
|
||||
_this2.leaveTimer = setTimeout(function () {
|
||||
_this2.requestClose(event);
|
||||
}, 1500 + _this2.props.leaveDelay);
|
||||
}, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
|
||||
_this.leaveTimer = setTimeout(function () {
|
||||
_this.requestClose(event);
|
||||
}, 1500 + _this.props.leaveDelay);
|
||||
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||||
}
|
||||
|
||||
(0, _createClass3.default)(Tooltip, [{
|
||||
@@ -396,7 +281,7 @@ var Tooltip = function (_React$Component2) {
|
||||
var props = this.props;
|
||||
|
||||
|
||||
this.isControlled = props.open !== undefined;
|
||||
this.isControlled = props.open != null;
|
||||
|
||||
if (!this.isControlled) {
|
||||
// not controlled, use internal state
|
||||
@@ -408,9 +293,7 @@ var Tooltip = function (_React$Component2) {
|
||||
}, {
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.children || !this.children.disabled ||
|
||||
// $FlowFixMe
|
||||
!this.children.tagName.toLowerCase() === 'button', ['Material-UI: you are providing a disabled button children to the Tooltip component.', 'A disabled element do not fire events.', 'But the Tooltip needs to listen to the children element events to display the title.', '', 'Place a `div` over top of the element.'].join('\n')) : void 0;
|
||||
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.children || !this.children.disabled || !this.children.tagName.toLowerCase() === 'button', ['Material-UI: you are providing a disabled button children to the Tooltip component.', 'A disabled element do not fire events.', 'But the Tooltip needs to listen to the children element events to display the title.', '', 'Place a `div` over top of the element.'].join('\n')) : void 0;
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
@@ -422,7 +305,7 @@ var Tooltip = function (_React$Component2) {
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _this3 = this;
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
childrenProp = _props.children,
|
||||
@@ -434,23 +317,27 @@ var Tooltip = function (_React$Component2) {
|
||||
enterDelay = _props.enterDelay,
|
||||
id = _props.id,
|
||||
leaveDelay = _props.leaveDelay,
|
||||
onClose = _props.onClose,
|
||||
onOpen = _props.onOpen,
|
||||
openProp = _props.open,
|
||||
onRequestClose = _props.onRequestClose,
|
||||
onRequestOpen = _props.onRequestOpen,
|
||||
theme = _props.theme,
|
||||
title = _props.title,
|
||||
rawPlacement = _props.placement,
|
||||
_props$PopperProps = _props.PopperProps;
|
||||
_props$PopperProps = _props$PopperProps === undefined ? {} : _props$PopperProps;
|
||||
var PopperClassName = _props$PopperProps.PopperClassName,
|
||||
PopperOther = (0, _objectWithoutProperties3.default)(_props$PopperProps, ['PopperClassName']),
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['children', 'classes', 'className', 'disableTriggerFocus', 'disableTriggerHover', 'disableTriggerTouch', 'enterDelay', 'id', 'leaveDelay', 'open', 'onRequestClose', 'onRequestOpen', 'theme', 'title', 'placement', 'PopperProps']);
|
||||
theme = _props.theme,
|
||||
title = _props.title,
|
||||
other = (0, _objectWithoutProperties3.default)(_props, ['children', 'classes', 'className', 'disableTriggerFocus', 'disableTriggerHover', 'disableTriggerTouch', 'enterDelay', 'id', 'leaveDelay', 'onClose', 'onOpen', 'open', 'placement', 'PopperProps', 'theme', 'title']);
|
||||
|
||||
|
||||
var placement = theme.direction === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
|
||||
var open = this.isControlled ? openProp : this.state.open;
|
||||
var childrenProps = {};
|
||||
|
||||
if (title === '') {
|
||||
open = false;
|
||||
}
|
||||
|
||||
childrenProps['aria-describedby'] = id;
|
||||
|
||||
if (!disableTriggerTouch) {
|
||||
@@ -460,17 +347,15 @@ var Tooltip = function (_React$Component2) {
|
||||
|
||||
if (!disableTriggerHover) {
|
||||
childrenProps.onMouseOver = this.handleRequestOpen;
|
||||
childrenProps.onMouseLeave = this.handleRequestClose;
|
||||
childrenProps.onMouseLeave = this.handleClose;
|
||||
}
|
||||
|
||||
if (!disableTriggerFocus) {
|
||||
childrenProps.onFocus = this.handleRequestOpen;
|
||||
childrenProps.onBlur = this.handleRequestClose;
|
||||
childrenProps.onBlur = this.handleClose;
|
||||
}
|
||||
|
||||
if (typeof childrenProp !== 'string' && childrenProp.props) {
|
||||
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', 'Remove this title property `' + childrenProp.props.title + '` or the Tooltip component.'].join('\n')) : void 0;
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', 'Remove this title property `' + childrenProp.props.title + '` or the Tooltip component.'].join('\n')) : void 0;
|
||||
|
||||
return _react2.default.createElement(
|
||||
_reactEventListener2.default,
|
||||
@@ -483,13 +368,16 @@ var Tooltip = function (_React$Component2) {
|
||||
null,
|
||||
function (_ref2) {
|
||||
var targetProps = _ref2.targetProps;
|
||||
return _react2.default.createElement(TargetChildren, {
|
||||
element: typeof childrenProp !== 'string' ? _react2.default.cloneElement(childrenProp, childrenProps) : childrenProp,
|
||||
ref: function ref(node) {
|
||||
_this3.children = (0, _reactDom.findDOMNode)(node);
|
||||
targetProps.ref(_this3.children);
|
||||
}
|
||||
});
|
||||
return _react2.default.createElement(
|
||||
_RefHolder2.default,
|
||||
{
|
||||
ref: function ref(node) {
|
||||
_this2.children = (0, _reactDom.findDOMNode)(node);
|
||||
targetProps.ref(_this2.children);
|
||||
}
|
||||
},
|
||||
_react2.default.cloneElement(childrenProp, childrenProps)
|
||||
);
|
||||
}
|
||||
),
|
||||
_react2.default.createElement(
|
||||
@@ -500,19 +388,34 @@ var Tooltip = function (_React$Component2) {
|
||||
className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open), PopperClassName)
|
||||
}, PopperOther, {
|
||||
ref: function ref(node) {
|
||||
_this3.popper = node;
|
||||
_this2.popper = node;
|
||||
}
|
||||
}),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
id: id,
|
||||
role: 'tooltip',
|
||||
'aria-hidden': !open,
|
||||
className: (0, _classnames2.default)(classes.tooltip, (0, _defineProperty3.default)({}, classes.tooltipOpen, open), classes['tooltip' + (0, _helpers.capitalizeFirstLetter)(placement.split('-')[0])])
|
||||
},
|
||||
title
|
||||
)
|
||||
function (_ref3) {
|
||||
var popperProps = _ref3.popperProps,
|
||||
restProps = _ref3.restProps;
|
||||
|
||||
var actualPlacement = popperProps['data-placement'] || placement;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
(0, _extends3.default)({}, popperProps, restProps, {
|
||||
style: (0, _extends3.default)({}, popperProps.style, {
|
||||
top: popperProps.style.top || 0,
|
||||
left: popperProps.style.left || 0
|
||||
}, restProps.style)
|
||||
}),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
id: id,
|
||||
role: 'tooltip',
|
||||
'aria-hidden': !open,
|
||||
className: (0, _classnames2.default)(classes.tooltip, (0, _defineProperty3.default)({}, classes.tooltipOpen, open), classes['tooltip' + (0, _helpers.capitalize)(actualPlacement.split('-')[0])])
|
||||
},
|
||||
title
|
||||
)
|
||||
);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
@@ -521,6 +424,78 @@ var Tooltip = function (_React$Component2) {
|
||||
return Tooltip;
|
||||
}(_react2.default.Component);
|
||||
|
||||
Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
|
||||
/**
|
||||
* Tooltip reference element.
|
||||
*/
|
||||
children: _propTypes2.default.element.isRequired,
|
||||
/**
|
||||
* Useful to extend the style applied to components.
|
||||
*/
|
||||
classes: _propTypes2.default.object.isRequired,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: _propTypes2.default.string,
|
||||
/**
|
||||
* Do not respond to focus events.
|
||||
*/
|
||||
disableTriggerFocus: _propTypes2.default.bool,
|
||||
/**
|
||||
* Do not respond to hover events.
|
||||
*/
|
||||
disableTriggerHover: _propTypes2.default.bool,
|
||||
/**
|
||||
* Do not respond to long press touch events.
|
||||
*/
|
||||
disableTriggerTouch: _propTypes2.default.bool,
|
||||
/**
|
||||
* The number of milliseconds to wait before showing the tooltip.
|
||||
*/
|
||||
enterDelay: _propTypes2.default.number,
|
||||
/**
|
||||
* The relationship between the tooltip and the wrapper component is not clear from the DOM.
|
||||
* By providing this property, we can use aria-describedby to solve the accessibility issue.
|
||||
*/
|
||||
id: _propTypes2.default.string,
|
||||
/**
|
||||
* The number of milliseconds to wait before hidding the tooltip.
|
||||
*/
|
||||
leaveDelay: _propTypes2.default.number,
|
||||
/**
|
||||
* Callback fired when the tooltip requests to be closed.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onClose: _propTypes2.default.func,
|
||||
/**
|
||||
* Callback fired when the tooltip requests to be open.
|
||||
*
|
||||
* @param {object} event The event source of the callback
|
||||
*/
|
||||
onOpen: _propTypes2.default.func,
|
||||
/**
|
||||
* If `true`, the tooltip is shown.
|
||||
*/
|
||||
open: _propTypes2.default.bool,
|
||||
/**
|
||||
* Tooltip placement
|
||||
*/
|
||||
placement: _propTypes2.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
||||
/**
|
||||
* Properties applied to the `Popper` element.
|
||||
*/
|
||||
PopperProps: _propTypes2.default.object,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
theme: _propTypes2.default.object.isRequired,
|
||||
/**
|
||||
* Tooltip title. Zero-length titles string are never displayed.
|
||||
*/
|
||||
title: _propTypes2.default.node.isRequired
|
||||
} : {};
|
||||
|
||||
Tooltip.defaultProps = {
|
||||
disableTriggerFocus: false,
|
||||
disableTriggerHover: false,
|
||||
@@ -529,4 +504,5 @@ Tooltip.defaultProps = {
|
||||
leaveDelay: 0,
|
||||
placement: 'bottom'
|
||||
};
|
||||
|
||||
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);
|
Reference in New Issue
Block a user