Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,49 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface TooltipProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
TooltipClassKey,
'title'
> {
disableTriggerFocus?: boolean;
disableTriggerHover?: boolean;
disableTriggerTouch?: boolean;
id?: string;
onRequestClose?: (event: React.ChangeEvent<{}>) => void;
onRequestOpen?: (event: React.ChangeEvent<{}>) => void;
open?: boolean;
title: React.ReactNode;
enterDelay?: number;
leaveDelay?: number;
placement?:
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top';
PopperProps?: object;
}
export type TooltipClassKey =
| 'root'
| 'popper'
| 'popperClose'
| 'tooltip'
| 'tooltipLeft'
| 'tooltipRight'
| 'tooltipTop'
| 'tooltipBottom'
| 'tooltipOpen'
;
declare const Tooltip: React.ComponentType<TooltipProps>;
export default Tooltip;

View File

@@ -0,0 +1,532 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
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);
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactEventListener = require('react-event-listener');
var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
var _debounce = require('lodash/debounce');
var _debounce2 = _interopRequireDefault(_debounce);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactPopper = require('react-popper');
var _helpers = require('../utils/helpers');
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);
var styles = exports.styles = function styles(theme) {
return {
root: {
display: 'inline',
flexDirection: 'inherit' // Makes the wrapper more transparent.
},
popper: {
zIndex: theme.zIndex.tooltip
},
popperClose: {
pointerEvents: 'none'
},
tooltip: (0, _defineProperty3.default)({
background: _grey2.default[700],
borderRadius: 2,
color: _common2.default.fullWhite,
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
})
}, theme.breakpoints.up('sm'), {
minHeight: 22,
lineHeight: '22px',
padding: '0 ' + theme.spacing.unit + 'px',
fontSize: theme.typography.pxToRem(10)
}),
tooltipLeft: (0, _defineProperty3.default)({
transformOrigin: 'right center',
margin: '0 ' + theme.spacing.unit * 3 + 'px'
}, theme.breakpoints.up('sm'), {
margin: '0 14px'
}),
tooltipRight: (0, _defineProperty3.default)({
transformOrigin: 'left center',
margin: '0 ' + theme.spacing.unit * 3 + 'px'
}, theme.breakpoints.up('sm'), {
margin: '0 14px'
}),
tooltipTop: (0, _defineProperty3.default)({
transformOrigin: 'center bottom',
margin: theme.spacing.unit * 3 + 'px 0'
}, theme.breakpoints.up('sm'), {
margin: '14px 0'
}),
tooltipBottom: (0, _defineProperty3.default)({
transformOrigin: 'center top',
margin: theme.spacing.unit * 3 + 'px 0'
}, theme.breakpoints.up('sm'), {
margin: '14px 0'
}),
tooltipOpen: {
opacity: 0.9,
transform: 'scale(1)'
}
};
};
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':
return 'bottom-start';
case 'bottom-start':
return 'bottom-end';
case 'top-end':
return 'top-start';
case 'top-start':
return 'top-end';
default:
return 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);
function Tooltip() {
var _ref;
var _temp, _this2, _ret;
(0, _classCallCheck3.default)(this, Tooltip);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
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();
}
}, 166), _this2.handleRequestOpen = function (event) {
var children = _this2.props.children;
if (typeof children !== 'string') {
var childrenProps = _react.Children.only(children).props;
if (event.type === 'focus' && childrenProps.onFocus) {
childrenProps.onFocus(event);
}
if (event.type === 'mouseover' && childrenProps.onMouseOver) {
childrenProps.onMouseOver(event);
}
}
if (_this2.ignoreNonTouchEvents && event.type !== 'touchstart') {
return;
}
clearTimeout(_this2.leaveTimer);
if (_this2.props.enterDelay > 0) {
_this2.leaveTimer = setTimeout(function () {
_this2.requestOpen(event);
}, _this2.props.enterDelay);
} else {
_this2.requestOpen(event);
}
}, _this2.requestOpen = function (event) {
if (!_this2.isControlled) {
_this2.setState({ open: true });
}
if (_this2.props.onRequestOpen) {
_this2.props.onRequestOpen(event, true);
}
}, _this2.handleRequestClose = function (event) {
var children = _this2.props.children;
if (typeof children !== 'string') {
var childrenProps = _react.Children.only(children).props;
if (event.type === 'blur' && childrenProps.onBlur) {
childrenProps.onBlur(event);
}
if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
childrenProps.onMouseLeave(event);
}
}
clearTimeout(_this2.leaveTimer);
if (_this2.props.leaveDelay) {
_this2.leaveTimer = setTimeout(function () {
_this2.requestClose(event);
}, _this2.props.leaveDelay);
} else {
_this2.requestClose(event);
}
}, _this2.requestClose = function (event) {
_this2.ignoreNonTouchEvents = false;
if (!_this2.isControlled) {
_this2.setState({ open: false });
}
if (_this2.props.onRequestClose) {
_this2.props.onRequestClose(event, false);
}
}, _this2.handleTouchStart = function (event) {
_this2.ignoreNonTouchEvents = true;
var children = _this2.props.children;
if (typeof children !== 'string') {
var childrenProps = _react.Children.only(children).props;
if (childrenProps.onTouchStart) {
childrenProps.onTouchStart(event);
}
}
clearTimeout(_this2.touchTimer);
event.persist();
_this2.touchTimer = setTimeout(function () {
_this2.handleRequestOpen(event);
}, 1e3);
}, _this2.handleTouchEnd = function (event) {
var children = _this2.props.children;
if (typeof children !== 'string') {
var childrenProps = _react.Children.only(children).props;
if (childrenProps.onTouchEnd) {
childrenProps.onTouchEnd(event);
}
}
clearTimeout(_this2.touchTimer);
clearTimeout(_this2.leaveTimer);
event.persist();
_this2.leaveTimer = setTimeout(function () {
_this2.requestClose(event);
}, 1500 + _this2.props.leaveDelay);
}, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
}
(0, _createClass3.default)(Tooltip, [{
key: 'componentWillMount',
value: function componentWillMount() {
var props = this.props;
this.isControlled = props.open !== undefined;
if (!this.isControlled) {
// not controlled, use internal state
this.setState({
open: false
});
}
}
}, {
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;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearTimeout(this.enterTimer);
clearTimeout(this.leaveTimer);
this.handleResize.cancel();
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _props = this.props,
childrenProp = _props.children,
classes = _props.classes,
className = _props.className,
disableTriggerFocus = _props.disableTriggerFocus,
disableTriggerHover = _props.disableTriggerHover,
disableTriggerTouch = _props.disableTriggerTouch,
enterDelay = _props.enterDelay,
id = _props.id,
leaveDelay = _props.leaveDelay,
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']);
var placement = theme.direction === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
var open = this.isControlled ? openProp : this.state.open;
var childrenProps = {};
childrenProps['aria-describedby'] = id;
if (!disableTriggerTouch) {
childrenProps.onTouchStart = this.handleTouchStart;
childrenProps.onTouchEnd = this.handleTouchEnd;
}
if (!disableTriggerHover) {
childrenProps.onMouseOver = this.handleRequestOpen;
childrenProps.onMouseLeave = this.handleRequestClose;
}
if (!disableTriggerFocus) {
childrenProps.onFocus = this.handleRequestOpen;
childrenProps.onBlur = this.handleRequestClose;
}
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;
}
return _react2.default.createElement(
_reactEventListener2.default,
{ target: 'window', onResize: this.handleResize },
_react2.default.createElement(
_reactPopper.Manager,
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
_react2.default.createElement(
_reactPopper.Target,
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);
}
});
}
),
_react2.default.createElement(
_reactPopper.Popper,
(0, _extends3.default)({
placement: placement,
eventsEnabled: open,
className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open), PopperClassName)
}, PopperOther, {
ref: function ref(node) {
_this3.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
)
)
)
);
}
}]);
return Tooltip;
}(_react2.default.Component);
Tooltip.defaultProps = {
disableTriggerFocus: false,
disableTriggerHover: false,
disableTriggerTouch: false,
enterDelay: 0,
leaveDelay: 0,
placement: 'bottom'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);

View File

@@ -0,0 +1,479 @@
/* eslint-disable react/no-multi-comp, no-underscore-dangle */
// @flow
import React, { Children } from 'react';
import type { Element, Node } from 'react';
import { findDOMNode } from 'react-dom';
import EventListener from 'react-event-listener';
import debounce from 'lodash/debounce';
import warning from 'warning';
import classNames from 'classnames';
import { Manager, Target, Popper } from 'react-popper';
import { capitalizeFirstLetter } from '../utils/helpers';
import common from '../colors/common';
import grey from '../colors/grey';
import withStyles from '../styles/withStyles';
// Use a class component so we can get a reference.
class TargetChildren extends React.Component<{ element: Element<any> }> {
render() {
return this.props.element;
}
}
export const styles = (theme: Object) => ({
root: {
display: 'inline',
flexDirection: 'inherit', // Makes the wrapper more transparent.
},
popper: {
zIndex: theme.zIndex.tooltip,
},
popperClose: {
pointerEvents: 'none',
},
tooltip: {
background: grey[700],
borderRadius: 2,
color: common.fullWhite,
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,
}),
[theme.breakpoints.up('sm')]: {
minHeight: 22,
lineHeight: '22px',
padding: `0 ${theme.spacing.unit}px`,
fontSize: theme.typography.pxToRem(10),
},
},
tooltipLeft: {
transformOrigin: 'right center',
margin: `0 ${theme.spacing.unit * 3}px`,
[theme.breakpoints.up('sm')]: {
margin: '0 14px',
},
},
tooltipRight: {
transformOrigin: 'left center',
margin: `0 ${theme.spacing.unit * 3}px`,
[theme.breakpoints.up('sm')]: {
margin: '0 14px',
},
},
tooltipTop: {
transformOrigin: 'center bottom',
margin: `${theme.spacing.unit * 3}px 0`,
[theme.breakpoints.up('sm')]: {
margin: '14px 0',
},
},
tooltipBottom: {
transformOrigin: 'center top',
margin: `${theme.spacing.unit * 3}px 0`,
[theme.breakpoints.up('sm')]: {
margin: '14px 0',
},
},
tooltipOpen: {
opacity: 0.9,
transform: 'scale(1)',
},
});
export type Placement =
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top';
function flipPlacement(placement: Placement): Placement {
switch (placement) {
case 'bottom-end':
return 'bottom-start';
case 'bottom-start':
return 'bottom-end';
case 'top-end':
return 'top-start';
case 'top-start':
return 'top-end';
default:
return placement;
}
}
type ProvidedProps = {
classes: Object,
disableTriggerFocus: boolean,
disableTriggerHover: boolean,
disableTriggerTouch: boolean,
enterDelay: number,
leaveDelay: number,
placement: Placement,
theme: Object,
};
export type Props = {
/**
* Tooltip reference component.
*/
children: Element<any>,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* Do not respond to focus events.
*/
disableTriggerFocus?: boolean,
/**
* Do not respond to hover events.
*/
disableTriggerHover?: boolean,
/**
* Do not respond to long press touch events.
*/
disableTriggerTouch?: boolean,
/**
* 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?: string,
/**
* Callback fired when the tooltip requests to be closed.
*
* @param {object} event The event source of the callback
*/
onRequestClose?: Function,
/**
* Callback fired when the tooltip requests to be open.
*
* @param {object} event The event source of the callback
*/
onRequestOpen?: Function,
/**
* If `true`, the tooltip is shown.
*/
open?: boolean,
/**
* Tooltip title.
*/
title: Node,
/**
* The number of milliseconds to wait before showing the tooltip.
*/
enterDelay?: number,
/**
* The number of milliseconds to wait before hidding the tooltip.
*/
leaveDelay?: number,
/**
* Tooltip placement
*/
placement?: Placement,
/**
* Properties applied to the `Popper` element.
*/
PopperProps?: Object,
/**
* @ignore
*/
theme?: Object,
};
type State = {
open?: boolean,
};
class Tooltip extends React.Component<ProvidedProps & Props, State> {
static defaultProps = {
disableTriggerFocus: false,
disableTriggerHover: false,
disableTriggerTouch: false,
enterDelay: 0,
leaveDelay: 0,
placement: 'bottom',
};
state = {};
componentWillMount() {
const { props } = this;
this.isControlled = props.open !== undefined;
if (!this.isControlled) {
// not controlled, use internal state
this.setState({
open: false,
});
}
}
componentDidMount() {
warning(
!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'),
);
}
componentWillUnmount() {
clearTimeout(this.enterTimer);
clearTimeout(this.leaveTimer);
this.handleResize.cancel();
}
enterTimer = null;
leaveTimer = null;
touchTimer = null;
isControlled = null;
popper = null;
children = null;
ignoreNonTouchEvents = false;
handleResize = debounce(() => {
if (this.popper) {
this.popper._popper.scheduleUpdate();
}
}, 166);
handleRequestOpen = event => {
const { children } = this.props;
if (typeof children !== 'string') {
const childrenProps = Children.only(children).props;
if (event.type === 'focus' && childrenProps.onFocus) {
childrenProps.onFocus(event);
}
if (event.type === 'mouseover' && childrenProps.onMouseOver) {
childrenProps.onMouseOver(event);
}
}
if (this.ignoreNonTouchEvents && event.type !== 'touchstart') {
return;
}
clearTimeout(this.leaveTimer);
if (this.props.enterDelay > 0) {
this.leaveTimer = setTimeout(() => {
this.requestOpen(event);
}, this.props.enterDelay);
} else {
this.requestOpen(event);
}
};
requestOpen = event => {
if (!this.isControlled) {
this.setState({ open: true });
}
if (this.props.onRequestOpen) {
this.props.onRequestOpen(event, true);
}
};
handleRequestClose = event => {
const { children } = this.props;
if (typeof children !== 'string') {
const childrenProps = Children.only(children).props;
if (event.type === 'blur' && childrenProps.onBlur) {
childrenProps.onBlur(event);
}
if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
childrenProps.onMouseLeave(event);
}
}
clearTimeout(this.leaveTimer);
if (this.props.leaveDelay) {
this.leaveTimer = setTimeout(() => {
this.requestClose(event);
}, this.props.leaveDelay);
} else {
this.requestClose(event);
}
};
requestClose = event => {
this.ignoreNonTouchEvents = false;
if (!this.isControlled) {
this.setState({ open: false });
}
if (this.props.onRequestClose) {
this.props.onRequestClose(event, false);
}
};
handleTouchStart = event => {
this.ignoreNonTouchEvents = true;
const { children } = this.props;
if (typeof children !== 'string') {
const childrenProps = Children.only(children).props;
if (childrenProps.onTouchStart) {
childrenProps.onTouchStart(event);
}
}
clearTimeout(this.touchTimer);
event.persist();
this.touchTimer = setTimeout(() => {
this.handleRequestOpen(event);
}, 1e3);
};
handleTouchEnd = event => {
const { children } = this.props;
if (typeof children !== 'string') {
const childrenProps = Children.only(children).props;
if (childrenProps.onTouchEnd) {
childrenProps.onTouchEnd(event);
}
}
clearTimeout(this.touchTimer);
clearTimeout(this.leaveTimer);
event.persist();
this.leaveTimer = setTimeout(() => {
this.requestClose(event);
}, 1500 + this.props.leaveDelay);
};
render() {
const {
children: childrenProp,
classes,
className,
disableTriggerFocus,
disableTriggerHover,
disableTriggerTouch,
enterDelay,
id,
leaveDelay,
open: openProp,
onRequestClose,
onRequestOpen,
theme,
title,
placement: rawPlacement,
PopperProps: { PopperClassName, ...PopperOther } = {},
...other
} = this.props;
const placement = theme.direction === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
const open = this.isControlled ? openProp : this.state.open;
const childrenProps = {};
childrenProps['aria-describedby'] = id;
if (!disableTriggerTouch) {
childrenProps.onTouchStart = this.handleTouchStart;
childrenProps.onTouchEnd = this.handleTouchEnd;
}
if (!disableTriggerHover) {
childrenProps.onMouseOver = this.handleRequestOpen;
childrenProps.onMouseLeave = this.handleRequestClose;
}
if (!disableTriggerFocus) {
childrenProps.onFocus = this.handleRequestOpen;
childrenProps.onBlur = this.handleRequestClose;
}
if (typeof childrenProp !== 'string' && childrenProp.props) {
warning(
!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'),
);
}
return (
<EventListener target="window" onResize={this.handleResize}>
<Manager className={classNames(classes.root, className)} {...other}>
<Target>
{({ targetProps }) => (
<TargetChildren
element={
typeof childrenProp !== 'string'
? React.cloneElement(childrenProp, childrenProps)
: childrenProp
}
ref={node => {
this.children = findDOMNode(node);
targetProps.ref(this.children);
}}
/>
)}
</Target>
<Popper
placement={placement}
eventsEnabled={open}
className={classNames(
classes.popper,
{ [classes.popperClose]: !open },
PopperClassName,
)}
{...PopperOther}
ref={node => {
this.popper = node;
}}
>
<div
id={id}
role="tooltip"
aria-hidden={!open}
className={classNames(
classes.tooltip,
{ [classes.tooltipOpen]: open },
classes[`tooltip${capitalizeFirstLetter(placement.split('-')[0])}`],
)}
>
{title}
</div>
</Popper>
</Manager>
</EventListener>
);
}
}
export default withStyles(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);

View File

@@ -0,0 +1,2 @@
export { default } from './Tooltip';
export * from './Tooltip';

View File

@@ -0,0 +1,16 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Tooltip = require('./Tooltip');
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Tooltip).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

View File

@@ -0,0 +1,3 @@
// @flow
export { default } from './Tooltip';