@material-ui/core
Version:
React components that implement Google's Material Design.
337 lines (296 loc) • 10.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup } from 'react-transition-group';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Ripple from './Ripple';
var DURATION = 550;
export var DELAY_RIPPLE = 80;
export var styles = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
display: 'block',
position: 'absolute',
overflow: 'hidden',
borderRadius: 'inherit',
width: '100%',
height: '100%',
left: 0,
top: 0,
pointerEvents: 'none',
zIndex: 0
},
/* Styles applied to the internal `Ripple` components `ripple` class. */
ripple: {
opacity: 0,
position: 'absolute'
},
/* Styles applied to the internal `Ripple` components `rippleVisible` class. */
rippleVisible: {
opacity: 0.3,
transform: 'scale(1)',
animation: "mui-ripple-enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut),
// Backward compatible logic between JSS v9 and v10.
// To remove with the release of Material-UI v4
animationName: '$mui-ripple-enter'
},
/* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
ripplePulsate: {
animationDuration: "".concat(theme.transitions.duration.shorter, "ms")
},
/* Styles applied to the internal `Ripple` components `child` class. */
child: {
opacity: 1,
display: 'block',
width: '100%',
height: '100%',
borderRadius: '50%',
backgroundColor: 'currentColor'
},
/* Styles applied to the internal `Ripple` components `childLeaving` class. */
childLeaving: {
opacity: 0,
animation: "mui-ripple-exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut),
// Backward compatible logic between JSS v9 and v10.
// To remove with the release of Material-UI v4
animationName: '$mui-ripple-exit'
},
/* Styles applied to the internal `Ripple` components `childPulsate` class. */
childPulsate: {
position: 'absolute',
left: 0,
top: 0,
animation: "mui-ripple-pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite"),
// Backward compatible logic between JSS v9 and v10.
// To remove with the release of Material-UI v4
animationName: '$mui-ripple-pulsate'
},
'@keyframes mui-ripple-enter': {
'0%': {
transform: 'scale(0)',
opacity: 0.1
},
'100%': {
transform: 'scale(1)',
opacity: 0.3
}
},
'@keyframes mui-ripple-exit': {
'0%': {
opacity: 1
},
'100%': {
opacity: 0
}
},
'@keyframes mui-ripple-pulsate': {
'0%': {
transform: 'scale(1)'
},
'50%': {
transform: 'scale(0.92)'
},
'100%': {
transform: 'scale(1)'
}
}
};
};
var TouchRipple =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(TouchRipple, _React$PureComponent);
function TouchRipple() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, TouchRipple);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TouchRipple)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
nextKey: 0,
ripples: []
};
_this.container = React.createRef();
_this.pulsate = function () {
_this.start({}, {
pulsate: true
});
};
_this.start = function () {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var cb = arguments.length > 2 ? arguments[2] : undefined;
var _options$pulsate = options.pulsate,
pulsate = _options$pulsate === void 0 ? false : _options$pulsate,
_options$center = options.center,
center = _options$center === void 0 ? _this.props.center || options.pulsate : _options$center,
_options$fakeElement = options.fakeElement,
fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
if (event.type === 'mousedown' && _this.ignoringMouseDown) {
_this.ignoringMouseDown = false;
return;
}
if (event.type === 'touchstart') {
_this.ignoringMouseDown = true;
}
var element = fakeElement ? null : _this.container.current;
var rect = element ? element.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0
}; // Get the size of the ripple
var rippleX;
var rippleY;
var rippleSize;
if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
rippleX = Math.round(rect.width / 2);
rippleY = Math.round(rect.height / 2);
} else {
var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
rippleX = Math.round(clientX - rect.left);
rippleY = Math.round(clientY - rect.top);
}
if (center) {
rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.
if (rippleSize % 2 === 0) {
rippleSize += 1;
}
} else {
var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
} // Touche devices
if (event.touches) {
// Prepare the ripple effect.
_this.startTimerCommit = function () {
_this.startCommit({
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize,
cb: cb
});
}; // Delay the execution of the ripple effect.
_this.startTimer = setTimeout(function () {
if (_this.startTimerCommit) {
_this.startTimerCommit();
_this.startTimerCommit = null;
}
}, DELAY_RIPPLE); // We have to make a tradeoff with this value.
} else {
_this.startCommit({
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize,
cb: cb
});
}
};
_this.startCommit = function (params) {
var pulsate = params.pulsate,
rippleX = params.rippleX,
rippleY = params.rippleY,
rippleSize = params.rippleSize,
cb = params.cb;
_this.setState(function (state) {
return {
nextKey: state.nextKey + 1,
ripples: [].concat(_toConsumableArray(state.ripples), [React.createElement(Ripple, {
key: state.nextKey,
classes: _this.props.classes,
timeout: {
exit: DURATION,
enter: DURATION
},
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize
})])
};
}, cb);
};
_this.stop = function (event, cb) {
clearTimeout(_this.startTimer);
var ripples = _this.state.ripples; // The touch interaction occurs too quickly.
// We still want to show ripple effect.
if (event.type === 'touchend' && _this.startTimerCommit) {
event.persist();
_this.startTimerCommit();
_this.startTimerCommit = null;
_this.startTimer = setTimeout(function () {
_this.stop(event, cb);
});
return;
}
_this.startTimerCommit = null;
if (ripples && ripples.length) {
_this.setState({
ripples: ripples.slice(1)
}, cb);
}
};
return _this;
}
_createClass(TouchRipple, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
clearTimeout(this.startTimer);
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
center = _this$props.center,
classes = _this$props.classes,
className = _this$props.className,
other = _objectWithoutProperties(_this$props, ["center", "classes", "className"]);
return React.createElement("span", _extends({
className: clsx(classes.root, className),
ref: this.container
}, other), React.createElement(TransitionGroup, {
component: null,
enter: true,
exit: true
}, this.state.ripples));
}
}]);
return TouchRipple;
}(React.PureComponent);
process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
/**
* If `true`, the ripple starts at the center of the component
* rather than at the point of interaction.
*/
center: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : void 0;
TouchRipple.defaultProps = {
center: false
};
export default withStyles(styles, {
flip: false,
name: 'MuiTouchRipple'
})(TouchRipple);