@material-ui/core
Version:
React components that implement Google's Material Design.
332 lines (267 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.setTranslateValue = setTranslateValue;
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _reactEventListener = _interopRequireDefault(require("react-event-listener"));
var _debounce = _interopRequireDefault(require("debounce"));
var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
var _withTheme = _interopRequireDefault(require("../styles/withTheme"));
var _transitions = require("../styles/transitions");
var _utils = require("../transitions/utils");
// @inheritedComponent Transition
// < 1kb payload overhead when lodash/debounce is > 3kb.
var GUTTER = 24; // Translate the node so he can't be seen on the screen.
// Later, we gonna translate back the node to his original location
// with `translate3d(0, 0, 0)`.`
function getTranslateValue(props, node) {
var direction = props.direction;
var rect = node.getBoundingClientRect();
var transform;
if (node.fakeTransform) {
transform = node.fakeTransform;
} else {
var computedStyle = (0, _ownerWindow.default)(node).getComputedStyle(node);
transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
}
var offsetX = 0;
var offsetY = 0;
if (transform && transform !== 'none' && typeof transform === 'string') {
var transformValues = transform.split('(')[1].split(')')[0].split(',');
offsetX = parseInt(transformValues[4], 10);
offsetY = parseInt(transformValues[5], 10);
}
if (direction === 'left') {
return "translateX(100vw) translateX(-".concat(rect.left - offsetX, "px)");
}
if (direction === 'right') {
return "translateX(-".concat(rect.left + rect.width + GUTTER - offsetX, "px)");
}
if (direction === 'up') {
return "translateY(100vh) translateY(-".concat(rect.top - offsetY, "px)");
} // direction === 'down'
return "translateY(-".concat(rect.top + rect.height + GUTTER - offsetY, "px)");
}
function setTranslateValue(props, node) {
var transform = getTranslateValue(props, node);
if (transform) {
node.style.webkitTransform = transform;
node.style.transform = transform;
}
}
/**
* The Slide transition is used by the [Snackbar](/demos/snackbars/) component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
var Slide =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Slide, _React$Component);
function Slide() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Slide);
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)(Slide)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.mounted = false;
_this.handleResize = (0, _debounce.default)(function () {
// Skip configuration where the position is screen size invariant.
if (_this.props.in || _this.props.direction === 'down' || _this.props.direction === 'right') {
return;
}
if (_this.transitionRef) {
setTranslateValue(_this.props, _this.transitionRef);
}
}, 166);
_this.handleEnter = function (node) {
setTranslateValue(_this.props, node);
(0, _utils.reflow)(node);
if (_this.props.onEnter) {
_this.props.onEnter(node);
}
};
_this.handleEntering = function (node) {
var theme = _this.props.theme;
var transitionProps = (0, _utils.getTransitionProps)(_this.props, {
mode: 'enter'
});
node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _extends2.default)({}, transitionProps, {
easing: theme.transitions.easing.easeOut
}));
node.style.transition = theme.transitions.create('transform', (0, _extends2.default)({}, transitionProps, {
easing: theme.transitions.easing.easeOut
}));
node.style.webkitTransform = 'translate(0, 0)';
node.style.transform = 'translate(0, 0)';
if (_this.props.onEntering) {
_this.props.onEntering(node);
}
};
_this.handleExit = function (node) {
var theme = _this.props.theme;
var transitionProps = (0, _utils.getTransitionProps)(_this.props, {
mode: 'exit'
});
node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _extends2.default)({}, transitionProps, {
easing: theme.transitions.easing.sharp
}));
node.style.transition = theme.transitions.create('transform', (0, _extends2.default)({}, transitionProps, {
easing: theme.transitions.easing.sharp
}));
setTranslateValue(_this.props, node);
if (_this.props.onExit) {
_this.props.onExit(node);
}
};
_this.handleExited = function (node) {
// No need for transitions when the component is hidden
node.style.webkitTransition = '';
node.style.transition = '';
if (_this.props.onExited) {
_this.props.onExited(node);
}
};
return _this;
}
(0, _createClass2.default)(Slide, [{
key: "componentDidMount",
// Corresponds to 10 frames at 60 Hz.
value: function componentDidMount() {
this.mounted = true; // state.mounted handle SSR, once the component is mounted, we need
// to properly hide it.
if (!this.props.in) {
// We need to set initial translate values of transition element
// otherwise component will be shown when in=false.
this.updatePosition();
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.direction !== this.props.direction && !this.props.in) {
// We need to update the position of the drawer when the direction change and
// when it's hidden.
this.updatePosition();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.handleResize.clear();
}
}, {
key: "updatePosition",
value: function updatePosition() {
if (this.transitionRef) {
this.transitionRef.style.visibility = 'inherit';
setTranslateValue(this.props, this.transitionRef);
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
onEnter = _this$props.onEnter,
onEntering = _this$props.onEntering,
onExit = _this$props.onExit,
onExited = _this$props.onExited,
styleProp = _this$props.style,
theme = _this$props.theme,
other = (0, _objectWithoutProperties2.default)(_this$props, ["children", "onEnter", "onEntering", "onExit", "onExited", "style", "theme"]);
var style = {}; // We use this state to handle the server-side rendering.
// We don't know the width of the children ahead of time.
// We need to render it.
if (!this.props.in && !this.mounted) {
style.visibility = 'hidden';
}
style = (0, _extends2.default)({}, style, styleProp, _react.default.isValidElement(children) ? children.props.style : {});
return _react.default.createElement(_reactEventListener.default, {
target: "window",
onResize: this.handleResize
}, _react.default.createElement(_Transition.default, (0, _extends2.default)({
onEnter: this.handleEnter,
onEntering: this.handleEntering,
onExit: this.handleExit,
onExited: this.handleExited,
appear: true,
style: style,
ref: function ref(_ref) {
_this2.transitionRef = _reactDom.default.findDOMNode(_ref);
}
}, other), children));
}
}]);
return Slide;
}(_react.default.Component);
Slide.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* A single child content element.
*/
children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
/**
* Direction the child node will enter from.
*/
direction: _propTypes.default.oneOf(['left', 'right', 'up', 'down']),
/**
* If `true`, show the component; triggers the enter or exit animation.
*/
in: _propTypes.default.bool,
/**
* @ignore
*/
onEnter: _propTypes.default.func,
/**
* @ignore
*/
onEntering: _propTypes.default.func,
/**
* @ignore
*/
onExit: _propTypes.default.func,
/**
* @ignore
*/
onExited: _propTypes.default.func,
/**
* @ignore
*/
style: _propTypes.default.object,
/**
* @ignore
*/
theme: _propTypes.default.object.isRequired,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
enter: _propTypes.default.number,
exit: _propTypes.default.number
})])
} : {};
Slide.defaultProps = {
direction: 'down',
timeout: {
enter: _transitions.duration.enteringScreen,
exit: _transitions.duration.leavingScreen
}
};
var _default = (0, _withTheme.default)()(Slide);
exports.default = _default;