@material-ui/core
Version:
React components that implement Google's Material Design.
362 lines (300 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.styles = exports.DELAY_RIPPLE = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _TransitionGroup = _interopRequireDefault(require("react-transition-group/TransitionGroup"));
var _classnames = _interopRequireDefault(require("classnames"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _Ripple = _interopRequireDefault(require("./Ripple"));
var DURATION = 550;
var DELAY_RIPPLE = 80;
exports.DELAY_RIPPLE = DELAY_RIPPLE;
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: {
width: 50,
height: 50,
left: 0,
top: 0,
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)
},
/* 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)
},
/* 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")
},
'@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)'
}
}
};
};
exports.styles = styles;
var TouchRipple =
/*#__PURE__*/
function (_React$PureComponent) {
(0, _inherits2.default)(TouchRipple, _React$PureComponent);
function TouchRipple() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, TouchRipple);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(TouchRipple)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
// eslint-disable-next-line react/no-unused-state
nextKey: 0,
ripples: []
};
_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 : _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
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
});
}; // Deplay 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: (0, _toConsumableArray2.default)(state.ripples).concat([_react.default.createElement(_Ripple.default, {
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);
}, 0);
return;
}
_this.startTimerCommit = null;
if (ripples && ripples.length) {
_this.setState({
ripples: ripples.slice(1)
}, cb);
}
};
return _this;
}
(0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_this$props, ["center", "classes", "className"]);
return _react.default.createElement(_TransitionGroup.default, (0, _extends2.default)({
component: "span",
enter: true,
exit: true,
className: (0, _classnames.default)(classes.root, className)
}, other), this.state.ripples);
}
}]);
return TouchRipple;
}(_react.default.PureComponent);
TouchRipple.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* If `true`, the ripple starts at the center of the component
* rather than at the point of interaction.
*/
center: _propTypes.default.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes.default.string
} : {};
TouchRipple.defaultProps = {
center: false
};
var _default = (0, _withStyles.default)(styles, {
flip: false,
name: 'MuiTouchRipple'
})(TouchRipple);
exports.default = _default;